@import url("/figtree.css");
@import url("/bootstrap-icons.css");
/* =============================================================================
   Glass Morph Design System — ITCSS Import Manifest
   Layers ordered by specificity (inverted triangle):
   Settings → Generic → Objects → Components → Surfaces → Utilities → Overrides
   ============================================================================= */

/* ── 1. Settings ─────────────────────────────────────────────────────────────── */
/* glass_morph/variables.css */
/* =============================================================================
   CSS Custom Properties — Glass Morph Design System
   This file is exempt from color-no-hex and function-disallowed-list rules
   ============================================================================= */

:root {
  /* ── Tier 1: Primitives ────────────────────────────────────────────────── */
  /* Neutral scale */
  --gm-gray-900: #111827;
  --gm-gray-800: #1f2937;
  --gm-gray-700: #374151;
  --gm-gray-600: #4b5563;
  --gm-gray-500: #6b7280;
  --gm-slate-900: #0f172a;
  --gm-slate-800: #1e293b;
  --gm-slate-700: #334155;
  --gm-slate-600: #475569;
  --gm-slate-200: #e2e8f0;
  --gm-slate-500: #64748b;
  --gm-slate-50: #f8fafc;
  --gm-gray-400: #9ca3af;
  --gm-gray-300: #d1d5db;
  --gm-gray-200: #e5e7eb;
  --gm-gray-100: #f3f4f6;
  --gm-slate-100: #f1f5f9;
  --gm-gray-50: #f9fafb;
  --gm-white: #fff;

  /* Brand blue */
  --gm-blue-800: #1e40af;
  --gm-blue-600: #2563eb;
  --gm-blue-500: #3b82f6;
  --gm-blue-200: #bfdbfe;
  --gm-blue-100: #dbeafe;
  --gm-blue-50: #eff6ff;
  --gm-blue-primary: #2563eb;

  /* Bootstrap primary */
  /* Bootstrap's own primary at low opacity. --bs-primary-rgb is a comma
     list, which only the legacy rgba() form takes. */
  --gm-bs-primary-overlay-5: rgba(var(--bs-primary-rgb), 0.05);
  --gm-bs-primary-overlay-6: rgba(var(--bs-primary-rgb), 0.06);
  --gm-bs-primary-overlay-10: rgba(var(--bs-primary-rgb), 0.1);
  --gm-sky-700: #1e40af;

  /* Accent teal (Glass Morph signature) */
  --gm-teal-950: #0a1f2a;

  /* below the page ground: a tooltip floating over it still reads as its own surface */
  --gm-teal-900: #0f2936;

  /* The floating-panel ground: darker and bluer than the page behind it, which
     is what separates a dropdown from the surface it sits over. Four panels
     (help menu, dropdown button, feedback button, product membership) were
     already naming `--gm-teal-850-95` and falling back to a raw literal because
     it had never been defined. */
  --gm-teal-850: #0a1223;
  --gm-teal-850-95: rgb(10 18 35 / 95%);
  --gm-teal-800: #0f2936;
  --gm-teal-800-14: rgb(15 41 54 / 14%);

  /* the split dialog's quieter left pane */
  --gm-teal-700: #1a2e3a;
  --gm-teal-600: #29556b;
  --gm-teal-500: #009acc;
  --gm-teal-400: #3d8fa8;
  --gm-teal-300: #4a8fa3;
  --gm-teal-200: #346f82;
  --gm-teal-100: #396f82;
  --gm-teal-20: rgb(52 111 130 / 15.5%);

  /* Status / semantic colors */
  --gm-green-800: #047857;

  /* deep green — the fill white body text can sit on. The
                              .button-primary gradient (green-600 -> green-500) carries
                              white at 3.3:1 and 2.5:1, which passes for a 15px/700
                              label and nothing smaller. Filled the 800 gap. */
  --gm-green-700: #16a34a;
  --gm-green-600: #03a266;
  --gm-green-500: #10b981;
  --gm-green-400: #11aa64;
  --gm-green-300: #11aa64;
  --gm-green-tw-300: #86efac;

  /* light green — legible on dark teal surfaces */
  --gm-red-tw-300: #fca5a5;

  /* light red — the solid partner of --gm-red-300-overlay-*, which already carry this value; --gm-red-300 itself is #fee2e2 */
  --gm-blue-tw-300: #7cb4fb;

  /* light blue — the nurture stage. Completes the tw-300 set. */
  --gm-teal-tw-300: #7cc9e6;

  /* light teal — the accent's own legible-on-dark shade. --gm-teal-500 (#009acc) is the accent itself and reads as a fill, not as text: on --gm-teal-800 it lands under 3:1. Completes the tw-300 set. */
  /* The mint the signed-out screens accent with — links, the dialog's border
     shine, the kicker above the intro video. organisms/auth.css has been
     spelling it as a literal in five places since it was written; this names
     it so new rules there have something to reference. */
  --gm-auth-accent: #2bcd90;
  --gm-auth-accent-60: rgb(43 205 144 / 60%);
  --gm-green-100: #d1fae5;
  --gm-green-50: #dcfce7;
  --gm-yellow-500: #f59e0b;
  --gm-amber-300: #fcd34d;

  /* light amber — small marks on dark glass, where -500 reads red */
  --gm-orange-400: #f38b45;

  /* warm band — relevance/readiness sliders */
  --gm-amber-50: #fef3c7;

  /* Contact coverage — the DMU tab design's own palette. These are not
     variations on the existing ramps: the mint the design marks a reached
     member with is lighter than --gm-green-500, and the three blue-greys are a
     text scale for the dark card that --gm-glass-white-* cannot express, being
     neutral where these are cool. Named by what they are so the card is not the
     only thing allowed to use them. */
  --gm-ice-50: #f3f6f7;
  --gm-teal-650: #23414e;
  --gm-ice-300: #e2eef2;
  --gm-sheet-tint: #f0f7f9;

  /* a tinted row on a white sheet */
  /* LevelFilter (atoms/level_filter.css) */
  --gm-level-text-dark: #dbe9ee;

  /* option text on the dark (inset) tone */
  --gm-level-on-dark: #10303d;

  /* selected option's text on glass and dark */
  --gm-level-count: #1597c9;

  /* count badge on glass and dark */
  --gm-level-chosen: #e3f0f4;

  /* the chosen item in the menu, and its count badge */
  /* Filter controls on a dark section header: the LevelFilter glass trigger,
     .content-section-filter selects and the activity type trigger read the
     same values, so a row of them looks like one family. Every label is
     white; the name of what is filtered ("Relevantie", "Type") is told apart
     from the chosen value by weight alone, 500 against 600. */
  --gm-filter-control-bg: var(--gm-glass-white-14);
  --gm-filter-control-bg-hover: var(--gm-glass-white-20);
  --gm-filter-control-border: var(--gm-glass-white-20);
  --gm-filter-control-border-hover: var(--gm-glass-white-30);
  --gm-filter-control-value: var(--gm-white);
  --gm-filter-control-name: var(--gm-white);
  --gm-filter-control-icon: var(--gm-glass-white-80);
  --gm-filter-control-count: var(--gm-level-count);
  --gm-filter-control-height: 34px;
  --gm-filter-control-font: 13px;
  --gm-filter-control-radius: 8px;
  --gm-green-pill: #0f9f6a;
  --gm-glass-white-14: rgb(255 255 255 / 14%);
  --gm-teal-900-overlay-45: rgb(15 41 54 / 45%);
  --gm-teal-900-overlay-30: rgb(15 41 54 / 30%);

  /* a control well or icon tile on a teal card */
  --gm-linkedin-blue: #0a66c2;
  --gm-mint-400: #34d399;
  --gm-mint-400-overlay-16: rgb(52 211 153 / 16%);
  --gm-mint-400-overlay-18: rgb(52 211 153 / 18%);
  --gm-mint-400-overlay-35: rgb(52 211 153 / 35%);
  --gm-mint-950: #062a1e;
  --gm-amber-200: #ffdb70;
  --gm-amber-400: #f5c542;
  --gm-amber-400-overlay-12: rgb(245 197 66 / 12%);
  --gm-amber-400-overlay-22: rgb(245 197 66 / 22%);
  --gm-amber-body: #e8dcb6;
  --gm-amber-950: #2a1a00;
  --gm-ice-100: #d7e8ee;
  --gm-ice-200: #c3dce4;
  --gm-ice-400: #a9c6d0;
  --gm-ice-500: #8fb3c0;
  --gm-teal-750: #1d4250;
  --gm-amber-600: #d97706;
  --gm-amber-500: #f59e0b;
  --gm-amber-800: #92400e;
  --gm-amber-900: #78350f;
  --gm-red-700: #dc2626;
  --gm-red-600: #dc2626;
  --gm-red-500: #ef4444;
  --gm-red-400: #f87171;
  --gm-red-300: #fee2e2;
  --gm-red-200: #fee2e2;
  --gm-red-100: #fee2e2;
  --gm-red-50: #fee2e2;
  --gm-green-900: #166534;
  --gm-indigo-500: #7c3aed;
  --gm-indigo-400: #8b5cf6;
  --gm-purple-500: #8b5cf6;

  /* Glass effect alphas */
  --gm-glass-white-3: rgb(255 255 255 / 3%);
  --gm-glass-white-5: rgb(255 255 255 / 5%);
  --gm-glass-white-6: rgb(255 255 255 / 6%);
  --gm-glass-white-8: rgb(255 255 255 / 8%);
  --gm-glass-white-9: rgb(255 255 255 / 9%);
  --gm-glass-white-10: rgb(255 255 255 / 10%);
  --gm-glass-white-12: rgb(255 255 255 / 12%);
  --gm-glass-white-15: rgb(255 255 255 / 15%);
  --gm-glass-white-18: rgb(255 255 255 / 18%);
  --gm-glass-white-20: rgb(255 255 255 / 20%);
  --gm-glass-white-30: rgb(255 255 255 / 30%);
  --gm-glass-white-50: rgb(255 255 255 / 50%);
  --gm-glass-white-60: rgb(255 255 255 / 60%);
  --gm-glass-white-70: rgb(255 255 255 / 70%);
  --gm-glass-white-80: rgb(255 255 255 / 80%);
  --gm-glass-white-85: rgb(255 255 255 / 85%);
  --gm-glass-white-95: rgb(255 255 255 / 95%);
  --gm-glass-black-2: rgb(0 0 0 / 2%);
  --gm-glass-black-3: rgb(0 0 0 / 3%);
  --gm-glass-black-4: rgb(0 0 0 / 4%);
  --gm-glass-black-5: rgb(0 0 0 / 5%);
  --gm-glass-black-6: rgb(0 0 0 / 6%);
  --gm-glass-black-8: rgb(0 0 0 / 8%);
  --gm-glass-black-10: rgb(0 0 0 / 10%);
  --gm-glass-black-12: rgb(0 0 0 / 12%);
  --gm-glass-black-15: rgb(0 0 0 / 15%);
  --gm-glass-black-20: rgb(0 0 0 / 20%);
  --gm-glass-black-30: rgb(0 0 0 / 30%);

  /* The drop shadow a floating panel casts. `dropdown_button.css` has been
     asking for this with no fallback, so its outer shadow layer has been
     resolving to nothing. */
  --gm-glass-black-40: rgb(0 0 0 / 40%);

  /* A scrim strong enough to carry small text over an unpredictable picture.
     The tutorial videos are screen recordings of a LIGHT interface, so 30% is a
     mid grey there and an 11px label on it fails contrast. */
  --gm-glass-black-50: rgb(0 0 0 / 50%);

  /* Semantic overlay tokens (for backgrounds with opacity) */
  --gm-teal-overlay-8: rgb(0 154 204 / 8%);
  --gm-teal-overlay-15: rgb(0 154 204 / 15%);
  --gm-teal-overlay-20: rgb(0 154 204 / 20%);
  --gm-teal-200-overlay-30: rgb(52 111 129 / 30%);
  --gm-teal-200-overlay-6: rgb(52 111 129 / 6%);
  --gm-teal-200-overlay-12: rgb(52 111 129 / 12%);
  --gm-blue-overlay-4: rgb(37 99 235 / 4%);
  --gm-blue-overlay-5: rgb(37 99 235 / 5%);
  --gm-blue-overlay-8: rgb(37 99 235 / 8%);
  --gm-blue-overlay-10: rgb(37 99 235 / 10%);
  --gm-blue-overlay-15: rgb(37 99 235 / 15%);
  --gm-blue-overlay-30: rgb(37 99 235 / 30%);
  --gm-blue-400-overlay-15: rgb(59 130 246 / 15%);
  --gm-red-overlay-8: rgb(239 68 68 / 8%);
  --gm-red-overlay-10: rgb(220 53 69 / 10%);
  --gm-red-overlay-15: rgb(239 68 68 / 15%);
  --gm-red-overlay-20: rgb(239 68 68 / 20%);
  --gm-green-300-overlay-15: rgb(17 170 100 / 15%);
  --gm-green-500-overlay-8: rgb(16 185 129 / 8%);
  --gm-green-500-overlay-20: rgb(16 185 129 / 20%);
  --gm-green-700-overlay-10: rgb(22 163 74 / 10%);
  --gm-yellow-overlay-8: rgb(245 158 11 / 8%);
  --gm-amber-overlay-12: rgb(245 158 11 / 12%);
  --gm-yellow-overlay-15: rgb(255 193 7 / 15%);
  --gm-gray-300-overlay-20: rgb(209 213 219 / 20%);
  --gm-gray-400-overlay-8: rgb(156 163 175 / 8%);
  --gm-gray-300-overlay-50: rgb(209 213 219 / 50%);
  --gm-gray-500-overlay-10: rgb(107 114 128 / 10%);
  --gm-blue-500-overlay-10: rgb(59 130 246 / 10%);
  --gm-green-700-overlay-12: rgb(22 163 74 / 12%);
  --gm-sky-700-overlay-12: rgb(30 64 175 / 12%);
  --gm-red-600-overlay-12: rgb(220 38 38 / 12%);
  --gm-gray-500-overlay-12: rgb(107 114 128 / 12%);
  --gm-red-500-overlay-6: rgb(239 68 68 / 6%);
  --gm-red-500-overlay-12: rgb(239 68 68 / 12%);
  --gm-red-500-overlay-30: rgb(239 68 68 / 30%);
  --gm-green-300-overlay-12: rgb(17 170 100 / 12%);
  --gm-green-300-overlay-30: rgb(17 170 100 / 30%);
  --gm-green-500-overlay-12: rgb(16 185 129 / 12%);
  --gm-blue-500-overlay-12: rgb(59 130 246 / 12%);
  --gm-blue-primary-overlay-12: rgb(37 99 235 / 12%);
  --gm-indigo-500-overlay-12: rgb(124 58 237 / 12%);
  --gm-purple-500-overlay-12: rgb(139 92 246 / 12%);

  /* tint behind .text-purple */
  --gm-green-tw-300-overlay-15: rgb(134 239 172 / 15%);
  --gm-green-tw-300-overlay-35: rgb(134 239 172 / 35%);
  --gm-yellow-tw-300-overlay-15: rgb(253 224 71 / 15%);
  --gm-yellow-tw-300-overlay-35: rgb(253 224 71 / 35%);
  --gm-red-300-overlay-15: rgb(252 165 165 / 15%);
  --gm-red-300-overlay-35: rgb(252 165 165 / 35%);
  --gm-red-500-overlay-15: rgb(239 68 68 / 15%);

  /* Additional brand / status colors */
  --gm-yellow-400: #f59e0b;

  /* Bootstrap warning */
  --gm-yellow-800: #92400e;

  /* Bootstrap warning dark text */
  --gm-linkedin: #2563eb;
  --gm-violet-800: #6d28d9;
  --gm-violet-700: #6d28d9;
  --gm-violet-500: #8b5cf6;
  --gm-indigo-50: #eff6ff;

  /* ── Tier 2: Semantic Tokens ─────────────────────────────────────────── */
  /* Page backgrounds */
  /* #111827 */
  --gm-page-bg-alt: var(--gm-teal-800);

  /* #0f2936 — body bg */
  --gm-content-pane-bg: var(--gm-teal-200);

  /* #346f82 — page-inner */
  /* Navigation */
  /* #0f2936 */
  /* #396f82 */
  --gm-nav-text: var(--gm-gray-300);

  /* #d1d5db */
  --gm-nav-text-active: var(--gm-white);

  /* var(--gm-white) */
  --gm-nav-item-hover-bg: var(--gm-glass-white-5);

  /* rgba(255,255,255,0.05) */
  --gm-nav-item-active-bg: rgb(52 111 129 / 56%);

  /* teal-200 at 56% */
  --gm-nav-item-active-border: var(--gm-teal-200);

  /* #346f82 */
  /* Cost series — one colour per source of spend. The trend chart, the
     per-account distribution bars and the breakdown rows all read these, so a
     colour means the same thing everywhere on a costs page. */
  --gm-series-llm: var(--gm-teal-200);
  --gm-series-search: var(--gm-teal-500);
  --gm-series-enrichment: var(--gm-violet-500);
  --gm-series-other: var(--gm-amber-500);

  /* Avatar grounds — behind a person's initials when there is no photo. These
     were six tints picked from the name: stable per person, and deliberately
     meaningless, which is a colour that looks like it encodes something and does
     not. They carry DMU rank instead, so the one thing worth knowing at a glance
     about a name in a list is the thing the colour says.

     Teal for rank 1 matches the accent the R1 tag already uses; amber steps down
     to 2; everything else is neutral. The fourth is for an avatar with no rank
     to show — the account on the working-context chip.

     Measured against white initials, not assumed: 7.51, 7.05, 7.56 and 9.14 to
     one. All four clear WCAG AA for normal text. */
  --gm-avatar-rank-1: #1d5b73;
  --gm-avatar-rank-2: #71532f;
  --gm-avatar-rank-3: #4b5563;
  --gm-avatar-neutral: #3a4a57;

  /* Primary action (overridable by brand token) */
  --gm-accent: var(--gm-brand-primary, var(--gm-blue-500));
  --gm-accent-light: var(--gm-brand-primary-light, var(--gm-blue-500));

  /* Text on dark backgrounds (page bg, glass-card, page-inner) */
  --gm-text-on-dark-primary: var(--gm-white);
  --gm-text-on-dark-secondary: var(--gm-gray-300);
  --gm-text-on-dark-muted: var(--gm-gray-400);
  --gm-text-on-dark-link: var(--gm-accent-light);

  /* Text on light backgrounds (tile-light, cards, modals) */
  --gm-text-on-light-primary: var(--gm-gray-900);

  /* #111827 */
  --gm-text-on-light-secondary: var(--gm-gray-700);

  /* #374151 */
  --gm-text-on-light-muted: var(--gm-gray-500);

  /* #6b7280 */
  --gm-text-on-light-link: var(--gm-blue-600);

  /* #2563eb */
  /* Borders */
  --gm-border-on-dark: var(--gm-glass-white-12);

  /* Surfaces */
  --gm-surface-glass-dark: var(--gm-glass-white-8);
  --gm-surface-glass-light: var(--gm-glass-white-95);

  /* Tabs */
  --gm-tab-inactive-bg: rgb(52 111 129 / 40%);
  --gm-tab-inactive-hover-bg: rgb(52 111 129 / 60%);
  --gm-tab-inactive-disabled-bg: var(--gm-tab-inactive-bg);

  /* Shadows */
  --gm-shadow-card: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 6%);
  --gm-shadow-sm: 0 1px 2px rgb(0 0 0 / 10%);
  --gm-shadow-md: 0 4px 16px rgb(0 0 0 / 10%);

  /* teal-200 at ~79% */
  /* What a panel floating over the page casts — a dropdown, a popover, the
     template library. Deeper and softer than --gm-shadow-md, which is for a
     card sitting in the flow. */
  --gm-shadow-popover: 0 18px 44px rgb(15 23 42 / 18%);

  /* A drawer sliding in from the right over a form: the shadow falls to the
     left, onto what it covers. */
  --gm-shadow-drawer: -16px 0 32px rgb(15 41 54 / 12%);

  /* Status */
  --gm-status-success: var(--gm-green-500);
  --gm-flash-success: var(--gm-auth-accent); /* a "done" flash, and a set action's run notice throughout */
  --gm-status-success-bg: rgb(16 185 129 / 10%);
  --gm-status-warning: var(--gm-yellow-500);
  --gm-status-warning-bg: rgb(245 158 11 / 10%);
  --gm-status-danger: var(--gm-red-500);
  --gm-status-danger-bg: rgb(239 68 68 / 10%);
  --gm-status-info: var(--gm-indigo-500);

  /* Score colors (domain-specific, fixed across themes — from reference frontend) */
  --gm-score-excellent: #11aa64;
  --gm-score-good: #009acc;
  --gm-score-fair: #5a7a84;
  --gm-score-poor: #bd8a4e;
  --gm-score-low: #b04646;

  /* News importance (fixed, cross-theme) — deliberately clear of the buying
     readiness stage colours, so an event's weight never reads as a company's
     heat. */
  --gm-importance-low: #6f8c96;
  --gm-importance-normal: #4fb3d9;
  --gm-importance-high: #a78bfa;
  --gm-importance-critical: #e0559b;

  /* Badge muted fill — only new token needed; all other badge colors reuse existing primitives */
  --gm-badge-muted: rgb(107 114 128 / 55%);

  /* --gm-gray-500 at 55% — archived/disabled */
  /* How wide the contact column of a DMU row may grow before its content starts
     being clipped. 420px holds the widest line measured — e-mail, phone and
     LinkedIn at 402px — on one line, which is the point; a row of e-mail plus
     LinkedIn asks for 244-259px and takes only that. See stakeholder_row.css. */
  --gm-stakeholder-contacts-max: 420px;

  /* List row spacing (data-row, monitor-row, and future list rows) */
  --gm-row-padding-y: 20px;
  --gm-row-padding-x: 16px;
  --gm-row-gap: 12px;

  /* Blur effects */
  --gm-blur-md: blur(20px);

  /* Border radius */
  --gm-radius-xs: 4px; /* an 18px control: a checkbox */
  --gm-radius-sm: 8px;
  --gm-radius-md: 12px;
  --gm-radius-lg: 16px;

  /* AI panel: the same teal tint as a form field (.select/.textarea), at half strength,
     so the generator reads as a tool surface beside the fields it fills */
  --gm-teal-field-tint-4: rgb(51 97 111 / 4%);

  /* Sizing (component-specific heights) */
  --gm-chart-height-compact: 120px;

  /* Border & outline widths */
  --gm-outline-width: 2px;
  --gm-modal-width-narrow: 640px;

  /* Transitions */
  --gm-transition-normal: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;

  /* Focus ring */
  /* ── Tier 3: Surface Context Tokens (default = dark page background) ─── */
  --gm-ctx-text-primary: var(--gm-text-on-dark-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-dark-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-dark-muted);
  --gm-ctx-text-link: var(--gm-text-on-dark-link);
  --gm-ctx-separator: var(--gm-glass-white-12);

  /* ── Stat row context tokens (default = dark page background) ─────────── */
  --gm-ctx-stat-value: var(--gm-white);
  --gm-ctx-stat-value-highlight: var(--gm-green-tw-300);
  --gm-ctx-stat-value-alert: var(--gm-red-400);

  /* bright red — legible on dark teal surfaces */
  --gm-ctx-stat-label: var(--gm-white);
  --gm-ctx-stat-label-opacity: 0.7;
  --gm-ctx-stat-separator: var(--gm-glass-white-10);
  --gm-ctx-stat-bg: var(--gm-glass-black-10);

  /* ── Tier 4: Brand Tokens (overridden at runtime via inline style) ───── */
  --gm-brand-primary: var(--gm-blue-500);
  --gm-brand-primary-light: var(--gm-blue-500);

  /* ── Mobile pages (/m): iOS layout, the desktop's colours ─────────────
     Every surface here now aliases the token the desktop uses, so the phone
     cannot drift from the app again: the page is the --gm-teal-800 of
     generic/reset.css, and a list group is the .glass-card recipe of
     organisms/glass_card.css — --gm-surface-glass-dark filled, edged with
     --gm-border-on-dark. What is left below is layout (iOS radii, 44px
     targets) and the four things the desktop has no equivalent for.

     The phone had been running on --gm-teal-850 with a parallel palette of
     its own: 3.2x darker than the product (luminance 0.0062 against 0.0195),
     and taking the glass fill without the border that separates it, so a list
     read as one unbroken slab at 1.22:1. The border is what draws the card:
     1.45:1 against the page where the fill alone manages 1.27:1. That edge is
     soft because the desktop's is — .glass-card carries no shadow — so the
     phone reads exactly as quiet as the app, and no quieter. */
  --gm-m-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Figtree, sans-serif;
  --gm-m-bg: var(--gm-teal-800);
  --gm-m-cell: var(--gm-surface-glass-dark);
  --gm-m-separator: var(--gm-border-on-dark);
  --gm-m-track: var(--gm-glass-white-12);

  /* The one place the phone is deliberately not the desktop: iOS system fills,
     for the segmented control and a pressed bar button. Apple's greys, because
     these read as platform furniture rather than as our surfaces. */
  --gm-m-fill: rgb(118 118 128 / 24%);
  --gm-m-fill-active: rgb(99 99 102);
  --gm-m-text: var(--gm-text-on-dark-primary);
  --gm-m-text-secondary: var(--gm-text-on-dark-secondary);
  --gm-m-text-tertiary: var(--gm-text-on-dark-muted);
  --gm-m-tint: var(--gm-green-500);
  --gm-m-tint-bg: var(--gm-green-500-overlay-12);
  --gm-m-button: var(--gm-green-800);
  --gm-m-button-edge: var(--gm-green-500);

  /* The bottom sheet a filter chip opens: one step lighter than the page so it
     reads as lying on top of it, over a scrim that dims what it covers. */
  --gm-m-sheet: var(--gm-teal-700);
  --gm-m-scrim: rgb(3 7 18 / 60%);

  /* The outline of a control nobody has ticked yet. Deliberately louder than
     --gm-m-track, which draws a bar behind a value and may recede: an empty
     checkbox is the only thing saying the row can be ticked at all, and at the
     track's 12% it measures 1.5:1 against the sheet — under the 3:1 WCAG asks
     of a control's boundary. This reads 4.7:1. */
  --gm-m-control-border: var(--gm-glass-white-50);
  --gm-m-stage-hot: var(--gm-orange-400);
  --gm-m-stage-warm: var(--gm-amber-300);
  --gm-m-stage-nurture: var(--gm-blue-tw-300);
  --gm-m-stage-cold: var(--gm-gray-400);
  --gm-m-danger: var(--gm-red-400);
  --gm-m-danger-bg: var(--gm-red-300-overlay-15);
  --gm-m-warning: var(--gm-amber-300);
  --gm-m-warning-bg: var(--gm-amber-overlay-12);

  /* CSS Custom Properties for Tasks */

  /* ── Country flag colours for the avatar flags ── */
  --gm-flag-be-red: #ef3340;
  --gm-flag-be-yellow: #ffd90c;
  --gm-flag-ch-red: #da291c;
  --gm-flag-de-gold: #ffce00;
  --gm-flag-de-red: #d00;
  --gm-flag-es-red: #aa151b;
  --gm-flag-es-yellow: #f1bf00;
  --gm-flag-fr-blue: #0055a4;
  --gm-flag-fr-red: #ef4135;
  --gm-flag-gb-blue: #012169;
  --gm-flag-gb-red: #c8102e;
  --gm-flag-it-green: #009246;
  --gm-flag-it-red: #ce2b37;
  --gm-flag-lu-blue: #00a3e0;
  --gm-flag-nl-blue: #21468b;
  --gm-flag-nl-red: #ae1c28;
  --gm-flag-pl-red: #dc143c;
  --gm-flag-us-blue: #3c3b6e;
  --gm-flag-us-red: #b22234;

  /* ── More white and black glass, named by opacity percent ── */
  --gm-glass-black-16: rgb(0 0 0 / 16%);
  --gm-glass-black-18: rgb(0 0 0 / 18%);
  --gm-glass-black-25: rgb(0 0 0 / 25%);
  --gm-glass-black-35: rgb(0 0 0 / 35%);
  --gm-glass-black-45: rgb(0 0 0 / 45%);
  --gm-glass-black-55: rgb(0 0 0 / 55%);
  --gm-glass-white-24: rgb(255 255 255 / 24%);
  --gm-glass-white-25: rgb(255 255 255 / 25%);
  --gm-glass-white-28: rgb(255 255 255 / 28%);
  --gm-glass-white-35: rgb(255 255 255 / 35%);
  --gm-glass-white-7: rgb(255 255 255 / 7%);
  --gm-glass-white-90: rgb(255 255 255 / 90%);
  --gm-glass-white-92: rgb(255 255 255 / 92%);

  /* ── Palette shades a component used as a literal before it had a token ── */
  --gm-amber-tw-400: #fbbf24;
  --gm-black: #000;
  --gm-blue-0b6ffd: #0b6ffd;
  --gm-blue-0c1e27: #0c1e27;
  --gm-blue-4a5560: #4a5560;
  --gm-blue-6366f1: #6366f1;
  --gm-bs-gray-200: #e9ecef;
  --gm-bs-gray-300: #dee2e6;
  --gm-bs-primary: #0d6efd;
  --gm-cyan-600: #0891b2;
  --gm-gray-1a1a1a: #1a1a1a;
  --gm-gray-f0f0f0: #f0f0f0;
  --gm-green-3fe0a4: #3fe0a4;
  --gm-green-tw-400: #4ade80;
  --gm-green-tw-500: #22c55e;
  --gm-green-tw-700: #15803d;
  --gm-indigo-600: #4f46e5;
  --gm-orange-500: #f97316;
  --gm-orange-600: #ea580c;
  --gm-pink-600: #db2777;
  --gm-red-991b1b: #991b1b;
  --gm-red-b04343: #b04343;
  --gm-red-ff6b6b: #ff6b6b;
  --gm-slate-300: #cbd5e1;
  --gm-slate-400: #94a3b8;
  --gm-teal-2b5966: #2b5966;
  --gm-teal-2f606e: #2f606e;
  --gm-teal-9bcbd6: #9bcbd6;
  --gm-teal-bcdee6: #bcdee6;
  --gm-teal-dbe7eb: #dbe7eb;
  --gm-teal-e5ecef: #e5ecef;

  /* Token-usage tab: the quiet table head and row hover, the segmented track,
     the active-filter tint and its text, and the distribution ramp's ends. */
  --gm-teal-f6f9fa: #f6f9fa;
  --gm-teal-d5e1e6: #d5e1e6;
  --gm-teal-e6f4fa: #e6f4fa;
  --gm-teal-0a6f93: #0a6f93;
  --gm-teal-0f6f93: #0f6f93;
  --gm-teal-c9d8de: #c9d8de;
  --gm-teal-500-overlay-18: rgb(0 154 204 / 18%);
  --gm-teal-10303d-overlay-12: rgb(16 48 61 / 12%);
  --gm-teal-10303d-overlay-18: rgb(16 48 61 / 18%);
  --gm-teal-tw-600: #0d9488;

  /* ── Transparencies of the palette, named <colour>-overlay-<percent> ── */
  --gm-amber-600-overlay-30: rgb(217 119 6 / 30%);
  --gm-amber-600-overlay-45: rgb(217 119 6 / 45%);
  --gm-amber-300-overlay-50: rgb(252 211 77 / 50%);
  --gm-amber-600-overlay-8: rgb(217 119 6 / 8%);
  --gm-amber-overlay-30: rgb(245 158 11 / 30%);
  --gm-amber-overlay-76-1: rgb(245 158 11 / 76.1%);
  --gm-amber-tw-400-overlay-12: rgb(251 191 36 / 12%);
  --gm-amber-tw-400-overlay-15: rgb(251 191 36 / 15%);
  --gm-amber-tw-400-overlay-18: rgb(251 191 36 / 18%);
  --gm-amber-tw-400-overlay-25: rgb(251 191 36 / 25%);
  --gm-amber-tw-400-overlay-30: rgb(251 191 36 / 30%);
  --gm-amber-tw-400-overlay-35: rgb(251 191 36 / 35%);
  --gm-amber-tw-400-overlay-7: rgb(251 191 36 / 7%);
  --gm-auth-accent-overlay-12: rgb(43 205 144 / 12%);
  --gm-auth-accent-overlay-15: rgb(43 205 144 / 15%);
  --gm-auth-accent-overlay-20: rgb(43 205 144 / 20%);
  --gm-auth-accent-overlay-30: rgb(43 205 144 / 30%);
  --gm-black-overlay-12: rgb(0 0 0 / 12%);
  --gm-blue-0b6ffd-overlay-25: rgb(11 111 253 / 25%);
  --gm-blue-0b6ffd-overlay-40: rgb(11 111 253 / 40%);
  --gm-blue-500-overlay-20: rgb(59 130 246 / 20%);
  --gm-blue-500-overlay-30: rgb(59 130 246 / 30%);
  --gm-blue-500-overlay-60: rgb(59 130 246 / 60%);
  --gm-blue-500-overlay-8: rgb(59 130 246 / 8%);
  --gm-blue-788ca0-overlay-45: rgb(120 140 160 / 45%);
  --gm-blue-788ca0-overlay-70: rgb(120 140 160 / 70%);
  --gm-emerald-600-overlay-20: rgb(5 150 105 / 20%);
  --gm-gray-b9b9b9-overlay-85: rgb(185 185 185 / 85%);
  --gm-gray-d7d7d7-overlay-85: rgb(215 215 215 / 85%);
  --gm-gray-ebedee-overlay-86: rgb(235 237 238 / 86%);
  --gm-green-300-overlay-20: rgb(17 170 100 / 20%);
  --gm-green-500-overlay-15: rgb(16 185 129 / 15%);
  --gm-green-500-overlay-30: rgb(16 185 129 / 30%);
  --gm-green-500-overlay-35: rgb(16 185 129 / 35%);
  --gm-green-500-overlay-50: rgb(16 185 129 / 50%);
  --gm-green-500-overlay-60: rgb(16 185 129 / 60%);
  --gm-green-500-overlay-7: rgb(16 185 129 / 7%);
  --gm-green-600-overlay-30: rgb(3 162 102 / 30%);
  --gm-green-600-overlay-40: rgb(3 162 102 / 40%);
  --gm-green-600-overlay-50: rgb(3 162 102 / 50%);
  --gm-green-700-overlay-15: rgb(22 163 74 / 15%);
  --gm-green-700-overlay-25: rgb(22 163 74 / 25%);
  --gm-green-700-overlay-6: rgb(22 163 74 / 6%);
  --gm-green-700-overlay-90: rgb(22 163 74 / 90%);
  --gm-green-tw-400-overlay-12: rgb(74 222 128 / 12%);
  --gm-green-tw-400-overlay-18: rgb(74 222 128 / 18%);
  --gm-green-tw-400-overlay-35: rgb(74 222 128 / 35%);
  --gm-green-tw-400-overlay-7: rgb(74 222 128 / 7%);
  --gm-indigo-500-overlay-18: rgb(99 102 241 / 18%);
  --gm-purple-500-overlay-15: rgb(139 92 246 / 15%);
  --gm-purple-500-overlay-20: rgb(139 92 246 / 20%);
  --gm-purple-500-overlay-35: rgb(139 92 246 / 35%);
  --gm-purple-500-overlay-4: rgb(139 92 246 / 4%);
  --gm-purple-500-overlay-5: rgb(139 92 246 / 5%);
  --gm-purple-500-overlay-8: rgb(139 92 246 / 8%);
  --gm-red-400-overlay-15: rgb(248 113 113 / 15%);
  --gm-red-400-overlay-20: rgb(248 113 113 / 20%);
  --gm-red-400-overlay-25: rgb(248 113 113 / 25%);
  --gm-red-400-overlay-40: rgb(248 113 113 / 40%);
  --gm-red-400-overlay-50: rgb(248 113 113 / 50%);
  --gm-red-400-overlay-7: rgb(248 113 113 / 7%);
  --gm-red-500-overlay-22: rgb(239 68 68 / 22%);
  --gm-red-500-overlay-25: rgb(239 68 68 / 25%);
  --gm-red-500-overlay-4: rgb(239 68 68 / 4%);
  --gm-red-500-overlay-40: rgb(239 68 68 / 40%);
  --gm-red-500-overlay-45: rgb(239 68 68 / 45%);
  --gm-red-500-overlay-90: rgb(239 68 68 / 90%);
  --gm-red-600-overlay-15: rgb(220 38 38 / 15%);
  --gm-red-600-overlay-30: rgb(220 38 38 / 30%);
  --gm-red-600-overlay-40: rgb(220 38 38 / 40%);
  --gm-red-600-overlay-8: rgb(220 38 38 / 8%);
  --gm-red-be4641-overlay-80: rgb(190 70 65 / 80%);
  --gm-red-c14342-overlay-77: rgb(193 67 66 / 77%);
  --gm-red-d25f5a-overlay-80: rgb(210 95 90 / 80%);
  --gm-red-dc3545-overlay-15: rgb(220 53 69 / 15%);
  --gm-red-dc3545-overlay-20: rgb(220 53 69 / 20%);
  --gm-red-overlay-30: rgb(220 53 69 / 30%);
  --gm-slate-100-overlay-80: rgb(241 245 249 / 80%);
  --gm-slate-300-overlay-30: rgb(203 213 225 / 30%);
  --gm-slate-600-overlay-50: rgb(71 85 105 / 50%);
  --gm-slate-900-overlay-12: rgb(15 23 42 / 12%);
  --gm-slate-900-overlay-7: rgb(15 23 42 / 7%);
  --gm-slate-900-overlay-8: rgb(15 23 42 / 8%);
  --gm-teal-1a3d4d-overlay-20: rgb(26 61 77 / 20%);
  --gm-teal-1a3d4d-overlay-30: rgb(26 61 77 / 30%);
  --gm-teal-1a3d4d-overlay-36: rgb(26 61 77 / 36%);
  --gm-teal-1a3d4d-overlay-50: rgb(26 61 77 / 50%);
  --gm-teal-1aafc9-overlay-16: rgb(26 175 201 / 16%);
  --gm-teal-1aafc9-overlay-72: rgb(26 175 201 / 72%);
  --gm-teal-1d4555-overlay-75-3: rgb(29 69 85 / 75.3%);
  --gm-teal-200-overlay-10: rgb(52 111 130 / 10%);
  --gm-teal-200-overlay-15: rgb(52 111 130 / 15%);
  --gm-teal-200-overlay-20: rgb(52 111 130 / 20%);
  --gm-teal-200-overlay-3: rgb(52 111 129 / 3%);
  --gm-teal-200-overlay-4: rgb(52 111 129 / 4%);
  --gm-teal-200-overlay-40: rgb(52 111 130 / 40%);
  --gm-teal-200-overlay-41: rgb(52 111 130 / 41%);
  --gm-teal-200-overlay-50: rgb(52 111 129 / 50%);
  --gm-teal-200-overlay-60: rgb(52 111 129 / 60%);
  --gm-teal-200-overlay-63: rgb(52 111 129 / 63%);
  --gm-teal-200-overlay-70: rgb(52 111 129 / 70%);
  --gm-teal-200-overlay-8: rgb(52 111 129 / 8%);
  --gm-teal-2a4d5d-overlay-50: rgb(42 77 93 / 50%);
  --gm-teal-317280-overlay-60: rgb(49 114 128 / 60%);
  --gm-teal-33616f-overlay-7: rgb(51 97 111 / 7%);
  --gm-teal-346f81-overlay-10: rgb(52 111 129 / 10%);
  --gm-teal-346f81-overlay-15: rgb(52 111 129 / 15%);
  --gm-teal-346f81-overlay-20: rgb(52 111 129 / 20%);
  --gm-teal-346f81-overlay-40: rgb(52 111 129 / 40%);
  --gm-teal-346f82-overlay-30: rgb(52 111 130 / 30%);
  --gm-teal-346f82-overlay-50: rgb(52 111 130 / 50%);
  --gm-teal-346f82-overlay-6: rgb(52 111 130 / 6%);
  --gm-teal-3c768a-overlay-10-2: rgb(60 118 138 / 10.2%);
  --gm-teal-3e7a8c-overlay-14: rgb(62 122 140 / 14%);
  --gm-teal-3e7a8e-overlay-17: rgb(62 122 142 / 17%);
  --gm-teal-400-overlay-10: rgb(61 143 168 / 10%);
  --gm-teal-400-overlay-20: rgb(61 143 168 / 20%);
  --gm-teal-600-overlay-50: rgb(41 85 107 / 50%);
  --gm-teal-82a4b0-overlay-21: rgb(130 164 176 / 21%);
  --gm-teal-850-overlay-94: rgb(10 18 35 / 94%);
  --gm-teal-900-overlay-40: rgb(15 41 54 / 40%);
  --gm-teal-900-overlay-60: rgb(15 41 54 / 60%);
  --gm-teal-900-overlay-80: rgb(15 41 54 / 80%);
  --gm-teal-900-overlay-85: rgb(15 41 54 / 85%);
  --gm-teal-900-overlay-92: rgb(15 41 54 / 92%);
  --gm-teal-900-overlay-95: rgb(15 41 54 / 95%);
  --gm-teal-900-overlay-98: rgb(15 41 54 / 98%);
  --gm-teal-e2eaed-overlay-90-2: rgb(226 234 237 / 90.2%);
  --gm-teal-overlay-10: rgb(0 154 204 / 10%);
  --gm-teal-overlay-30: rgb(0 154 204 / 30%);
  --gm-teal-overlay-35: rgb(0 154 204 / 35%);
  --gm-teal-overlay-70: rgb(0 154 204 / 70%);
  --gm-teal-overlay-80: rgb(0 154 204 / 80%);
  --gm-violet-700-overlay-12: rgb(109 40 217 / 12%);
  --gm-white-overlay-16: rgb(255 255 255 / 16%);
  --gm-white-overlay-90: rgb(255 255 255 / 90%);
}


/* ── 2. Generic (resets, base elements, animations) ──────────────────────────── */
/* glass_morph/generic/reset.css */
/* ############################################################################ */
/* ################################## GLOBAL ################################## */
/* ############################################################################ */

/* ============================================================================ */
/* == Reset & Base ========================================================== */
/* ============================================================================ */
/* The app layout scrolls inside .page-container, and the lock that is supposed
   to keep the document itself still lives on `body` below. It does not get to
   do that on its own: when `html` has `overflow: visible`, the browser hands
   body's `overflow: hidden` to the viewport and leaves body's own used value
   `visible`, so body clips nothing. The root then carries a real scroll range
   with no scrollbar in front of it — measured at 1495px on /left_behind once
   the unjudged list had fetched a couple of pages — and a fast wheel that runs
   past the bottom of .page-container chains into it and drags the whole app off
   screen, with no scrollbar left to bring it back.

   Locking `html` is what makes the body lock mean what it says. Scoped away
   from the two layouts that scroll the document on purpose: body.public-page
   and body.auth-page both set their own `overflow: auto` below and in
   organisms/auth.css. A browser without :has() drops the rule and keeps
   today's behaviour, which is the safe direction to fail in. */
html:has(> body:not(.public-page, .auth-page, .gm-m)) {
  height: 100%;
  overflow: hidden;
}

body {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  background-color: var(--gm-page-bg-alt);
  color: var(--gm-white);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/bulleye-1.png");
  background-repeat: no-repeat;
  background-position: -350px 50px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Prevent body scroll when modal open */
body.overflow-hidden {
  overflow: hidden;
}

/* Body state when modal is open (used by modal-backdrop controller) */
body.modal-open {
  overflow: hidden;
}

/* Public Page Layout */
body.public-page {
  /* Override the global body lock (height: 100vh; overflow: hidden) so the
     public layout scrolls naturally when content is taller than the viewport. */
  height: auto;
  min-height: 100vh;
  overflow: auto;
  display: block;
  position: relative;
  background-color: var(--gm-teal-800);
  color: var(--gm-white);
}

body.public-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/bulleye-1.png");
  background-repeat: no-repeat;
  background-position: center 100px;
  background-size: 1200px auto;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

h4 {
  font-size: 1.3em;
}

/* Readonly field styling - for auto-filled fields */
input[readonly].form-control {
  background-color: var(--gm-glass-white-5) !important;
  color: var(--gm-glass-white-70);
  cursor: not-allowed;
  border-color: var(--gm-glass-white-10);
}

input[readonly].form-control:focus {
  background-color: var(--gm-glass-white-5) !important;
  border-color: var(--gm-glass-white-10);
  box-shadow: none;
}

/* glass_morph/generic/scrollbars.css */
/* Scrollbar Styles */
.page-container::-webkit-scrollbar,
.prospects-list::-webkit-scrollbar,
.detail-view::-webkit-scrollbar {
  width: 8px;
}

.page-container::-webkit-scrollbar-track,
.prospects-list::-webkit-scrollbar-track,
.detail-view::-webkit-scrollbar-track {
  background: var(--gm-teal-1a3d4d-overlay-30);
  border-radius: 4px;
}

.page-container::-webkit-scrollbar-thumb,
.prospects-list::-webkit-scrollbar-thumb,
.detail-view::-webkit-scrollbar-thumb {
  background: var(--gm-green-600-overlay-30);
  border-radius: 4px;
}

.page-container::-webkit-scrollbar-thumb:hover,
.prospects-list::-webkit-scrollbar-thumb:hover,
.detail-view::-webkit-scrollbar-thumb:hover {
  background: var(--gm-green-600-overlay-50);
}

/* glass_morph/generic/animations.css */
/* ============================================================================ */
/* == Keyframe Animations =================================================== */
/* ============================================================================ */
@keyframes twt-slide-active {
  from {
    transform: translateX(19px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes twt-slide-off {
  from {
    transform: translateX(-19px);
  }

  to {
    transform: translateX(0);
  }
}

/* A set-action notice's bar growing in to where the run already is. */
@keyframes app-flash-progress-in {
  from {
    width: 0;
  }
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 2000px;
  }
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes wizardStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes task-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fade in with scale animation */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Logout button spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* all scrollbars */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--gm-blue-788ca0-overlay-45) transparent;
}

/* width of scrollbar */
*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

/* track */
*::-webkit-scrollbar-track {
  background: transparent;
  margin: 20px;

  /* space top/bottom */
}

/* thumb */
*::-webkit-scrollbar-thumb {
  background: var(--gm-blue-788ca0-overlay-45);
  border-radius: 999px;

  /* creates space around thumb */
  border: 4px solid transparent;
  background-clip: content-box;
}

/* hover */
*::-webkit-scrollbar-thumb:hover {
  background: var(--gm-blue-788ca0-overlay-70);
  background-clip: content-box;
}

/* Utility: fixed-width label column in detail rows (e.g. stakeholder profile) */
.gm-detail-label {
  min-width: 110px;
}

/* Utility: clickable card — cursor pointer */
.gm-clickable {
  cursor: pointer;
}

/* Link color by variant */
.spin {
  animation: spin 1s linear infinite;
}



/* ── 3. Objects (layout patterns, structural containers) ─────────────────────── */
/* glass_morph/objects/layout.css */
/* ============================================================================ */
/* == App Layout ============================================================ */
/* ============================================================================ */
.app-container {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100vw;
  z-index: 1;
}

/* Mobile Overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gm-glass-black-30);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Main Content */
.main-content {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  background-color: transparent;
  padding: 24px;
}

.content-wrapper {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--gm-teal-200-overlay-41);
  border-radius: 16px;
  border: 1px solid var(--gm-teal-600-overlay-50);
  box-shadow: 0 6px 10px var(--gm-glass-black-20);
  overflow: hidden;
}

/* Below-menu banner stack — inset to align banner width with .page-inner
   (matches the 24px horizontal padding of .page-container / .navbar). */
#global-banners {
  padding: 16px 24px 0;
}

/* Navigation Bar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  padding: 16px 24px;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

/* Takes the room the nav buttons leave and no more: Bootstrap's .navbar
   wraps, so a trail wider than that room pushed the buttons onto a second
   line. The trail truncates instead (below). */
.navbar-left {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.navbar-controls {
  display: flex;
  gap: 12px;
}

.breadcrumb {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A long title (a data update, a run) ends in an ellipsis rather than
   wrapping the top bar; the full text is in the item's title. */
.navbar-left .breadcrumb {
  min-width: 0;
  flex-wrap: nowrap;
}

.navbar-left .breadcrumb-item {
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only the crumb before the current page gives way: "Home" and the section
   stay readable, and the page you are on keeps its name up to half the
   trail. */
.navbar-left .breadcrumb-item:nth-last-child(3) {
  flex-shrink: 1;
}

.navbar-left .breadcrumb-item.active {
  max-width: 50%;
}

.navbar-left .breadcrumb-separator {
  flex-shrink: 0;
}

.app-flash-stack {
  padding: 16px 24px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Its last notice closed: the padding goes with it. */
.app-flash-stack:not(:has(> .app-flash)) {
  display: none;
}

.app-flash {
  position: relative;
  padding: 12px 40px 12px 16px;
  color: var(--gm-white);
  border-radius: 8px;
  background: var(--app-flash-bg, var(--gm-blue-500));
}

/* The × at the right edge; the padding above keeps the text clear of it. */
.app-flash__close {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--gm-white);
  line-height: 1;
  opacity: 0.8;
}

.app-flash__close:hover,
.app-flash__close:focus-visible {
  opacity: 1;
  background: var(--gm-glass-white-15);
}

/* A flash's one follow-up, e.g. "Ongedaan maken" after a bulk action. Bold
   says it is the action; no underline, the Link atom's text-decoration-none
   holds at rest and on hover. */
.app-flash__action {
  margin-left: 8px;
  color: var(--gm-white);
  font-weight: 600;
}

.app-flash__action:hover,
.app-flash__action:focus-visible {
  color: var(--gm-white);
  text-decoration: none;
  opacity: 0.85;
}

/* A bulk action running in the background (SetActionRunNotice): the green of
   the flash a small run gets straight away (--gm-flash-success), while it runs
   and when it is done, so the colour never changes under the user; red if it
   failed. The bar is white on that green, its track a lighter band. */
.app-flash--run-running,
.app-flash--run-done {
  --app-flash-bg: var(--gm-flash-success);
}

.app-flash--run-failed {
  --app-flash-bg: var(--gm-status-danger);
}

.app-flash__progress {
  margin-top: 8px;
}

.app-flash__progress .progress-bar-track {
  background: var(--gm-glass-white-30);
}

/* The job reports every half second and the notice is morphed in place, so
   the fill glides between reports at an even pace. It grows in from zero when
   the notice first appears: the page usually renders a run already under way.
   A run that completed a moment ago is drawn with its bar full
   (SetActionRun::FILL_HOLD). */
.app-flash__progress .progress-bar-fill {
  background: var(--gm-white);
  transition: width 0.5s linear;
  animation: app-flash-progress-in 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .app-flash__progress .progress-bar-fill {
    transition: none;
    animation: none;
  }
}

@media (width >= 1200px) and (width <= 1700px) {
  .navbar {
    gap: 16px;
  }

  .navbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .breadcrumb {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (width >= 1025px) and (width <= 1199px) {
  .navbar {
    gap: 12px;
  }

  .navbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .breadcrumb {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (width <= 1024px) {
  .mobile-overlay {
    display: block;
  }
}

/* glass_morph/objects/page.css */
/* Prospects Container */
.page-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  /* This is the app's scrollport, so the wheel delta left over when a reader
     reaches its end belongs to nobody. Without `contain` the browser passes it
     to the nearest scrollable ancestor, which on a page that keeps fetching
     rows as you scroll means the document itself. The lock on `html` in
     generic/reset.css already leaves it nothing to chain into; this says so at
     the scroller too, so a future layout that reintroduces root overflow does
     not reintroduce the bug with it. */
  overscroll-behavior: contain;
  padding: 24px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}

.page-inner {
  --gm-tab-inactive-bg: var(--gm-teal-2f606e);
  --gm-tab-inactive-hover-bg: var(--gm-teal-2b5966);
  --gm-tab-inactive-disabled-bg: var(--gm-teal-2f606e);

  min-height: 100%;
  background:
    linear-gradient(180deg, var(--gm-glass-white-5) 0%, transparent 100%),
    var(--gm-content-pane-bg);
  border-radius: 12px;
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow:
    inset 0 1px 0 var(--gm-glass-white-10),
    inset -1px 0 0 var(--gm-glass-white-8);
}

.page-inner.analytics-dashboard {
  padding: 14px 24px 24px;
}

/* The pane normally gets its margin from .page-container's 24px padding. The
   public layout has no such padding — a reader without a session lands on
   /privacy through .public-page-container — so the pane would run to both edges
   of the window there. Same inset, supplied from the other side. */
.public-page-container > .page-inner {
  margin: 0 24px 24px;
}

@media (width <= 1024px) {
  .page-inner.analytics-dashboard {
    padding: 12px 16px 16px;
  }
}

/* glass_morph/objects/stat_row.css */
/* ── Stat row & stat items (base styles BEFORE responsive overrides) ── */
.detail-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 0;
  background: var(--gm-ctx-stat-bg);
  border-radius: 12px;
  overflow: hidden;
}

.detail-stats-row--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Four stats two by two: the separators run between the columns and between
   the rows, not down the outer edge. */
.detail-stats-row--cols-2 .stat-item:nth-child(2n) {
  border-right: none;
}

.detail-stats-row--cols-2 .stat-item:nth-child(n + 3) {
  border-top: 1px solid var(--gm-ctx-stat-separator);
}

.detail-stats-row--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.detail-stats-row--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.detail-stats-row--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.detail-stats-row--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border-right: 1px solid var(--gm-ctx-stat-separator);
}

.stat-item:last-child {
  border-right: none;
}

a.stat-item-link {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  cursor: pointer;
  align-self: stretch;
}

a.stat-item-link:hover {
  background: var(--gm-teal-1d4555-overlay-75-3);
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--gm-ctx-stat-value);
  line-height: 1;
}

.stat-value.highlight {
  color: var(--gm-ctx-stat-value-highlight);
}

/* A backlog is not good news: the count turns red the moment it is non-zero.
   Zero stays white — nothing left behind is not an alert. */
.stat-value--alert {
  color: var(--gm-ctx-stat-value-alert);
}

/* For a stat whose value is words, not a number: a name, a date, an IP address.
   At 36px those shout and wrap; this keeps the value-over-label shape at text size. */
.stat-value.stat-value--text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gm-ctx-stat-label);
  opacity: var(--gm-ctx-stat-label-opacity);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* The hover tint alone only tells somebody who already moved the mouse there.
   The chevron says "this opens something" while the pointer is elsewhere. */
.stat-label--link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 1;
}

/* The underline sits on the text only — an underlined chevron reads as a typo. */
.stat-label--link .stat-label-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.stat-label--link .gm-icon-chevron-right {
  transition: transform 0.2s ease;
}

a.stat-item-link:hover .stat-label--link .gm-icon-chevron-right {
  transform: translateX(2px);
}


/* ── 4. Components ───────────────────────────────────────────────────────────── */

/* Atoms */
/* glass_morph/atoms/list_item.css */
/* ============================================================================ */
/* == Atom — List Item ======================================================= */
/* ============================================================================ */
/* Generic list-item row: flex container with leading / content / trailing slots.
   Shared visual baseline for task rows, activity rows, and similar list UIs.
   Component-specific overrides live in their own molecule CSS files.            */

.list-item {
  padding: 18px 28px;
  border-bottom: 1px solid var(--gm-slate-100);
  display: flex;
  gap: 18px;
  transition: all 0.2s ease;
  background-color: var(--gm-white);
  margin: 6px 0;
  border: 1px solid var(--gm-white);
  border-radius: 10px;
}

.list-item:hover {
  background: var(--gm-slate-100);
  border-color: var(--gm-teal-dbe7eb);
}

.list-item:last-child {
  border-bottom: none;
}

.priority-targets-widget p { 
  margin: 14px 14px 4px 20px;
}

/* -- Alignment variants ---------------------------------------------------- */

.list-item--center {
  align-items: center;
}

/* -- Clickable variant ----------------------------------------------------- */

.list-item--clickable {
  cursor: pointer;
}

.list-item--clickable:hover {
  background: var(--gm-slate-100);
}

/* -- Dark variant (for rows on dark/teal backgrounds) ---------------------- */
/* Parent element (e.g. .data-row) owns the background and hover;
   list-item--dark makes the item itself transparent so it doesn't fight. */

.list-item--dark {
  display: block;
  padding: 0;
  gap: normal;
  background: transparent;
  border-bottom: none;
  transition: none;
  border: 0 var(--gm-teal-dbe7eb) solid;
  margin: 0;
}

.list-item--dark:hover {
  background: transparent;
  border-color: transparent;
}

/* -- Completed variant ----------------------------------------------------- */

.list-item--completed {
  background: var(--gm-slate-100);
}

.list-item--completed:hover {
  background: var(--gm-gray-200);
}

/* -- Slot layout ----------------------------------------------------------- */

.list-item-leading {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.list-item-content {
  flex: 1;
  min-width: 0;
}

.list-item-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.priority-target-card p {
  font-size: 14px;
  color: var(--gm-slate-500);
  line-height: 1.6;
  margin-bottom: 10px;
  margin-left: 0;
}

/* glass_morph/atoms/help_tour_button.css */
/* ─── HelpTourButton atom ───────────────────────────────────────────────── */

.gm-help-tour-btn {
  background: var(--gm-glass-white-5);
  border: 2px solid var(--gm-glass-white-10);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gm-white, var(--gm-white));
  padding: 0;
  line-height: 1;
  transition: all 0.3s ease;
}

.gm-help-tour-btn:hover,
.gm-help-tour-btn:focus-visible {
  background: var(--gm-glass-white-10);
  border-color: var(--gm-glass-white-30);
  outline: none;
}

/* ─── Tour tooltip panel ────────────────────────────────────────────────── */

.gm-tour-panel {
  position: fixed;
  z-index: 9990;
  width: 300px;

  /* Hard viewport cap — panel can never exceed the visible area */
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gm-teal-850-overlay-94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gm-glass-white-10);
  border-radius: 14px;
  box-shadow:
    0 24px 48px var(--gm-glass-black-45),
    0 0 0 1px var(--gm-indigo-500-overlay-18),
    inset 0 1px 0 var(--gm-glass-white-6);
  color: var(--gm-slate-200);
  font-family: inherit;
  font-size: 14px;
  pointer-events: auto;
}

.gm-tour-panel__inner {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;

  /* allow flex children to shrink below content size */
  overflow: hidden;
}

.gm-tour-panel__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gm-tour-panel__progress {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gm-teal-500, var(--gm-teal-500));
  line-height: 1;
}

.gm-tour-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-slate-100);
  margin: 0;
  line-height: 1.3;
}

.gm-tour-panel__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--gm-slate-400);
  margin: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;

  /* required for flex overflow to work */
}

/* ─── Markdown content inside tour body ──────────────────────────────────── */

.gm-tour-panel__body h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gm-teal-500, var(--gm-teal-500));
  margin: 10px 0 4px;
}

.gm-tour-panel__body h3:first-child {
  margin-top: 0;
}

.gm-tour-panel__body ul {
  padding-left: 16px;
  margin: 4px 0 8px;
}

.gm-tour-panel__body li {
  margin-bottom: 2px;
}

.gm-tour-panel__body hr {
  border: none;
  border-top: 1px solid var(--gm-glass-white-8);
  margin: 8px 0;
}

.gm-tour-panel__body blockquote {
  border-left: 2px solid var(--gm-teal-500, var(--gm-teal-500));
  padding-left: 10px;
  margin: 6px 0;
  color: var(--gm-slate-300);
  font-style: italic;
}

.gm-tour-panel__body p {
  margin: 0 0 6px;
}

.gm-tour-panel__body p:last-child {
  margin-bottom: 0;
}

.gm-tour-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--gm-glass-white-7);
  margin-top: 2px;
  flex-shrink: 0;

  /* footer never squishes — buttons always visible */
}

.gm-tour-panel__skip {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--gm-slate-400);
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.gm-tour-panel__skip:hover {
  color: var(--gm-slate-400);
}

.gm-tour-panel__actions {
  display: flex;
  gap: 8px;
}

.gm-tour-panel__btn {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}

.gm-tour-panel__btn--back {
  background: var(--gm-glass-white-6);
  border-color: var(--gm-glass-white-10);
  color: var(--gm-slate-400);
}

.gm-tour-panel__btn--back:hover {
  background: var(--gm-glass-white-10);
  color: var(--gm-slate-300);
}

/* Hide "Back" on first step (gem adds disabled attr or hides via JS) */
.gm-tour-panel__btn--back[hidden],
.gm-tour-panel__btn--back[disabled] {
  visibility: hidden;
}

.gm-tour-panel__btn--next {
  background: linear-gradient(135deg, var(--gm-teal-500, var(--gm-teal-500)), var(--gm-teal-400, var(--gm-teal-400)));
  border-color: var(--gm-teal-overlay-30);
  color: var(--gm-white);
}

.gm-tour-panel__btn--next:hover {
  background: linear-gradient(135deg, var(--gm-teal-400, var(--gm-teal-400)), var(--gm-teal-200, var(--gm-teal-200)));
}

/* ─── Highlighted target element ────────────────────────────────────────── */
/* Shimmer ring: ::before extends 3px outside the element; z-index: -1 keeps
   it behind the element's own background so only the ring peeks through.
   isolation: isolate creates a stacking context without affecting z-order. */

@keyframes is-tour-highlight-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.is-tour-highlighted {
  position: relative;
  isolation: isolate;

  /* outer glow using native teal accent (--gm-teal-500: #009acc) */
  /* solid ring handled by ::before with inset: -8px */
  box-shadow: 0 0 40px 10px var(--gm-teal-overlay-35);
}

.is-tour-highlighted::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: var(--gm-teal-overlay-80);

  /* --gm-teal-500 */
  border-radius: 24px;
  z-index: -1;
  pointer-events: none;
  animation: is-tour-highlight-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .is-tour-highlighted {
    box-shadow: 0 0 28px 6px var(--gm-teal-overlay-30);
  }

  .is-tour-highlighted::before {
    animation: none;
    background: var(--gm-teal-overlay-70);
  }
}

/* glass_morph/atoms/icon.css */
/* ============================================================================ */
/* == Atom — Icon =========================================================== */
/* ============================================================================ */
/* Icon font base — applied to any element using gm-icon-* classes */
[class*="gm-icon-"] {
  text-decoration: none;
}

[class*="gm-icon-"]::before {
  display: inline-block;
  font-family: bootstrap-icons, sans-serif !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-title [class*="gm-icon-"],
.tile-nav h1 [class*="gm-icon-"],
.tile-nav h2 [class*="gm-icon-"],
.tile-nav h3 [class*="gm-icon-"],
.tile-nav h4 [class*="gm-icon-"],
.tile-nav h5 [class*="gm-icon-"],
.tile-nav h6 [class*="gm-icon-"],
.heading [class*="gm-icon-"],
.hero-title [class*="gm-icon-"]::before,
.tile-nav h1 [class*="gm-icon-"]::before,
.tile-nav h2 [class*="gm-icon-"]::before,
.tile-nav h3 [class*="gm-icon-"]::before,
.tile-nav h4 [class*="gm-icon-"]::before,
.tile-nav h5 [class*="gm-icon-"]::before,
.tile-nav h6 [class*="gm-icon-"]::before,
.heading [class*="gm-icon-"]::before {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

[class*="gm-icon-"].text-primary,
[class*="gm-icon-"].text-primary::before {
  color: var(--gm-teal-200) !important;
}

.gm-icon-star-fill.text-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 16px;
  border-radius: 99px;
  background: var(--gm-teal-500);
  color: transparent !important;
  vertical-align: middle;
}

.gm-icon-star-fill.text-warning::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
}

/* glass_morph/atoms/icon_map.css */
/* ============================================================================ */
/* == Icon Map — gm-icon-* class to Bootstrap Icons unicode glyph ============ */
/* ============================================================================ */
/*
 * Each rule maps a project-owned icon class name to the corresponding
 * Bootstrap Icons v1.11.3 unicode code point.
 *
 * To add an icon: look up the code point at https://icons.getbootstrap.com
 * and add a single line: .gm-icon-{name}::before { content: "\fXXX"; }
 *
 * To remove an icon: delete the line. No other files need to change.
 */

/* ── Navigation ──────────────────────────────────────────────────────────── */
.gm-icon-home::before                { content: "\f425"; } /* alias → house */
.gm-icon-house::before               { content: "\f425"; }
.gm-icon-house-fill::before          { content: "\f424"; }
.gm-icon-list::before                { content: "\f479"; }
.gm-icon-arrow-left::before          { content: "\f12f"; }
.gm-icon-arrow-right::before         { content: "\f138"; }
.gm-icon-arrow-left-right::before    { content: "\f12b"; }
.gm-icon-arrow-up::before            { content: "\f148"; }
.gm-icon-arrow-up-right::before      { content: "\f144"; }
.gm-icon-arrow-down::before          { content: "\f128"; }
.gm-icon-arrow-down-left::before     { content: "\f11e"; }
.gm-icon-arrow-up-short::before      { content: "\f145"; }
.gm-icon-arrow-down-short::before    { content: "\f124"; }
.gm-icon-arrow-up-circle::before     { content: "\f13a"; }
.gm-icon-arrow-down-circle::before   { content: "\f119"; }
.gm-icon-arrow-right-circle::before  { content: "\f134"; }
.gm-icon-arrow-clockwise::before     { content: "\f116"; }
.gm-icon-arrow-repeat::before        { content: "\f130"; }
.gm-icon-arrows-angle-contract::before { content: "\f149"; }
.gm-icon-arrows-fullscreen::before   { content: "\f14d"; }
.gm-icon-chevron-down::before        { content: "\f282"; }
.gm-icon-chevron-left::before        { content: "\f284"; }
.gm-icon-chevron-right::before       { content: "\f285"; }
.gm-icon-chevron-expand::before      { content: "\f283"; }
.gm-icon-box-arrow-up-right::before  { content: "\f1c5"; }
.gm-icon-box-arrow-right::before     { content: "\f1c3"; }
.gm-icon-box-arrow-in-right::before  { content: "\f1be"; }
.gm-icon-search::before              { content: "\f52a"; }
.gm-icon-three-dots-vertical::before { content: "\f5d3"; }
.gm-icon-skip-forward::before        { content: "\f55e"; }
.gm-icon-x::before                   { content: "\f62a"; }
.gm-icon-link::before                { content: "\f471"; }

/* ── Entity ──────────────────────────────────────────────────────────────── */
.gm-icon-building::before            { content: "\f1dd"; }
.gm-icon-buildings::before           { content: "\f87d"; }
.gm-icon-buildings-fill::before      { content: "\f87c"; }
.gm-icon-building-check::before      { content: "\f868"; }
.gm-icon-building-add::before        { content: "\f867"; }
.gm-icon-building-fill-check::before { content: "\f86d"; }
.gm-icon-building-fill-dash::before  { content: "\f86e"; }
.gm-icon-person::before              { content: "\f4e1"; }
.gm-icon-person-fill::before         { content: "\f4da"; }
.gm-icon-person-gear::before         { content: "\f8a7"; }
.gm-icon-person-lines-fill::before   { content: "\f4db"; }
.gm-icon-person-check::before       { content: "\f4de"; }
.gm-icon-people::before              { content: "\f4d0"; }
.gm-icon-people-fill::before         { content: "\f4cf"; }
.gm-icon-box::before                 { content: "\f1c8"; }
.gm-icon-tags::before                { content: "\f5b2"; }
.gm-icon-tag::before                 { content: "\f5b0"; }
.gm-icon-tag-fill::before            { content: "\f5af"; }
.gm-icon-globe::before               { content: "\f3ee"; }
.gm-icon-briefcase::before           { content: "\f1cc"; }
.gm-icon-geo-alt::before             { content: "\f3e8"; }
.gm-icon-map::before                 { content: "\f47f"; }
.gm-icon-flag::before                { content: "\f3cc"; }
.gm-icon-flag-fill::before           { content: "\f3cb"; }
.gm-icon-node-plus-fill::before      { content: "\f4a6"; }
.gm-icon-tree::before                { content: "\f5e2"; }
.gm-icon-diagram-2::before           { content: "\f2ec"; }
.gm-icon-diagram-3::before           { content: "\f2ee"; }
.gm-icon-diagram-3-fill::before      { content: "\f2ed"; }

/* ── Actions ─────────────────────────────────────────────────────────────── */
.gm-icon-plus-lg::before             { content: "\f64d"; }
.gm-icon-plus-circle::before         { content: "\f4fa"; }
.gm-icon-pencil::before              { content: "\f4cb"; }
.gm-icon-pencil-square::before       { content: "\f4ca"; }
.gm-icon-trash::before               { content: "\f5de"; }
.gm-icon-eye::before                 { content: "\f341"; }
.gm-icon-eye-slash::before           { content: "\f340"; }
.gm-icon-send::before                { content: "\f6c0"; }
.gm-icon-send-fill::before           { content: "\f6b9"; }
.gm-icon-send-arrow-up-fill::before  { content: "\f8d2"; }
.gm-icon-download::before            { content: "\f30a"; }
.gm-icon-clipboard::before           { content: "\f290"; }
.gm-icon-clipboard-check::before     { content: "\f28b"; }
.gm-icon-share::before               { content: "\f52e"; }
.gm-icon-gear::before                { content: "\f3e5"; }
.gm-icon-gear-fill::before           { content: "\f3e2"; }
.gm-icon-lock::before                { content: "\f47b"; }
.gm-icon-lock-fill::before           { content: "\f47a"; }
.gm-icon-shield-lock::before         { content: "\f538"; }
.gm-icon-shield-lock-fill::before    { content: "\f537"; }
.gm-icon-key::before                 { content: "\f44f"; }
.gm-icon-key-fill::before            { content: "\f44e"; }
.gm-icon-puzzle::before              { content: "\f503"; }
.gm-icon-puzzle-fill::before         { content: "\f502"; }
.gm-icon-funnel::before              { content: "\f3e1"; }
.gm-icon-funnel-fill::before         { content: "\f3e0"; }
.gm-icon-filter::before              { content: "\f3ca"; }
.gm-icon-sliders::before             { content: "\f56b"; }
.gm-icon-copy::before                { content: "\f759"; }
.gm-icon-magic::before               { content: "\f675"; }
.gm-icon-link-45deg::before          { content: "\f470"; }
.gm-icon-plug::before                { content: "\f4f7"; }
.gm-icon-reply::before               { content: "\f520"; }
.gm-icon-wrench::before              { content: "\f621"; }
.gm-icon-tools::before               { content: "\f5db"; }
.gm-icon-option::before              { content: "\f4ad"; }
.gm-icon-credit-card::before         { content: "\f2dc"; }
.gm-icon-credit-card-fill::before    { content: "\f2db"; }

/* ── Status ──────────────────────────────────────────────────────────────── */
.gm-icon-check-circle-fill::before        { content: "\f26a"; }
.gm-icon-check-circle::before             { content: "\f26b"; }
.gm-icon-check-lg::before                 { content: "\f633"; }
.gm-icon-check-square-fill::before        { content: "\f26c"; }
.gm-icon-check2-square::before            { content: "\f271"; }
.gm-icon-x-circle-fill::before            { content: "\f622"; }
.gm-icon-x-circle::before                 { content: "\f623"; }
.gm-icon-x-lg::before                     { content: "\f659"; }
.gm-icon-exclamation-triangle-fill::before { content: "\f33a"; }
.gm-icon-exclamation-triangle::before     { content: "\f33b"; }
.gm-icon-exclamation-circle::before       { content: "\f333"; }
.gm-icon-exclamation-circle-fill::before  { content: "\f332"; }
.gm-icon-info-circle-fill::before         { content: "\f430"; }
.gm-icon-info-circle::before              { content: "\f431"; }
.gm-icon-clock::before                    { content: "\f293"; }
.gm-icon-clock-fill::before               { content: "\f291"; }
.gm-icon-clock-history::before            { content: "\f292"; }
.gm-icon-circle::before                   { content: "\f28a"; }
.gm-icon-circle-fill::before              { content: "\f287"; }
.gm-icon-dot::before                      { content: "\f309"; }
.gm-icon-shield-check::before             { content: "\f52f"; }
.gm-icon-shield-exclamation::before       { content: "\f530"; }
.gm-icon-shield-fill-check::before        { content: "\f531"; }
.gm-icon-star-fill::before                { content: "\f586"; }
.gm-icon-star::before                     { content: "\f588"; }
.gm-icon-dash-circle::before              { content: "\f2e6"; }
.gm-icon-dash-circle-fill::before         { content: "\f2e5"; }
.gm-icon-toggle-on::before                { content: "\f5d6"; }
.gm-icon-hourglass::before                { content: "\f421"; }
.gm-icon-hourglass-split::before          { content: "\f41f"; }
.gm-icon-stopwatch::before                { content: "\f597"; }
.gm-icon-stopwatch-fill::before           { content: "\f596"; }
.gm-icon-stop-fill::before                { content: "\f592"; }
.gm-icon-stop-circle::before              { content: "\f591"; }
.gm-icon-pause-circle::before             { content: "\f4c2"; }
.gm-icon-pause-circle-fill::before        { content: "\f4c1"; }
.gm-icon-play-circle::before              { content: "\f4f3"; }
.gm-icon-play-circle-fill::before         { content: "\f4f2"; }
.gm-icon-play-fill::before                { content: "\f4f4"; }
.gm-icon-signpost-fill::before            { content: "\f547"; }
.gm-icon-fingerprint::before              { content: "\f671"; }
.gm-icon-asterisk::before                 { content: "\f151"; }
.gm-icon-bullseye::before                 { content: "\f1de"; }
.gm-icon-infinity::before                 { content: "\f69e"; }
.gm-icon-trophy-fill::before              { content: "\f5e6"; }
.gm-icon-rocket-takeoff::before           { content: "\f845"; }
.gm-icon-stars::before                    { content: "\f589"; }
.gm-icon-hand-thumbs-up::before          { content: "\f407"; }
.gm-icon-hand-thumbs-up-fill::before     { content: "\f406"; }
.gm-icon-hand-thumbs-down::before        { content: "\f405"; }
.gm-icon-hand-thumbs-down-fill::before   { content: "\f404"; }

/* ── Data ────────────────────────────────────────────────────────────────── */
.gm-icon-pie-chart::before           { content: "\f4e9"; }
.gm-icon-pie-chart-fill::before      { content: "\f4e8"; }
.gm-icon-graph-up-arrow::before      { content: "\f673"; }
.gm-icon-graph-down-arrow::before    { content: "\f672"; }
.gm-icon-graph-up::before            { content: "\f3f2"; }
.gm-icon-graph-down::before          { content: "\f3f1"; }
.gm-icon-bar-chart-line::before      { content: "\f17c"; }
.gm-icon-bar-chart-line-fill::before { content: "\f17b"; }
.gm-icon-bar-chart::before           { content: "\f17e"; }
.gm-icon-bar-chart-fill::before      { content: "\f17a"; }
.gm-icon-activity::before            { content: "\f66b"; }
.gm-icon-lightning-charge::before    { content: "\f46d"; }
.gm-icon-lightning-charge-fill::before { content: "\f46c"; }
.gm-icon-lightning::before           { content: "\f46f"; }
.gm-icon-lightning-fill::before      { content: "\f46e"; }
.gm-icon-speedometer::before         { content: "\f57f"; }
.gm-icon-speedometer2::before        { content: "\f580"; }
.gm-icon-database::before            { content: "\f8c4"; }
.gm-icon-layers::before              { content: "\f45b"; }
.gm-icon-layers-fill::before         { content: "\f459"; }
.gm-icon-collection::before          { content: "\f2cc"; }
.gm-icon-collection-fill::before     { content: "\f2c9"; }
.gm-icon-layout-text-sidebar::before { content: "\f462"; }
.gm-icon-hash::before                { content: "\f40a"; }
.gm-icon-percent::before             { content: "\f4d1"; }
.gm-icon-currency-dollar::before     { content: "\f636"; }
.gm-icon-cpu::before                 { content: "\f2d6"; }
.gm-icon-cpu-fill::before            { content: "\f2d5"; }
.gm-icon-hdd-rack::before            { content: "\f40f"; }
.gm-icon-hdd-rack-fill::before       { content: "\f40e"; }
.gm-icon-grid-3x3::before            { content: "\f3fa"; }
.gm-icon-receipt::before             { content: "\f50f"; }
.gm-icon-receipt-cutoff::before      { content: "\f50e"; }
.gm-icon-layout-sidebar::before      { content: "\f45f"; }
.gm-icon-layout-sidebar-reverse::before { content: "\f45e"; }
.gm-icon-bug::before                 { content: "\f1dc"; }
.gm-icon-bug-fill::before            { content: "\f1db"; }
.gm-icon-braces::before              { content: "\f1c9"; }
.gm-icon-code-square::before         { content: "\f2c7"; }
.gm-icon-robot::before               { content: "\f6b1"; }
.gm-icon-quote::before               { content: "\f6b0"; }
.gm-icon-award::before               { content: "\f154"; }
.gm-icon-award-fill::before          { content: "\f153"; }

/* ── Communication ───────────────────────────────────────────────────────── */
.gm-icon-envelope::before            { content: "\f32f"; }
.gm-icon-envelope-fill::before       { content: "\f32c"; }
.gm-icon-envelope-open::before       { content: "\f32e"; }
.gm-icon-linkedin::before            { content: "\f472"; }
.gm-icon-calendar-event::before      { content: "\f1e8"; }
.gm-icon-calendar-event-fill::before { content: "\f1e7"; }
.gm-icon-calendar::before            { content: "\f1f6"; }
.gm-icon-calendar-check::before      { content: "\f1e2"; }
.gm-icon-calendar-day::before        { content: "\f1e6"; }
.gm-icon-calendar-week::before       { content: "\f1f3"; }
.gm-icon-calendar-month::before      { content: "\f1ed"; }
.gm-icon-calendar2-week::before      { content: "\f209"; }
.gm-icon-broadcast::before           { content: "\f1d6"; }
.gm-icon-newspaper::before           { content: "\f4a3"; }
.gm-icon-telephone::before           { content: "\f5c1"; }
.gm-icon-telephone-fill::before      { content: "\f5b4"; }
.gm-icon-inbox::before               { content: "\f42d"; }
.gm-icon-inbox-fill::before          { content: "\f42c"; }
.gm-icon-bell::before                { content: "\f18a"; }
.gm-icon-bell-fill::before           { content: "\f189"; }
.gm-icon-chat::before                { content: "\f268"; }
.gm-icon-chat-dots::before           { content: "\f24a"; }
.gm-icon-chat-dots-fill::before      { content: "\f249"; }
.gm-icon-chat-square-dots::before    { content: "\f25f"; }
.gm-icon-chat-square-dots-fill::before { content: "\f25e"; }
.gm-icon-chat-square-text::before    { content: "\f264"; }
.gm-icon-chat-square-text-fill::before { content: "\f263"; }
.gm-icon-google::before              { content: "\f3f0"; }
.gm-icon-microsoft::before           { content: "\f65d"; }
.gm-icon-twitter-x::before           { content: "\f8db"; }
.gm-icon-twitter::before             { content: "\f5ef"; }
.gm-icon-facebook::before            { content: "\f344"; }
.gm-icon-youtube::before             { content: "\f62b"; }
.gm-icon-github::before              { content: "\f3ed"; }

/* ── Files & Documents ───────────────────────────────────────────────────── */
.gm-icon-file-earmark-text::before   { content: "\f38b"; }
.gm-icon-file-earmark-text-fill::before { content: "\f38a"; }
.gm-icon-file-text::before           { content: "\f3b9"; }
.gm-icon-file-text-fill::before      { content: "\f3b8"; }
.gm-icon-card-text::before           { content: "\f228"; }
.gm-icon-archive::before             { content: "\f10d"; }
.gm-icon-archive-fill::before        { content: "\f10c"; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.gm-icon-list-check::before          { content: "\f473"; }
.gm-icon-list-task::before           { content: "\f477"; }
.gm-icon-list-ul::before             { content: "\f478"; }
.gm-icon-question-circle::before     { content: "\f505"; }
.gm-icon-question-circle-fill::before { content: "\f504"; }
.gm-icon-coin::before                { content: "\f634"; }
.gm-icon-fire::before                { content: "\f7f6"; }
.gm-icon-heart-pulse::before         { content: "\f76f"; }

/* glass_morph/atoms/button.css */
/* ============================================================================ */
/* == Atom — Button ========================================================= */
/* ============================================================================ */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--gm-glass-white-10);
  border: 1px solid var(--gm-glass-white-20);
  border-radius: 8px;
  cursor: pointer;
  color: var(--gm-white);
  transition: all 0.2s ease;
}

.menu-toggle:hover {
  background: var(--gm-glass-white-15);
  border-color: var(--gm-glass-white-30);
}

.menu-toggle:active {
  transform: scale(0.95);
}

@media (width <= 1024px) {
  .menu-toggle {
    display: flex;
  }
}

.expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: color 0.2s;
  justify-self: end;
  margin-right: 0;
}

.expand-button:hover {
  background: transparent;
}

.expand-button.expanded .expand-icon,
.expand-button[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

.button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 180px;
  width: auto;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 16px;
  position: relative;
  border-radius: 30px;
  border: none;
  background: var(--gm-teal-200);
  color: var(--gm-white);
  cursor: pointer;
  transition: all 0.2s;
}

.button:hover {
  box-shadow: none;
}

.button .button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.button .button-container--with-subtitle {
  flex-direction: column;
  gap: 0;
}

.button--with-subtitle {
  padding-top: 0.25rem;
  padding-bottom: 0.125rem;
}

.button .button-subtitle {
  font-size: 0.625rem;
  font-weight: 400;
  opacity: 0.55;
  line-height: 1;
}

.button .button-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 700;
  color: inherit;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 21px;
  white-space: nowrap;
}

.button::before, .button-primary::before, .pricing-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 30px;
  background: linear-gradient(178deg, var(--gm-glass-white-50) 0%, var(--gm-green-600-overlay-50) 100%);
  mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 10px;

  /* A tab label never wraps: it either fits the strip or the strip collapses.
     The ≤1024px block already said this; a strip in a narrow container on a wide
     screen needs it too. */
  white-space: nowrap;
  padding: 12px 28px;
  background: var(--gm-tab-inactive-bg);
  border: none;
  border-radius: 0;
  font-family: Figtree, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-glass-white-80);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.tab-button:first-child {
  border-radius: 24px 0 0 24px;
}

.tab-button:last-child {
  border-radius: 0 24px 24px 0;
}

.tab-button:hover {
  background: var(--gm-tab-inactive-hover-bg);
  color: var(--gm-white);
}

.tab-button.active {
  background: var(--gm-green-600);
  color: var(--gm-white);
}

.tab-button.disabled,
.tab-button:disabled {
  cursor: not-allowed !important;
  background: var(--gm-tab-inactive-disabled-bg);
  color: var(--gm-glass-white-80);
  pointer-events: none !important;
  opacity: 0.5;
}

/* Completely disable hover effects on disabled tabs */
.tab-button.disabled:hover,
.tab-button:disabled:hover,
.tab-button[disabled]:hover {
  background: var(--gm-tab-inactive-disabled-bg) !important;
  color: var(--gm-glass-white-80) !important;
  transform: none !important;
  box-shadow: none !important;
}

.button-primary,
.button-secondary {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: Figtree, sans-serif;
}

.button-primary {
  position: relative;
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  color: var(--gm-white) !important;
  font-weight: 700;
  border: none;
}

.button-primary span {
  position: relative;
  z-index: 2;
}

.button-secondary {
  background: var(--gm-glass-white-15);
  color: var(--gm-white);
  border: 2px solid var(--gm-glass-white-60);
}

.button-secondary::before {
  display: none;
}

.button-secondary .button-text {
  font-weight: 500;
}

.button-primary.hidden,
.button-secondary.hidden {
  display: none;
}

/* Task Action Buttons — dark-glass default; light-surface override via .tile-light */
.task-action-btn {
  background: transparent;
  border: none;
  color: var(--gm-glass-white-60);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}

.task-action-btn:hover {
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
}

.task-action-btn i {
  color: inherit !important;
}

/* Light surface (tile-light, modal, stat-card-rich, task-card popover) — slate colors */
.tile-light .task-action-btn,
.white-tile .task-action-btn,
.modal-content .task-action-btn,
.stat-card-rich .task-action-btn,
.task-card-actions-popover .task-action-btn {
  color: var(--gm-slate-500);
}

.tile-light .task-action-btn:hover,
.white-tile .task-action-btn:hover,
.modal-content .task-action-btn:hover,
.stat-card-rich .task-action-btn:hover,
.task-card-actions-popover .task-action-btn:hover {
  /* gray-200, not slate-100: the surrounding clickable row hovers to slate-100,
     so the button needs a darker rectangle to read as a distinct button. */
  background: var(--gm-gray-200);
  color: var(--gm-slate-800);
}

/* Variants */
.task-action-btn--positive { color: var(--gm-green-400); }

.task-action-btn--positive:hover {
  background: var(--gm-green-700-overlay-12);
  color: var(--gm-green-400);
}
.task-action-btn--negative { color: var(--gm-red-400); }

.task-action-btn--negative:hover {
  background: var(--gm-red-500-overlay-12);
  color: var(--gm-red-400);
}

.tile-light .task-action-btn--positive,
.white-tile .task-action-btn--positive,
.task-card-actions-popover .task-action-btn--positive { color: var(--gm-green-600); }

.tile-light .task-action-btn--negative,
.white-tile .task-action-btn--negative,
.task-card-actions-popover .task-action-btn--negative { color: var(--gm-red-600); }

/* danger-delete-btn removed — DangerActionRow now uses Button(variant: :danger) */
.button-primary:hover {
  background: linear-gradient(135deg, var(--gm-green-700) 0%, var(--gm-green-600) 100%);
  box-shadow: none;
}

/* Not the light variant: white text on a white surface reads as nothing. */
.button-secondary:not(.button-secondary-light):hover {
  background: var(--gm-glass-white-20) !important;
  color: var(--gm-white) !important;
  border-color: var(--gm-glass-white-50) !important;
  box-shadow: none !important;
  transform: none !important;
}

.password-toggle-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--gm-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.password-toggle-btn:hover {
  color: var(--gm-gray-700);
}

.password-toggle-hidden {
  display: none;
}

/* Ensure inline-block buttons respect their natural width */
.button.d-inline-block {
  width: fit-content !important;
  display: inline-flex !important;
}

.button.button-secondary-light {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-slate-800);
  min-width: auto;
  padding: 8px 16px;
  height: auto;
}

.button.button-secondary-light::before {
  display: none;
}

.button.button-secondary-light:hover {
  background: var(--gm-slate-50);
  border-color: var(--gm-gray-300);
  transform: none;
  box-shadow: none;
}

.button.button-tertiary {
  background: var(--gm-gray-200);
  border: 1px solid var(--gm-gray-300);
  color: var(--gm-gray-700);
}

.button.button-tertiary::before {
  display: none;
}

.button.button-tertiary:hover {
  background: var(--gm-gray-300);
  border-color: var(--gm-gray-400);
  transform: none;
  box-shadow: none;
}

/* btn-close-panel overrides button-tertiary — same mechanism as modal-close */
.button.btn-close-panel, .button.modal-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  gap: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gm-glass-white-10);
  color: var(--gm-white);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

.button.btn-close-panel:hover, .button.modal-close:hover {
  background: var(--gm-glass-white-5);
  border-color: var(--gm-glass-white-20);
  color: var(--gm-white);
  transform: none;
  box-shadow: none;
}

/* Override TabButton styles for subtle appearance */
.task-inspect-tabs .tab-button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--gm-gray-500) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.2s ease !important;
}

.task-inspect-tabs .tab-button:hover {
  color: var(--gm-gray-700) !important;
  background: transparent !important;
}

.task-inspect-tabs .tab-button.active {
  color: var(--gm-gray-800) !important;
  border-bottom-color: var(--gm-teal-400) !important;
  background: transparent !important;
}

/* Hide icons in tabs for minimal look */
.task-inspect-tabs .tab-button i {
  display: none;
}

.task-inspect-tabs .tab-button.active .tab-badge {
  background: var(--gm-teal-400) !important;
  color: var(--gm-white) !important;
}

.context-tabs .tab-button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 0.4rem 0.5rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--gm-gray-500) !important;
  transition: all 0.2s ease !important;
}

.context-tabs .tab-button:hover {
  color: var(--gm-gray-700) !important;
  background: transparent !important;
}

.context-tabs .tab-button.active {
  color: var(--gm-gray-800) !important;
  border-bottom-color: var(--gm-teal-400) !important;
  background: transparent !important;
}

.context-tabs .tab-button i {
  display: none;
}

/* Danger button variant for destructive actions */
.button-danger {
  background: var(--gm-red-600) !important;
  border-color: var(--gm-red-600) !important;
  color: var(--gm-white) !important;
}

.button-danger:hover:not(.disabled, :disabled) {
  background: var(--gm-red-700) !important;

  /* red-700 — not in palette, keep literal */
  border-color: var(--gm-red-700) !important;
}

/* Disabled button visual state */
.button.disabled,
.button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Small button variant (.button-sm) ────────────────────────────────────────
   Compact inline buttons for card-level actions, table rows, and panel headers.
   Uses a flat rectangular shape (border-radius: 6px) instead of the default pill.
   ─────────────────────────────────────────────────────────────────────────── */
.button.button-sm {
  display: inline-flex;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0.3125rem 0.75rem;
  border-radius: 6px;
  background: var(--gm-glass-white-8);
  border: 1px solid var(--gm-glass-white-20);
  color: var(--gm-gray-200);
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.button.button-sm::before {
  display: none;
}

.button.button-sm:hover {
  transform: none;
  background: var(--gm-glass-white-15);
  border-color: var(--gm-glass-white-30);
  box-shadow: 0 1px 3px var(--gm-glass-black-6);
}

.button.button-sm .button-text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

/* A small button keeps the light variant's colours: the rule above paints
   every small button for dark glass. */
.button.button-sm.button-secondary-light {
  background: var(--gm-white);
  border-color: var(--gm-gray-200);
  color: var(--gm-slate-800);
}

.button.button-sm.button-secondary-light:hover {
  background: var(--gm-slate-50);
  border-color: var(--gm-gray-300);
  box-shadow: none;
}

.button.button-sm.button-primary {
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  border: none;
  color: var(--gm-white) !important;
  height: auto;
  padding: 0.3125rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.button.button-sm.button-primary:hover {
  transform: none;
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px var(--gm-green-600-overlay-30);
  filter: brightness(1.06);
}

.button.button-sm.button-danger {
  background: var(--gm-red-50) !important;
  border: 1px solid var(--gm-red-100) !important;
  color: var(--gm-red-600) !important;
}

.button.button-sm.button-danger:hover:not(.disabled, :disabled) {
  background: var(--gm-red-200) !important;
  border-color: var(--gm-red-300) !important;
  box-shadow: none;
  transform: none;
}

/* Large size variant */
.button.button-lg {
  height: 48px;
  padding: 8px 28px;
  font-size: 1.0625rem;
  border-radius: 30px;
}

@media (width <= 640px) {
  .button-primary {
    width: 100%;
    text-align: center;
  }
}

@media (width <= 768px) {
  .button-primary,
  .button-secondary {
    flex: 1;
  }
}

/* glass_morph/atoms/badge.css */
/* ============================================================================ */
/* == Atom — Badge ========================================================== */
/* ============================================================================ */
.gm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 14px;
  border-radius: 16px;
  color: var(--gm-white);
  overflow: hidden;
  white-space: nowrap;
}

/* One-line truncation. The badge text is the original; three other
   components clip a label the same way and share the rule. It stays in this
   file because the Chrome extension bundles badge.css but not the others. */
.gm-badge-text,
.gm-level-filter__trigger-short,
.details-header-recipient,
.website-link__domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-badge .bi {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Prevent icon-container sizing rules (e.g. .gm-icon-box = 40×40px) from
   inflating icon spans rendered inside badges via render_badge_content. */
.gm-badge [class*="gm-icon-"] {
  width: auto;
  height: auto;
  min-width: unset;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  background: none;
  flex-shrink: 1;
  font-size: inherit;
}

/* Size modifier */
.gm-badge-sm {
  font-size: 11px;
  padding: 2px 7px;
}

/* Color variants — reuse existing primitive tokens */
/* 6 visual badge colors */
.gm-badge-slate {
  background: var(--gm-slate-500);
}

.gm-badge-teal {
  background: var(--gm-teal-500);
}

/* A pill with an href (Badge.pill(href:)) is a chip, not running text: the
   browser's link underline only shows on hover. */
a.gm-badge {
  text-decoration: none;
}

a.gm-badge:hover {
  text-decoration: underline;
}

.gm-badge-green {
  background: var(--gm-green-500);
}

.gm-badge-amber {
  background: var(--gm-yellow-500);
}

.gm-badge-red {
  background: var(--gm-red-500);
}

.gm-badge-blue {
  background: var(--gm-blue-500);
}

.gm-badge-indigo {
  background: var(--gm-indigo-500);
}

/* Soft badge variants — tinted bg + colored text for light surfaces */
.gm-badge-soft-slate {
  background: var(--gm-gray-100);
  color: var(--gm-gray-600);
}

.gm-badge-soft-teal {
  background: var(--gm-teal-overlay-8);
  color: var(--gm-teal-600);
}

.gm-badge-soft-green {
  background: var(--gm-green-500-overlay-8);
  color: var(--gm-green-700);
}

.gm-badge-soft-amber {
  background: var(--gm-yellow-overlay-8);
  color: var(--gm-amber-600);
}

.gm-badge-soft-red {
  background: var(--gm-red-overlay-8);
  color: var(--gm-red-700);
}

.gm-badge-soft-blue {
  background: var(--gm-blue-100);
  color: var(--gm-blue-800);
}

.gm-badge-soft-indigo {
  background: var(--gm-gray-100);
  color: var(--gm-indigo-500);
}

/* Score color variants — reuse existing score tokens */
.gm-badge-score-excellent {
  background: var(--gm-score-excellent);
}

.gm-badge-score-good {
  background: var(--gm-score-good);
}

.gm-badge-score-fair {
  background: var(--gm-score-fair);
}

.gm-badge-score-poor {
  background: var(--gm-score-poor);
}

.gm-badge-score-low {
  background: var(--gm-score-low);
}

/* Step/number badge — circle variant, same font/weight */
.gm-badge-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gm-white);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.gm-badge-step-sm {
  width: 20px;
  height: 20px;
  font-size: 11px;
  padding-top: 1px;
}

.gm-badge-step-md {
  width: 32px;
  height: 32px;
}

.gm-badge-step-lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.gm-badge-step-default {
  background: var(--gm-gray-500);
}

.gm-badge-step-active {
  background: var(--gm-teal-500);
}

.gm-badge-step-completed {
  background: var(--gm-green-500);
}

.gm-badge-step-disabled {
  background: var(--gm-badge-muted);
}

.gm-badge-step-signal {
  background: var(--gm-blue-500);
}

.gm-badge-step-indicator {
  background: var(--gm-amber-500);
  color: var(--gm-white);
}

/* "step" state — used in wizard intro overview lists (Badge.number / Badge.step variant: :step).
   Automatically adapts: gradient on dark glass surfaces, solid teal on light/white surfaces. */
.gm-badge-step-step {
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-600) 100%);
  color: var(--gm-white);
  box-shadow: 0 2px 4px var(--gm-glass-black-20);
  border: none;
}

/* Tally — the count beside a task group or column heading (Badge.number with
   variant :late / :today / :later / :total). A circle for one digit, a pill
   from two on; tabular figures so a changing count does not shift the heading. */
.gm-badge-tally {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gm-white);
  flex-shrink: 0;
}

.gm-badge-tally-sm {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
}

.gm-badge-tally-late {
  background: var(--gm-red-600);
}

.gm-badge-tally-today {
  background: var(--gm-amber-300);
  color: var(--gm-amber-900);
}

.gm-badge-tally-later {
  background: var(--gm-gray-600);
}

.gm-badge-tally-total {
  background: var(--gm-glass-white-18);
}

/* Score Badge */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  min-width: 50px;
  box-shadow: 0 2px 4px var(--gm-glass-black-15);
}

/* Stakeholders Badge */
.stakeholders-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--gm-glass-white-20);
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-white);
  white-space: nowrap;
}

/* Products Badge - green like prospects */
.products-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--gm-green-500);
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-white);
  white-space: nowrap;
}

/* Expand Icon */
.expand-icon {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expand-icon.collapsed {
  color: var(--gm-white);
}

.expand-icon.expanded {
  color: var(--gm-white);
}

/* Expanded Content */
.expanded-content {
  padding: 0 20px 20px;
  display: none;
}

.expanded-content.visible {
  display: block;
  animation: slideDown 0.3s ease;
}

.tag-badge {
  padding: 4px 12px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--gm-teal-400) 0%, var(--gm-teal-200) 100%);
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-white);
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--gm-glass-white-15);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-white);
  backdrop-filter: blur(10px);
  text-decoration: none;
}

.badge-pill .bi {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

a.badge-pill:hover {
  background: var(--gm-glass-white-30);
  color: var(--gm-white);
  text-decoration: none;
}

.stakeholder-row.stakeholder-secondary .contact-item i,
.stakeholder-row.stakeholder-secondary .contact-item svg,
.stakeholder-row.stakeholder-secondary .expand-icon {
  color: var(--gm-glass-white-85) !important;
}

.engagement-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  border: 2px solid var(--gm-white);
}

/* Round modifier — perfectly circular badge for avatar overlays */
.gm-badge-round {
  width: 20px;
  height: 20px;
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  font-size: 10px;
}

.stakeholder-expand-btn .expand-icon {
  transition: transform 0.3s ease;
}

.stakeholder-row.expanded .stakeholder-expand-btn .expand-icon {
  transform: rotate(180deg);
  color: var(--gm-glass-white-85) !important;
}

/* EventTypeBadge Atom Styles */
.event-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
}

/* Status badge variants */
.gm-badge-enabled {
  background: var(--gm-green-50);
  color: var(--gm-green-700);
}

.gm-badge-neutral {
  background: var(--gm-gray-100);
  color: var(--gm-gray-500);
}

.gm-badge-revoked {
  background: var(--gm-red-50);
  color: var(--gm-red-600);
}

.gm-badge-expired {
  background: var(--gm-amber-50);
  color: var(--gm-amber-600);
}

.gm-badge-linkedin-active {
  background: var(--gm-green-100);
  color: var(--gm-green-900);
}

/* Region Badge Styles */
.region-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.region-badge-remove {
  background: none;
  border: none;
  color: currentcolor;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.region-badge-remove:hover {
  background-color: var(--gm-glass-black-20);
  opacity: 1;
}

/* Stakeholder count badge */
.qual-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--gm-teal-400);
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-white);
  white-space: nowrap;
}

/* Tag badge variants for action buttons */
.tag-badge-green {
  background: var(--gm-green-300-overlay-20);
  color: var(--gm-green-400);
  text-decoration: none;
}

.tag-badge-green:hover {
  background: var(--gm-green-300-overlay-30);
}

/* Step variant - matches modal header step indicator */
.upcoming-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: var(--gm-green-500-overlay-15);
  color: var(--gm-green-500);
  letter-spacing: 0.02em;
}

/* Role badge styling in table */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 9999px;
}

/* Count pill — 3 numbers: total / in-period / in-selection */
.activity-count-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (width <= 1024px) {
  .score-badge {
    order: 1;
    grid-column: 3;
    grid-row: 2;
  }
}

/* glass_morph/atoms/action_status_button.css */
/* Atom — ActionStatusButton
   Inactive: the icon alone. Active: the icon plus its value in a tinted pill,
   so the bar answers "what is set here" without a hover. Tones colour only the
   active state — an inactive button is never coloured, or four of them would
   compete with the score box beside them. */

.gm-action-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 32px;
  min-width: 32px;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--gm-glass-white-60);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.gm-action-status__icon {
  font-size: 0.9375rem;
  line-height: 1;
  color: inherit;
}

.gm-action-status:hover,
.gm-action-status:focus-visible {
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
}

.gm-action-status:focus-visible {
  outline: 2px solid var(--gm-glass-white-60);
  outline-offset: 1px;
}

.gm-action-status:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Active — the pill. */
.gm-action-status.is-active {
  padding: 0 0.625rem;
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
}

.gm-action-status--positive {
  background: var(--gm-green-500-overlay-20);
  color: var(--gm-white);
}

.gm-action-status--positive .gm-action-status__icon {
  color: var(--gm-green-400);
}

.gm-action-status--negative {
  background: var(--gm-red-overlay-20);
  color: var(--gm-white);
}

.gm-action-status--negative .gm-action-status__icon {
  color: var(--gm-red-400);
}

.gm-action-status--warning {
  background: var(--gm-amber-400-overlay-22);
  color: var(--gm-white);
}

.gm-action-status--warning .gm-action-status__icon {
  color: var(--gm-amber-400);
}

.gm-action-status--success {
  background: var(--gm-green-600);
  color: var(--gm-white);
}

.gm-action-status--success .gm-action-status__icon {
  color: var(--gm-white);
}

/* Muted carries a value nobody set — "not followed". It has to read as an
   answer rather than as a disabled button, so it keeps its hover. */
.gm-action-status--muted {
  background: var(--gm-glass-white-5);
  color: var(--gm-glass-white-60);
}

/* glass_morph/atoms/circle_badge.css */
/* Circular count/indicator badge.
   Shared visual style for compact numeric badges placed inside dark glass
   surfaces (tab counters, frequency indicators, list-row metrics).
   Context-specific overrides (positioning, active state, modifier colors)
   live alongside their owning component. */
.gm-circle-badge,
.tab-badge,
.data-row-grid--prospect .prospect-update-frequency-badge,
.data-row-grid--prospect-with-lead .prospect-update-frequency-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  aspect-ratio: 1;
  border: 1px solid var(--gm-glass-white-15);
  border-radius: 50%;
  background: var(--gm-glass-white-8);
  color: var(--gm-gray-100);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* On the active pill the count flips to solid white, so it stays legible on the
   green the way it does on the glass. Scoped to `.tab-button.active` rather than
   to one page's tab strip: every strip in the app turns its active tab green. */
.tab-button.active .tab-badge {
  border-color: var(--gm-white);
  background: var(--gm-white);
  color: var(--gm-green-700);
}

/* Empty/none state — keeps the circle footprint but mutes the placeholder dash. */
.gm-circle-badge--empty {
  color: var(--gm-gray-400);
  font-weight: 500;
}

/* glass_morph/atoms/input.css */
/* ============================================================================ */
/* == Atom — Input ========================================================== */
/* ============================================================================ */
.select-wrapper {
  position: relative;
}

.select-input, .select-input.select {
  width: 180px;
  padding: 8px 36px 8px 12px;
  background: var(--gm-glass-white-95);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--gm-gray-800);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
}

.select-input:focus {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

/* The Select atom emits `select-sm` for size: :sm, and nothing styled it — the
   parameter has been a no-op everywhere it was used. The toolbar rule below
   already knew what a small select looks like; this makes size: :sm mean that
   without needing a toolbar around it. */
.select.select-sm,
.select-input.select.select-sm {
  height: 34px;
  box-sizing: border-box;
  padding: 0 1.8rem 0 0.75rem;
  line-height: 1.2;
  font-size: 0.875rem;
}

.prospects-toolbar .select-input,
.prospects-toolbar .select-input.select,
.header-filter-bar .select-input,
.header-filter-bar .select-input.select {
  width: auto;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  padding: 0 1.8rem 0 0.75rem;
  line-height: 1.2;
  background-color: var(--gm-glass-white-15);
  border: 1px solid var(--gm-glass-white-30);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gm-white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}

.prospects-toolbar .select-input:hover,
.prospects-toolbar .select-input.select:hover,
.header-filter-bar .select-input:hover,
.header-filter-bar .select-input.select:hover {
  background-color: var(--gm-glass-white-20);
  border-color: var(--gm-glass-white-50);
}

.prospects-toolbar .select-input:focus,
.prospects-toolbar .select-input.select:focus,
.header-filter-bar .select-input:focus,
.header-filter-bar .select-input.select:focus {
  border-color: var(--gm-glass-white-60);
  box-shadow: 0 0 0 2px var(--gm-glass-white-15);
  outline: none;
}

.prospects-toolbar .select-input option,
.prospects-toolbar .select-input.select option,
.header-filter-bar .select-input option,
.header-filter-bar .select-input.select option {
  background: var(--gm-teal-100);
  color: var(--gm-white);
}

.prospects-toolbar .gm-input-white,
.prospects-toolbar .gm-input-white.rounded-2,
.header-filter-bar .gm-input-white,
.header-filter-bar .gm-input-white.rounded-2 {
  background: var(--gm-glass-white-15);
  border: 1px solid var(--gm-glass-white-30);
  border-radius: 99px !important;
  height: 34px;
  padding-left: 2rem !important;
  padding-right: 2.5rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--gm-white);
}

.prospects-toolbar .gm-input-white::placeholder,
.header-filter-bar .gm-input-white::placeholder {
  color: var(--gm-glass-white-70);
}

.prospects-toolbar .gm-input-white:focus,
.header-filter-bar .gm-input-white:focus {
  background: var(--gm-glass-white-20);
  border-color: var(--gm-glass-white-60);
  box-shadow: 0 0 0 2px var(--gm-glass-white-15);
  outline: none;
}

/* Restyle the browser's native type=search clear button to match the custom
   x-circle-fill clear icon used by SearchInput(clearable: true). Mask paints the
   Bootstrap x-circle-fill glyph in a muted toolbar tone. */
.prospects-toolbar .gm-input-white::-webkit-search-cancel-button,
.header-filter-bar .gm-input-white::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  background-color: var(--gm-glass-white-70);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.prospects-toolbar .gm-input-white::-webkit-search-cancel-button:hover,
.header-filter-bar .gm-input-white::-webkit-search-cancel-button:hover {
  background-color: var(--gm-white);
}

/* Suppress the browser's native type=search clear button when the SearchInput
   molecule renders its own custom clear button (clearable: true). Prevents a
   duplicate clear control. */
.gm-search-no-native-clear::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.gm-search-no-native-clear::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.prospects-toolbar .gm-search-icon-pos,
.header-filter-bar .gm-search-icon-pos {
  color: var(--gm-glass-white-70) !important;
}

.prospects-toolbar .button,
.header-filter-bar .button {
  height: 34px;
}

.form-col-half, .form-col-lg {
  flex: 1;
  min-width: 0;
}

.form-col-sm {
  flex: 0 0 140px;
  min-width: 0;
}

@media (width <= 576px) {
  .form-col-sm,
  .form-col-half {
    flex: 1;
  }
}

.label, .form-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-gray-700);
}

.label-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  color: var(--gm-gray-400);
  background-color: var(--gm-gray-100);
  border-radius: 100px;
  vertical-align: middle;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-size: 0.75em;
  font-weight: normal;
  opacity: 0.7;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 16px;
  background: var(--gm-teal-33616f-overlay-7);

  /* 8-digit hex with alpha — leave as literal */
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  color: var(--gm-gray-900);
  font-size: 15px;
  font-family: Figtree, sans-serif;
  transition: all 0.2s ease;
}

.select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

/* When used inside a flex row, let flex control the width instead of 100% */
.input.flex-grow-1,
.textarea.flex-grow-1 {
  width: auto;
}

.input:focus,
.textarea:focus,
/* background-color, not the background shorthand: the shorthand also reset the
   chevron image, so a focused select lost its arrow */
.select:focus {
  outline: none;
  border-color: var(--gm-teal-200);

  /* ≈ teal-200 (var(--gm-teal-200)) — close enough, leave as is */
  background-color: var(--gm-white);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--gm-gray-500);
}

/* Input size: :sm and :lg (the Input atom emits input-sm / input-lg, as Select
   does select-sm / select-lg). :md is the rule above. */
.input.input-sm {
  height: 34px;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border-radius: var(--gm-radius-sm);
  font-size: 0.875rem;
}

.input.input-lg {
  padding: 16px 20px;
  border-radius: var(--gm-radius-lg);
  font-size: 1.0625rem;
}

/* A disabled field reads as switched off; a read-only one as a value shown,
   not one to type into. */
.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-500);
  cursor: not-allowed;
}

.input[readonly],
.textarea[readonly] {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-700);
  cursor: default;
}

.input.is-valid,
.textarea.is-valid,
.select.is-valid {
  border-color: var(--gm-green-700);
}

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

.input.is-invalid,
.textarea.is-invalid,
.select.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--gm-red-500) !important;
  animation: shake 0.3s ease;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Textarea: position icon at top-right */
.textarea.is-invalid,
textarea.is-invalid {
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

/* Select: adjust for dropdown arrow */
.select.is-invalid,
select.is-invalid {
  padding-right: calc(3em + 0.75rem);
  background-position: right calc(1.5em + 0.1875rem) center;
}

.input-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gm-gray-500);
}

.select[multiple] {
  min-height: 120px;
  padding: 8px 12px;
  background-image: none;
}

.select[multiple] option,
.form-select[multiple] option,
.form-select[size] option {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--gm-gray-900);
}

.select[multiple] option:checked,
.form-select[multiple] option:checked,
.form-select[size] option:checked {
  background-color: var(--gm-teal-200);
  color: var(--gm-white);
}

.select[multiple]::-webkit-scrollbar {
  width: 8px;
}

.select[multiple]::-webkit-scrollbar-track {
  background: var(--gm-gray-100);
  border-radius: 4px;
}

.select[multiple]::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
  border-radius: 4px;
}

.select[multiple]::-webkit-scrollbar-thumb:hover {
  background: var(--gm-gray-400);
}

/* Selectable Radio Cards (frequency step, etc.) */
.selectable-card--selected {
  border-color: var(--bs-primary);
  background-color: var(--gm-bs-primary-overlay-6);
  box-shadow: 0 0 0 1px var(--bs-primary);
}

/* Form validation error messages - Bootstrap 5 standard */
.invalid-feedback {
  color: var(--gm-red-500);
  font-size: 0.875rem;
  margin-top: -4px;
  margin-bottom: 4px;
  min-height: 1.25rem;
  visibility: hidden;
  display: block;
}

.invalid-feedback.show {
  visibility: visible;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.invalid-feedback.show::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

.invalid-feedback.has-loading {
  visibility: visible;
  color: var(--gm-blue-500);

  /* Blue for loading */
}

.invalid-feedback.has-success {
  visibility: visible;
  color: var(--gm-green-500);

  /* Green for success */
}

.form-input-glass {
  background: var(--gm-glass-black-30);

  /* dark bg — no matching token, keep composite */
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--gm-glass-white-10);
  color: var(--gm-white);
  font-size: 14px;
  width: 100%;
  transition: all 0.2s;
}

/* Form Toggle Switch backgrounds */
.form-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  width: 44px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: background-color 0.2s ease;
}

.form-toggle-track-off {
  background: var(--gm-glass-white-30);
}

.form-toggle-track-on {
  background: var(--gm-green-500);
}

.form-toggle-knob {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  height: 20px;
  width: 20px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background-color: var(--gm-white);
  box-shadow: 0 1px 3px var(--gm-glass-black-20);
  transition: transform 0.2s ease;
}

.form-toggle-knob-on {
  transform: translate(20px, -50%);
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .password-input {
  flex: 1;
  padding-right: 2.75rem;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--gm-teal-33616f-overlay-7);
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  color: var(--gm-gray-900);
  font-size: 15px;
  font-family: Figtree, sans-serif;
  transition: all 0.2s ease;
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.form-select[multiple],
.form-select[size] {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  background: var(--gm-teal-33616f-overlay-7);
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  color: var(--gm-gray-900);
  font-size: 15px;
  font-family: Figtree, sans-serif;
  transition: all 0.2s ease;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  min-height: 100px;
  max-height: 100px;
  padding: 8px 12px;
  background-image: none;
}

.form-select[multiple]::-webkit-scrollbar,
.form-select[size]::-webkit-scrollbar {
  width: 8px;
}

.form-select[multiple]::-webkit-scrollbar-track,
.form-select[size]::-webkit-scrollbar-track {
  background: var(--gm-gray-100);
  border-radius: 4px;
}

.form-select[multiple]::-webkit-scrollbar-thumb,
.form-select[size]::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
  border-radius: 4px;
}

.form-select[multiple]::-webkit-scrollbar-thumb:hover,
.form-select[size]::-webkit-scrollbar-thumb:hover {
  background: var(--gm-gray-400);
}

/* Hierarchical select styling */
.form-select option:disabled {
  font-weight: 600;
  color: var(--gm-gray-700);
  background-color: var(--gm-gray-100);
}

.gm-input-with-icon {
  padding-left: 36px;
}

/* Select field style */
.gm-select-field {
  padding: 0.75rem;
  background-color: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
  width: 100%;
}

/* Select background: white bg + gray-300 border + padding */
.gm-select-bg {
  padding: 0.75rem;
  background-color: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
}

/* Checkbox alignment container (flex-centered, 24px height) */
.gm-checkbox-align {
  display: flex;
  align-items: center;
  height: 24px;
}

.gm-input-white {
  background-color: var(--gm-white);
  color: var(--gm-gray-900);
  border: 1px solid var(--gm-gray-300);
  padding-block: 8px;
  font-size: 14px;
}

.gm-input-white::placeholder {
  color: var(--gm-gray-400);
}

.gm-input-white:focus {
  background-color: var(--gm-white);
  color: var(--gm-gray-900);
  border-color: var(--gm-teal-300);
  box-shadow: 0 0 0 0.2rem var(--gm-teal-overlay-15);
}

.gm-input-group-stretch {
  display: flex;
  align-items: stretch;
}

.gm-subdomain-input {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-100);
  flex: 1;
  min-width: 0;
}

.gm-subdomain-suffix {
  background: var(--gm-gray-200);
  border: 1px solid var(--gm-gray-100);
  border-left: none;
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

@media (width <= 1024px) {
  .prospects-toolbar .form-control,
  .header-filter-bar .form-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  .select-input {
    width: 100%;
  }
}

@media (width <= 640px) {
  .prospects-toolbar::-webkit-scrollbar {
    display: none;
  }

  .prospects-toolbar .navbar-controls {
    gap: 6px;
  }

  .prospects-toolbar .checkbox-select-panel:not(.d-none)::before,
  .prospects-toolbar .prospect-filter-menu__panel:not(.d-none)::before,
  .prospects-toolbar .prospects-sort-filter[open] .prospects-sort-filter__panel::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--gm-m-track);
    transform: translateX(-50%);
  }

  .prospects-toolbar:has(.checkbox-select-panel:not(.d-none))::before,
  .prospects-toolbar:has(.prospect-filter-menu__panel:not(.d-none))::before,
  .prospects-toolbar:has(.prospects-sort-filter[open])::before {
    content: "";
    position: fixed;
    z-index: 1040;
    inset: 0;
    background: var(--gm-m-scrim);
  }
}

/* glass_morph/atoms/range_slider.css */
/* GlassMorph Range Slider Atom */

.gm-range-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-grow: 1;
}

.gm-range-slider-value {
  min-width: 3rem;
  text-align: right;
}

/* ── Track ─────────────────────────────────── */

.gm-range-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--gm-glass-white-15);
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gm-range-slider:hover {
  background: var(--gm-glass-white-25);
}

.gm-range-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WebKit (Chrome, Safari, Edge) */
.gm-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gm-primary, var(--gm-blue-0b6ffd));
  border: 2px solid var(--gm-glass-white-30);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gm-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px var(--gm-blue-0b6ffd-overlay-40);
}

.gm-range-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--gm-blue-0b6ffd-overlay-25);
}

/* Firefox */
.gm-range-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--gm-glass-white-15);
}

.gm-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gm-primary, var(--gm-blue-0b6ffd));
  border: 2px solid var(--gm-glass-white-30);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gm-range-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px var(--gm-blue-0b6ffd-overlay-40);
}

/* glass_morph/atoms/segmented_slider.css */
/* Segmented threshold slider — shared by the readiness-stage and
   relevance-threshold sliders. Structure + colored bands; consumers pick
   which segment keys to render. */

.gm-segmented-slider-form {
  display: flex;
  align-items: center;
  margin: 0;
}

.gm-segmented-slider {
  display: flex;
  align-items: center;
  width: 10.25rem;
  height: 32px;
}

.gm-segmented-slider__control {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
}

.gm-segmented-slider__input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.gm-segmented-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  height: 16px;
  overflow: hidden;
  border: 3px solid var(--gm-teal-300);
  border-radius: 999px;
  transform: translateY(-50%);
}

.gm-segmented-slider__seg {
  flex: 1 1 0;
}

/* Ecosystem depth bands (level 1 → 4). Deepening teal signals more hops; the
   number of bands is dynamic per graph (how many levels the store reaches). */
.gm-segmented-slider__seg--level_1 {
  background: var(--gm-teal-200);
}

.gm-segmented-slider__seg--level_2 {
  background: var(--gm-teal-400);
}

.gm-segmented-slider__seg--level_3 {
  background: var(--gm-teal-500);
}

.gm-segmented-slider__seg--level_4 {
  background: var(--gm-teal-600);
}

.gm-segmented-slider__seg--level_5 {
  background: var(--gm-teal-700);
}

.gm-segmented-slider__thumb {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gm-white);
  border-radius: 999px;
  background: var(--gm-white);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gm-segmented-slider__input:focus-visible ~ .gm-segmented-slider__thumb {
  outline: 2px solid var(--gm-white);
  outline-offset: 2px;
}

.gm-segmented-slider__control--index-0 .gm-segmented-slider__thumb {
  left: 7px;
}

.gm-segmented-slider__control--index-1 .gm-segmented-slider__thumb {
  left: calc(7px + ((100% - 14px) * 0.3333));
}

.gm-segmented-slider__control--index-2 .gm-segmented-slider__thumb {
  left: calc(7px + ((100% - 14px) * 0.6667));
}

.gm-segmented-slider__control--index-3 .gm-segmented-slider__thumb {
  left: calc(100% - 7px);
}

/* 3-stop variant: thumb sits at 0 / 50% / 100% instead of the 4-stop factors. */
.gm-segmented-slider--3stop .gm-segmented-slider__control--index-1 .gm-segmented-slider__thumb {
  left: 50%;
}

.gm-segmented-slider--3stop .gm-segmented-slider__control--index-2 .gm-segmented-slider__thumb {
  left: calc(100% - 7px);
}

/* 2-stop variant: thumb sits at 0 / 100% (left edge, right edge). */
.gm-segmented-slider--2stop .gm-segmented-slider__control--index-1 .gm-segmented-slider__thumb {
  left: calc(100% - 7px);
}

/* 5-stop variant: quarter steps instead of the 4-stop thirds. */
.gm-segmented-slider--5stop .gm-segmented-slider__control--index-1 .gm-segmented-slider__thumb {
  left: calc(7px + ((100% - 14px) * 0.25));
}

.gm-segmented-slider--5stop .gm-segmented-slider__control--index-2 .gm-segmented-slider__thumb {
  left: 50%;
}

.gm-segmented-slider--5stop .gm-segmented-slider__control--index-3 .gm-segmented-slider__thumb {
  left: calc(7px + ((100% - 14px) * 0.75));
}

.gm-segmented-slider--5stop .gm-segmented-slider__control--index-4 .gm-segmented-slider__thumb {
  left: calc(100% - 7px);
}

/* Fluid variant: fills the column it sits in instead of the fixed 10.25rem
   width, for form layouts where the slider spans a full field row. */
.gm-segmented-slider--fluid {
  width: 100%;
  max-width: 24rem;
}

/* glass_morph/atoms/relevance_tag.css */
/* Relevance tag — small pill on a timeline event showing its relevance score,
   tinted with the relevance slider's band color (blue/slate/orange/red). */

.gm-relevance-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gm-white);
}

.gm-relevance-tag__score {
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.gm-relevance-tag--all {
  background: var(--gm-blue-500);
}

.gm-relevance-tag--some {
  background: var(--gm-slate-500);
}

.gm-relevance-tag--relevant {
  background: var(--gm-orange-400);
}

.gm-relevance-tag--top {
  background: var(--gm-red-500);
}

/* glass_morph/atoms/selectable_card.css */
/* Selectable card — radio-behaviour tile used by SelectableCardGrid. The
   radio input itself is visually hidden; the whole tile is the hit area. */

.gm-selectable-card {
  position: relative;
  display: flex;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--gm-gray-200);
  border-radius: var(--gm-radius-md);
  cursor: pointer;
  transition:
    border-color 200ms ease-out,
    box-shadow 200ms ease-out,
    transform 200ms ease-out;
}

.gm-selectable-card:hover {
  border-color: var(--gm-teal-300);
  box-shadow: var(--gm-shadow-md);
  transform: translateY(-2px);
}

.gm-selectable-card--selected {
  border-color: var(--gm-teal-500);
  box-shadow: 0 0 0 2px var(--gm-teal-overlay-20);
}

.gm-selectable-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.gm-selectable-card__input:focus-visible + .gm-selectable-card__content {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 4px;
}

.gm-selectable-card__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gm-selectable-card__icon {
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gm-selectable-card {
    transition: none;
  }

  .gm-selectable-card:hover {
    transform: none;
  }
}

/* glass_morph/atoms/tri_state_chip.css */
/* Tri-state chip — pill button that cycles through a fixed state list. The
   first state is always the neutral "off" one; the later states carry the
   semantic tint (counts/watch = positive, never/alert = alerting). */

.gm-tri-state-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--gm-gray-300);
  border-radius: 999px;
  background: transparent;
  color: var(--gm-ctx-text-secondary);
  cursor: pointer;
  transition:
    background-color 200ms ease-out,
    border-color 200ms ease-out,
    color 200ms ease-out;
}

.gm-tri-state-chip:hover {
  border-color: var(--gm-teal-300);
}

.gm-tri-state-chip:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 2px;
}

.gm-tri-state-chip__label {
  line-height: 1.2;
}

/* Neutral / not considered */
.gm-tri-state-chip--ignored {
  border-style: dashed;
}

/* Positive states — the criterion is taken into account */
.gm-tri-state-chip--counts,
.gm-tri-state-chip--watch {
  border-color: var(--gm-green-500);
  background: var(--gm-green-500-overlay-12);
  color: var(--gm-green-900);
}

/* Alerting states — the criterion knocks out or raises an alarm */
.gm-tri-state-chip--never {
  border-color: var(--gm-red-500);
  background: var(--gm-red-500-overlay-12);
  color: var(--gm-red-700);
}

.gm-tri-state-chip--alert {
  border-color: var(--gm-amber-500);
  background: var(--gm-amber-overlay-12);
  color: var(--gm-amber-800);
}

@media (prefers-reduced-motion: reduce) {
  .gm-tri-state-chip {
    transition: none;
  }
}

/* glass_morph/atoms/checkbox.css */
/* ============================================================================ */
/* == Atom — Checkbox ======================================================= */
/* ============================================================================ */
/* Checkbox Atom Styles */
.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--bs-primary);
  cursor: pointer;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-label-text {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* glass_morph/atoms/heading.css */
/* ============================================================================ */
/* == Atom — Heading ======================================================== */
/* ============================================================================ */
.heading {
  color: var(--gm-ctx-text-primary, var(--gm-white));
}

.heading-dark {
  color: var(--gm-gray-800);
  font-size: 1.4rem;
}

.heading-muted {
  color: var(--gm-glass-white-70);
}

.heading.mb-2.fw-bold {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 400 !important;
  font-size: 26px;
  color: var(--gm-white);
  letter-spacing: -0.02em;
}

/* glass_morph/atoms/text.css */
/* ============================================================================ */
/* == Atom — Text =========================================================== */
/* ============================================================================ */
.data-row-grid.data-row-grid--assistant .description-text {
  opacity: 0.75;
  font-size: 14px;
}

/* Company Name */
.row-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gm-white);
  margin-right: 30px;
}

/* Description Text */
.description-text.product {
  margin-left: 12px;
  color: var(--gm-gray-300);
  font-weight: 500;
}

.row-title-header {
  font-size: 32px;
  font-weight: 700;
  color: var(--gm-white);
  letter-spacing: -0.02em;
  margin: 0;
}

/* DescriptionText Atom Styles */
.description-text {
  font-size: 0.875rem;
  color: var(--gm-gray-200);
  line-height: 1.5;
}

@media (width <= 1899px) {
  .data-row-grid.data-row-grid--products-list .description-text {
    display: none;
  }

  .description-text.product {
    display: none;
  }
}

.data-row-grid .row-title {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  cursor: pointer;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  color: var(--gm-white);
  margin-right: 30px;
  min-width: 240px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Company index: full name visible, no truncation */
.data-row-grid.data-row-grid--company .row-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paragraph-light {
  color: var(--gm-glass-white-70);
}

.paragraph-dark {
  color: var(--gm-gray-500);
}

.paragraph-strong-dark {
  color: var(--gm-gray-800);
}

.paragraph-xs {
  font-size: 11px;
}

.paragraph-sm {
  font-size: 13px;
}

.paragraph-md {
  font-size: 14px;
}

.paragraph-lg {
  font-size: 16px;
}

.paragraph-muted {
  color: var(--gm-glass-white-70);
}

.paragraph-muted-dark {
  color: var(--gm-gray-500);
}

/* Light surface opt-in: containers with .gm-surface-light flip paragraph colors */
.gm-surface-light .paragraph-muted {
  color: var(--gm-gray-500);
}

.text-primary-dark {
  color: var(--gm-gray-800);
}

/* Text utilities — resolve to correct color based on surface context */
.gm-text-primary {
  color: var(--gm-ctx-text-primary, var(--gm-white)) !important;
}

.gm-text-secondary {
  color: var(--gm-ctx-text-secondary, var(--gm-gray-300)) !important;
}

.gm-text-muted {
  color: var(--gm-ctx-text-muted, var(--gm-gray-400)) !important;
}

.gm-text-link {
  color: var(--gm-ctx-text-link, var(--gm-blue-500)) !important;
}

/* Inline citation reference link — inherits surrounding text color */
.citation-ref {
  color: inherit;
  text-decoration: underline;
}

/* Preformatted text */
.gm-pre-wrap {
  white-space: pre-wrap;
}

/* --- Text color utilities ------------------------------------------------ */
.gm-text-gray-900 {
  color: var(--gm-gray-900) !important;
}

.gm-text-blue-primary {
  color: var(--gm-blue-primary) !important;
}

.gm-text-blue-500 {
  color: var(--gm-blue-500) !important;
}

.gm-text-blue-800 {
  color: var(--gm-blue-800) !important;
}

.gm-text-red-500 {
  color: var(--gm-red-500) !important;
}

.gm-text-red-600 {
  color: var(--gm-red-600) !important;
}

.gm-text-red-700 {
  color: var(--gm-red-700) !important;
}

.gm-text-red-800 {
  color: var(--gm-red-700) !important;
}

.gm-text-red-900 {
  color: var(--gm-red-700) !important;
}

.gm-text-green-300 {
  color: var(--gm-green-300) !important;
}

.gm-text-green-500 {
  color: var(--gm-green-500) !important;
}

.gm-text-green-800 {
  color: var(--gm-green-700) !important;
}

.gm-text-amber-600 {
  color: var(--gm-amber-600) !important;
}

.gm-text-amber-800 {
  color: var(--gm-amber-800) !important;
}

.gm-text-amber-900 {
  color: var(--gm-amber-900) !important;
}

.gm-text-teal-400 {
  color: var(--gm-teal-400) !important;
}

.gm-text-teal-600b {
  color: var(--gm-teal-600) !important;
}

.gm-text-sky-700 {
  color: var(--gm-sky-700) !important;
}

.gm-text-slate-800 {
  color: var(--gm-slate-800) !important;
}

.gm-text-indigo-400 {
  color: var(--gm-indigo-400) !important;
}

.gm-text-white {
  color: var(--gm-white) !important;
}

.gm-text-glass-white-60 {
  color: var(--gm-glass-white-60) !important;
}

.gm-text-glass-white-70 {
  color: var(--gm-glass-white-70) !important;
}

/* --- Typography utilities ------------------------------------------------ */
.gm-letter-spacing-xs {
  letter-spacing: 0.02em;
}

.gm-letter-spacing-sm {
  letter-spacing: 0.03em;
}

.gm-letter-spacing-lg {
  letter-spacing: 0.05em;
}

/* Text colors (extended) */
.gm-text-green-700 {
  color: var(--gm-green-700) !important;
}

.gm-text-green-900 {
  color: var(--gm-green-900) !important;
}

/* Green-tw-500 text (Tailwind green) */
.gm-text-glass-white-85 {
  color: var(--gm-glass-white-85) !important;
}

.gm-text-inherit {
  color: inherit !important;
}

.gm-text-yellow-400 {
  color: var(--gm-yellow-500) !important;
}

.gm-text-yellow-500 {
  color: var(--gm-yellow-500) !important;
}

.gm-text-yellow-800 {
  color: var(--gm-yellow-800) !important;
}

.gm-text-shadow-sm {
  text-shadow: 0 1px 3px var(--gm-glass-black-30);
}

.gm-text-gray-500 {
  color: var(--gm-gray-500) !important;
}

/* glass_morph/atoms/link.css */
/* ============================================================================ */
/* == Atom — Link =========================================================== */
/* ============================================================================ */
.gm-link-underline {
  text-decoration: underline;
  cursor: pointer;
}


/* glass_morph/atoms/separator.css */
/* ============================================================================ */
/* == Atom — Separator ====================================================== */
/* ============================================================================ */
/* Separator */
.separator {
  width: 100%;
  border-top: 2px dashed var(--gm-teal-800);
  flex-shrink: 0;
}

.gm-separator-top {
  border-top: 1px solid var(--gm-ctx-separator, var(--gm-glass-black-8)) !important;
}

.gm-separator-bottom {
  border-bottom: 1px solid var(--gm-ctx-separator, var(--gm-glass-black-8)) !important;
}

/* Divider */
.gm-divider {
  border-top: 1px solid var(--gm-gray-200);
  margin: 1.25rem 0;
}

.gm-border-bottom-2 {
  border-bottom: 2px solid var(--gm-ctx-separator, var(--gm-glass-black-6)) !important;
}


/* glass_morph/atoms/spinner.css */
/* ============================================================================
   == Atom — RadarLoader

   The radar itself is drawn by lib/ui/radar/zeef.js — the delivered laadanimatie,
   line for line. Nothing here decides how it moves; this file only gives it a
   box to fill, the colour it reads out of the cascade, and the caption.
   ============================================================================ */

.radar-loader {
  /* Two looks, and the surface picks one: primary teal on a light tile, white on a
     dark panel. Everything the radar draws carries it — rings, prospects, scan,
     beeldmerk, and a prospect on its way in alike. A caught one is told apart by
     how it moves, not by turning another colour.

     No call site chooses. The driver (lib/ui/radar/mount.js) walks up to the first
     parent that actually fills and reads its luminance, because a class-based
     context token only flips on the surfaces context.css knows by name — and the
     prospects empty state is a white tile it does not know.

     To pin one anyway: --radar-accent for the rings, the prospects and the scan,
     --radar-mark for the beeldmerk, --radar-ink for a prospect being taken in. */
  --radar-on-light: var(--gm-teal-500);
  --radar-on-dark: var(--gm-white);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto;
}

/* The two small sizes sit inline, in buttons and input rows. */
.radar-xs,
.radar-sm {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}

.radar-loader__stage {
  position: relative;
  flex: none;
  aspect-ratio: 1 / 1;
}

.radar-xs .radar-loader__stage {
  width: 16px;
  height: 16px;
}

.radar-sm .radar-loader__stage {
  width: 32px;
  height: 32px;
}

.radar-md .radar-loader__stage {
  width: 64px;
  height: 64px;
}

.radar-lg .radar-loader__stage {
  width: 128px;
  height: 128px;
}

.radar-xl .radar-loader__stage {
  width: 256px;
  height: 256px;
}

.radar-full, .radar-full .radar-loader__stage {
  width: 100%;
  height: 100%;
}

.radar-loader__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.radar-loader__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gm-ctx-text-muted);
  letter-spacing: 0.01em;
  text-align: center;
}

/* glass_morph/atoms/progress_bar.css */
/* ============================================================================ */
/* == Atom — ProgressBar ==================================================== */
/* ============================================================================ */
/* Progress bar base */
.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--gm-glass-black-10);
  border-radius: 4px;
  overflow: hidden;
}

/* Flips fill anchor to the right edge — used by the prospect-cost-calculator
   to render overflow (spend > balance) as a red bar growing inward from the right. */
.progress-bar-track.is-overflow {
  display: flex;
  justify-content: flex-end;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-blue {
  background: linear-gradient(90deg, var(--gm-sky-700), var(--gm-teal-500)); /* sky — not in palette */
}

.progress-bar-green {
  background: linear-gradient(90deg, var(--gm-green-500), var(--gm-green-300));
}

.progress-bar-orange {
  background: linear-gradient(90deg, var(--gm-yellow-500), var(--gm-amber-500)); /* amber-400 keep literal */
}

.progress-bar-yellow {
  background: linear-gradient(90deg, var(--gm-amber-600), var(--gm-yellow-500));
}

.progress-bar-red {
  background: linear-gradient(90deg, var(--gm-red-500), var(--gm-red-500)); /* red-400 keep literal */
}

/* Progress label for light backgrounds */
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-gray-800);
}

.progress-label-percentage {
  font-size: 14px;
  font-weight: 600;
}

.progress-label-percentage-blue {
  color: var(--gm-teal-500);
}

.progress-label-percentage-green {
  color: var(--gm-green-500);
}

.progress-label-percentage-orange {
  color: var(--gm-amber-500);
}

.progress-label-percentage-yellow {
  color: var(--gm-amber-600);
}

.progress-label-percentage-purple {
  color: var(--gm-purple-500);
}

.progress-label-percentage-red {
  color: var(--gm-red-500);
}

.progress-bar-wrapper {
  margin-bottom: 1rem;
}

/* glass_morph/atoms/distribution_bar.css */
/* ============================================================================ */

/* == Atom — DistributionBar ================================================ */

/* ============================================================================ */

/* One total split into proportional segments. Sized to sit inside a table cell
   next to the number it divides, so it never sets the row height. */
.gm-distribution-bar {
  display: inline-flex;
  width: 120px;
  max-width: 100%;
  height: 8px;
  overflow: hidden;
  vertical-align: middle;
  background: var(--gm-ctx-bg-field);
  border-radius: 4px;
}

.gm-distribution-bar__segment {
  display: block;
  height: 100%;
  min-width: 2px;
}

/* Same series tokens the trend chart reads, so a colour means the same source
   of spend in a table cell as it does in a bar. */
.gm-distribution-bar__segment--llm {
  background: var(--gm-series-llm);
}

.gm-distribution-bar__segment--search {
  background: var(--gm-series-search);
}

.gm-distribution-bar__segment--enrichment {
  background: var(--gm-series-enrichment);
}

.gm-distribution-bar__segment--other {
  background: var(--gm-series-other);
}

/* -- Ranked palette ----------------------------------------------------------
   Colour by position, not by source: the largest share takes the accent and
   the ramp fades from there, with "other" last. Full width, with a legend. */
.gm-distribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.gm-distribution-bar.gm-distribution-bar--ranked {
  display: flex;
  gap: 2px;
  width: 100%;
  background: var(--gm-gray-100);
}

.gm-distribution-bar--ranked .gm-distribution-bar__segment {
  min-width: 3px;
  transition: opacity 0.15s ease;
}

.gm-distribution-bar__segment--rank-0,
.gm-distribution__swatch--rank-0 {
  background: var(--gm-teal-0f6f93);
}

.gm-distribution-bar__segment--rank-1,
.gm-distribution__swatch--rank-1 {
  background: var(--gm-level-count);
}

.gm-distribution-bar__segment--rank-2,
.gm-distribution__swatch--rank-2 {
  background: var(--gm-teal-300);
}

.gm-distribution-bar__segment--rank-3,
.gm-distribution__swatch--rank-3 {
  background: var(--gm-ice-500);
}

.gm-distribution-bar__segment--rank-other,
.gm-distribution__swatch--rank-other {
  background: var(--gm-teal-c9d8de);
}

.gm-distribution-bar__segment.is-dimmed {
  opacity: 0.35;
}

.gm-distribution__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.gm-distribution__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 6px;
  font-size: 12px;
  color: var(--gm-gray-700);
  text-decoration: none;
  border-radius: 11px;
  transition: background 0.15s ease;
}

a.gm-distribution__item:hover,
a.gm-distribution__item:focus-visible {
  color: var(--gm-gray-900);
  background: var(--gm-gray-100);
}

a.gm-distribution__item:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 1px;
}

.gm-distribution__item.is-active {
  color: var(--gm-gray-900);
  background: var(--gm-teal-200-overlay-12);
}

.gm-distribution__item b {
  font-weight: 600;
  color: var(--gm-gray-900);
  font-variant-numeric: tabular-nums;
}

.gm-distribution__swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

/* glass_morph/atoms/overrun_bar.css */
/* ============================================================================ */

/* == Atom — OverrunBar ===================================================== */

/* ============================================================================ */

/* A window and the time past it: muted for the window, amber for the overrun.
   The window segment takes its colour from the muted text token at reduced
   opacity, so it reads as "the part that was fine" without a token of its own. */
.gm-overrun-bar {
  display: block;
  font-size: 10.5px;
  line-height: 1.4;
}

.gm-overrun-bar__track {
  display: flex;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
}

.gm-overrun-bar__window {
  display: block;
  flex-shrink: 0;
  background: var(--gm-ctx-text-muted);
  opacity: 0.45;
}

.gm-overrun-bar__overrun {
  display: block;
  flex: 1;
  background: var(--gm-amber-400);
}

.gm-overrun-bar__scale {
  display: flex;
  margin-top: 5px;
  color: var(--gm-ctx-text-muted);
}

.gm-overrun-bar__part {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
}

.gm-overrun-bar__part--overrun {
  flex: 1;
  flex-shrink: 1;
  color: var(--gm-amber-200);
}

.gm-overrun-bar__ends {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.gm-overrun-bar__now {
  color: var(--gm-ctx-text-muted);
  white-space: nowrap;
}

.gm-overrun-bar__caption {
  opacity: 0.8;
}

/* glass_morph/atoms/signed_amount.css */
/* ============================================================================ */

/* == Atom — SignedAmount =================================================== */

/* ============================================================================ */

/* A signed token amount. Tabular figures keep a column of amounts aligned; a
   spend keeps the text colour (spending is not an error, so never red). */
.gm-sa {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gm-sa--sm {
  font-size: 13px;
}

.gm-sa--md {
  font-size: 14.5px;
}

.gm-sa--lg {
  font-size: 20px;
}

.gm-sa--xl {
  font-size: 28px;
}

.gm-sa--spend {
  color: inherit;
}

.gm-sa--credit {
  color: var(--gm-green-800);
}

.gm-sa--expiry {
  color: var(--gm-amber-800);
}

.gm-sa--neutral {
  color: inherit;
  opacity: 0.7;
}

.gm-sa__unit {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.7;
}

/* glass_morph/atoms/trend_line_chart.css */
/* ============================================================================ */

/* == Atom — TrendLineChart ================================================= */

/* ============================================================================ */

/* One series over time: a 2px line over a soft area, anchored at zero, with a
   recessive grid. The colours are the accent; text stays in text tokens. */
.gm-trend {
  --gm-trend-axis-width: 56px;

  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gm-trend__plot {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--gm-trend-axis-width) minmax(0, 1fr);
  height: 180px;
}

.gm-trend__axis {
  position: relative;
}

.gm-trend__tick {
  position: absolute;
  right: 10px;
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  color: var(--gm-gray-500);
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
}

.gm-trend__canvas {
  position: relative;
  min-width: 0;
}

/* Out of flow, so the viewBox's aspect ratio never sets the plot's height. */
.gm-trend__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gm-trend__grid {
  stroke: var(--gm-gray-200);
  stroke-width: 1;
}

.gm-trend__area {
  fill: var(--gm-teal-overlay-10);
}

.gm-trend__line {
  fill: none;
  stroke: var(--gm-teal-500);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Hover columns: each answers for the point at its centre. */
.gm-trend__hits {
  position: absolute;
  inset: 0;
}

.gm-trend__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: crosshair;
}

.gm-trend__hit::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  content: "";
  background: var(--gm-gray-300);
  opacity: 0;
}

.gm-trend__hit::after {
  position: absolute;
  top: var(--y);
  left: 50%;
  width: 9px;
  height: 9px;
  content: "";
  background: var(--gm-teal-500);
  border: 2px solid var(--gm-white);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.gm-trend__hit:hover::before,
.gm-trend__hit:hover::after {
  opacity: 1;
}

.gm-trend__x {
  position: relative;
  height: 14px;
  margin-left: var(--gm-trend-axis-width);
}

.gm-trend__x-label {
  position: absolute;
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--gm-gray-500);
  transform: translateX(-50%);
}

.gm-trend__x-label:first-child {
  transform: none;
}

.gm-trend__x-label:last-child {
  transform: translateX(-100%);
}

/* -- Bars: an amount per point, each bar its own hit target ------------------- */
.gm-trend__bar {
  position: absolute;
  top: var(--y);
  right: 15%;
  bottom: 0;
  left: 15%;
  background: var(--gm-teal-500);
  border-radius: 4px 4px 0 0;
  transition: background 0.15s ease;
}

.gm-trend--bars .gm-trend__hit {
  cursor: default;
}

.gm-trend--bars .gm-trend__hit::before,
.gm-trend--bars .gm-trend__hit::after {
  display: none;
}

.gm-trend--bars .gm-trend__hit:hover .gm-trend__bar {
  background: var(--gm-teal-0a6f93);
}

/* glass_morph/atoms/flex.css */
/* ============================================================================ */
/* == Atom — FlexRow / FlexColumn =========================================== */
/* ============================================================================ */
/* Base flex-row */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Base flex-column */
.flex-column {
  display: flex;
  flex-direction: column;
}

.gm-align-self-start {
  align-self: flex-start;
}

.gm-align-self-end {
  align-self: flex-end;
}

/* Flex column fill (flex: 1, min-width: 0, column layout) */
.gm-flex-col-fill {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}


/* glass_morph/atoms/grid.css */
/* ============================================================================ */
/* == Atom — Grid =========================================================== */
/* ============================================================================ */
.gm-auto-grid-340 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}


/* glass_morph/atoms/icon_container.css */
/* ============================================================================ */
/* == Atom — IconContainer ================================================== */
/* ============================================================================ */
.globe-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.section-icon {
  font-size: 16px;
  color: currentcolor;
}

/* Common component patterns */
/* Icon circle in rich stat header */
.gm-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Icon tint backgrounds use ~12% opacity for visible contrast on white surfaces.
   Icon foreground colors use -700/-800 shades for WCAG AA contrast (≥4.5:1). */
.gm-stat-icon-green {
  background: var(--gm-green-700-overlay-12);
  color: var(--gm-green-700);

  /* green-700 */
}

.gm-stat-icon-blue {
  background: var(--gm-sky-700-overlay-12);
  color: var(--gm-sky-700);

  /* sky-700 */
}

.gm-stat-icon-purple {
  background: var(--gm-violet-700-overlay-12);
  color: var(--gm-violet-700);

  /* violet-700 */
}

.gm-stat-icon-amber {
  background: var(--gm-amber-overlay-12);
  color: var(--gm-amber-600);

  /* amber-700 */
}

.gm-stat-icon-red {
  background: var(--gm-red-600-overlay-12);
  color: var(--gm-red-600);

  /* red-600 */
}

.gm-stat-icon-slate {
  background: var(--gm-gray-500-overlay-12);
  color: var(--gm-gray-700);

  /* gray-700 */
}

.icon-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.icon-container-bg-light {
  background: var(--gm-glass-white-10);
}

.icon-container-bg-gradient {
  background: linear-gradient(135deg, var(--gm-teal-346f82-overlay-30), var(--gm-teal-200-overlay-10));
}

/* Icon box containers */
div.gm-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

div.gm-icon-box::before,
div.gm-icon-box-sm::before,
div.gm-icon-box-lg::before,
div.gm-icon-box-64::before,
div.gm-icon-box-48::before,
div.gm-icon-box-36::before {
  content: none;
}

div.gm-icon-box-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 32px;
}

div.gm-icon-box-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* A page's single status icon, e.g. the unsubscribe result pages */
div.gm-icon-box-64 {
  width: 64px;
  height: 64px;
  border-radius: var(--gm-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gm-icon-circle-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gm-icon-circle-xs {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Size utilities ------------------------------------------------------ */
.gm-icon-box-48 {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
}

/* Provider icon (48x48 with bg) */
.gm-provider-icon {
  width: 48px;
  height: 48px;
  background: var(--gm-blue-500-overlay-8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Section icon backgrounds for specific colors */
.gm-section-icon-blue {
  background: var(--gm-blue-overlay-8);
}

.gm-section-icon-green {
  background: var(--gm-green-500-overlay-8);
}

.gm-section-icon-purple {
  background: var(--gm-purple-500-overlay-8);
}

.gm-section-icon-amber {
  background: var(--gm-yellow-overlay-8);
}

.gm-icon-box-36 {
  width: 36px;
  height: 36px;
}

/* Icon-box theme helpers (bg + text color pairs) */
.gm-icon-box-yellow {
  background: var(--gm-yellow-overlay-8);
}

.gm-icon-box-green {
  background: var(--gm-green-500-overlay-8);
}

.gm-icon-box-gray {
  background: var(--gm-gray-400-overlay-8);
}

.gm-icon-box-blue {
  background: var(--gm-blue-overlay-8);
}

.gm-icon-box-red {
  background: var(--gm-red-overlay-10);
}

.gm-icon-box-amber {
  background: var(--gm-yellow-overlay-8);
}

.gm-icon-box-violet {
  background: var(--gm-violet-700-overlay-12);
}

/* GDPR metric accent backgrounds */
.gm-icon-circle-success {
  background: var(--gm-green-500-overlay-12);
}

.gm-icon-circle-info {
  background: var(--gm-indigo-500-overlay-12);
}

.gm-icon-circle-warning {
  background: var(--gm-amber-overlay-12);
}

.gm-icon-circle-primary {
  background: var(--gm-blue-primary-overlay-12);
}

.gm-icon-circle-danger {
  background: var(--gm-red-500-overlay-15);
}

/* Subscription audit icon themes */
.gm-audit-icon-blue {
  background: var(--gm-blue-500-overlay-12);
  color: var(--gm-blue-500);
}

.gm-audit-icon-green {
  background: var(--gm-green-300-overlay-12);
  color: var(--gm-green-300);
}

.gm-audit-icon-amber {
  background: var(--gm-amber-overlay-12);
  color: var(--gm-yellow-500);
}

.gm-audit-icon-red {
  background: var(--gm-red-500-overlay-12);
  color: var(--gm-red-500);
}

.gm-audit-icon-default {
  background: var(--gm-glass-black-5);
  color: var(--gm-gray-500);
}

/* glass_morph/atoms/code_block.css */
/* ============================================================================ */
/* == Atom — CodeBlock ====================================================== */
/* ============================================================================ */
/* Code block for styleguide code examples */
.code-block-wrapper {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--gm-slate-50);
}

.code-block {
  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
  font-size: 0.8125rem;
  color: var(--gm-slate-500);
  white-space: pre-wrap;
  margin: 0;
}

/* Code box (hardcoded hex variant for admin pages) */
.gm-code-box-hex {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--gm-gray-700);
  word-break: break-all;
}

/* Code box small (compact variant for inline use) */
.gm-code-box-sm {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-gray-200);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--gm-gray-700);
}


/* glass_morph/atoms/confidence_dot.css */
/* ============================================================================ */
/* == Atom — ConfidenceDot ================================================== */
/* ============================================================================ */
.confidence-dot-icon {
  font-size: 0.5rem;
}

.gm-dot-8 {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
}


/* glass_morph/atoms/video_thumb.css */
/* ─── VideoThumb atom ────────────────────────────────────────────────────── */

/* A 16:9 frame at row height. The aspect ratio is the video's, not a choice:
   a poster letterboxed into a square would show bars where the row expects
   picture. `object-fit: cover` is what keeps a frame whose real dimensions the
   publish step never promised from distorting. */
.gm-video-thumb {
  flex: 0 0 auto;
  width: 40px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;

  /* Visible while the image loads and wherever it fails: without it the row
     reflows as four thumbs arrive, and a broken poster leaves a hole rather
     than the same block the glyph would have occupied. */
  background: var(--gm-glass-white-10);
}

/* glass_morph/atoms/video_player.css */
/* ─── VideoPlayer atom ────────────────────────────────────────────────────── */

/* The frame around it owns the radius and the shadow, so the element itself is
   only the picture. 16/9 is reserved up front: without it the player is a
   zero-height line until the metadata lands, and everything under it jumps when
   it arrives. The tutorials are all 16:9 screen recordings. */
.gm-video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gm-gray-900);
}

/* The videos are screen recordings of a light interface, so a caption with no
   backing plate lands white-on-white. */
.gm-video-player::cue {
  background: var(--gm-glass-black-30);
  font-size: 0.9em;
}

/* glass_morph/atoms/momentum_indicator.css */
/* ============================================================================ */
/* == Atom — MomentumIndicator ============================================== */
/* ============================================================================ */
/* Momentum Indicator — rising/falling arrow on prospect rows */
.momentum-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 16px;
  flex-shrink: 0;
  cursor: default;
}


/* glass_morph/atoms/inline_score.css */
/* ============================================================================ */
/* == Atom — InlineScore ==================================================== */
/* ============================================================================ */
/* Base score number badge */
.score-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  min-width: 50px;
  margin-bottom: 0;
  box-shadow: 0 2px 4px var(--gm-glass-black-15);
}

/* Score badge variants - threshold names matching ScoreHelpers */
.score-nr-excellent {
  background: var(--gm-score-excellent);
  color: var(--gm-white);
}

.score-nr-good {
  background: var(--gm-score-good);
  color: var(--gm-white);
}

.score-nr-fair {
  background: var(--gm-score-fair);
  color: var(--gm-white);
}

.score-nr-poor {
  background: var(--gm-score-poor);
  color: var(--gm-white);
}

.score-nr-low {
  background: var(--gm-score-low);
  color: var(--gm-white);
}


/* glass_morph/atoms/info_row.css */
/* ============================================================================ */
/* == Atom — InfoRow ======================================================== */
/* ============================================================================ */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--gm-glass-white-15);
  gap: 16px;
  font-size: 15px;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row strong {
  font-weight: 600;
  color: var(--gm-white);
  min-width: 120px;
  flex-shrink: 0;
}

.info-row span {
  color: var(--gm-glass-white-85);
  text-align: right;
  line-height: 1.5;
}

.info-row a {
  color: var(--gm-white);
  text-decoration: none;
}

.info-row a:hover {
  text-decoration: underline;
  color: var(--gm-white);
}

/* Truncated value — limits content width for long values */
.gm-info-row-truncated {
  max-width: 60%;
}

/* ############################################################################ */
/* ################################ ANIMATIONS ################################ */
/* ############################################################################ */


/* glass_morph/atoms/dot_meter.css */
/* Dot meter — a row of dots filled up to a value. */

.gm-dot-meter {
  display: inline-flex;
  gap: 3px;
}

.gm-dot-meter__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-gray-200);
}

.gm-dot-meter__dot--on {
  background: var(--gm-teal-200);
}

.gm-dot-meter--full .gm-dot-meter__dot--on {
  background: var(--gm-green-600);
}

/* glass_morph/atoms/level_filter.css */
/* ============================================================================ */

/* == Atom — LevelFilter ("show from level X")                                  */

/* ============================================================================ */

/* Tone values live on the root as custom properties; the rules below read them. */
.gm-level-filter {
  --lf-bg: var(--gm-filter-control-bg);
  --lf-border: var(--gm-filter-control-border);
  --lf-radius: var(--gm-filter-control-radius);
  --lf-option-radius: 6px;
  --lf-name: var(--gm-filter-control-icon);
  --lf-divider: var(--gm-glass-white-18);
  --lf-text: var(--gm-ice-300);
  --lf-hover: var(--gm-white);
  --lf-on-bg: var(--gm-white);
  --lf-on-text: var(--gm-level-on-dark);
  --lf-on-shadow: 0 1px 3px var(--gm-glass-black-15);
  --lf-range-bg: var(--gm-glass-white-20);
  --lf-range-text: var(--gm-white);
  --lf-count: var(--gm-filter-control-count);
  --lf-count-text: var(--gm-white);
  --lf-focus: var(--gm-mint-400);
  --lf-trigger: var(--gm-filter-control-value);
  --lf-sub: var(--gm-filter-control-name);
  --lf-height: var(--gm-filter-control-height);
  --lf-font: var(--gm-filter-control-font);

  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}

.gm-level-filter--dark {
  --lf-bg: var(--gm-teal-900-overlay-30);
  --lf-border: var(--gm-glass-white-12);
  --lf-radius: 10px;
  --lf-option-radius: 7px;
  --lf-text: var(--gm-level-text-dark);
  --lf-divider: var(--gm-glass-white-14);
  --lf-on-shadow: 0 1px 3px var(--gm-glass-black-20);
  --lf-range-bg: var(--gm-glass-white-14);
}

.gm-level-filter--light {
  --lf-bg: var(--gm-slate-100);
  --lf-border: var(--gm-slate-200);
  --lf-radius: 10px;
  --lf-option-radius: 7px;
  --lf-name: var(--gm-slate-600);
  --lf-divider: var(--gm-slate-200);
  --lf-text: var(--gm-slate-600);
  --lf-hover: var(--gm-slate-900);
  --lf-on-text: var(--gm-slate-900);
  --lf-on-shadow: 0 1px 2px var(--gm-glass-black-15);
  --lf-range-bg: var(--gm-teal-20);
  --lf-range-text: var(--gm-slate-800);
  --lf-count: var(--gm-teal-200);
  --lf-focus: var(--gm-teal-200);
  --lf-trigger: var(--gm-slate-900);
  --lf-sub: var(--gm-slate-500);
}

.gm-level-filter--sm {
  --lf-height: 30px;
  --lf-font: 12.5px;
}

/* Segments */
.gm-level-filter__segments {
  height: var(--lf-height);
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
  background: var(--lf-bg);
  white-space: nowrap;
}

.gm-level-filter__name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 3px;
  padding: 0 10px 0 8px;
  border-right: 1px solid var(--lf-divider);
  color: var(--lf-name);
  font-size: calc(var(--lf-font) - 0.5px);
  font-weight: 600;
}

.gm-level-filter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gm-level-filter__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border-radius: var(--lf-option-radius);
  color: var(--lf-text);
  font-size: var(--lf-font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gm-level-filter__input:not(:checked) + .gm-level-filter__option:hover {
  color: var(--lf-hover);
}

.gm-level-filter__input:focus-visible + .gm-level-filter__option,
.gm-level-filter__trigger:focus-visible {
  outline: 2px solid var(--lf-focus);
  outline-offset: -2px;
}

/* Included levels: everything after the chosen one, as one continuous band. */
.gm-level-filter--at-least .gm-level-filter__input:checked ~ .gm-level-filter__option {
  border-radius: 0;
  background: var(--lf-range-bg);
  color: var(--lf-range-text);
}

.gm-level-filter--at-least .gm-level-filter__input:checked ~ .gm-level-filter__option:last-child {
  border-radius: 0 var(--lf-option-radius) var(--lf-option-radius) 0;
}

/* The chosen level sits on top of the band with its full radius. */
.gm-level-filter .gm-level-filter__input:checked + .gm-level-filter__option {
  z-index: 1;
  border-radius: var(--lf-option-radius);
  background: var(--lf-on-bg);
  box-shadow: var(--lf-on-shadow);
  color: var(--lf-on-text);
  font-weight: 600;
}

.gm-level-filter__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  background: var(--lf-count);
  color: var(--lf-count-text);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gm-level-filter__input:checked + .gm-level-filter__option .gm-level-filter__count {
  background: var(--gm-level-chosen);
  color: var(--gm-slate-700);
}

.gm-level-filter__glyph {
  flex-shrink: 0;
}

/* Dropdown presentation: the default (is-menu), or for layout auto once the
   segments no longer fit. The segments stay in the DOM, out of sight: their
   radios are what the form submits, and their width is what auto measures. */
.gm-level-filter__menu {
  position: relative;
  display: none;
  max-width: 100%;
}

.gm-level-filter.is-menu .gm-level-filter__menu {
  display: inline-flex;
}

.gm-level-filter.is-menu .gm-level-filter__segments {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

.gm-level-filter__trigger {
  height: var(--lf-height);
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
  background: var(--lf-bg);
  color: var(--lf-trigger);
  font: inherit;
  font-size: var(--lf-font);
  font-weight: 600;
  cursor: pointer;
}

.gm-level-filter__trigger:hover {
  filter: brightness(1.08);
}

.gm-level-filter__trigger-glyph {
  display: inline-flex;
  color: var(--lf-name);
}

.gm-level-filter__trigger-name {
  color: var(--lf-sub);
  font-weight: 500;
  white-space: nowrap;
}

.gm-level-filter__trigger-count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gm-level-filter__chevron {
  flex-shrink: 0;
  opacity: 0.8;
}

.gm-level-filter__trigger[aria-expanded="true"] .gm-level-filter__chevron {
  transform: rotate(180deg);
}

/* Fixed, placed under the trigger by the controller on open, so an ancestor
   that clips (a panel header) cannot cut it off. */
.gm-level-filter__popover, .gm-choice-menu__popover {
  position: fixed;
  z-index: 1050;
  width: max-content;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: var(--gm-white);
  box-shadow: 0 18px 40px var(--gm-glass-black-30);
  color: var(--gm-slate-900);
}

.gm-level-filter__popover.hidden {
  display: none;
}

.gm-level-filter__menu-head {
  padding: 8px 10px 4px;
  color: var(--gm-slate-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-level-filter__item, .gm-choice-menu__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.gm-level-filter__item:hover {
  background: var(--gm-slate-100);
}

.gm-level-filter__item:focus-visible {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: -2px;
}

.gm-level-filter__item.is-included {
  background: var(--gm-sheet-tint);
}

.gm-level-filter__item[aria-current="true"] {
  background: var(--gm-level-chosen);
  font-weight: 600;
}

.gm-level-filter__mark {
  color: var(--gm-teal-200);
  font-weight: 700;
  text-align: center;
}

.gm-level-filter__item[aria-current="true"] .gm-level-filter__mark::before {
  content: "✓";
}

.gm-level-filter__item.is-included .gm-level-filter__mark::before {
  content: "·";
}

.gm-level-filter__item-count {
  color: var(--gm-slate-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
  .gm-level-filter__option,
  .gm-level-filter__trigger,
  .gm-level-filter__item {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-level-filter__option {
    transition: none;
  }
}

/* glass_morph/atoms/choice_menu.css */
/* ============================================================================ */

/* == Atom — ChoiceMenu (pick one value from a short list)                      */

/* ============================================================================ */

/* The closed trigger wears the caller's classes; the open list is the
   LevelFilter's white menu, so the filters in one toolbar open alike. */
.gm-choice-menu {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}

.gm-choice-menu__menu {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.gm-choice-menu__trigger {
  text-align: left;
  white-space: nowrap;
}

/* Fixed, placed under the trigger by the controller on open, so an ancestor
   that clips (a panel header) cannot cut it off. */

.gm-choice-menu__popover.hidden {
  display: none;
}

.gm-choice-menu__item:hover {
  background: var(--gm-slate-100);
}

.gm-choice-menu__item:focus-visible {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: -2px;
}

.gm-choice-menu__item[aria-current="true"] {
  background: var(--gm-level-chosen);
  font-weight: 600;
}

.gm-choice-menu__mark {
  color: var(--gm-teal-200);
  font-weight: 700;
  text-align: center;
}

.gm-choice-menu__item[aria-current="true"] .gm-choice-menu__mark::before {
  content: "✓";
}

.gm-choice-menu__item-count {
  color: var(--gm-slate-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* glass_morph/atoms/insert_snippet_button.css */
/* InsertSnippetButton — brings a quote or a signal from the task cockpit's
   context panel into the task. Every label is rendered; the mode on an
   ancestor ([data-ai-mode]) and the button's own state pick the one shown. */
.gm-insert-snippet {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--gm-gray-200);
  border-radius: 999px;
  background: var(--gm-white);
  color: var(--gm-teal-200);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s ease-out,
    background 0.15s ease-out,
    color 0.15s ease-out;
}

.gm-insert-snippet:hover {
  border-color: var(--gm-teal-200);
  background: var(--gm-teal-overlay-8);
}

.gm-insert-snippet:focus-visible {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: 2px;
}

.gm-insert-snippet__label {
  display: none;
  align-items: center;
  gap: 5px;
}

.gm-insert-snippet__label--text {
  display: inline-flex;
}

[data-ai-mode="true"] .gm-insert-snippet__label--text {
  display: none;
}

[data-ai-mode="true"] .gm-insert-snippet__label--ai {
  display: inline-flex;
}

.gm-insert-snippet__label--ai [class*="gm-icon-"] {
  color: var(--gm-teal-300);
}

/* A signal with nothing to quote has no use outside the AI. */
.gm-insert-snippet--ai-only {
  display: none;
}

[data-ai-mode="true"] .gm-insert-snippet--ai-only {
  display: inline-flex;
}

/* The signal that is the draft's aanleiding, and a moment of confirmation
   after any insert. Both take over from the mode's label. */
[data-ai-mode="true"] .gm-insert-snippet.is-cause .gm-insert-snippet__label,
.gm-insert-snippet.is-done .gm-insert-snippet__label {
  display: none;
}

[data-ai-mode="true"] .gm-insert-snippet.is-cause .gm-insert-snippet__label--cause,
.gm-insert-snippet.is-done .gm-insert-snippet__label--done {
  display: inline-flex;
}

[data-ai-mode="true"] .gm-insert-snippet.is-cause,
.gm-insert-snippet.is-done {
  border-color: var(--gm-green-500-overlay-8);
  background: var(--gm-green-500-overlay-8);
  color: var(--gm-green-800);
}


/* Molecules */
/* glass_morph/molecules/form_group.css */
/* ============================================================================ */
/* == Molecule — FormGroup ================================================== */
/* ============================================================================ */
.form-section, .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Form row layout for inline fields */
.form-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

@media (width <= 576px) {
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
}

.type-details-step .form-group {
  margin-bottom: 0;
  gap: 4px;
}

.odoo-setup-form .form-group {
  gap: 4px;
}

/* Backgrounds — context-aware */
.gm-bg-field {
  background: var(--gm-ctx-bg-field, var(--gm-glass-white-8)) !important;
}

/* Form/detail field backgrounds */
.gm-form-field {
  padding: 0.75rem;
  background-color: var(--gm-ctx-bg-field, var(--gm-glass-white-8));
  border-radius: 10px;
  border: 1px solid var(--gm-ctx-separator, var(--gm-glass-black-8));
}

.gm-detail-field {
  padding: 0.75rem 1rem;
  background-color: var(--gm-ctx-bg-field, var(--gm-glass-white-8));
  color: var(--gm-ctx-text-primary, var(--gm-white));
  border-radius: 10px;
  border: 1px solid var(--gm-ctx-separator, var(--gm-glass-black-8));
  transition: background-color 0.15s ease;
}

a.gm-detail-field:hover {
  background-color: var(--gm-glass-white-12);
}

/* Detail field (bg + border + padding) */
.gm-field-bg {
  background: var(--gm-gray-50);
  border-radius: 10px;

  /* Field background: gray-50 bg + gray-100 border + padding */
  padding: 0.75rem;
  background-color: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-100);
}

/* Read-only / disabled form fields */
.gm-form-field:disabled,
.gm-form-field[disabled] {
  background-color: var(--gm-gray-50) !important;
  color: var(--gm-gray-500);
  cursor: not-allowed;
  opacity: 1;
  border-color: var(--gm-gray-200) !important;
}

/* Read-only notice banner border */
.gm-readonly-notice {
  border: 1px solid;
}

/* Multi-column form field tile — used in onboarding user/company rows */
.flex-wrap {
  flex-wrap: wrap;
}

/* Horizontal layout — label left, input right, hint below input */
.form-group__label-col {
  padding-top: 0.5rem;
}

/* Onboarding/public pages — fixed 130px label column for compact side-by-side layout */
body.public-page .form-group__label-col {
  flex: 0 0 130px;
  padding-top: 0.4rem;
  min-width: 0;
  align-self: flex-start;
}

.label-required {
  margin-left: 1px;
  font-size: 0.75em;
}

/* Onboarding/public pages: show optional indicator on its own line below label text */
body.public-page .label-optional {
  display: block;
}

.form-group__input-col {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
}

/* ─── Dark glass variant ─────────────────────────────────────────────────── */
/* Use class: "form-group--dark" on FormGroup when rendering inside a dark    */
/* glass card (e.g. public GDPR form). Overrides label/hint/input surfaces.   */

.form-group--dark .label {
  color: var(--gm-glass-white-95);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0;
}

.form-group--dark .label-optional { display: none; }

.form-group--dark .input-hint {
  color: var(--gm-glass-white-50);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 4px 0 0;
}

.form-group--dark .input,
.form-group--dark .textarea,
.form-group--dark .select {
  background: var(--gm-glass-white-95);
  border: 1px solid var(--gm-glass-white-20);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--gm-gray-800);
  font-size: 14px;
  box-shadow: 0 1px 2px var(--gm-glass-black-6);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.form-group--dark .input:hover,
.form-group--dark .textarea:hover,
.form-group--dark .select:hover {
  background: var(--gm-white);
}

.form-group--dark .input:focus,
.form-group--dark .textarea:focus,
.form-group--dark .select:focus {
  background: var(--gm-white);
  border-color: var(--gm-green-600);
  box-shadow: 0 0 0 4px var(--gm-green-300-overlay-15);
  outline: none;
}

.form-group--dark .input::placeholder,
.form-group--dark .textarea::placeholder { color: var(--gm-gray-400); }

.form-group--dark .textarea {
  min-height: 110px;
  resize: vertical;
}

/* glass_morph/molecules/warning_banner.css */
/* WarningBanner. On a phone the message and the action group no longer fit
   side by side, and the dismiss ended past the screen edge; the actions take
   a line of their own there. Wider, the message wraps beside them as before. */
@media (width <= 576px) {
  .warning-banner-row {
    flex-wrap: wrap;
  }
}

/* glass_morph/molecules/section_header.css */
/* ============================================================================ */
/* == Molecule — SectionHeader ============================================== */
/* ============================================================================ */
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gm-gray-50);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.section-header .section-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Section header patterns */
.section-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header-title {
  color: var(--gm-gray-800);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.section-header-description {
  color: var(--gm-gray-500);
  font-size: 14px;
  margin: 0;
}

/* glass_morph/molecules/page_header.css */
/* ============================================================================ */
/* == Molecule — PageHeader ================================================= */
/* ============================================================================ */
/* Section header with icon and count */
.prospects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  flex-shrink: 0;
}

.tile-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--gm-white);
}

.tile-nav > .d-flex.justify-content-between.align-items-center {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tasks Header - Match reference exactly */
#tasksView .prospects-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  flex-shrink: 0;
}

.tile-nav .hero-title {
  color: var(--gm-white);
  margin: 0;
}

/* glass_morph/molecules/stat_card.css */
/* ============================================================================ */
/* == Molecule — StatCard =================================================== */
/* ============================================================================ */
/* Stat card hover effect */
.stat-card {
  padding: 20px;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* Legacy stat-card sub-elements (kept for backward compat) */
.stat-card-rich {
  background: var(--gm-glass-white-95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--gm-glass-white-20);
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

  /* Light surface — flip context tokens so text is dark-on-white */
  --gm-ctx-separator: var(--gm-glass-black-8);
}

.stat-card-rich:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--gm-glass-black-15);
}

/* Dark glass variant — inherits parent context tokens (white text on dark) */
.stat-card-rich.stat-card-dark {
  background: var(--gm-glass-white-10);
  border: 1px solid var(--gm-glass-white-15);

  --gm-ctx-separator: var(--gm-glass-white-15);
}

/* Top accent border by variant */
.gm-stat-accent-green {
  border-top: 3px solid var(--gm-green-700) !important;
}

.gm-stat-accent-blue {
  border-top: 3px solid var(--gm-sky-700) !important;
}

.gm-stat-accent-purple {
  border-top: 3px solid var(--gm-violet-700) !important;
}

.gm-stat-accent-amber {
  border-top: 3px solid var(--gm-amber-500) !important;
}

.gm-stat-accent-red {
  border-top: 3px solid var(--gm-red-600) !important;
}

.gm-stat-accent-slate {
  border-top: 3px solid var(--gm-gray-400) !important;
}

/* Value color by variant */
.gm-stat-value-green {
  color: var(--gm-green-700);
}

.gm-stat-value-blue {
  color: var(--gm-sky-700);
}

.gm-stat-value-purple {
  color: var(--gm-violet-700);
}

.gm-stat-value-amber {
  color: var(--gm-amber-600);
}

.gm-stat-value-red {
  color: var(--gm-red-600);
}

.gm-stat-value-slate {
  color: var(--gm-gray-600);
}

/* Stat label/value */
.gm-stat-label {
  color: var(--gm-gray-500);
  margin-bottom: 0.25rem;
}

/* -- Compact density ---------------------------------------------------------
   The quiet scale for a row of cards inside a light section: eyebrow label,
   28px value with its unit beside it, a bare icon, no accent border, no lift. */
.stat-card-rich.stat-card-rich--compact {
  gap: 3px;
  min-width: 0;
  padding: 16px 18px 14px;
  background: var(--gm-white);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
  transition: none;
}

.stat-card-rich.stat-card-rich--compact:hover {
  transform: none;
  box-shadow: none;
}

.stat-card-rich--compact > .flex-column {
  gap: 3px;
}

.stat-card-rich__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-gray-500);
}

.stat-card-rich__icon {
  font-size: 13px;
  color: var(--gm-gray-400);
}

.stat-card-rich__value {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gm-gray-900);
  font-variant-numeric: tabular-nums;
}

.stat-card-rich__unit {
  margin-left: 3px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gm-gray-500);
}

.stat-card-rich__sub {
  font-size: 12.5px;
  color: var(--gm-gray-600);
}

/* Compact on a gradient hero: dark glass instead of a white card, the same
   surface .stat-card-dark gives the rich layout. */
.stat-card-rich.stat-card-rich--compact.stat-card-dark {
  background: var(--gm-glass-white-10);
  border: 1px solid var(--gm-glass-white-15);
}

.stat-card-dark .stat-card-rich__eyebrow {
  color: var(--gm-glass-white-70);
}

.stat-card-dark .stat-card-rich__icon {
  color: var(--gm-glass-white-60);
}

.stat-card-dark .stat-card-rich__value {
  color: var(--gm-white);
}

.stat-card-dark .stat-card-rich__unit {
  color: var(--gm-glass-white-70);
}

.stat-card-dark .stat-card-rich__sub {
  color: var(--gm-glass-white-80);
}

/* glass_morph/molecules/token_operation_label.css */
/* ============================================================================ */

/* == Molecule — TokenOperationLabel ======================================== */

/* ============================================================================ */

/* Icon disc + operation name + context line. Text follows currentColor so the
   label reads on light cards and dark glass; the disc carries the tone. */
.gm-tol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.gm-tol__disc {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  color: var(--gm-teal-200);
  background: var(--gm-gray-100);
  border-radius: 50%;
}

.gm-tol--credit .gm-tol__disc {
  color: var(--gm-green-800);
  background: var(--gm-green-100);
}

.gm-tol--expiry .gm-tol__disc {
  color: var(--gm-amber-800);
  background: var(--gm-amber-50);
}

.gm-tol__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.gm-tol__label {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.gm-tol__ctx {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  opacity: 0.68;
}

/* Small: inline beside a price, no disc */
.gm-tol--sm {
  gap: 7px;
}

.gm-tol--sm .gm-tol__disc {
  width: auto;
  height: auto;
  font-size: 13px;
  background: none;
  opacity: 0.75;
}

.gm-tol--sm .gm-tol__label {
  font-size: 13px;
}

/* Large: card headers and previews */
.gm-tol--lg {
  gap: 12px;
}

.gm-tol--lg .gm-tol__disc {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.gm-tol--lg .gm-tol__label {
  font-size: 16px;
}

.gm-tol--lg .gm-tol__ctx {
  font-size: 13px;
}

/* glass_morph/molecules/detail_table_row.css */
/* ============================================================================ */

/* == Molecules — DetailTableRow, DetailTableRowFacts, TableGroupRow ========= */

/* ============================================================================ */

/* The row is the toggle: the whole width answers a click, Enter or Space. */
.gm-dtr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.gm-dtr:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: -2px;
}

.gm-dtr__toggle {
  width: 50px;
}

.gm-dtr__chev {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--gm-gray-400);
  border-radius: 8px;
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}

.gm-dtr[aria-expanded="true"] .gm-dtr__chev {
  color: var(--gm-teal-200);
  transform: rotate(180deg);
}

.gm-dtr-detail > td {
  white-space: normal;
}

/* The facts inside an opened row: what it is on the left, the record right */
.gm-dtr-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px 24px;
  min-width: 0;
  white-space: normal;
}

.gm-dtr-facts__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gm-gray-500);
}

.gm-dtr-facts p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gm-gray-700);
  text-wrap: pretty;
}

.gm-dtr-facts p b {
  font-weight: 600;
  color: var(--gm-gray-900);
}

.gm-dtr-facts dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 16px;
  align-content: start;
  min-width: 0;
  margin: 0;
  font-size: 13px;
}

.gm-dtr-facts dt {
  font-weight: 400;
  white-space: nowrap;
  color: var(--gm-gray-500);
}

.gm-dtr-facts dd {
  min-width: 0;
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
  color: var(--gm-gray-900);
}

.gm-dtr-facts code {
  padding: 2px 6px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--gm-gray-600);
  background: var(--gm-gray-100);
  border-radius: 5px;
}

/* A heading row inside a table body: label left, totals right */
.gm-tgr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gm-gray-700);
}

.gm-tgr__sums {
  display: flex;
  gap: 10px;
}

@media (width <= 1024px) {
  .gm-dtr-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* glass_morph/molecules/cost_breakdown_row.css */
/* ============================================================================ */

/* == Molecule — CostBreakdownRow =========================================== */

/* ============================================================================ */

/* Icon, name and amount on one line, with the share bar spanning the text and
   amount columns underneath so the bars line up down the column. */
.gm-cost-breakdown-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 8px 0;
}

.gm-cost-breakdown-row + .gm-cost-breakdown-row {
  border-top: 1px solid var(--gm-ctx-separator);
}

.gm-cost-breakdown-row__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--gm-white);
}

.gm-cost-breakdown-row__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.gm-cost-breakdown-row__text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-cost-breakdown-row__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}

.gm-cost-breakdown-row__bar {
  width: auto;
  grid-column: 2 / 4;
}

/* glass_morph/molecules/empty_state.css */
/* ============================================================================ */
/* == Molecule — EmptyState ================================================= */
/* ============================================================================ */
/* Empty state white background variant */
.empty-state-white {
  text-align: center;
  padding: 60px 20px;
  background: var(--gm-white);
  border-radius: 16px;
  border: 1px dashed var(--gm-gray-300);
}

.empty-state .paragraph {
  margin-top: 16px;
  margin-bottom: 0;
}

/* Compact: inside a tile or chart — no card, the icon over one muted line */
.empty-state--compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--gm-ctx-text-muted);
}

.empty-state--compact .empty-state-compact-icon {
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state--compact .paragraph {
  margin: 0;
  font-size: 14px;
  color: var(--gm-ctx-text-muted);
}

/* Empty state pattern */
.empty-state-icon {
  font-size: 48px;
  color: var(--gm-glass-white-30);
  margin-bottom: 16px;
}

/* glass_morph/molecules/archived_disclosure.css */
/* ArchivedDisclosure — the archived part of a list behind one quiet line */
.archived-disclosure {
  margin-top: var(--gm-space-md, 1rem);
}

.archived-disclosure__summary {
  padding: var(--gm-space-sm, 0.5rem) var(--gm-space-md, 1rem);
  cursor: pointer;

  /* Secondary, not muted: on a dark lane the muted grey (gray-400 on teal) is
     about 3:1 and the line read as disabled. Secondary keeps it quiet at ~5:1. */
  color: var(--gm-ctx-text-secondary);
  font-size: 0.875rem;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}

.archived-disclosure__summary:hover {
  color: var(--gm-ctx-text-primary);
}

.archived-disclosure__summary::marker {
  display: none;
}

.archived-disclosure__summary::before {
  content: "▶ ";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}

details[open] .archived-disclosure__summary::before {
  transform: rotate(90deg);
}

/* glass_morph/molecules/detail_item.css */
/* DetailItem molecule — label + value pair */

.gm-detail-item-label {
  color: var(--gm-ctx-text-muted);
  font-weight: 500;
}

.gm-detail-item-value {
  color: var(--gm-ctx-text-primary);
}

/* glass_morph/molecules/alert.css */
/* ============================================================================ */
/* == Molecule — Alert ====================================================== */
/* ============================================================================ */
/* Error message styling */
.error-message {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  color: var(--gm-red-500);
  line-height: 1.2;
}

/* Additional info box */
.alert-warning {
  padding: 16px;
  background: var(--gm-amber-tw-400-overlay-15);
  border: 1px solid var(--gm-amber-tw-400-overlay-30);
  border-radius: 12px;
}

.alert-success {
  padding: 20px;
  background: linear-gradient(135deg, var(--gm-green-500-overlay-20) 0%, var(--gm-emerald-600-overlay-20) 100%);
  border: 1px solid var(--gm-green-500-overlay-30);
  border-radius: 12px;
}

.alert-info {
  padding: 16px;
  background: var(--gm-blue-400-overlay-15);
  border: 1px solid var(--gm-blue-500-overlay-30);
  border-radius: 12px;
}

.alert-danger {
  padding: 16px;
  background: var(--gm-red-500-overlay-22);
  border: 1px solid var(--gm-red-500-overlay-45);
  border-radius: 12px;
  color: var(--gm-red-700);
}

.alert-danger .alert-heading {
  color: var(--gm-red-700);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

.alert-danger ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
}

.info-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gm-teal-900-overlay-85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gm-teal-200-overlay-30);
  color: var(--gm-white);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  min-width: 280px;
  max-width: 380px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1000;
  box-shadow:
    0 8px 24px var(--gm-glass-black-30),
    0 2px 8px var(--gm-glass-black-20);
}

.info-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--gm-teal-900-overlay-85);
}

.info-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--gm-teal-200-overlay-30);
  margin-top: -1px;
}

.info-icon-wrapper:hover .info-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Alert / callout banners */
.gm-alert-warning {
  background: var(--gm-status-warning-bg);
  border: 1px solid var(--gm-amber-overlay-30);
  border-radius: 12px;
  padding: 1rem;
}

.gm-email-box {
  padding: 0.75rem 1rem;
  background: var(--gm-gray-50);
  border-radius: 10px;
  border: 1px solid var(--gm-gray-200);
  font-family: "SF Mono", "Fira Code", monospace;
  color: var(--gm-gray-800);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  word-break: break-all;
}

.gm-info-banner-card {
  background: var(--gm-blue-50);
  border: 1px solid var(--gm-blue-200);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

/* glass_morph/molecules/tabs.css */
/* ============================================================================ */
/* == Molecule — Tabs ======================================================= */
/* ============================================================================ */

/* The segmented pill strip Tabs(variant: :default) renders. `.tab-button`
   rounds its own first and last child, so the strip itself only has to lay
   them out in a row. */
.tabs-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* The measurements `responsive-tabs` needs, and the same ones `.detail-tabs`
   carries. The strip sizes to its buttons but clamps at its row, so its box
   changes with the row and the controller's observer fires; `min-width: 0` lets
   the inner strip be squeezed, which is what makes its scrollWidth report the
   width the buttons actually want. Without those two the controller measures a
   strip that always fits and never collapses. Wrapping is off — collapsing is
   what this strip does instead. */
.tabs-container[data-controller~="responsive-tabs"] {
  position: relative;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Action Type Item - Dark sidebar variant */
.action-type-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 0.375rem 0.75rem 0.375rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  transition: background-color 0.15s ease;
}

.action-type-item:hover:not(.action-type-item-disabled) {
  background: var(--gm-glass-white-8);
  border-color: var(--gm-glass-white-15);
}

/* Individual type item - compact */
.action-type-item:last-child {
  border-bottom: none;
}

.action-type-item:hover:not(.disabled) {
  background: var(--gm-bs-primary-overlay-5);
}

.action-type-item.selected {
  background: var(--gm-bs-primary-overlay-10);
}

.action-type-item.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--bs-gray-50);
}

/* Type name */
.action-type-item .type-name {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--bs-body-color);
}

.action-type-item.disabled .type-name {
  color: var(--gm-red-600);
}

/* Disabled type row */
.action-type-item .disabled-type-row {
  width: 100%;
}

/* Disabled reason text - inline */
.action-type-item .disabled-reason {
  font-size: 0.75rem;
  color: var(--gm-red-600);
  font-style: italic;
  white-space: nowrap;
}

/* Check icon for selected item */
.action-type-item .check-icon {
  margin-left: auto;
}

/* Lock icon for disabled items */
.action-type-item:hover:not(.disabled) .action-type-label::before {
  border-color: var(--bs-primary);
}

.action-type-item.selected .action-type-label::before {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
  box-shadow: inset 0 0 0 3px var(--gm-white);
}

/* Disabled items don't have the custom radio */
.action-type-item.disabled .action-type-label::before {
  display: none;
}

/* Icons in type items */
.action-type-item .type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 14px;
  height: 14px;
  line-height: 1;
  color: var(--bs-secondary);
}

.action-type-item.selected .type-icon {
  color: var(--bs-primary);
}

.action-type-item.disabled .type-icon {
  color: var(--bs-secondary);
  opacity: 0.6;
}

/* Subtle underline-style tabs */
.task-inspect-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 2px solid var(--gm-gray-200);
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}

/* Subtle badge styling */
.task-inspect-tabs .tab-badge {
  background: var(--gm-gray-200) !important;
  color: var(--gm-gray-500) !important;
  font-size: 0.75rem !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 10px !important;
  margin-left: 0.5rem !important;
}

/* Smooth height animation for context tab panels */
.context-tab-container .task-inspect-tab-content {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.25s ease;
}

.context-tab-container .task-inspect-tab-content.active {
  grid-template-rows: 1fr;
  opacity: 1;
}

.context-tab-container .task-inspect-tab-content > *,
.context-tab-container .task-inspect-tab-content .tab-panel-inner {
  overflow: hidden;
  min-height: 0;
}

/* Tab content panels */
.task-inspect-tab-content {
  display: none;
  animation: fadeIn 0.2s ease-in;
}

.task-inspect-tab-content.active {
  display: block;
}

/* Notes component styling in modal */
.task-inspect-tab-content textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem;
  border: 1px solid var(--gm-gray-300);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--gm-gray-800);
  background: var(--gm-white);
  resize: vertical;
  transition: border-color 0.2s ease;
}

.task-inspect-tab-content textarea:focus {
  outline: none;
  border-color: var(--gm-teal-400);
  box-shadow: 0 0 0 3px var(--gm-teal-400-overlay-10);
}

.task-inspect-tab-content textarea::placeholder {
  color: var(--gm-gray-400);
}

.task-inspect-tab-content button[type="submit"] {
  background: var(--gm-teal-400);
  color: var(--gm-white);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.task-inspect-tab-content button[type="submit"]:hover {
  background: var(--gm-teal-200);
}

/* Notes section headers */
.task-inspect-tab-content h3,
.task-inspect-tab-content h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gm-gray-700);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Empty state */
.task-inspect-tab-content .empty-state,
.task-inspect-tab-content p {
  color: var(--gm-gray-500);
  font-size: 0.875rem;
}

/* --- Tab navigation (tile variant) --- */
.tile-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  border-bottom: 2px solid var(--gm-gray-200);
  padding-bottom: 2px;
}

.tile-tab-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  position: relative;
}

.tile-tab-button-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-glass-white-60);
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  position: relative;
  text-decoration: none;
}

.tile-tab-button-dark:hover {
  color: var(--gm-glass-white-85);
}

.tile-tab-button-dark.active {
  color: var(--gm-white);
  border-bottom-color: var(--gm-teal-300);
}

.tile-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

/* --- Tab navigation (scoring variant) --- */
.scoring-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 32px;
  border-bottom: 2px solid var(--gm-gray-200);
  padding-bottom: 2px;
}

.scoring-tab-content {
  display: none;
}

/* --- Shared tile/scoring tab states --- */
.tile-tab-button:hover {
  color: var(--gm-gray-700);
}

.tile-tab-button.active {
  color: var(--gm-teal-300);
  border-bottom-color: var(--gm-teal-300);
}

/* Same fade as .tab-button:disabled (atoms/button.css). */
.tile-tab-button:disabled,
.tile-tab-button:disabled:hover {
  color: var(--gm-gray-500);
  cursor: not-allowed;
  opacity: 0.5;
}

.tile-tab-content.active,
.scoring-tab-content.active {
  display: block;
}

/* --- Attention marker on a tab ---
   A tab whose panel holds something unresolved wears an amber triangle and the
   number of items behind it, so the count is readable without opening the tab.
   Amber-800 on a 12% amber tint is the light-surface warning pair; these tabs
   only ever sit on white tiles. */
.tab-button--alert-warning .tab-icon {
  color: var(--gm-amber-600);
}

/* Geometry comes from the shared `.tab-badge` circle; the alert only recolours
   it, so a warning count and an ordinary count are the same shape. */
.tab-button--alert-warning .tab-badge {
  border-color: var(--gm-amber-overlay-12);
  background: var(--gm-amber-overlay-12);
  color: var(--gm-amber-800);
}


/* A tab badge that says something other than a count: a score, a share, an
   age. Tone :new marks what arrived since the user last looked. */
.tab-badge--text {
  font-variant-numeric: tabular-nums;
}

.tab-badge--new,
.task-inspect-tabs .tab-badge--new {
  background: var(--gm-green-500-overlay-8) !important;
  color: var(--gm-green-800) !important;
  font-weight: 600;
}

/* glass_morph/molecules/nav_item.css */
/* ============================================================================ */
/* == Molecule — NavItem ==================================================== */
/* ============================================================================ */
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 36px 10px 16px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.nav-item:hover {
  background: var(--gm-nav-item-hover-bg);
}

.nav-item.active {
  background: var(--gm-nav-item-active-bg);
  border-color: var(--gm-nav-item-active-border);
}

.nav-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.nav-icon {
  width: 20px;
  height: 25px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-item:hover .nav-icon {
  opacity: 0.9;
}

.nav-label {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--gm-nav-text);
  transition: color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item.active .nav-label {
  color: var(--gm-nav-text-active);
}

.nav-item:hover .nav-label {
  color: var(--gm-nav-text-active);
}

.nav-chevron {
  width: 16px;
  height: 16px;
  color: var(--gm-gray-500);
  transition: color 0.2s;
}

.nav-item-badge {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--gm-green-500);
  border: 1px solid var(--gm-green-500);
  color: var(--gm-white);
  font-family: Figtree, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* The count of work nobody answered. Red-600 rather than the red-500 of
   --gm-status-danger: white on #ef4444 measures 3.76:1, under WCAG AA for
   12px text, while #dc2626 measures 4.83:1. */
.nav-item-badge--alert {
  background: var(--gm-red-600);
  border-color: var(--gm-red-600);
}

.nav-item.active .nav-chevron {
  color: var(--gm-green-600);
}

.nav-item:hover .nav-chevron {
  color: var(--gm-gray-400);
}

/* Nav item wrapper for items with expandable chevron */
.nav-item-wrapper {
  position: relative;
}

.nav-item-wrapper .nav-item {
  padding-right: 36px !important; /* Space for chevron button positioned absolutely inside */
}

/* Chevron button for expandable menu items */
.nav-chevron-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: all;
}

.nav-chevron-button:hover {
  background: var(--gm-glass-white-10);
  border-radius: 4px;
}

.nav-chevron-button .nav-chevron {
  transition:
    transform 0.2s,
    color 0.2s;
}

.nav-chevron-button.expanded .nav-chevron {
  transform: rotate(180deg);
  color: var(--gm-green-500) !important;

  /* Green when expanded */
}

/* Nav Buttons */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-submenu {
  padding-left: 16px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.nav-submenu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 32px;

  /* Left padding aligns with parent text (icon 20px + gap 12px) */
  margin-bottom: 2px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--gm-glass-white-70);
  font-size: 14px;
  transition: all 0.2s;
}

.nav-submenu-item:hover {
  background: var(--gm-glass-white-8);
  color: var(--gm-glass-white-95);
}

.nav-submenu-item.active {
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
  font-weight: 500;
}

.nav-submenu-item.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.nav-submenu-item.locked:hover {
  background: var(--gm-glass-white-5);
  color: var(--gm-glass-white-70);
}

.account-selector .nav-label {
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
}

/* Mid-large screens: give nav buttons more room */
@media (width >= 1200px) and (width <= 1700px) {
  .nav-buttons {
    flex: 0 1 auto;
    min-width: 0;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .nav-buttons > .button {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 14px;
  }

  .nav-buttons > .button .text-wrapper {
    display: block;
    white-space: nowrap;
  }
}

/* Tighter range: start compressing a bit more */
@media (width >= 1025px) and (width <= 1199px) {
  .nav-buttons {
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .nav-buttons > .button {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 8px;
  }

  .nav-buttons > .button .text-wrapper {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (width >= 1025px) and (width <= 1899px) {
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item {
    padding: 0 !important;
  }

  .sidebar-nav > .nav-item:not(.active):hover,
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item:not(.active):hover {
    background: var(--gm-glass-white-10);
  }

  .sidebar-nav > .nav-item > .nav-item-content > .nav-label,
  .sidebar-nav > .nav-item > .account-selector-toggle .nav-label,
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item > .nav-item-content > .nav-label,
  .sidebar-nav > .nav-item-wrapper .nav-chevron-button {
    display: none !important;
  }

  .sidebar-nav > .nav-item-wrapper .nav-submenu {
    display: none !important;
  }

  .sidebar-nav > .nav-item-wrapper {
    overflow: visible;
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open > .position-relative > .nav-item {
    background: var(--gm-glass-white-10);
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open .nav-submenu-item.active [class*="gm-icon-"] {
    color: var(--gm-teal-500) !important;
  }
}

@media (width <= 1024px) {
  .sidebar.active .nav-item .nav-item-content .nav-label {
    display: block;
  }

  .nav-buttons {
    display: none;
  }
}

/* glass_morph/molecules/linkedin_connection_indicator.css */
/* LinkedIn connection indicator — ring + chip + popover on a stakeholder avatar.
   Ring: blue = connected, amber = pending, split = mixed.
   Chip: LinkedIn glyph (+ count) bottom-right.
   Popover: dark glass, fixed-positioned by the linkedin-connections-popover
   Stimulus controller so it escapes the stakeholder scroll-list's overflow. */

.li-indicator {
  position: relative;
  display: inline-flex;
}

.li-anchor {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
}

.li-anchor:focus-visible {
  outline: 2px solid var(--gm-linkedin);
  outline-offset: 3px;
}

/* Ring — coloured padding around the avatar box */
.li-ring {
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
}

.li-ring--connected {
  background: var(--gm-linkedin);
}

/* Not-yet-accepted invites carry no coloured ring — only accepted (blue)
   connections tint the ring. Pending shows the bare avatar; mixed shows blue. */
.li-ring--pending {
  background: transparent;
}

.li-ring--mixed {
  background: var(--gm-linkedin);
}

/* Chip — LinkedIn glyph and optional count, bottom-right */
.li-chip {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gm-white);
  border: 2px solid var(--gm-white);
  color: var(--gm-linkedin);
  box-shadow: 0 1px 3px var(--gm-glass-black-30);
}

/* Glyph is Icon(size: :xs) => .fs-6 (16px), which overflows the 18px pill and
   spills blue onto the avatar. Constrain it to sit inside the white pill. */
.li-chip .gm-icon-linkedin {
  font-size: 11px;
  line-height: 1;
}

/* Lone glyph (count == 1, no count span) reads too small in its pill — give the
   icon-only variant 2px more so the logo has breathing room. */
.li-chip:not(:has(.li-chip-count)) {
  min-width: 20px;
  height: 20px;
  bottom: -1px;
}

.li-chip-count {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--gm-gray-900);
  font-variant-numeric: tabular-nums;
}

/* Popover — dark glass, positioned via fixed coords set by the controller */
.li-connections-popover {
  position: fixed;
  z-index: 10050;
  width: 288px;
  padding: 6px;
  background: var(--gm-teal-900);
  backdrop-filter: blur(16px);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: 12px;
  box-shadow:
    0 12px 40px var(--gm-glass-black-30),
    0 0 0 1px var(--gm-glass-white-5);
  color: var(--gm-glass-white-85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.li-connections-popover.li-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.li-popover-header {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gm-glass-white-60);
}

.li-popover-rows {
  display: flex;
  flex-direction: column;
}

.li-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
}

.li-row + .li-row {
  border-top: 1px solid var(--gm-glass-white-8);
}

.li-row-name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--gm-glass-white-85);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-row-meta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.li-row-date {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .li-connections-popover {
    transition: none;
  }
}

/* glass_morph/molecules/token_balance_widget.css */
/* ── Token Balance Widget (sidebar molecule) ───────────────────────────────── */

.token-balance-widget {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--gm-glass-white-5);
  border: 1px solid var(--gm-glass-white-8);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0.25rem 0;
}

/* ── Header row: icon + numbers + extra badge ── */

.token-widget-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.token-widget-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.token-widget-info {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: 1;
}

.token-widget-balance {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.token-widget-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 0.125rem;
}

/* Gold "extra" badge shown when purchased tokens are present */
.token-widget-extra-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gm-amber-tw-400);
  background: var(--gm-amber-tw-400-overlay-12);
  border: 1px solid var(--gm-amber-tw-400-overlay-25);
  border-radius: 99px;
  padding: 0.1875rem 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Segmented progress bar ─────────────────────────────────────────────────
 *
 * The track lives on its own as the TokenBudgetBar molecule. It can be used
 * standalone (wizard projection bar) or nested inside TokenBalanceWidget
 * (sidebar). Fill gradients are driven by the gm-token-* class applied to
 * the track root — not the enclosing widget — so the bar looks identical in
 * both contexts.
 */

.token-widget-track {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--gm-glass-white-15);
  overflow: hidden;
}

/* Variant: track sitting on a light surface (e.g. wizard card).
 * Flips the base track to a translucent-black wash and bumps the height
 * slightly so the bar has presence against white. */
.token-widget-track.on-light {
  height: 8px;
  background: var(--gm-glass-black-10);
}

/* All fills share base styles */
.token-widget-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Monthly allocation fill — inherits status color via parent class */
.token-widget-alloc {
  left: 0;
}

/* Purchased top-up fill — always gold, `left` set inline to abut the alloc segment */
.token-widget-purchased {
  background: linear-gradient(90deg, var(--gm-amber-600), var(--gm-amber-tw-400));
  opacity: 0.85;
}

/* Overflow fill — shown only when projection > total balance.
 * Anchored to the right edge of the track and grows leftward. */
.token-widget-track.is-overflow .token-widget-overflow {
  right: 0;
  left: auto;
  background: linear-gradient(270deg, var(--gm-red-500), var(--gm-red-400));
}

/* ── Fill gradients per status (bar-level) ── */

.token-widget-track.gm-token-ok .token-widget-alloc {
  background: linear-gradient(90deg, var(--gm-green-tw-500), var(--gm-green-tw-400));
}

.token-widget-track.gm-token-low .token-widget-alloc {
  background: linear-gradient(90deg, var(--gm-amber-600), var(--gm-amber-tw-400));
}

.token-widget-track.gm-token-critical .token-widget-alloc {
  background: linear-gradient(90deg, var(--gm-red-500), var(--gm-red-400));
}

/* ── Widget-level status states (sidebar card chrome) ── */

.token-balance-widget.gm-token-ok {
  color: var(--gm-green-tw-400);
  border-color: var(--gm-green-tw-400-overlay-18);
}

.token-balance-widget.gm-token-ok:hover {
  background: var(--gm-green-tw-400-overlay-7);
  border-color: var(--gm-green-tw-400-overlay-35);
  box-shadow: 0 0 14px var(--gm-green-tw-400-overlay-12);
}

.token-balance-widget.gm-token-low {
  color: var(--gm-amber-tw-400);
  border-color: var(--gm-amber-tw-400-overlay-18);
}

.token-balance-widget.gm-token-low:hover {
  background: var(--gm-amber-tw-400-overlay-7);
  border-color: var(--gm-amber-tw-400-overlay-35);
  box-shadow: 0 0 14px var(--gm-amber-tw-400-overlay-12);
}

.token-balance-widget.gm-token-critical {
  color: var(--gm-red-400);
  border-color: var(--gm-red-400-overlay-25);
  animation: token-pulse 2.5s ease-in-out infinite;
}

.token-balance-widget.gm-token-critical:hover {
  animation: none;
  background: var(--gm-red-400-overlay-7);
  border-color: var(--gm-red-400-overlay-40);
  box-shadow: 0 0 14px var(--gm-red-400-overlay-15);
}

@keyframes token-pulse {
  0%, 100% {
    border-color: var(--gm-red-400-overlay-25);
    box-shadow: none;
  }

  50% {
    border-color: var(--gm-red-400-overlay-50);
    box-shadow: 0 0 10px var(--gm-red-400-overlay-20);
  }
}

/* glass_morph/molecules/token_cost_pill.css */
/* TokenCostPill — compact cost/balance chip shown next to token-spending buttons.
   Colour tokens come from gm-token-ok / gm-token-low / gm-token-critical,
   which are defined once in variables.css and reused by TokenBudgetBar.

   Default styles target dark/glass backgrounds (page headers, sidebars).
   Add the .tile-light ancestor class to switch to light-background variants. */

.token-cost-pill-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.token-cost-pill-wrapper--block {
  display: block;
}

/* ── Dark background (default) ─────────────────────────────────────────── */

.token-cost-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-1, 0.25rem);
  padding: 0;
  border-radius: 0;
  border: none;
  background: none;
  color: var(--gm-text-on-dark-secondary);
  font-size: var(--gm-font-size-xs, 0.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 120ms ease, text-decoration 120ms ease;
}

.token-cost-pill:hover,
.token-cost-pill[aria-expanded="true"] {
  text-decoration: underline;
}

/* ── Light background override (.tile-light or .modal-content ancestor) ── */

.tile-light .token-cost-pill,
.modal-content .token-cost-pill {
  color: var(--gm-text-on-light-secondary);
}

.token-cost-pill__cost {
  font-weight: 600;
}

.token-cost-pill__popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 1070;
  min-width: 260px;
  padding: var(--gm-space-3, 0.75rem);
  border-radius: var(--gm-radius-md, 0.5rem);
  background: var(--gm-surface-raised, var(--gm-white));
  box-shadow: var(--gm-shadow-md, 0 4px 16px var(--gm-black-overlay-12));
  border: 1px solid var(--gm-border-subtle, var(--gm-glass-black-8));
}

.token-cost-pill__popover[hidden] {
  display: none;
}

.token-cost-pill__popover-heading {
  margin: 0 0 var(--gm-space-2, 0.5rem);
  font-size: var(--gm-font-size-sm, 0.875rem);
  color: var(--gm-text-primary, var(--gm-gray-1a1a1a));
}

.token-cost-pill__popover-hint {
  margin: var(--gm-space-2, 0.5rem) 0 0;
  font-size: var(--gm-font-size-xs, 0.75rem);
  color: var(--gm-text-secondary, var(--gm-blue-4a5560));
}

.token-cost-pill__cta {
  display: inline-block;
  margin-top: var(--gm-space-2, 0.5rem);
  font-size: var(--gm-font-size-sm, 0.875rem);
  color: var(--gm-link-color, var(--gm-bs-primary));
  text-decoration: none;
}

.token-cost-pill__cta:hover {
  text-decoration: underline;
}

/* glass_morph/molecules/account_switcher.css */
/* ── AccountSwitcher Molecule ──────────────────────────────────────── */

/* Wrapper — position: relative so the dropdown can be absolutely positioned */
.account-selector {
  position: relative;
}

/* Dropdown panel (base — both admin and user variants) */
.account-selector-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--gm-white);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--gm-glass-black-15);
  z-index: 100;
  overflow: hidden;
  white-space: nowrap;
}

/* Admin variant: wider with scrollable list */
.account-selector-dropdown--admin {
  min-width: 240px;
  max-height: 400px;
  overflow-y: auto;
}

/* Dropdown section header */
.account-selector-header--admin {
  background: var(--gm-blue-50);
  border-bottom: 1px solid var(--gm-blue-200);
  position: sticky;
  top: 0;
}

.account-selector-header--user {
  background: var(--gm-gray-50);
  border-bottom: 1px solid var(--gm-gray-200);
}

.account-selector-header-inner {
  padding: 10px 14px;
}

/* Section label */
.account-selector-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-selector-label--admin {
  color: var(--gm-blue-primary);
}

.account-selector-label--user {
  color: var(--gm-gray-500);
}

/* Active option row (current account) */
.account-option--active {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--gm-blue-50);
  color: var(--gm-blue-primary);
  transition: background-color 0.15s;
}

/* Button for switching to another account */
.account-option-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--gm-gray-700);
  transition: background-color 0.15s;
}

.account-option-btn:hover {
  background: var(--gm-gray-100);
}

/* Account name spans inside option rows */
.account-option-name {
  flex: 1;
  margin-left: 8px;
}

.account-option-name--flex {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Form and row wrappers — strip default browser margins */
.account-option-form,
.account-option-row {
  margin: 0;
}

/* Search input wrapper */
.account-selector-search-wrapper {
  padding: 6px 10px;
  border-top: 1px solid var(--gm-glass-black-6);
}

/* Search input */
.account-selector-search {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--gm-gray-200);
  border-radius: 6px;
  outline: none;
  color: var(--gm-gray-700);
  background: var(--gm-white);
}

/* Toggle button */
.account-selector-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.account-selector-toggle .nav-item-content {
  flex: 1;
}

/* "Create account" footer link inside the account picker dropdown */
.account-selector-dropdown .account-create-btn,
.account-selector-dropdown .account-reveal-btn {
  padding: 10px 14px;
  border-top: 1px solid var(--gm-gray-200);
  border-radius: 0;
  background: var(--gm-gray-50);
}

.account-selector-dropdown .account-create-btn,
.account-selector-dropdown .account-create-btn .nav-label {
  color: var(--gm-teal-500);
  font-size: 14px;
}

.account-selector-dropdown .account-create-btn:hover {
  background: var(--gm-teal-overlay-8);
}

.account-selector-dropdown .account-create-btn:hover .nav-label {
  color: var(--gm-teal-500);
}

.account-selector-dropdown .account-create-btn .nav-icon {
  opacity: 1;
}

/* Pin to bottom of the scrollable admin variant so it's always reachable */
.account-selector-dropdown--admin .account-create-btn {
  position: sticky;
  bottom: 0;
  background: var(--gm-white);
}

.account-selector-dropdown--admin .account-create-btn:hover {
  background: var(--gm-teal-overlay-8);
}

/* "Show other accounts" reveal — the accounts a system admin is not a member of
   stay out of the picker until they click this. Sits above the sticky create
   link, so it scrolls with the list rather than fighting it for the bottom. */

.account-selector-dropdown .account-reveal-btn,
.account-selector-dropdown .account-reveal-btn .nav-label {
  color: var(--gm-blue-primary);
  font-size: 14px;
}

.account-selector-dropdown .account-reveal-btn:hover {
  background: var(--gm-blue-50);
}

.account-selector-dropdown .account-reveal-btn .nav-icon {
  opacity: 1;
}

.account-selector-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gm-gray-500);
}

/* glass_morph/molecules/breadcrumb.css */
/* ============================================================================ */
/* == Molecule — Breadcrumb ================================================= */
/* ============================================================================ */
.breadcrumb-item, .breadcrumb-separator {
  font-size: 14px;
  color: var(--gm-gray-400);
}

.breadcrumb-item.active {
  color: var(--gm-white);
  font-weight: 500;
}

/* Breadcrumb Link */
.breadcrumb-link {
  cursor: pointer;
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: var(--gm-green-600);
}

/* glass_morph/molecules/table.css */
/* ============================================================================ */
/* == Molecule — Table ====================================================== */
/* ============================================================================ */
.profile-table-row {
  display: contents;
}

.profile-table-cell {
  font-size: 13px;
  color: var(--gm-gray-600);
  padding: 10px 20px 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--gm-gray-100);
  line-height: 1.4;
}

.profile-table-cell:last-child {
  padding-right: 0;
}

.profile-table-row:last-child .profile-table-cell {
  border-bottom: none;
}

.profile-table-cell--bold {
  font-weight: 600;
  font-size: 14px;
  color: var(--gm-gray-800);
}

.profile-table-cell--muted {
  font-size: 12px;
  color: var(--gm-gray-400);
  white-space: nowrap;
}

.profile-table-cell--description {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 0 0 10px;
  font-size: 13px;
  color: var(--gm-gray-500);
  line-height: 1.5;
  border-bottom: 1px solid var(--gm-gray-100);
}

.profile-table-row:last-child .profile-table-cell--description {
  border-bottom: none;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  background: transparent;
  border: none;
}

/* Table wrapper on glass backgrounds */
.glass-card .table-wrapper,
.glass-panel .table-wrapper {
  background: var(--gm-teal-200-overlay-15); /* teal-200 at 15% — keep composite */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--gm-white);
}

.data-table th,
.data-table td {
  padding: 0.875rem 1rem;
  text-align: left;
}

.data-table thead {
  background: transparent;
}

.data-table thead tr {
  border-bottom: 2px solid var(--gm-teal-200-overlay-60) !important;
}

.data-table th {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gm-white) !important;

  /* Paint each th directly so it composites over the page background,
     matching the reference: rgb(52 111 129 / 63%) over white ≈ steel-blue */
  background: var(--gm-teal-200-overlay-63) !important;
  white-space: nowrap;
}

.data-table td {
  color: var(--gm-slate-800);
  border-bottom: none;
}

.data-table tbody tr {
  background: var(--gm-white);
  transition: background-color 0.2s ease;

  /* White rows are a light surface — flip context tokens so gm-text-* utilities render dark */
  border-bottom: 2px solid var(--gm-gray-ebedee-overlay-86);
}

.data-table tbody td {
  color: var(--gm-slate-800);
}

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

.data-table.table-striped tbody tr:nth-child(even) {
  background: var(--gm-teal-82a4b0-overlay-21);
}

.data-table.table-hover tbody tr:hover {
  background: var(--gm-green-500-overlay-20) !important;

  /* emerald-500 — matches reference */
  cursor: pointer;
}

.data-table.table-bordered {
  border: 1px solid var(--gm-glass-black-8);
}

.data-table.table-bordered th,
.data-table.table-bordered td {
  border: 1px solid var(--gm-glass-black-8);
}

.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  background: var(--gm-teal-200-overlay-30);
  border: 1px solid var(--gm-teal-200-overlay-50);
  color: var(--gm-gray-300);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-size: 0.875rem;
  margin-right: 0.25rem;
}

/* The chip's icon takes the chip's 0.875rem, not the Icon atom's fs-* size */
.table-action-btn [class*="gm-icon-"] {
  font-size: inherit !important;
}

.table-action-btn:last-child {
  margin-right: 0;
}

.table-action-btn:hover {
  background: var(--gm-teal-200-overlay-50);
  border-color: var(--gm-teal-200-overlay-70);
  color: var(--gm-white);
}

.table-action-btn:active {
  transform: scale(0.95);
}

.table-actions-container {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* Ensure badge text is visible in classic tables (scoped to avoid overriding NewUI subtle badges) */
.table .badge {
  color: inherit !important;
}

/* glass_morph/molecules/message_template_preview.css */
/* The text of a standaardbericht, opened under its row in the admin lists.
   It sits on `.content-section-inner-card`, which is white, so the panel needs
   its own surface or the message runs into the table it came out of. A quieter
   gray with a teal edge reads as a quotation of the message rather than as more
   table. */
.message-template-preview {
  background: var(--gm-gray-50);
  border-left: 3px solid var(--gm-teal-500);
  border-radius: 8px;
  padding: 16px 20px;
}

.message-template-preview-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-gray-500);
}

.message-template-preview-subject {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gm-gray-900);
}

.message-template-preview-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gm-gray-800);
}

/* A variable is the one part of the text that is not the text: it is a hole the
   send fills in. Marking it inline is what lets somebody scan a message for the
   holes without reading it word by word. Light tint, dark ink — the contrast
   pairing for a tinted element on a light surface. */
.message-template-variable {
  background: var(--gm-teal-overlay-15);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  color: var(--gm-teal-700);
  white-space: nowrap;
}

/* glass_morph/molecules/modal.css */
/* ============================================================================ */
/* == Molecule — Modal ====================================================== */
/* ============================================================================ */
/* Modal Layout Styles */
.modal-header-icon {
  font-size: 1.5rem;
  color: var(--gm-red-600);
  flex-shrink: 0;
}

/* Modal header title area - icon and title on same line */
.modal-header-title-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-warning-text {
  color: var(--gm-teal-700);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  white-space: pre-line;
}

.modal-warning-list {
  color: var(--gm-gray-700);
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.modal-warning-item {
  margin-bottom: 0.5rem;
  color: var(--gm-gray-700);
}

.modal-confirm-box {
  background: var(--gm-red-500-overlay-12);
  border: 1px solid var(--gm-red-500-overlay-25);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.75rem;
}

.modal-confirm-instruction {
  color: var(--gm-red-600);
  font-size: 14px;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.modal-row-title {
  color: var(--gm-teal-700);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  font-family: "Courier New", monospace;
}

/* Modal Input */
.modal-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid var(--gm-glass-black-20);
  background: var(--gm-white);
  color: var(--gm-teal-700);
  font-size: 15px;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.modal-input::placeholder {
  color: var(--gm-gray-500);
}

.modal-input:focus {
  outline: none;
  border-color: var(--gm-glass-black-30);
  background: var(--gm-white);
}

.modal-input.is-valid {
  border-color: var(--gm-green-600) !important;
  background: var(--gm-green-700-overlay-10) !important;
}

.modal-input.is-invalid {
  border-color: var(--gm-red-600) !important;
  background: var(--gm-red-overlay-10) !important;
}

/* Cancel Button */
.modal-cancel-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid var(--gm-glass-white-30);
  background: transparent;
  color: var(--gm-white);
  cursor: pointer;
  transition: all 0.2s;
}

.modal-cancel-btn:hover {
  background: var(--gm-glass-white-10);
  border-color: var(--gm-glass-white-50);
}

/* Confirm Button */
.modal-confirm-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--gm-red-600) 0%, var(--gm-red-600) 100%);
  color: var(--gm-white) !important;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px var(--gm-red-500-overlay-30);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-confirm-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--gm-red-500-overlay-40);
  background: linear-gradient(135deg, var(--gm-red-600) 0%, var(--gm-red-700) 100%);
}

.modal-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.modal-header .modal-step-title {
  color: var(--gm-white);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;

  /* Allow the title to yield space to the fixed-width step circles.
     min-width: 0 overrides the flex min-content floor so the item can
     actually shrink below its text width; overflow + text-overflow then
     show an ellipsis instead of clipping silently. */
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal Styles - From reference */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gm-glass-black-30);
  backdrop-filter: blur(2px);
  z-index: 1000;

  /* Use overflow-y: auto instead of align-items: center to handle
     high-zoom / small-viewport scenarios where the modal container
     exceeds viewport height. align-items: center clips the top
     of overflowing content; margin: auto on the child centers
     safely and degrades to top-aligned when content overflows. */
  overflow-y: auto;
  justify-content: center;
  padding: 20px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active,
.modal-overlay.show {
  display: flex;
  opacity: 1;
}

.modal-container {
  background: var(--gm-teal-200);
  border: 1px solid var(--gm-teal-200-overlay-30);
  border-radius: 24px;
  width: 90%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px var(--gm-glass-black-30);
  animation: modalSlideIn 0.3s ease-out;
  padding-left: 20px;
  padding-right: 20px;

  /* margin: auto centers this within the scrollable overlay.
     Unlike align-items: center, auto margins degrade gracefully:
     when the container overflows, top margin collapses to 0
     so the user can scroll to see all content. */
  margin: auto;
}

/* A short form of a few fields: full width only stretches its controls. A
   prospect's name in the title can run past this width, so the title wraps. */
.modal-container--narrow {
  max-width: var(--gm-modal-width-narrow);
}

.modal-container--narrow .modal-step-title {
  white-space: normal;
}

/* Forms inside modal-container must participate in the flex scroll chain.
   Without this, <form> defaults to display:block, breaking the flex layout
   so .modal-content's overflow-y:auto never activates. */
.modal-container > form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (width <= 576px) {
  .modal-container {
    width: 98%;
    max-height: 96vh;
    border-radius: 12px;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px;
  border-bottom: 1px solid var(--gm-teal-200-overlay-30);
  flex-shrink: 0;
}

.modal-header--wizard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 12px;
}

.modal-header--wizard .modal-header-title-area {
  min-width: 0;
  justify-self: stretch;
}

.modal-header--wizard .modal-step-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-header--wizard .modal-step-indicator {
  justify-self: center;
}

/* A wizard header that names what the step is already about: channel icon and
   a title with one word in it that changes what the title states. */
.modal-header-channel-icon {
  font-size: 1.25rem;
  color: var(--gm-glass-white-85);
  flex-shrink: 0;
}

.modal-header-headings {
  min-width: 0;
}

/* The control is a word in the sentence, not a button sitting on it: it takes
   the title's own size and weight and marks itself as the live word with
   white and an underline. The Link atom carries Bootstrap's
   `.text-decoration-none`, and Bootstrap writes its utilities with !important,
   so nothing short of !important puts the underline back. */
.modal-step-title-action {
  color: var(--gm-white);
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.modal-step-title-action:hover,
.modal-step-title-action:focus-visible {
  color: var(--gm-glass-white-70);
}

.modal-header--wizard .modal-header-actions {
  justify-self: end;
  margin-left: 0;
}

.modal-header h2 {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: var(--gm-white);
  letter-spacing: -0.02em;
  margin: 0;
}

.modal-step-indicator {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 4px;
}

.modal-content .form-group > .input,
.modal-content .form-group > .select,
.modal-content .form-group > .form-select,
.modal-content .form-group > .form-control {
  box-sizing: border-box;
  display: block;
  height: 44px;
  line-height: 1.25;
}

.modal-header-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gm-glass-white-10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--gm-white);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

.modal-close:hover {
  background: var(--gm-glass-white-5);
  border-color: var(--gm-glass-white-20);
  color: var(--gm-white);
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 30px;
  background: var(--gm-white);
  border-radius: 12px;
  animation: wizardStepFadeIn 0.2s ease-out;
  color: var(--gm-teal-700);
  position: relative;
  z-index: 1;

  /* Ensures autocomplete dropdowns paint above .modal-footer */
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: var(--gm-gray-100);
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--gm-gray-400);
}

.modal-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gm-gray-900);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-top: 1px solid var(--gm-teal-200-overlay-30);
  flex-shrink: 0;
  margin-top: auto;

  /* Push footer to bottom when content is shorter than modal height */
  animation: wizardStepFadeIn 0.2s ease-out;
}

/* Turbo confirm dialog: keep cancel + confirm side-by-side even on narrow
   viewports, where the global .modal-footer rule would stack them vertically
   (flex-direction: column) and wrap them (flex-wrap + flex: 1 stretch). */
.turbo-confirm-dialog .modal-footer {
  flex-flow: row nowrap;
  gap: 12px;
}

.turbo-confirm-dialog .modal-footer .button {
  flex: 0 0 auto;
}

/* Fix button alignment in modal footer */
.modal-footer .button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: auto;
  height: 38px;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: Figtree, sans-serif;
  text-decoration: none;
}

.modal-footer .button .button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: none;
}

.modal-footer .button .button-text {
  white-space: nowrap;
}

.modal-footer .button.button-secondary {
  background: transparent;
  color: var(--gm-gray-300);
  border: 1px solid var(--gm-glass-white-20);
}

.modal-backdrop-persistent {
  position: fixed;
  inset: 0;
  background: var(--gm-glass-black-30);
  z-index: 999;

  /* Below modal-overlay (1000) but above content */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 150ms ease-in-out,
    visibility 150ms;
  pointer-events: none;
}

.modal-backdrop-persistent.show {
  opacity: 1;
  visibility: visible;

  /* pointer-events intentionally omitted: click-outside-to-close is handled
     by the modal-overlay's click->modal#closeOnBackdrop action. The backdrop
     is purely visual — allowing pointer-events here causes it to intercept
     clicks on modal buttons despite having lower z-index (999 vs 1000). */
  pointer-events: none;
}

/* Allow autocomplete dropdown to overflow modal boundaries */
.modal-content .autocomplete-container {
  /* Create new stacking context */
  isolation: isolate;
}

/* When inside a modal, use fixed positioning to escape overflow clipping */
.modal-content .autocomplete-dropdown {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;

  /* Width is set dynamically by JS to match input field */
}

/* Error content styling for modals */
.turbo-frame-error-modal-content {
  padding: 0;
  background: transparent;
}

.turbo-frame-error-modal-content .turbo-frame-error-message {
  font-size: 1rem;
  color: var(--gm-gray-800);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.turbo-frame-error-modal-content .turbo-frame-error-details {
  font-size: 0.875rem;
  color: var(--gm-gray-500);
  margin-bottom: 1.5rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.turbo-frame-error-modal-content .turbo-frame-error-details strong {
  color: var(--gm-gray-800);
}

.turbo-frame-error-modal-content .turbo-frame-error-actions,
.turbo-frame-error-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0;
}

@media (height <= 600px) {
  .modal-container {
    max-height: 95vh;
    border-radius: 12px;
  }

  .modal-container .modal-content {
    padding: 12px;
  }
}

.dialog {
  position: relative;
  background-color: var(--gm-glass-black-10);
  border-radius: 15px;
  border: none;
  box-shadow: 0 4px 6px var(--gm-black);
  backdrop-filter: blur(12.5px) brightness(100%);
  min-height: 260px;
  padding: 1.5rem;
}

.dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 15px;
  background: linear-gradient(179deg, var(--gm-glass-white-30) 0%, var(--gm-glass-white-8) 100%);
  mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.dialog .text-wrapper {
  font-family: Figtree, Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--gm-white);
  font-size: 1.125rem;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.modal-backdrop {
  background-color: transparent !important;
}

/* Modal footer for wizard - consistent button layout */
.task-wizard-form + .modal-footer,
.modal-content:has(.task-wizard-step) + .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gm-glass-black-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Modal-specific error styling */
.modal-body {
  background: var(--gm-white);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  margin: 0 0 1.5rem;
  color: var(--gm-gray-800);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* ModalHeader icon variant colors */
.modal-header-icon-danger {
  color: var(--gm-status-danger);
}

.modal-header-icon-light {
  color: var(--gm-white);
}

@media (width <= 768px) {
  .modal-title {
    font-size: 24px;
  }

  .modal-footer {
    flex-direction: column;
    gap: 12px;
  }
}

/* TurboModal's header_switch: a quiet glass pill on the teal header, so it
   reads as a setting of the modal and not as part of the form below it. */
.modal-header-switch.gm-segmented-control {
  padding: 2px;
  background: var(--gm-glass-white-8);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: var(--gm-radius-sm);
}

.modal-header-switch.gm-segmented-control .gm-segmented-control__option {
  height: 22px;
  padding: 0 8px;
  border-radius: var(--gm-radius-xs);
  color: var(--gm-glass-white-70);
  font-size: 0.6875rem;
}

.modal-header-switch.gm-segmented-control .gm-segmented-control__option:hover {
  color: var(--gm-white);
}

.modal-header-switch .gm-segmented-control__input:checked + .gm-segmented-control__option {
  background: var(--gm-glass-white-15);
  color: var(--gm-white);
  box-shadow: none;
}

/* glass_morph/molecules/chip_group.css */
/* Chip group — labelled row of tri-state chips with an optional hint line. */

.gm-chip-group__legend {
  display: block;
  font-size: 0.875rem;
}

.gm-chip-group__hint {
  font-style: italic;
}

/* glass_morph/molecules/segmented_control.css */
/* Segmented control — radio buttons drawn as one connected pill group. */

/* Positioned so the hidden radios sit beside their labels. Without it they anchor
   to the app shell, outside the scrolling page, and focusing one scrolls <body>. */
.gm-segmented-control {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--gm-gray-100);
  border-radius: var(--gm-radius-md);
}

.gm-segmented-control__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gm-segmented-control__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 1rem;
  border-radius: var(--gm-radius-sm);
  color: var(--gm-gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gm-segmented-control__icon {
  color: var(--gm-gray-400);
}

.gm-segmented-control__option:hover {
  color: var(--gm-gray-800);
}

.gm-segmented-control__input:checked + .gm-segmented-control__option {
  background: var(--gm-white);
  color: var(--gm-gray-900);
  box-shadow: var(--gm-shadow-sm);
}

.gm-segmented-control__input:checked + .gm-segmented-control__option .gm-segmented-control__icon {
  color: var(--gm-teal-200);
}

/* A toned segment says good or bad once chosen: a green or red tint with a
   matching edge, the label and icon in the dark shade of the same hue. */
.gm-segmented-control__input:checked + .gm-segmented-control__option--success {
  background: var(--gm-green-500-overlay-15);
  color: var(--gm-green-tw-700);
  box-shadow: inset 0 0 0 1px var(--gm-green-500);
}

.gm-segmented-control__input:checked + .gm-segmented-control__option--danger {
  background: var(--gm-red-500-overlay-15);
  color: var(--gm-red-991b1b);
  box-shadow: inset 0 0 0 1px var(--gm-red-500);
}

.gm-segmented-control__input:checked + .gm-segmented-control__option--success .gm-segmented-control__icon,
.gm-segmented-control__input:checked + .gm-segmented-control__option--danger .gm-segmented-control__icon {
  color: inherit;
}

.gm-segmented-control__input:disabled + .gm-segmented-control__option {
  color: var(--gm-gray-400);
  cursor: not-allowed;
}

.gm-segmented-control__input:focus-visible + .gm-segmented-control__option {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: 1px;
}

.gm-segmented-control--sm .gm-segmented-control__option {
  height: 30px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}

/* Row layout: label left, control right; a list of rows sits in one bordered box. */
.gm-segmented-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.75rem 1rem;
}

.gm-segmented-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gm-segmented-row__label {
  color: var(--gm-gray-800);
  font-size: 0.9375rem;
  font-weight: 500;
}

.gm-segmented-row__hint {
  color: var(--gm-gray-500);
  font-size: 0.75rem;
}

.gm-segmented-control-list {
  overflow: hidden;
  border: 1px solid var(--gm-gray-200);
  border-radius: var(--gm-radius-md);
}

.gm-segmented-control-list > .gm-segmented-row + .gm-segmented-row {
  border-top: 1px solid var(--gm-gray-100);
}

@media (width <= 576px) {
  .gm-segmented-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* glass_morph/molecules/person_chip.css */
/* Person chip — a checkbox drawn as initials, name and role on a pill. */

/* Groups (ranks, or companies when the members span prospects) sit further
   apart than the chip rows inside one, so each eyebrow heads its own set. */
.gm-person-chips + .gm-person-chips {
  margin-top: 1rem;
}

.gm-person-chips__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gm-gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-person-chips__count {
  color: var(--gm-gray-400);
  font-weight: 600;
  letter-spacing: 0;
}

.gm-person-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 5px 14px 5px 5px;
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.gm-person-chip:hover {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-300);
}

.gm-person-chip__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gm-person-chip__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gm-teal-200-overlay-12);
  color: var(--gm-teal-200);
  font-size: 0.6875rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}

.gm-person-chip__text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.gm-person-chip__name {
  color: var(--gm-gray-800);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}

.gm-person-chip__role {
  margin-top: 2px;
  color: var(--gm-gray-500);
  font-size: 0.75rem;
  line-height: 1.2;
}

.gm-person-chip__check {
  display: none;
  color: var(--gm-teal-200);
}

.gm-person-chip:has(.gm-person-chip__input:checked) {
  background: var(--gm-teal-200-overlay-6);
  border-color: var(--gm-teal-200);
  box-shadow: 0 0 0 1px var(--gm-teal-200);
}

.gm-person-chip:has(.gm-person-chip__input:checked) .gm-person-chip__avatar {
  background: var(--gm-teal-200);
  color: var(--gm-white);
}

.gm-person-chip:has(.gm-person-chip__input:checked) .gm-person-chip__check {
  display: inline;
}

.gm-person-chip:has(.gm-person-chip__input:focus-visible) {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: 2px;
}

.gm-person-chip--static {
  gap: 0.5rem;
  padding: 4px 12px 4px 4px;
  background: var(--gm-gray-50);
  cursor: default;
}

.gm-person-chip--static:hover {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-200);
}

.gm-person-chip--static .gm-person-chip__avatar {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
}

.gm-person-chip--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* glass_morph/molecules/form_section.css */
/* Form section — heading column left, fields right, hairline between sections. */

.gm-form-section {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0 2.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--gm-gray-100);
}

.gm-form-section:first-of-type {
  border-top: none;
}

.gm-form-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.gm-form-section__title {
  margin: 0;
  color: var(--gm-gray-800);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

.gm-form-section__help {
  margin: 0;
  color: var(--gm-gray-500);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.gm-form-section__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (width <= 768px) {
  .gm-form-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* glass_morph/molecules/add_row_button.css */
/* Add-row button — dashed full-width button under a repeating form list. */

.button.gm-add-row-button {
  height: 46px;
  background: transparent;
  border: 1.5px dashed var(--gm-gray-300);
  border-radius: var(--gm-radius-md);
  color: var(--gm-gray-600);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.button.gm-add-row-button:hover {
  background: var(--gm-teal-200-overlay-6);
  border-color: var(--gm-teal-200);
  color: var(--gm-teal-200);
}

/* glass_morph/molecules/delegation_picker.css */
/* Dual-listbox delegation picker */

/* Constrain the overall picker width so lists don't stretch across the full card */
.delegation-picker {
  max-width: 640px;
}

/* List containers — gray-50 bg + gray-200 border match account-row tile-light cards */
.delegation-list {
  min-height: 10rem;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.delegation-list--drag-over {
  border-color: var(--gm-accent);
  background: color-mix(in srgb, var(--gm-accent) 8%, var(--gm-gray-50));
}

.delegation-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

/* Hover — gray-100 matches gm-bg-subtle on light surfaces */
.delegation-picker-item:hover {
  background: var(--gm-gray-100);
}

/* Selected — solid teal tint + left border stripe so it's unmistakably highlighted */
.delegation-picker-item--selected {
  background: color-mix(in srgb, var(--gm-accent) 18%, var(--gm-white));
  box-shadow: inset 3px 0 0 var(--gm-accent);
  font-weight: 500;
}

.delegation-picker-item--selected:hover {
  background: color-mix(in srgb, var(--gm-accent) 24%, var(--gm-white));
}

.delegation-picker-item--dragging {
  opacity: 0.45;
}

/* glass_morph/molecules/status_indicator.css */
/* ============================================================================ */
/* == Status dots, permission and sync cards (the StatusIndicator molecule is gone; these classes are used by views) == */
/* ============================================================================ */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sync-preferences-section {
  padding-top: 24px;
  border-top: 1px solid var(--gm-glass-white-10);
  transition: opacity 0.2s;
}

/* Status card styles */
.gm-status-card {
  background: var(--gm-gray-50);
  padding: 1.25rem;
  border: 1px solid var(--gm-gray-200);
}

.gm-status-card-enabled {
  background: var(--gm-green-50);
  padding: 1.25rem;
  border: 1px solid var(--gm-green-300);
}

/* Permission badges */
.gm-permission-enabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--gm-blue-100);
  color: var(--gm-blue-800);
}

.gm-permission-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--gm-gray-100);
  color: var(--gm-gray-400);
}

/* Status dots (connected/disconnected) */
.gm-status-dot-connected {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--gm-green-500);
}

.gm-status-dot-disconnected {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--gm-gray-400);
}

/* Auto-sync info bar (blue tint with left border) */
.gm-auto-sync-info {
  background: var(--gm-blue-overlay-5);
  border-left: 3px solid var(--gm-blue-overlay-30);
}

/* ActionIndicator urgency icon colors */
.action-indicator-medium {
  color: var(--gm-status-warning);
}

/* glass_morph/molecules/three_way_toggle.css */
/* ============================================================================ */
/* == Molecule — ThreeWayToggle ============================================= */
/* ============================================================================ */
/* Three-Way Toggle — CodePen-inspired radio button design */
.three-way-toggle {
  /* The three colours that change with the surface under the toggle. The dark
     glass values are the defaults; the light-surface block at the end of this
     file is the only place that restates them, so a new light container gets a
     correct toggle by naming itself there rather than by re-styling parts. */
  --twt-track: var(--gm-glass-black-20);
  --twt-glyph: var(--gm-glass-white-30);
  --twt-glyph-dim: var(--gm-glass-white-20);

  width: 62px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  background: var(--twt-track);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
}

/* Icons at each position */
.three-way-toggle__icon {
  position: absolute;
  z-index: 3;
  color: var(--twt-glyph);
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
}

.three-way-toggle__icon--active {
  left: 7px;
}

.three-way-toggle:has(.three-way-toggle__radio--active:checked) .three-way-toggle__icon--active {
  color: var(--gm-white);
  filter: drop-shadow(0 1px 2px var(--gm-glass-black-30));
}

.three-way-toggle__icon--neutral {
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--twt-glyph-dim);
}

.three-way-toggle__icon--off {
  right: 7px;
}

/* Hidden radio inputs */
.three-way-toggle__radio {
  display: none;
}

/* Labels as click zones — transparent until checked */
.three-way-toggle__label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  z-index: 5;
  cursor: pointer;
}

/* Position labels at left / center / right */
.three-way-toggle__radio--active + .three-way-toggle__label {
  left: 2px;
}

.three-way-toggle__radio--neutral + .three-way-toggle__label {
  left: 21px;
}

.three-way-toggle__radio--off + .three-way-toggle__label {
  right: 2px;
}

/* Checked states — visible knob for each state */
.three-way-toggle__radio--active:checked + .three-way-toggle__label {
  background: linear-gradient(to bottom, var(--gm-green-700-overlay-90), var(--gm-green-700-overlay-90));
  box-shadow: 0 1px 3px var(--gm-glass-black-20);
  animation: twt-slide-active 0.3s ease;
  transform: translateZ(0);
}

.three-way-toggle__radio--neutral:checked + .three-way-toggle__label {
  background: linear-gradient(to bottom, var(--gm-gray-d7d7d7-overlay-85), var(--gm-gray-b9b9b9-overlay-85));
  border: 1px solid var(--gm-glass-black-8);
  box-shadow: 0 1px 2px var(--gm-glass-black-12);
}

.three-way-toggle__radio--off:checked + .three-way-toggle__label {
  background: linear-gradient(to bottom, var(--gm-red-d25f5a-overlay-80), var(--gm-red-be4641-overlay-80));
  box-shadow: 0 1px 3px var(--gm-glass-black-20);
  animation: twt-slide-off 0.3s ease;
  transform: translateZ(0);
}

/* Disabled state */
.toggle-container--disabled .three-way-toggle {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* Stack label above toggle when using three-way toggle */
.toggle-container:has(.three-way-toggle) {
  flex-direction: column-reverse;
  gap: 2px;
}

.toggle-container:has(.three-way-toggle) .follow-text {
  font-size: 10px;
}

/* ── Light surface (tile-light, white tile, modal, rich stat card) ───────── */

/* On a white row the neutral knob was a white disc on a near-white track, so
   the control read as switched off in every state. It takes slate instead —
   the design system's neutral — which keeps the three states apart by colour:
   green for yes, slate for undecided, red for no. The track lightens under it
   so the dark knob is what the eye lands on, and the glyphs sitting on the
   bare track flip from white to black at the same opacity. */

:is(.tile-light, .white-tile, .modal-content, .stat-card-rich) .three-way-toggle {
  --twt-track: var(--gm-glass-black-10);

  /* Not the mirror of the dark values: 30% black on the light track measured
     1.7:1, so the control showed a knob and no sign of where it could go. The
     grey tokens are opaque and dark enough to carry — 6.1:1 for the two the
     reader aims at, 3.9:1 for the dot between them, which is a resting
     position rather than a target. */
  --twt-glyph: var(--gm-gray-600);
  --twt-glyph-dim: var(--gm-gray-500);
}

:is(.tile-light, .white-tile, .modal-content, .stat-card-rich)
  .three-way-toggle__radio--neutral:checked
  + .three-way-toggle__label {
  background: var(--gm-slate-500);
  border-color: transparent;
}

/* The glyph the knob has slid over sits on a solid disc rather than on the
   track, so it takes the light colour in whichever of these two states is
   chosen. The active glyph is already white from the rule above. */

:is(.tile-light, .white-tile, .modal-content, .stat-card-rich)
  .three-way-toggle:has(.three-way-toggle__radio--neutral:checked)
  .three-way-toggle__icon--neutral,
:is(.tile-light, .white-tile, .modal-content, .stat-card-rich)
  .three-way-toggle:has(.three-way-toggle__radio--off:checked)
  .three-way-toggle__icon--off {
  color: var(--gm-white);
}

/* glass_morph/molecules/action_bar.css */
/* Molecule — ActionBar
   The toolbar that holds one record's actions. It sits on the prospect
   header's gradient, so it needs a surface of its own to separate its buttons
   from the heading behind them. */

.gm-action-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--gm-glass-black-30);
  border: 1px solid var(--gm-glass-white-10);
}

.gm-action-bar__lead {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 0.5rem 0 0.375rem;
}

/* FeedbackButton wraps its button in a turbo-frame so the controller can
   replace it after a rating is saved. A frame is display: block, which would
   break the row — display: contents lets the button lay out as a sibling of
   the others while the frame stays a replace target. */
.gm-action-bar turbo-frame {
  display: contents;
}

/* The icon buttons that predate this bar (IconActionButton) have their own
   padding; match them to the 32px the ActionStatusButtons keep. */
.gm-action-bar .task-action-btn {
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
}

.gm-action-bar__divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--gm-glass-white-15);
}

/* An archived record keeps its bar so the values it was archived with stay
   readable; what goes is the ability to change them. The buttons are disabled
   in Ruby as well — this only says so visually.

   The "⋯" is deliberately left out: on an archived record it holds Herstellen,
   which is the one action still worth taking, and fading the only live control
   on the bar would read as if there were none. */
.gm-action-bar.is-disabled > :not(.gm-action-bar__more) {
  opacity: 0.75;
  pointer-events: none;
}

/* ActionStatusButton dims itself when disabled, and the fade above already
   dims the whole row. Both at once left the icons at 0.18 — present in the
   DOM and invisible on the header gradient. The row owns the fade; the button
   stops applying its own inside one. */
.gm-action-bar.is-disabled .gm-action-status:disabled {
  opacity: 1;
}

/* glass_morph/molecules/row_selection.css */
/*
 * Molecules — RowSelectCell / SelectionBar / SetActionsMenu
 *
 * Opt-in multi-select on a list. The row-selection controller sets
 * .is-selecting on .gm-row-selection-scope; until then nothing here shows.
 * The checkbox sits in the row's left padding, so .data-row-grid keeps its
 * columns.
 *
 * A row is a .data-row or anything with [data-row-selection-row]. A list
 * tunes the indent and the checkbox position on its scope (or any ancestor):
 *   --gm-row-select-indent  left padding while selecting   (default 46px)
 *   --gm-row-select-left    checkbox x                     (default 18px)
 *   --gm-row-select-top     checkbox y; px for rows that expand (default 50%)
 */

.gm-row-selection-scope {
  display: contents;
}

.gm-row-selection-scope :is(.data-row, [data-row-selection-row]),
.gm-row-selection-scope .list-header {
  position: relative;
  transition: padding-left 0.2s ease-out, background 0.12s ease-out, border-color 0.12s ease-out;
}

.gm-row-select {
  position: absolute;
  left: var(--gm-row-select-left, 18px);
  top: var(--gm-row-select-top, 50%);
  z-index: 1;
  transform: translateY(-50%);
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* Drawn rather than native: a native box is solid white, the brightest thing
   in every row of a long list. Unticked it is a glass well with the 3:1
   control border; ticked (or the header's "some") it turns green. */
.gm-row-select__checkbox {
  display: grid;
  place-items: center;
  margin: 0;
  border: 1.5px solid var(--gm-m-control-border);
  border-radius: var(--gm-radius-xs);
  background: var(--gm-glass-black-15);
  appearance: none;
  transition: background 0.12s ease-out, border-color 0.12s ease-out;
}

.gm-row-select__checkbox:hover {
  border-color: var(--gm-glass-white-80);
}

.gm-row-select__checkbox:focus-visible {
  outline: var(--gm-outline-width) solid var(--gm-glass-white-60);
  outline-offset: 2px;
}

.gm-row-select__checkbox:is(:checked, :indeterminate) {
  border-color: var(--gm-green-600);
  background: var(--gm-green-600);
}

.gm-row-select__checkbox:checked::after {
  width: 5px;
  height: 9px;
  transform: translateY(-1px) rotate(45deg);
  border: solid var(--gm-white);
  border-width: 0 2px 2px 0;
  content: "";
}

.gm-row-select__checkbox:indeterminate::after {
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--gm-white);
  content: "";
}

.is-selecting :is(.data-row, [data-row-selection-row]),
.is-selecting .list-header {
  padding-left: var(--gm-row-select-indent, 46px);
}

.is-selecting .gm-row-select {
  opacity: 1;
  pointer-events: auto;
}

/* In a heading line (the DMU's "select every member"): part of the flow, and
   out of it entirely until selection mode, so the heading does not keep a gap. */
.gm-row-select--inline {
  position: static;
  display: none;
  transform: none;
}

.is-selecting .gm-row-select--inline {
  display: flex;
}

.is-selecting :is(.data-row, [data-row-selection-row]) {
  cursor: pointer;
  user-select: none;
}

.is-selecting :is(.data-row, [data-row-selection-row]):hover {
  background: var(--gm-glass-white-8);
}

.data-row.is-selected,
[data-row-selection-row].is-selected {
  border-color: var(--gm-green-300-overlay-30);
  background: var(--gm-glass-white-10);
}

/* "Selecteren" while selecting: teal, label unchanged. */
[data-row-selection-target="modeToggle"].is-active,
[data-row-selection-target="modeToggle"][aria-pressed="true"] {
  background: var(--gm-teal-500);
  border-color: var(--gm-teal-500);
  color: var(--gm-white);
}

/* ── SelectionBar ────────────────────────────────────────────────────────── */
.gm-selection-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 940;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 16px;
  border-radius: 14px;
  background: var(--gm-teal-850-95);
  backdrop-filter: var(--gm-blur-md);
  border: 1px solid var(--gm-glass-white-15);
  box-shadow: var(--gm-shadow-popover);
  white-space: nowrap;
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-out, opacity 0.18s ease-out;
}

.is-selecting .gm-selection-bar {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.gm-selection-bar__count {
  min-width: 120px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-white);
}

.gm-selection-bar__note {
  padding: 0 6px;
  font-size: 13px;
  color: var(--gm-glass-white-60);
}

.gm-selection-bar__hint {
  padding: 0 6px;
  font-size: 12px;
  color: var(--gm-glass-white-50);
}

/* The bar sits at the bottom of the viewport, so its menu opens upwards. */
.gm-selection-bar .gm-dropdown-button__menu {
  top: auto;
  bottom: calc(100% + 10px);
}

.gm-selection-bar .gm-dropdown-button .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (width <= 768px) {
  .gm-selection-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-wrap: wrap;
    white-space: normal;
    transform: translateY(140%);
  }

  .is-selecting .gm-selection-bar {
    transform: none;
  }

  .gm-selection-bar__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-selection-bar,
  .gm-row-select,
  .gm-row-selection-scope :is(.data-row, [data-row-selection-row]),
  .gm-row-selection-scope .list-header {
    transition: none;
  }
}

/* glass_morph/molecules/filter_select.css */
/* ============================================================================ */
/* == Molecule — FilterSelect / ActivityFilter ============================== */
/* ============================================================================ */
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot.hot {
  background: var(--gm-red-500);
}

.legend-dot.warm {
  background: var(--gm-amber-600); /* orange — outside palette */
}

.legend-dot.nurture {
  background: var(--gm-yellow-500); /* amber — outside palette */
}

.legend-dot.cold {
  background: var(--gm-blue-500);
}

.event-icon-wrapper {
  flex-shrink: 0;
}

/* Significance badge (circular number) */
.significance-badge-high {
  background: var(--gm-green-500);
  background-color: var(--gm-green-50);
  color: var(--gm-green-900);
}

.significance-badge-medium {
  background: var(--gm-blue-500);
  background-color: var(--gm-amber-50);
  color: var(--gm-amber-800);
}

.significance-badge-low {
  background: var(--gm-yellow-500);

  /* Significance Badges for Signal Items */
  background-color: var(--gm-gray-100);
  color: var(--gm-gray-500);
}

/* Signal title (non-link) */
.indicator-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-blue-600);
}

/* Signal title link hover effect */
.indicator-title-link:hover {
  text-decoration: underline !important;
}

.indicator-title-link {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--gm-blue-600);
  text-decoration: none;
}

.indicator-title-text {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 500;
  color: var(--gm-blue-600);
}

/* =============================================================================
   Activity Event Category Filter
   ============================================================================= */
.activity-event-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.activity-filter-shell {
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}

/* Trigger + period select — base styling */
.activity-filter-trigger,
.activity-period-select {
  box-sizing: border-box;
  min-height: 38px;
  background: var(--gm-glass-white-95);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--gm-gray-800);
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    outline-color 0.15s ease;
}

.prospects-toolbar .activity-event-filter {
  gap: 8px;
}

.prospects-toolbar .activity-filter-trigger,
.prospects-toolbar .activity-period-select {
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  padding: 0 1.8rem 0 0.75rem;
  line-height: 1.2;
  background-color: var(--gm-glass-white-15);
  border: 1px solid var(--gm-glass-white-30);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gm-white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 6px center;
  background-size: 12px;
}

.prospects-toolbar .activity-filter-trigger:hover,
.prospects-toolbar .activity-filter-trigger:focus-visible,
.prospects-toolbar .activity-period-select:hover,
.prospects-toolbar .activity-period-select:focus-visible {
  background-color: var(--gm-glass-white-20);
  border-color: var(--gm-glass-white-50);
  box-shadow: 0 0 0 2px var(--gm-glass-white-15);
  outline: none;
}

.activity-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 8px 36px 8px 12px;
  font-weight: 500;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.activity-filter-trigger:hover,
.activity-filter-trigger:focus-visible,
.activity-period-select:hover,
.activity-period-select:focus-visible {
  background-color: var(--gm-gray-100);
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

/* Funnel icon inside trigger */
.activity-filter-funnel-icon {
  display: flex;
  align-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

.prospects-toolbar .activity-filter-funnel-icon {
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

/* Selected count badge on trigger */
.gm-badge.activity-filter-badge, .gm-badge.activity-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gm-filter-control-count) !important;
  color: var(--gm-white);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.prospects-toolbar .activity-filter-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 2px;
  font-size: 10px;
}

/* Header variant — placed inside .content-section-header (dark background) */
.activity-event-filter--header {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  min-width: 0;
}

.activity-event-filter--compact {
  display: none;
}

.activity-filter-trigger--header {
  padding-right: 1.8rem;
  justify-content: flex-start;
  text-align: left;
}

.activity-filter-trigger--header .activity-filter-funnel-icon {
  width: var(--gm-filter-control-font);
  height: var(--gm-filter-control-font);
  opacity: 1;
}

.activity-filter-trigger--compact {
  min-width: 130px;
}

/* Dropdown panel — white background */
.activity-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--gm-black-overlay-12);
  min-width: 220px;
  overflow: hidden;
}

.activity-filter-panel--compact {
  right: 0;
  left: auto;
  min-width: 320px;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.activity-filter-compact-section {
  padding: 6px 14px;
  border-bottom: 1px solid var(--gm-gray-200);
}

.activity-filter-compact-section .gm-segmented-slider {
  width: 100%;
  height: 24px;
}

.activity-filter-compact-section .gm-segmented-slider__track {
  border: 0;
}

.activity-filter-compact-label {
  display: block;
  margin-bottom: 4px;
  color: var(--gm-gray-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.activity-filter-panel--compact .activity-filter-panel-inner {
  max-height: 260px;
  margin: 0 -14px;
  padding: 6px 0;
}

.activity-filter-panel--compact .activity-period-select--header {
  width: 100%;
  min-height: 31px;
  color: var(--gm-gray-800);
  background-color: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.activity-filter-panel--compact .activity-filter-footer {
  display: block;
}

.activity-filter-panel-inner {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
}

/* Individual category option */
.activity-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gm-gray-700);
  transition: background 0.1s;
  user-select: none;
  margin: 0;
  font-weight: 400;
}

.activity-filter-option:hover {
  background: var(--gm-gray-100);
}

.activity-filter-option.active {
  background: var(--gm-gray-50);
  color: var(--gm-gray-900);
  font-weight: 500;
}

.activity-filter-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--gm-teal-400);
  cursor: pointer;
  flex-shrink: 0;
}

/* Colored category dot */
.activity-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gm-glass-white-30);
}

/* Footer with "clear all" link */
.activity-filter-footer {
  padding: 4px 14px 6px;
  border-top: 1px solid var(--gm-gray-200);
}

@media (width >= 768px) {
  .activity-filter-footer {
    display: none;
  }
}

/* Select all / clear all footer is always visible inside the type dropdown
   panel (id selector overrides the mobile-only display:none above).
   TypePeriodFilter renders the same panel without that id. */
#activity-filter-panel .activity-filter-footer,
[data-controller~="type-period-filter"] .activity-filter-footer {
  display: block;
}

/* Select all + clear all links */
.activity-filter-select-all,
.activity-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--gm-gray-500);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

/* Icon atom defaults to fs-6 (1rem); scale down to match the 11px link text */
.activity-filter-footer [class*="gm-icon-"] {
  font-size: 1.2em;
}

.activity-filter-select-all:hover {
  color: var(--gm-green-500);
  text-decoration: none;
}

.activity-filter-clear:hover {
  color: var(--gm-red-500);
  text-decoration: none;
}

/* Category label and count inside filter option */
.activity-filter-option-label {
  flex: 1;
}

.activity-filter-count {
  font-size: 12px;
  color: var(--gm-gray-500);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.activity-filter-option.active .activity-filter-count {
  color: var(--gm-gray-500);
}

/* Period selector — matches trigger button styling */
.activity-period-select {
  display: inline-block;
  padding: 8px 32px 8px 10px;
  font-weight: 400;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  min-width: 120px;
}

.prospects-toolbar .activity-period-select option {
  background: var(--gm-teal-100);
  color: var(--gm-white);
}

.activity-period-select--header {
  width: auto;
  min-width: 0;
  min-height: var(--gm-filter-control-height);
  cursor: pointer;
}

.prospects-sort-filter {
  position: relative;
  display: inline-flex;
}

.prospects-sort-filter__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gm-glass-white-30);
  border-radius: 6px;
  background: var(--gm-glass-white-15);
  color: var(--gm-white);
  cursor: pointer;
  list-style: none;
}

.prospects-sort-filter__trigger::-webkit-details-marker {
  display: none;
}

.prospects-sort-filter__trigger:hover,
.prospects-sort-filter__trigger:focus-visible {
  background-color: var(--gm-glass-white-20);
  border-color: var(--gm-glass-white-50);
  outline: none;
}

.prospects-sort-filter__trigger:focus-visible {
  border-color: var(--gm-glass-white-60);
  box-shadow: 0 0 0 2px var(--gm-glass-white-15);
}

.prospects-sort-filter__trigger.is-active {
  border-color: var(--gm-score-good);
  background: var(--gm-score-good);
  color: var(--gm-white);
}

.prospects-sort-filter__icon {
  font-size: 1rem;
  line-height: 1;
}

.prospects-sort-filter__panel {
  right: 0;
  left: auto;
  min-width: 240px;
}

.prospects-sort-filter__option {
  text-decoration: none;
}

.prospects-sort-filter__panel .activity-filter-footer {
  display: block;
}

@media (width <= 1370px) {
  .activity-event-filter--header {
    gap: 8px;
  }

  .activity-filter-trigger--header,
  .activity-period-select--header {
    padding: 6px 28px 6px 10px;
    font-size: 13px;
  }

  .activity-filter-shell {
    gap: 8px;
  }

  .activity-event-filter--header.activity-event-filter--inline {
    display: none;
  }

  .activity-event-filter--header.activity-event-filter--compact {
    display: inline-flex;
  }
}

/* ── Grouped checkbox filter menu (FilterCheckboxMenu) ──────────────────────
   Reuses the .activity-filter-* trigger, panel, option and footer vocabulary
   above; only the group header and the dividers between groups are new. */
.prospect-filter-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Wider than the single-axis panel to fit "Klaar om contact op te nemen (12)",
   and scrollable as a whole so the group headers scroll with their rows. */
.prospect-filter-menu__panel {
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
}

.prospect-filter-group + .prospect-filter-group {
  border-top: 1px solid var(--gm-gray-200);
}

/* gray-600 on the panel's white, not the gray-400 the counts use: at 10px this
   is small text, so it needs 4.5:1 and gray-400 gives 2.6:1. */
.prospect-filter-group-label {
  display: block;
  padding: 8px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-gray-600);
}

/* The panel owns the scroll, so each group's rows lay out at full height. */
.prospect-filter-group .activity-filter-panel-inner {
  max-height: none;
  padding: 0 0 6px;
}

/* .activity-filter-footer is display:none from 768px up, un-hidden only by an
   id selector naming the activity panel. Without this the reset link is
   invisible on every desktop viewport. */
.prospect-filter-menu__panel .activity-filter-footer {
  display: block;
}

/* glass_morph/molecules/confidence_indicator.css */
/* ============================================================================ */
/* == Molecule — ConfidenceIndicator ======================================== */
/* ============================================================================ */
.confidence-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-weight: 700;
}

/* ConfidenceIndicator molecule — pill variant (works on any background) */
.confidence-indicator-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gm-gray-200);
  border: 1px solid var(--gm-gray-300);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  position: relative;
}

.confidence-indicator-pill[data-controller="tooltip"]:hover {
  background: var(--gm-gray-300);
  border-color: var(--gm-gray-400, var(--gm-gray-400));
}

.confidence-indicator-pill.confidence-indicator-compact {
  gap: 0;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.confidence-indicator-pill.confidence-indicator-compact > span:first-child {
  display: none;
}

.confidence-indicator-pill.confidence-indicator-compact .confidence-indicator-value {
  color: inherit;
}

.confidence-indicator-pill.confidence-indicator-compact:has(.confidence-indicator-high) {
  background: var(--gm-score-excellent);
  color: var(--gm-white);
}

.confidence-indicator-pill.confidence-indicator-compact:has(.confidence-indicator-medium) {
  background: var(--gm-score-good);
  color: var(--gm-white);
}

.confidence-indicator-pill.confidence-indicator-compact:has(.confidence-indicator-low) {
  background: var(--gm-score-fair);
  color: var(--gm-white);
}

/* The level dot before the value; the compact pill hides it (first child). */
.confidence-indicator-dot--high {
  background: var(--gm-status-success);
}

.confidence-indicator-dot--medium {
  background: var(--gm-status-warning);
}

.confidence-indicator-dot--low {
  background: var(--gm-status-danger);
}

.confidence-indicator-dot--none {
  background: var(--gm-gray-400);
}

.confidence-indicator-pill .confidence-indicator-high {
  color: var(--gm-green-700);
}

.confidence-indicator-pill .confidence-indicator-medium {
  color: var(--gm-amber-600);
}

.confidence-indicator-pill .confidence-indicator-low {
  color: var(--gm-gray-500);
}

/* Confidence indicator */

/* glass_morph/molecules/summary_item.css */
/* ============================================================================ */
/* == Molecule — SummaryItem ================================================ */
/* ============================================================================ */
/* Summary Page Styles */
.summary-label {
  min-width: 8rem;
  display: inline-block;
}

.task-wizard-step.summary-step .summary-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* glass_morph/molecules/indicator_item.css */
/* ============================================================================ */
/* == Molecule — IndicatorItem ================================================= */
/* ============================================================================ */
.interest-indicators-section {
  border-left: 4px solid var(--gm-red-600);
  margin-top: 0;
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 10px;
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  box-shadow: 0 1px 4px var(--gm-glass-black-6);
  transition: box-shadow 0.2s ease;
}

.interest-indicators-section .section-icon-wrap {
  background: var(--gm-status-danger-bg);
  color: var(--gm-red-600);
}

.indicator-evidence-group {
  margin-top: 10px;
}

.indicator-evidence-list {
  margin-top: 6px;
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.indicator-evidence-item {
  padding-left: 10px;
  border-left: 2px solid var(--gm-gray-200);
}

.indicator-evidence-item .evidence-title,
.indicator-evidence-item .event-source {
  font-size: 12px;
  color: var(--gm-gray-700);
}

.indicator-evidence-item .event-source:hover {
  color: var(--gm-gray-900);
}

.influence-indicators-list,
.key-indicators-list,
.indicators-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.indicator-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.indicator-tag {
  display: inline-flex;
  padding: 5px 10px;
  background: var(--gm-gray-100);
  color: var(--gm-gray-500);
  font-size: 11px;
  font-weight: 500;
  border-radius: 10px;
}

.event-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-blue-500);
  text-decoration: none;
  transition: color 0.2s;
}

.event-source:hover {
  color: var(--gm-blue-600);
}

.source-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--gm-blue-100);
  color: var(--gm-blue-800);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.source-link:hover {
  background: var(--gm-blue-200);
  color: var(--gm-blue-800);
}

/* Indicator card container */
.indicator-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
}

/* Indicator card content */
.indicator-card-content {
  flex: 1;
}

/* Evidence item styles */
.evidence-title {
  font-weight: 500;
  color: var(--gm-blue-600);
}

/* Key indicators section */
.key-indicators-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-gray-500);
  margin-bottom: 8px;
}

/* Indicator item */
.indicator-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  font-size: 12px;
}

.indicator-content {
  flex: 1;
}

.indicator-relevance {
  color: var(--gm-gray-500);
  margin-left: 4px;
}

/* Key Indicators section divider and heading (matches reference implementation) */
.key-indicators-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gm-gray-100);
}

.key-indicators-heading {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-gray-500);
  margin-bottom: 8px;
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Indicator Item styling (matches reference implementation) */
.indicator-item-row {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.indicator-relevance-text {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--gm-gray-500);
  margin-left: 4px;
}

/* glass_morph/molecules/help_menu.css */
/* ─── HelpMenu molecule ──────────────────────────────────────────────────── */

.gm-help-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Dropdown panel — .hidden class toggled by dropdown_controller.js */
.gm-help-menu__panel.hidden { display: none; }

.gm-help-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 9900;

  /* Wider than the old 220px: curriculum titles are sentences, and at 320
     "Why a prospect scored the way it did" ellipsed. */
  min-width: 340px;
  max-width: 340px;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  background: var(--gm-teal-850-95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gm-glass-white-10);
  border-radius: 12px;

  /* The same two layers `.gm-dropdown-button__menu` casts — the two panels are
     the same object to a reader and should not drift. The third layer this had,
     a 1px rim in #6366f1, was off the palette entirely: no token holds that
     colour, and the nearest name (--gm-indigo-500) is #7c3aed. */
  box-shadow:
    0 16px 40px var(--gm-glass-black-40),
    inset 0 1px 0 var(--gm-glass-white-5);
}

/* ─── The peek ───────────────────────────────────────────────────────────────
   The panel opening and closing on its own, which is a different object from
   the menu a reader pressed `?` to get.

   Different because it has a different job. A clicked menu answers a question
   already asked, so it can be terse: a title, a duration, a 40px marker. The
   peek has to earn attention nobody offered it, in the few seconds before it
   leaves. So it is wider, its rows are taller, and its frames are big enough
   to actually read — the frame is the part that says what the next three
   minutes look like, and at 40px it says nothing.

   The motion is deliberately slower than the 200ms the design system caps
   interactive feedback at. That cap is about not making a reader wait for
   feedback on their own action; this is not feedback, and there is no action.
   Movement fast enough to be invisible in peripheral vision would defeat the
   only reason the panel opens itself. */
.gm-help-menu__panel--peek {
  min-width: 420px;
  max-width: 420px;
}

.gm-help-menu__panel--peek .gm-help-menu__item {
  gap: 14px;
  padding: 10px 16px;
  font-size: 14px;
}

/* Frame and fallback glyph share a box, so rows line up whether or not the
   publish step found a thumbnail for that video. */
.gm-help-menu__panel--peek .gm-video-thumb,
.gm-help-menu__panel--peek .gm-help-menu__glyph--video {
  width: 132px;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}

@keyframes gm-help-peek-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gm-help-peek-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(-14px) scale(0.92);
  }
}

/* Out of the `?` it belongs to, rather than in from nowhere: that is what
   tells the reader where it came from and where to press to get it back. */
.gm-help-menu__panel--peek-in,
.gm-help-menu__panel--peek-out {
  transform-origin: top right;
}

.gm-help-menu__panel--peek-in { animation: gm-help-peek-in 520ms ease-out both; }
.gm-help-menu__panel--peek-out { animation: gm-help-peek-out 420ms ease-in both; }

/* The controller waits for `animationend` before hiding the panel, and a
   one-millisecond animation still fires it — so turning the motion off here
   leaves the sequence intact rather than stranding an open panel. */
@media (prefers-reduced-motion: reduce) {
  .gm-help-menu__panel--peek-in,
  .gm-help-menu__panel--peek-out { animation-duration: 1ms; }
}

/* Section label */
.gm-help-menu__header {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gm-teal-500);
}

/* A row: glyph, title, trailing meta. Videos are links (they open the modal in
   the turbo frame), tours are buttons (they start a client-side journey), so
   both element types have to look identical. */
.gm-help-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.4;

  /* Was --gm-slate-300, which is not a token that exists — every row has been
     falling back to whatever it inherited. */
  color: var(--gm-gray-300);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.gm-help-menu__item:hover,
.gm-help-menu__item:focus-visible {
  /* 8%, not the 7% this had: the opacity scale has no 7 step, and this is the
     row hover `.gm-dropdown-button__item` already uses. */
  background: var(--gm-glass-white-8);
  color: var(--gm-slate-100);
  outline: none;
}

.gm-help-menu__item--video { font-weight: 500; }

/* The form around the dismiss row is structural only — the row has to look and
   sit exactly like the video rows above it, so the form must not introduce a
   box of its own. */
.gm-help-menu__dismiss-form { display: contents; }

/* Quieter than the rows it sits under: it is the way out, not an offer — and
   one line tall in both panels. Doubled up to out-specify the peek panel's own
   row padding, which is written for rows carrying a 16:9 thumbnail. */
.gm-help-menu__item.gm-help-menu__item--dismiss {
  font-size: 12px;
  color: var(--gm-gray-400);
  padding-block: 5px;
}

/* No tile behind it: a checkbox is already a box, and the one it sat in was
   the video thumbnail's, seventy pixels tall for a single sentence. */
.gm-help-menu__glyph--dismiss {
  width: 16px;
  height: 16px;
  background: none;
}

/* The checkbox sits in the glyph slot the video thumbnails use, so its label
   starts on the same column as theirs rather than three pixels left of it. */
.gm-help-menu__checkbox {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--gm-teal-500);
  cursor: pointer;
}

.gm-help-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-help-menu__meta {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-slate-500);
}

.gm-help-menu__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.gm-help-menu__glyph--video { background: var(--gm-teal-overlay-20); }

/* Always the last row: the planned count, or the way into the library. */
.gm-help-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  margin-top: 4px;
  border-top: 1px solid var(--gm-glass-white-8);
  font-size: 12px;
  color: var(--gm-gray-400);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.gm-help-menu__footer:hover,
.gm-help-menu__footer:focus-visible {
  background: var(--gm-glass-white-5);
  color: var(--gm-slate-100);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .gm-help-menu__item,
  .gm-help-menu__footer { transition: none; }
}

/* glass_morph/molecules/contact_item.css */
/* ============================================================================ */
/* == Molecule — ContactItem ================================================ */
/* ============================================================================ */
.stakeholder-row.stakeholder-secondary .stakeholder-name,
.stakeholder-row.stakeholder-secondary .stakeholder-role-dept,
.stakeholder-row.stakeholder-secondary .contact-item,
.stakeholder-row.stakeholder-secondary .detail-link,
.stakeholder-row.stakeholder-secondary .meta-line,
.stakeholder-row.stakeholder-secondary .stakeholder-expand-btn {
  color: var(--gm-white);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.contact-item i {
  color: var(--gm-gray-400);
  font-size: 14px;
  width: 16px;
}

/* glass_morph/molecules/task_card.css */
/* ============================================================================ */
/* == Molecule — TaskCard (base kanban card + action instance card) ========= */
/* ============================================================================ */

/* ============================================================================ */
/* == Molecule — TaskCard =================================================== */
/* ============================================================================ */
.action-label {
  font-size: 14px;
  color: var(--gm-glass-white-80);
}

.outreach-proposal-box {
  color: var(--gm-gray-600);
  background: var(--gm-glass-white-60);
  border: 1px solid var(--gm-amber-overlay-12);
}

.outreach-proposal-box--full {
  white-space: pre-wrap;
}

/* Task Card */
.task-card {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  box-shadow: 0 6px 18px var(--gm-slate-900-overlay-8);
  padding: 0.875rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: move;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  position: relative;
}

/* Task card content wrapper - takes remaining space */
.task-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-right: 3rem;
}

/* Task card checkbox - matching home page style */
.task-card-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gm-gray-300);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.task-card-checkbox:hover {
  border-color: var(--gm-blue-500);
}

.task-card-checkbox.checked {
  background-color: var(--gm-green-500);
  border-color: var(--gm-green-500);
  position: relative;
}

.task-card-checkbox.checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid var(--gm-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Task card checkbox link wrapper */
.task-card-checkbox-link, .task-checkbox-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

/* Disabled checkbox for viewer role */
.task-card-checkbox-link:hover .task-card-checkbox {
  border-color: var(--gm-blue-500);
  transform: scale(1.05);
}

.task-card-checkbox-link:hover .task-card-checkbox.checked {
  background-color: var(--gm-green-700);

  /* green-700 — not in palette, keep literal */
  border-color: var(--gm-green-700);
}

.task-card:hover {
  border-color: var(--gm-gray-300);
  box-shadow: 0 2px 8px var(--gm-glass-black-6);
}

.task-card:active {
  cursor: grabbing;
}

.task-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

/* Done + Skipped tasks - shared muted card styling */
.task-card-done,
.task-card-skipped {
  background: linear-gradient(135deg, var(--gm-slate-50) 0%, var(--gm-slate-100) 100%);
  border: 1px solid var(--gm-gray-200);
}

/* Done tasks - additional muted child styling */
.task-card-done .task-title {
  color: var(--gm-slate-500);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gm-gray-400);
  opacity: 0.85;
}

.task-card-done .task-description {
  color: var(--gm-slate-500);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gm-gray-400);
  opacity: 0.8;
}

/* Skipped tasks - additional muted child styling */
.task-card-skipped .task-title {
  color: var(--gm-gray-600);
}

.task-card-skipped .task-description {
  color: var(--gm-slate-500);
}

/* Failed tasks - error styling */
.task-card-failed {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  cursor: default;
}

.task-card-failed:hover {
  cursor: default;
}

.task-card-failed .task-title {
  color: var(--gm-red-700); /* red-800 — not in palette */
}

.task-card-failed .task-description {
  color: var(--gm-slate-500);
}

.task-card-failed .task-card-summary-meta,
.task-card-failed .task-card-activity-footer {
  color: var(--gm-slate-500);
}

.task-card-failed .task-card-summary-item--action,
.task-card-failed .task-card-summary-item--prospect {
  color: var(--gm-teal-500);
}

.task-card-failed .gm-badge-slate {
  background: var(--gm-red-500);
  color: var(--gm-white);
}

/* Task Card Placeholder — see multi-selector with .action-instance-card-placeholder below */
.task-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
}

.task-card-header-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.task-card-header-spacer {
  flex: 1;
}

.task-card-header-main .gm-badge {
  min-width: 80px;
  justify-content: center;
}

.task-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.task-title-link:hover .task-title {
  color: var(--gm-blue-600);
}

.task-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gm-slate-800);
  margin: 0;
  line-height: 1.3;
}

.task-actions {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.task-description {
  color: var(--gm-slate-500);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 0.45rem;
  margin-left: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-card-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--gm-slate-500);
  margin-left: 20px;
}

.task-card-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-card-summary-item:first-child {
  gap: 0;
}

.task-card-summary-item--prospect {
  color: var(--gm-teal-500);
}

.task-card-summary-item--action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--gm-teal-600);
  font-weight: 600;
  background: var(--gm-teal-overlay-8);
  border: 1px solid var(--gm-teal-overlay-20);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.75rem;
}

.task-card-summary-item--date {
  color: var(--gm-slate-500);
}

/* The date of an open task past its deadline, or due today: coloured text
   and nothing more. The card stays calm; the lane's group says the rest.
   Shared with the dashboard's TaskMeta row. */
.task-due--overdue {
  color: var(--gm-red-600);
  font-weight: 600;
}

.task-due--today {
  color: var(--gm-amber-800);
  font-weight: 600;
}

.task-card-summary-item--assignee {
  color: var(--gm-slate-500);
}

.task-card-actions-menu {
  position: absolute;
  top: 0.7rem;
  right: 0.625rem;
  z-index: 2;
  margin: 0;
}

.task-card-actions-menu[open] {
  z-index: 3;
}

.task-card-actions-trigger {
  list-style: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-slate-400);
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

.task-card-actions-trigger::-webkit-details-marker {
  display: none;
}

.task-card-actions-trigger:hover,
.task-card-actions-menu[open] .task-card-actions-trigger {
  background: var(--gm-slate-100);
  color: var(--gm-slate-500);
}

.task-card-actions-popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: max-content;
  padding: 0.5rem;
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--gm-slate-900-overlay-12);
}

.task-card-actions {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.kanban-board .select-wrapper {
  position: relative;
}

.kanban-board .select-input {
  width: 180px;
  padding: 8px 36px 8px 12px;
  background: var(--gm-glass-white-95);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--gm-gray-800);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
}

.kanban-board .select-input:focus {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

/* Placeholder - Full card size, height set by JavaScript */
.task-card-placeholder {
  background: var(--gm-teal-1aafc9-overlay-16);
  border: 2px dashed var(--gm-teal-1aafc9-overlay-72);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--gm-glass-white-18);
  flex-shrink: 0;
}

/* Task Activity Footer — subtle last-activity line */
.task-card-activity-footer {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--gm-slate-500);
  font-style: italic;
  margin-top: 0.25rem;
  margin-left: 20px;
}

/* Multi-select on the board (TasksContainer selectable:). The card is white,
   so the shared row rules (a glass well for the box, a glass tint for a
   ticked row) would vanish on it: the box is a white square with a gray
   border here, and a ticked card gets a green ring. The checkbox sits in the
   card's left padding, level with the title. */
.task-selection-scope {
  --gm-row-select-left: 0.875rem;
  --gm-row-select-top: 1.5rem;
}

.is-selecting .task-card {
  padding-left: 2.75rem;
  cursor: pointer;
  user-select: none;
}

.task-card .gm-row-select__checkbox:not(:checked) {
  border-color: var(--gm-gray-400);
  background: var(--gm-white);
}

.task-card .gm-row-select__checkbox:not(:checked):hover {
  border-color: var(--gm-green-600);
}

.task-card.is-selected {
  border-color: var(--gm-green-600);
  box-shadow: 0 0 0 1px var(--gm-green-600);
}

/* glass_morph/molecules/task_modal.css */
/* ============================================================================ */
/* == Molecule — TaskModal / TaskForm / ActionTypeSelector ================== */
/* ============================================================================ */
/* TaskModal uses .modal-overlay system for positioning/backdrop/visibility.
   .task-modal-container overrides .modal-container defaults for white background. */
.task-modal-container {
  background: var(--gm-white) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px var(--gm-glass-black-20) !important;
  max-width: 900px;
}

/* Loading State */
.task-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  gap: 16px;
  color: var(--gm-gray-500);
}

.task-modal-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gm-teal-400-overlay-20);
  border-top-color: var(--gm-teal-400);
  border-radius: 50%;
  animation: task-modal-spin 0.8s linear infinite;
}

.action-type-category {
  margin-bottom: 20px;
}

.action-type-category:last-child {
  margin-bottom: 0;
}

.action-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--gm-white);
}

.action-type-tree {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: visible;
  background: var(--gm-white);
}

/* Always expanded variant */
.action-type-tree.always-expanded {
  max-height: none;
  overflow: visible;
}

/* Category header - static (non-clickable) */
.action-type-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bs-gray-100);
  border: none;
  border-bottom: 1px solid var(--bs-border-color);
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bs-body-color);
}

/* Static header - no hover/pointer */
.action-type-category-header.static {
  cursor: default;
}

.action-type-category:last-child .action-type-category-header {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Category name and count */
.action-type-category-header .category-name {
  font-weight: 600;
}

.action-type-category-header .category-count {
  font-size: 0.75rem;
  color: var(--bs-secondary);
  font-weight: 400;
}

/* Type list - always visible */
.action-type-list.show {
  display: block;
}

/* Selectable type label */
.action-type-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.2;
}

/* Hide native radio — replaced by the ::before custom indicator */
.action-type-label .action-type-radio {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Custom radio button appearance */
.action-type-label::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid var(--bs-border-color);
  border-radius: 50%;
  background: var(--gm-white);
  box-sizing: border-box;
  transition: all 0.15s ease;
}

/* glass_morph/molecules/task_wizard.css */
/* ============================================================================ */
/* == Molecule — TaskWizard / TaskInspect / ActionInstanceCard ============== */
/* ============================================================================ */
/* Base wizard step container — scrolls when content exceeds available space
   (e.g. high browser zoom, small viewports). Height is constrained by the
   parent .modal-content flex chain; max-height is a fallback safety net. */
.task-wizard-step {
  max-height: calc(90vh - 200px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Introduction step - compact layout */
.task-wizard-step.introduction-step {
  gap: 0.75rem;
}

.task-wizard-step.introduction-step .overview-section {
  flex: 0 0 auto;
}

/* Task details - tighter form spacing */
.task-wizard-step.task-details-step .form-control-plaintext {
  padding: 0.375rem 0;
  font-size: 0.9rem;
}

/* Context step - compact card */
.task-wizard-step.context-step .glass-container {
  padding: 0.75rem !important;
}

.task-wizard-step.context-step .timeline-event-description {
  margin-bottom: 0;
}

/* The heading and the line under it share a column beside the channel icon, so
   the second line starts where the first one does. */
.details-header-headings {
  min-width: 0;
}

/* Type details - compact form */
.task-wizard-step.type-details-step textarea.form-control {
  min-height: 200px;
  max-height: none;
  resize: vertical;
}

/* Summary step - compact review sections */
.task-wizard-step.summary-step .summary-section {
  margin-bottom: 0.5rem;
}

.task-wizard-step.summary-step .glass-container {
  padding: 0.75rem !important;
}

/* Form control styling for wizard */
.task-wizard-form .form-control,
.task-wizard-form .form-select {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--gm-gray-200);
  background-color: var(--gm-gray-50);
  transition: all 0.15s ease;
}

.task-wizard-form .form-select {
  --bs-form-select-bg-icon: none;

  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 18px 18px;
}

.task-wizard-form .form-control:focus,
.task-wizard-form .form-select:focus {
  background-color: var(--gm-white);
  border-color: var(--gm-teal-400);
  box-shadow: 0 0 0 2px var(--gm-teal-400-overlay-10);
  outline: none;
}

.task-wizard-form .form-select:focus,
.task-wizard-form .form-select.is-valid:not([multiple], [size]),
.task-wizard-form .form-select.is-valid:not([multiple])[size="1"],
.task-wizard-form .form-select.is-invalid:not([multiple], [size]),
.task-wizard-form .form-select.is-invalid:not([multiple])[size="1"],
.was-validated .task-wizard-form .form-select:valid:not([multiple], [size]),
.was-validated .task-wizard-form .form-select:valid:not([multiple])[size="1"],
.was-validated .task-wizard-form .form-select:invalid:not([multiple], [size]),
.was-validated .task-wizard-form .form-select:invalid:not([multiple])[size="1"] {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-size: 18px 18px;
}

.task-wizard-form .form-text {
  font-size: 0.75rem;
  color: var(--gm-gray-500);
}

/* Responsive adjustments */
@media (height <= 700px) {
  .task-wizard-step {
    max-height: calc(95vh - 180px);
  }

  .task-wizard-step.type-details-step textarea.form-control {
    min-height: 140px;
    max-height: none;
    resize: vertical;
  }
}

/* Context tabs (wizard step 2) - compact variant of task-inspect-tabs */
.context-tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 2px solid var(--gm-gray-200);
  margin-bottom: 1rem;
}

/* Compact prospect section */
.task-inspect-prospect-compact {
  margin-bottom: 1.5rem;
}

.task-inspect-prospect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.task-inspect-prospect-link-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
  flex: 1;
  min-width: 0;
}

.task-inspect-prospect-link-inline:hover {
  opacity: 0.8;
}

.task-inspect-prospect-name-inline {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gm-blue-600);
}

/* Content section header */
.task-inspect-subsection-header {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gm-gray-700);
  margin-bottom: 0.75rem;
}

/* Footer button alignment */
.task-inspect-modal-container .modal-footer {
  justify-content: flex-end !important;
}

/* Scheduling section - all fields on one line with compact controls */
.task-inspect-scheduling-form {
  width: 100%;
}

.task-inspect-scheduling-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.task-inspect-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.task-inspect-control {
  flex: 1;
  min-width: 0;
}

/* Compact form controls - reduced height */
.task-inspect-scheduling-form .form-select,
.task-inspect-scheduling-form .form-control {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  height: 2rem;
  line-height: 1.5;
  border-radius: 0.375rem;
}

.task-inspect-scheduling-form .form-select {
  padding-right: 2rem;
  background-position: right 0.5rem center;
  background-size: 16px 12px;
}

/* Ensure dropdowns don't overflow */
.task-inspect-scheduling-row .form-select {
  min-width: 110px;
  max-width: 100%;
}

.task-inspect-scheduling-row .form-control {
  min-width: 130px;
  max-width: 100%;
}

/* Date picker specific styling */
.task-inspect-scheduling-form input[type="date"] {
  cursor: pointer;
}

.task-inspect-scheduling-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
}

/* Action type header - icon and text inline */
.task-inspect-action-type-header {
  display: block;
  margin-bottom: 0.5rem;
}

.task-inspect-action-type-header .flex {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.task-inspect-action-type-header h3,
.task-inspect-action-target {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.task-inspect-action-type-header h3 {
  margin: 0;
  line-height: 1.5;
}

.task-inspect-action-type-header i {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
}

/* AI generation overlay (shown while AI generates task content) */
.ai-generate-overlay {
  position: absolute;
  inset: 0;
  background: var(--gm-glass-white-70);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 8px;
  min-height: 200px;
}

.ai-generate-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Expanded type selector step - ensure modal is big enough */
.type-selector-expanded {
  min-height: auto;
}

/* glass_morph/molecules/timeline.css */
/* ============================================================================ */
/* == Molecule — Timeline =================================================== */
/* ============================================================================ */
.influence-timeline-events .timeline-events,
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-event {
  padding: 12px 14px;
  border-left: 3px solid var(--gm-violet-500);
  background: var(--gm-indigo-50);
  border-radius: 0 8px 8px 0;
  margin-bottom: 4px;
}

.event-title {
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.4;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.event-tag {
  display: inline-flex;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
}

.event-tag:nth-child(1) {
  background: var(--gm-red-200);
  color: var(--gm-red-700);
}

.event-tag:nth-child(2) {
  background: var(--gm-blue-100);
  color: var(--gm-blue-800);
}

.event-date {
  font-size: 11px;
  color: var(--gm-gray-400);
}

.event-description {
  font-size: 14px;
  color: var(--gm-gray-900);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Custom elements default to display:inline, which shrink-wraps the activity
   tab's lazy-loaded frame — pushing the (narrow) empty state off-center while a
   populated timeline looks fine because its wide cards fill the line. Force the
   frame block so its content spans the full tab width and centers correctly. */
#activity_timeline {
  display: block;
}

.timeline-date-section {
  margin-bottom: 24px;
}

.timeline-date-section:last-child {
  margin-bottom: 0;
}

/* Restore gap between infinite-scroll batches: each subsequent page loads inside
   a <turbo-frame> sibling of the first .timeline-container */
.timeline-container ~ turbo-frame .timeline-container {
  margin-top: 24px;
}

.timeline-events {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
}

.timeline-event-card {
  padding: 24px;
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  background: var(--gm-white);
  transition: all 0.2s ease;
}

.timeline-event-card:hover {
  box-shadow:
    0 4px 6px -1px var(--gm-glass-black-10),
    0 2px 4px -1px var(--gm-glass-black-6);
}

.event-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-weight: 500;
  border-radius: 12px;
  background: var(--gm-blue-100);
  white-space: nowrap;
}

.event-title a {
  font-size: 18px;
  font-weight: 700;
}

.event-significance {
  display: flex;
  gap: 12px;
  padding: 16px;
  margin: 16px 0;
  background: var(--gm-amber-50);

  /* amber-100 - outside palette */
  border-left: 4px solid var(--gm-yellow-500);
  border-radius: 0 8px 8px 0;
}

.event-metadata {
  margin: 18px 0 2px;
  padding-top: 0;
  border-top: 0;
}

.event-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gm-gray-100);
}

/* Timeline event styles */
/* Timeline Event Card Wrapper */
.timeline-event-card-wrapper {
  margin-bottom: 0;
}

.timeline-event-card-wrapper:last-child {
  margin-bottom: 0;
}

/* Timeline Event Header - matches .event-header in reference */
.event-header,
.timeline-event-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Event Badges Container - matches .event-badges in reference */
.event-badges,
/* Event Badge - matches .event-badge in reference */
.event-badge,
/* Timeline Event Title - matches .event-title in reference */
.event-title,
/* Timeline Event Timestamp */
.timeline-event-time {
  font-size: 14px;
  color: var(--gm-gray-500);
}

/* Timeline Event Source Link - matches .event-source-link in reference */
.timeline-event-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--gm-blue-500);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.timeline-event-source-link:hover, .timeline-event-source a:hover {
  color: var(--gm-blue-600);
  text-decoration: underline;
}

/* Timeline Event Source Links Container */
.timeline-event-source-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.timeline-event-source-links .timeline-event-source-link {
  margin-bottom: 0;
}

.event-badges .timeline-event-source-link {
  margin-bottom: 0;
  white-space: nowrap;
}

.event-badges .timeline-event-source-link .text-body {
  margin-bottom: 0 !important;
}

.event-badges .timeline-event-source-link .text-decoration-none {
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Timeline Event Body */
.timeline-event-body {
  color: var(--gm-gray-900);
  padding-top: 4px;
}

/* Timeline Event Description - matches .event-description in reference */
.timeline-event-description, .timeline-event-description p {
  font-size: 14px;
  color: var(--gm-gray-900);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Timeline Event Metadata - matches .event-metadata in reference */
.event-metadata,
/* Timeline Event Indicators */
.timeline-event-indicators {
  margin-top: 16px;
}

/* Timeline Event Stakeholders */
.timeline-event-stakeholders {
  margin-top: 16px;
}

/* Space before the card footer, matching the 16px the relevance box leaves.
   The body is a block, so these collapse with each other's top margin. */
.timeline-event-indicators,
.timeline-event-stakeholders {
  margin-bottom: 16px;
}

/* Timeline Event Source Link */
.timeline-event-source a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--gm-blue-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Timeline Event Relevance (Why This Matters) - event-significance in reference */
.timeline-event-relevance {
  display: flex;
  gap: 12px;
  padding: 16px;
  margin: 16px 0;
  background: var(--gm-amber-50);
  border-left: 4px solid var(--gm-yellow-500);
  border-radius: 0 8px 8px 0;
}

.timeline-event-relevance .relevance-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--gm-amber-600);
}

.timeline-event-relevance .relevance-icon svg,
.timeline-event-relevance .relevance-icon i {
  color: var(--gm-amber-600);
  font-size: 16px;
}

.timeline-event-relevance .relevance-content {
  flex: 1;
}

.timeline-event-relevance .relevance-content h6,
.significance-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-amber-800);
  margin: 0 0 8px;
}

.timeline-event-relevance .relevance-content p,
.significance-text {
  font-size: 14px;
  color: var(--gm-amber-900);
  line-height: 1.5;
  margin: 0;
}

/* Timeline Event Footer - matches .event-actions in reference */
.timeline-event-footer {
  display: flex;
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}

/* Timeline Detail Link */
.timeline-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--gm-blue-500);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.timeline-detail-link:hover {
  color: var(--gm-blue-600);
}

/* Timeline Event Variant Classes */
.timeline-card-compact .timeline-event-header {
  margin-bottom: 0;
}

/* Upcoming event styling (future-dated events category) */
.timeline-event-upcoming {
  border-left: 0;
  background: transparent;
}

/* Website-visit card: one row per page read that day. Fixed tracks keep the
   views and the product in a column from row to row on a wide card. */
.visit-page-row {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 12rem minmax(0, 1fr);
  column-gap: var(--gm-row-gap);
  align-items: center;
  padding: 8px 0;
}

.visit-page-row + .visit-page-row {
  border-top: 1px solid var(--gm-ctx-separator);
}

@media (width <= 640px) {
  .event-title {
    font-size: 16px;
  }

  .visit-page-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
}

/* glass_morph/molecules/kanban.css */
/* ============================================================================ */
/* == Molecule — KanbanColumn / KanbanBoard ==================================== */
/* ============================================================================ */

/* Tasks Page Container */
#tasksView.page-inner {
  width: 100%;
  background: var(--gm-content-pane-bg);
  flex: 1;
  overflow-y: auto;
}

#tasksView .navbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Kanban Board Container - 3 Column Grid Layout */
.kanban-board {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  height: calc(100vh - 280px) !important;
  min-height: 500px !important;
  padding: 0 !important;
}

/* Individual Column Styling. No backdrop-filter: three blurred columns under
   the blurred .modal-overlay made Chromium drop tiles on a 5K screen, so the
   board flickered and lost cards whenever a task modal opened. */
.kanban-column {
  display: flex !important;
  flex-direction: column !important;
  background: var(--gm-teal-1a3d4d-overlay-20) !important;
  border: 1px solid var(--gm-glass-white-10) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Column Header: title, then the column total (Badge.number variant :total) */
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.kanban-column-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gm-white);
  margin: 0;
}

/* A lane drawn in deadline groups (design B3): 8px between the cards of a
   group, 20px from a group's last card to the next group's heading. */
.kanban-column-content[data-grouped="true"] {
  gap: 20px !important;
}

.kanban-column-content .task-group__items {
  gap: 8px;
}

/* Scrollable Column Content Area */
.kanban-column-content {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  padding-right: 0.25rem !important;
  min-height: 100px !important;
}

.kanban-column-content::-webkit-scrollbar {
  width: 6px;
}

.kanban-column-content::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-column-content::-webkit-scrollbar-thumb {
  background: var(--gm-teal-1a3d4d-overlay-30);
  border-radius: 3px;
}

.kanban-column-content::-webkit-scrollbar-thumb:hover {
  background: var(--gm-teal-1a3d4d-overlay-50);
}

@media (width <= 1280px) {
  .kanban-board {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 1rem;
  }
}

@media print {
  .kanban-board {
    display: block;
    height: auto;
  }

  .kanban-column {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 2rem;
  }
}

@media (width <= 768px) {
  .kanban-column {
    min-height: 300px;
    max-height: 500px;
  }
}

/* glass_morph/molecules/pricing_card.css */
/* ============================================================================ */
/* == Molecule — PricingCard ================================================ */
/* ============================================================================ */
/* Custom Scrollbar for Column Content */
.subscription-dialog-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(180deg, var(--gm-green-400) 0%, var(--gm-green-600) 100%);
  color: var(--gm-white);
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.subscription-dialog-button:hover {
  opacity: 0.9;
}

.subscription-dialog-button i {
  margin-right: 8px;
}

.pricing-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 48px 24px;
}

.pricing-header {
  text-align: center;
  margin-bottom: 48px;
}

.pricing-header .hero-title {
  margin-bottom: 12px;
}

.pricing-billing-toggle {
  margin: 1.5rem 0 calc(2rem + 20px);
}

.pricing-billing-switch {
  display: inline-flex;
  align-items: center;
}

.pricing-billing-switch .pricing-billing-tab {
  padding: 10px 22px;
  font-size: 16px;
  line-height: 1.2;
}

.pricing-billing-switch .pricing-billing-tab.active {
  background: var(--gm-green-600);
  color: var(--gm-white);
}

.pricing-billing-save-badge {
  background: var(--gm-teal-500);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
}

@media (width <= 1100px) {
  .pricing-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 720px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px var(--gm-glass-black-15);
}

.pricing-card.solo,
.pricing-card.starter,
.pricing-card.business,
.pricing-card.enterprise {
  border-color: var(--gm-blue-500-overlay-60);
  border-width: 3px;
}

.pricing-card.featured, .pricing-card.professional {
  border-color: var(--gm-green-500-overlay-60);
  border-width: 3px;
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gm-green-500);
  color: var(--gm-white);
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pricing-badge.enterprise {
  background: var(--gm-blue-500);
}

.pricing-card-header {
  margin-bottom: 0;
  padding-bottom: 24px;
  min-height: 122px;
}

.pricing-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gm-white);
  margin-bottom: 12px;
}

.pricing-price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 58px;
}

.pricing-price > [data-billing-period-toggle-target] {
  display: block;
  min-height: 58px;
}

.price-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--gm-white);
}

.price-period {
  font-size: 14px;
  color: var(--gm-glass-white-70);
  font-weight: 400;
  line-height: 1.25;
}

.price-vat-qualifier {
  margin-left: 4px;
  font-size: 12px;
  color: var(--gm-glass-white-60);
  font-weight: 400;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-billing-note {
  display: block;
  margin-top: 2px;
  color: var(--gm-glass-white-60);
  font-size: 12px;
  line-height: 1.25;
}

.pricing-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--gm-white);
  padding: 20px;
  border-radius: 0;
  margin-left: -18px;
  margin-right: -18px;
  padding-left: 20px;
  padding-right: 20px;
}

.pricing-feature-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.pricing-feature-label {
  font-size: 14px;
  color: var(--gm-slate-800);
  font-weight: 500;
}

.pricing-feature-value {
  font-size: 14px;
  color: var(--gm-slate-500);
  font-weight: 600;
}

.pricing-token-hint {
  font-size: 12px;
  color: var(--gm-slate-500);
  font-style: italic;
  padding: 4px 0 8px;
  line-height: 1.4;
}

.pricing-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gm-slate-300-overlay-30);
}

.pricing-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pricing-feature-icon {
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-feature-icon.active {
  color: var(--gm-green-500);
}

.pricing-feature-icon.inactive {
  color: var(--gm-gray-300); /* slate-200 - outside palette */
}

.pricing-feature-item span {
  font-size: 14px;
  color: var(--gm-slate-800);
  font-weight: 400;
  line-height: 1.5;
}

.pricing-feature-item .feature-disabled {
  color: var(--gm-gray-400);
}

.pricing-feature-details {
  font-size: 12px;
  color: var(--gm-slate-500);
  margin-top: 2px;
  line-height: 1.4;
}

.pricing-card-footer {
  margin-top: auto;
  padding-top: 16px;
}

.pricing-button {
  display: block;
  text-align: center;
  text-decoration: none;
  position: relative;
  width: 100%;
  padding: 14px 24px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: Figtree, sans-serif;
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-600) 100%);
  color: var(--gm-white);
}

.pricing-button span {
  position: relative;
  z-index: 2;
}

.pricing-button:hover {
  color: var(--gm-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--gm-green-600-overlay-30);
}

.pricing-button.secondary::before {
  display: none;
}

.pricing-button.secondary:hover,
.pricing-button:disabled:hover,
.pricing-button[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* Disabled state for current subscription */
.pricing-button:disabled,
.pricing-button[disabled] {
  background: var(--gm-slate-600-overlay-50);
  color: var(--gm-glass-white-70);
  cursor: not-allowed;
  opacity: 0.8;
  pointer-events: none;
}

.pricing-button:disabled::before,
.pricing-button[disabled]::before {
  display: none;
}

/* Individual Pricing Card */
.pricing-card {
  position: relative;
  background: var(--gm-teal-900-overlay-40);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--gm-teal-200-overlay-30);
  transition: all 0.3s ease;
  box-shadow:
    0 4px 6px -1px var(--gm-glass-black-15),
    0 2px 4px -1px var(--gm-glass-black-10);
}

/* Pricing Button */
.pricing-button.secondary {
  background: var(--gm-blue-500);
  color: var(--gm-white);
  cursor: default;
}

/* AddonCard icon box */
.subscription-addon-card {
  min-width: 0;
}

.subscription-addon-grid {
  row-gap: 1.5rem;
}

.provider-card.subscription-addon-card:hover {
  border-color: transparent !important;
  box-shadow: var(--gm-shadow-card) !important;
  transform: none !important;
}

.subscription-addon-card .gm-icon-box {
  flex-shrink: 0;
}

/* AddonCard keeps the line breaks of its description */
.subscription-addon-card .provider-card-description {
  white-space: pre-line;
  min-height: 5.5rem;
  margin-bottom: 0;
}

.subscription-addon-card .addon-price-row {
  flex-wrap: wrap;
}

.subscription-addon-card .button-primary [class*="gm-icon-"],
.subscription-addon-card .button-primary [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

@media (width <= 1200px) {
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 768px) {
  .price-amount {
    font-size: 30px;
  }

  .price-period {
    font-size: 14px;
  }
}

/* glass_morph/molecules/integration_card.css */
/* ============================================================================ */
/* == Molecule — IntegrationCard ============================================ */
/* ============================================================================ */
/* Settings / AutomationPlatformCard */
.integration-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.integration-card svg {
  max-width: 100%;
  max-height: 100%;
}

.provider-card:not(.disabled):hover {
  border-color: var(--gm-indigo-500);
  box-shadow: 0 4px 12px var(--gm-purple-500-overlay-15);
  transform: translateY(-2px);
}

.provider-card.selected {
  border-color: var(--gm-indigo-500);
  border-width: 2px;
  background: var(--gm-purple-500-overlay-5);
}

.provider-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.integration-card-connected {
  background: var(--gm-white);
  border: 1px solid var(--gm-green-500-overlay-50);
  box-shadow: 0 0 20px var(--gm-green-500-overlay-15);
}

.integration-card-unavailable {
  opacity: 0.6;
}

.provider-card {
  background: var(--gm-white);
  transition: all 0.2s;
  cursor: pointer;
}

.provider-card:hover {
  box-shadow: 0 4px 12px var(--gm-glass-black-10);
}

/* Integration logos */
.integration-logo {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

.integration-logo.disabled {
  opacity: 0.5;
  filter: grayscale(50%);
}

.integration-card-link:hover > div {
  box-shadow:
    0 4px 12px var(--gm-glass-black-10),
    0 2px 4px var(--gm-glass-black-6);
  border-color: var(--gm-gray-300);
}

.gm-integration-card-transition {
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* ProviderCard card styling */
.provider-card,
.provider-card--disabled {
  border-radius: 16px;
  box-shadow: var(--gm-shadow-card);
  border: 2px solid transparent;
  padding: 30px;
}

.email-provider-panel {
  margin-top: 1.5rem;
}

.email-provider-panel .email-provider-panel-content {
  --gm-ctx-bg-field: var(--gm-gray-50);
  --gm-ctx-separator: var(--gm-gray-200);
  --gm-ctx-text-primary: var(--gm-gray-900);
  --gm-ctx-text-secondary: var(--gm-gray-700);

  background: var(--gm-white);
  border-radius: 16px;
  box-shadow: var(--gm-shadow-card);
  padding: 24px;
}

.email-provider-panel .email-provider-panel-content .input,
.email-provider-panel .email-provider-panel-content .select,
.email-provider-panel .email-provider-panel-content .gm-form-field {
  background-color: var(--gm-gray-50);
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-900);
}

.email-provider-panel .email-provider-panel-content .select {
  background-color: var(--gm-gray-50);
}

.email-provider-panel .email-provider-panel-content .password-input-wrapper.gm-form-field {
  padding: 0;
  background: transparent;
  border: 0;
}

.email-provider-panel .email-provider-panel-content .input:focus,
.email-provider-panel .email-provider-panel-content .select:focus,
.email-provider-panel .email-provider-panel-content .gm-form-field:focus {
  background-color: var(--gm-white);
  border-color: var(--gm-teal-300);
  box-shadow: 0 0 0 3px var(--gm-blue-overlay-10);
}

.email-provider-panel .email-provider-panel-content .gm-subdomain-suffix {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-200);
}

.content-section--light-header.email-provider-panel .btn-close-panel {
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-700);
}

.content-section--light-header.email-provider-panel .btn-close-panel:hover {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-300);
  color: var(--gm-gray-900);
}

.email-provider-panel .button-primary [class*="gm-icon-"],
.email-provider-panel .button-primary [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

/* glass_morph/molecules/danger_zone.css */
/* ============================================================================ */
/* == Molecule — DangerZone ================================================= */
/* ============================================================================ */
/* Danger Zone Styles */
/* Danger Zone Container */
.danger-zone {
  margin-top: 1.5rem;
  border: 2px solid var(--gm-red-500-overlay-30);
  border-left: 4px solid var(--gm-red-600);
  border-radius: 10px;
  padding: 2rem;
  background: var(--gm-glass-white-95);
}

/* Header */
.danger-zone-header {
  margin-bottom: 1.5rem;
}

.danger-zone-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.danger-zone-icon {
  font-size: 1.75rem;
  color: var(--gm-red-600);
  flex-shrink: 0;
}

.danger-zone-description {
  margin-bottom: 0;
}

/* Warning Box */
.danger-warning {
  background: var(--gm-yellow-overlay-8);
  border-radius: 10px;
  padding: 0.75rem;
  margin: 1.5rem 0;
}

.danger-warning-header {
  display: flex;
  align-items: start;
  gap: 10px;
  margin-bottom: 0.5rem;
}

.danger-warning-icon {
  color: var(--gm-yellow-500);
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}

.danger-warning-title {
  color: var(--gm-teal-700);
  font-size: 14px;
  flex: 1;
}

.danger-warning-list {
  margin: 0;
  padding-left: 28px;
  color: var(--gm-gray-700);
  line-height: 1.6;
  font-size: 14px;
}

.danger-warning-item {
  margin-bottom: 4px;
}

/* Action Row */
.danger-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-top: 1.5rem;
  background: var(--gm-red-500-overlay-4);
  border-radius: 10px;
  border: 1px solid var(--gm-red-500-overlay-15);
  gap: 1.25rem;
}

.danger-action-info {
  flex: 1;
}

.danger-action-title {
  color: var(--gm-teal-700);
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}

.danger-action-description {
  color: var(--gm-gray-500);
  font-size: 13px;
}

/* glass_morph/molecules/info_box.css */
/* ============================================================================ */
/* == Molecule — InfoBox / KvkInfoBox ======================================= */
/* ============================================================================ */
.info-box {
  padding: 12px;
  margin: 0;
  border-radius: 8px;
}

/* Blue tint and border, text in the surface's own colour, blue icon */
.info-box-info {
  background: var(--gm-blue-overlay-4);
  border: 1px solid var(--gm-blue-overlay-10);
}

.info-box-info > [class*="gm-icon-"],
.info-box-info > [class*="gm-icon-"]::before {
  color: var(--gm-blue-primary);
}

.info-box-warning {
  background: var(--gm-status-warning-bg);
}

.info-box-success {
  background: var(--gm-status-success-bg);
}

.info-box-error {
  background: var(--gm-status-danger-bg);
}

.info-box-neutral {
  background: var(--gm-glass-black-10);
}

.kvk-info-box-wrapper {
  margin-top: 4px;
}

/* KVK Preview Card (found company) */
.kvk-preview-card {
  background: var(--gm-green-50) !important;

  /* green-50 - outside palette */
  border: 1px solid var(--gm-green-500) !important;
  border-radius: 8px;
  backdrop-filter: none !important;
}

/* Reference customer add button - wider for longer text */
.kvk-preview-card .button-primary {
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 20px;
}

/* glass_morph/molecules/wizard.css */
/* ============================================================================ */
/* == Molecule — WizardNavigation / WizardStep ============================== */
/* ============================================================================ */
/* Wizard Introduction Section Heading */
.wizard-section-heading {
  margin-bottom: 16px;
}

.wizard-overview-list {
  gap: 14px;
}

.wizard-overview-step {
  gap: 18px;
}

.wizard-overview-step .gm-badge-step {
  margin-top: 2px;
  width: 22px;
  height: 22px;
}

.wizard-overview-step .paragraph {
  margin-bottom: 0;
}

.modal-content .prospect-discovery-wizard-introduction,
.modal-content .prospect-discovery-wizard-form,
.modal-content .prospect-registration-wizard-introduction,
.modal-content .prospect-registration-wizard-form {
  --gm-ctx-text-primary: var(--gm-gray-900);
  --gm-ctx-text-secondary: var(--gm-gray-600);
  --gm-ctx-text-muted: var(--gm-gray-500);
}

.wizard-step-item .paragraph {
  margin-bottom: 0;
}

.wizard-step-item .gm-badge-step {
  margin-top: 2px;
}

.introduction-step .welcome-section {
  margin-bottom: 0 !important;
}

.modal-content .introduction-step {
  position: relative;
}

.modal-content .introduction-step .steps-preview {
  position: static;
}

.modal-content .introduction-step .steps-preview > .d-flex.flex-row.gap-md.justify-end.mt-3 {
  position: absolute;
  top: 8px;
  right: 30px;
  margin-top: 0 !important;
}

.modal-content .introduction-step .steps-preview .checkbox-label-text {
  font-style: italic;
  color: var(--gm-gray-500);
}

.modal-content .introduction-step .steps-preview > .d-flex.flex-row.gap-sm.justify-start.align-center.small.mt-3.mb-0 {
  margin-top: 0 !important;
}

/* Shared wizard step chrome on light modal surfaces */
.modal-content > .introduction-step,
.modal-content > .d-flex.flex-column.px-4.pt-3.pb-3,
.modal-content > form.prospect-discovery-wizard-form.px-4.pt-3.pb-3 {
  padding: 0 !important;
}

.modal-content .intro-text {
  margin-bottom: 16px;
}

.modal-content .intro-text .glass-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.modal-content .intro-text .d-flex.flex-row {
  align-items: flex-start;
  gap: 12px;
}

.modal-content .intro-text [class*="gm-icon-"],
.modal-content .intro-text [class*="gm-icon-"]::before {
  color: var(--gm-teal-200) !important;
  flex-shrink: 0;
}

.modal-content .intro-text .paragraph,
.modal-content .intro-text p {
  margin-bottom: 0 !important;
  line-height: 1.6;
}

.modal-content .form-section {
  gap: 16px;
}

.modal-content .form-section > .heading.heading-dark,
.modal-content .glass-container > .heading.heading-dark {
  margin-bottom: 12px;
  line-height: 1.3;
}

.modal-content .glass-container.p-3 > .heading.heading-dark,
.modal-content .glass-container.p-4 > .heading.heading-dark,
.modal-content .glass-container.mb-4.p-3 > .heading.heading-dark {
  margin-bottom: 10px;
}

#wizardForm_basic .glass-container.p-3 {
  padding: 0 !important;
}

#wizardForm_basic .d-flex.flex-column.gap-md.px-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Wizard Modal Backdrop */
.step-number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gm-glass-white-5);
  border: 2px solid var(--gm-glass-white-10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-white);
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
  text-decoration: none;
}

a.step-number {
  cursor: pointer;
}

a.step-number:hover {
  background: var(--gm-glass-white-10);
  border-color: var(--gm-glass-white-30);
}

.step-number.active {
  transform: scale(1.1);
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-600) 100%);
  color: var(--gm-white);
  border-color: var(--gm-green-600);
  box-shadow: 0 2px 8px var(--gm-green-600-overlay-30);
}

.step-number.completed {
  background: var(--gm-green-500-overlay-15);
  border-color: var(--gm-green-500-overlay-50);
  color: var(--gm-glass-white-70);
}

.step-line {
  flex-shrink: 0;
  transition: all 0.3s ease;
  width: 20px;
  height: 2px;
  background: var(--gm-glass-white-10);
}

.step-line.completed {
  background: var(--gm-green-500-overlay-50);
}

.modal-step-indicator--compact {
  gap: 4px;
}

.modal-step-indicator--compact .step-number {
  width: 30px;
  height: 30px;
}

.scoring-recommendation-panel,
.scoring-recommendation-panel p,
.scoring-recommendation-panel span:not([class*="gm-icon-"], .gm-badge),
.scoring-recommendation-panel .gm-text-primary,
.scoring-recommendation-panel .gm-text-muted,
.scoring-recommendation-panel .text-dark,
.scoring-recommendation-panel .confidence-indicator-value {
  color: var(--gm-gray-900) !important;
}

.scoring-recommendation-panel .gm-badge {
  color: var(--gm-white) !important;
}

.modal-step-indicator--compact .step-line {
  width: 20px;
}

.modal-step-indicator--compact .modal-step-title {
  margin-right: 12px;
}

/* Wizard navigation divider */
.type-details-step .row {
  margin-bottom: 0.25rem;
}

.type-details-step .form-text {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.gm-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gm-blue-overlay-8);
  color: var(--gm-blue-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Compact form-select height for prospect discovery wizard */
.prospect-discovery-wizard-form .form-select {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* Search Terms wizard step — compact form groups */
.search-terms-form-group {
  gap: 4px;
}

@media (width <= 480px) {
  .page-inner > .flex-row.justify-between > .flex-row {
    flex-wrap: wrap;
  }
}

@media (width <= 768px) {
  .warmth-ranking-row .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* glass_morph/molecules/onboarding.css */
/* ============================================================================ */
/* == Molecule — OnboardingBanner =========================================== */
/* ============================================================================ */
.modal-container[data-testid^="simple-onboarding-"],
.modal-container[data-testid^="onboarding-"] {
  margin-top: 70px;
}

#wizardForm_welcome .form-section {
  gap: 10px;
}

#wizardForm_welcome .intro-text {
  margin-bottom: 4px;
}

#wizardForm_welcome .gap-md {
  gap: 8px;
}

#wizardForm_welcome .form-grid {
  gap: 12px 16px;
}

#wizardForm_welcome .form-group,
#wizardForm_welcome .form-grid > div {
  gap: 4px;
}

#wizardForm_welcome .form-help {
  margin-bottom: 0;
}

#wizardForm_welcome .invalid-feedback,
.modal-container[data-testid^="onboarding-"] .invalid-feedback {
  min-height: 1rem;
  margin-top: -2px;
  margin-bottom: 0;
  line-height: 1.15;
}

.modal-container[data-testid^="onboarding-"] .form-section {
  gap: 10px;
}

.modal-container[data-testid^="onboarding-"] .intro-text {
  margin-bottom: 4px;
}

.modal-container[data-testid^="onboarding-"] .intro-text .glass-container {
  padding: 0 !important;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.modal-container[data-testid^="onboarding-"] .intro-text .d-flex.flex-row {
  gap: 10px;
}

.modal-container[data-testid^="onboarding-"] .intro-text [class*="gm-icon-"] {
  display: none;
}

.modal-container[data-testid^="onboarding-"] .intro-text .heading {
  margin-bottom: 4px;
}

.modal-container[data-testid^="onboarding-"] .intro-text .paragraph {
  color: var(--gm-gray-600);
  margin-bottom: 0;
}

.modal-container[data-testid^="onboarding-"] .form-section > .d-flex.flex-column.gap-md,
.modal-container[data-testid^="onboarding-"] form .gap-md {
  gap: 8px;
}

.modal-container[data-testid^="onboarding-"] .form-grid {
  gap: 12px 16px;
}

.modal-container[data-testid^="onboarding-"] .form-group,
.modal-container[data-testid^="onboarding-"] .form-grid > div {
  gap: 4px;
}

.modal-container[data-testid^="onboarding-"] .form-help {
  margin-bottom: 0;
}

.modal-container[data-testid^="onboarding-"] .glass-container .wizard-step-item {
  gap: 10px;
}

.modal-container[data-testid^="onboarding-"] .glass-container .wizard-step-item .gm-text-primary {
  color: var(--gm-gray-900) !important;
}

.modal-container[data-testid^="onboarding-"] .glass-container .wizard-step-item .paragraph {
  color: var(--gm-gray-600) !important;
  margin-bottom: 0;
}

.modal-container[data-testid^="onboarding-"] .glass-container .heading-dark {
  color: var(--gm-gray-900) !important;
}

.modal-container[data-testid^="onboarding-"] .glass-container .text-muted,
.modal-container[data-testid^="onboarding-"] .glass-container .paragraph {
  color: var(--gm-gray-600);
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] {
  padding: 8px 12px !important;
  background: var(--gm-glass-white-28);
  border-color: var(--gm-slate-900-overlay-8);
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .ai-description-header {
  gap: 12px;
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .ai-description-header > .d-flex:first-child {
  min-width: 0;
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .heading {
  color: var(--gm-gray-900) !important;
  margin-bottom: 0;
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .paragraph {
  color: var(--gm-gray-600) !important;
  margin-bottom: 0;
  line-height: 1.3;
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .button-primary {
  color: var(--gm-white) !important;
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .button-primary [class*="gm-icon-"] {
  color: var(--gm-white) !important;
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .ai-description-feedback {
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gm-slate-900-overlay-8);
  color: var(--gm-gray-600);
}

.modal-container[data-testid^="onboarding-"] [data-testid="ai-description-section"] .extraction-error,
.modal-container[data-testid^="onboarding-"] .product-url-feedback-row .extraction-error {
  display: block;
  color: var(--gm-red-500) !important;
  line-height: 1.35;
}

.modal-container[data-testid^="onboarding-"] .product-url-feedback-row {
  width: 100%;
  min-height: 1.25rem;
  margin-top: 4px;
}

.modal-container[data-testid="onboarding-welcome"] .introduction-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-container[data-testid="onboarding-welcome"] .onboarding-welcome-section {
  margin-bottom: 0;
}

.modal-container[data-testid="onboarding-welcome"] .onboarding-welcome-section .heading {
  margin-bottom: 6px;
}

.modal-container[data-testid="onboarding-welcome"] .onboarding-welcome-steps {
  background: var(--gm-glass-white-35);
  border-color: var(--gm-slate-900-overlay-8);
}

.modal-container[data-testid="onboarding-welcome"] .onboarding-welcome-time-box {
  background: var(--gm-glass-white-24);
  border-color: var(--gm-slate-900-overlay-7);
}

.modal-container[data-testid="onboarding-welcome"] .onboarding-welcome-time-box .paragraph {
  margin-bottom: 0;
}

.simple-onboarding-radar-section {
  background: var(--gm-green-500-overlay-7);
  border-radius: 8px;
  border-left: 3px solid var(--gm-green-500-overlay-50);
}

.simple-onboarding-refine-tip {
  background: var(--gm-teal-346f82-overlay-6);
  border-radius: 8px;
  border-left: 3px solid var(--gm-teal-200-overlay-40);
}

@media (width <= 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* glass_morph/molecules/website_link.css */
/* ============================================================================ */
/* == Molecule — WebsiteLink ================================================ */
/* ============================================================================ */
/* Website Link */
.website-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gm-glass-white-85);
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 0;
}

.website-link:hover {
  color: var(--gm-white);
}

/* Keep the globe visible and let only the domain give way when the column is
   narrower than the hostname. */
.website-link .globe-icon {
  flex: 0 0 auto;
}

/* glass_morph/molecules/pagination.css */
/* ============================================================================ */
/* == Molecule — Pagination ================================================= */
/* ============================================================================ */
/* Pagination container - matches glassmorphism design */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  margin-top: 24px;
  background: var(--gm-glass-white-3);
  border: 1px solid var(--gm-glass-white-8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

/* Pagination info section (left side) */
.pagination-info {
  font-size: 14px;
  color: var(--gm-glass-white-60);
  font-weight: 500;
}

.pagination-info-highlight {
  color: var(--gm-glass-white-85);
  font-weight: 600;
}

/* Pagination controls section (right side) */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pagination button base styles */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  background: var(--gm-glass-white-5);
  border: 1px solid var(--gm-glass-white-10);
  border-radius: 8px;
  color: var(--gm-glass-white-80);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pagination-btn:hover {
  background: var(--gm-glass-white-8);
  border-color: var(--gm-glass-white-15);
  color: var(--gm-white);
  transform: translateY(-1px);
}

/* Active page button */
.pagination-btn.active {
  background: var(--gm-nav-item-active-bg);
  border-color: var(--gm-teal-200);
  color: var(--gm-white);
  font-weight: 600;
}

.pagination-btn.active:hover {
  transform: none;
}

/* Navigation buttons (Previous/Next) */
.pagination-btn.nav-btn {
  gap: 6px;
  padding: 0 14px;
}

/* Disabled state */
.pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ellipsis */
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  color: var(--gm-glass-white-30);
  font-size: 14px;
  font-weight: 500;
}

/* Icon within pagination buttons */
.pagination-icon {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.pagination-btn:hover .pagination-icon {
  opacity: 1;
}

/* ------------------------------------
   PAGINATION LIGHT VARIANT
   For white/light background pages (admin)
   ------------------------------------ */
.pagination-light {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  backdrop-filter: none;
}

.pagination-light .pagination-info {
  color: var(--gm-gray-500);
}

.pagination-light .pagination-info-highlight {
  color: var(--gm-gray-800);
}

.pagination-light .pagination-btn {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);

  /* Bootstrap gray-300 — outside palette */
  color: var(--gm-gray-700);
}

.pagination-light .pagination-btn:hover {
  background: var(--gm-gray-100);

  /* Bootstrap gray-200 — outside palette */
  border-color: var(--gm-gray-300);

  /* Bootstrap gray-400 — outside palette */
  color: var(--gm-gray-900);
}

.pagination-light .pagination-btn.active {
  background: var(--gm-blue-primary);

  /* Bootstrap primary — outside palette */
  border-color: var(--gm-blue-primary);

  /* Bootstrap primary — outside palette */
  color: var(--gm-white);
}

.pagination-light .pagination-btn.active:hover {
  transform: none;
}

.pagination-light .pagination-btn.nav-btn.disabled {
  background: var(--gm-gray-50);

  /* Bootstrap gray-100 — outside palette */
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-400);
}

.pagination-light .pagination-ellipsis {
  color: var(--gm-gray-400);
}

.pagination-light .pagination-icon {
  opacity: 0.6;
}

.pagination-light .pagination-btn:hover .pagination-icon {
  opacity: 1;
}

/* Ellipsis as page field: looks like "...", type a number and press Enter */
.pagination-jump {
  display: inline-flex;
  margin: 0;
}

.pagination-container .pagination-jump-input {
  width: 38px;
  height: 38px;
  padding: 0 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--gm-white);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  appearance: textfield;
  cursor: text;
}

.pagination-container .pagination-jump-input::-webkit-inner-spin-button,
.pagination-container .pagination-jump-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.pagination-container .pagination-jump-input::placeholder {
  color: var(--gm-glass-white-30);
}

.pagination-container .pagination-jump-input:hover {
  background: var(--gm-glass-white-5);
  border-color: var(--gm-glass-white-10);
}

.pagination-container .pagination-jump-input:focus {
  background: var(--gm-glass-white-8);
  border-color: var(--gm-teal-200);
}

.pagination-container .pagination-jump-input:focus::placeholder {
  color: transparent;
}

.pagination-light .pagination-jump-input {
  color: var(--gm-gray-900);
}

.pagination-light .pagination-jump-input::placeholder {
  color: var(--gm-gray-400);
}

.pagination-light .pagination-jump-input:hover,
.pagination-light .pagination-jump-input:focus {
  background: var(--gm-white);
  border-color: var(--gm-gray-200);
}

.pagination-light .pagination-jump-input:focus {
  border-color: var(--gm-teal-200);
}

@media (width <= 768px) {
  .pagination-info {
    font-size: 13px;
  }

  .pagination-controls {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* glass_morph/molecules/record_pager.css */
/* ============================================================================
   == Molecule — RecordPager ==================================================
   ============================================================================
   Steps one record at a time through the list that led here. Sits right-aligned
   in the empty space between the page's notices and the detail card, per the
   "Prospect navigatie" design (4a) — the top row stays for the breadcrumb and
   the main navigation, and nothing is added under the stats. */
.record-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 38px;

  /* The design puts 14px above this row and 10px below it, measured from
     whatever sits above. Here the pager is the first thing inside
     .page-container, which pays 24px of top padding on every page in the app —
     so the row pulls itself back up through that inset to land on 14px rather
     than adding to it. */
  margin: -10px 0 10px;
}

/* With a banner above, the app also spends the banner's own 16px bottom margin
   before the container's padding even starts — 40px in total where the design
   asks for 14. #banner-stack renders only when there is something in it, so
   this rule fires exactly when that extra 16px is being paid. */
#banner-stack ~ .page-container .record-pager {
  margin-top: -26px;
}

.record-pager-back {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--gm-ice-500);
}

.record-pager-back-scope {
  color: var(--gm-ice-100);
  font-weight: 600;
}

.record-pager-back:hover {
  background: var(--gm-glass-white-6);
  color: var(--gm-ice-500);
}

.record-pager-back:hover .record-pager-back-scope {
  color: var(--gm-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.record-pager-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 3px;
  background: var(--gm-glass-white-9);
  border: 1px solid var(--gm-glass-white-14);
  border-radius: 11px;
}

/* Tabular figures: without them the pill twitches sideways as you step from
   9 to 10, which is exactly the moment you are watching it. */
.record-pager-count {
  display: flex;
  justify-content: center;
  gap: 3px;
  min-width: 72px;
  font-size: 14px;
  color: var(--gm-ice-400);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.record-pager-count-current {
  color: var(--gm-ice-50);
  font-weight: 600;
}

/* The Button atom is a 180px pill with a 2px outline and a gradient border
   pseudo-element. Inside the pager it is a bare glyph, so the chrome comes off
   here rather than by reaching for a raw <button> the design-system cops
   would refuse. */
.record-pager .record-pager-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  color: var(--gm-ice-100);
  cursor: pointer;
}

.record-pager .record-pager-arrow::before {
  display: none;
}

/* The tip is absolutely positioned against the arrow, not against the atom's
   inner content box. */
.record-pager .record-pager-arrow .button-container {
  position: static;
}

.record-pager .record-pager-arrow [class*="gm-icon-"] {
  font-size: 15px;
  margin-right: 0 !important;
}

.record-pager .record-pager-arrow:hover:not([aria-disabled="true"]) {
  background: var(--gm-glass-white-10);
  color: var(--gm-white);
}

/* A real outline: `--gm-focus-ring-shadow` is named in the design-system skill
   but defined nowhere, and an undefined custom property drops the whole
   declaration — which on a control whose chrome was just removed would leave
   keyboard users no ring at all. */
.record-pager .record-pager-arrow:focus-visible {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: 1px;
}

/* Dimmed, not hidden, and with no hover of its own: a pointer that lights
   something up and then cannot click it is a worse lie than a dead arrow. */
.record-pager .record-pager-arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
}

/* ── Hover preview ───────────────────────────────────────────────────────── */
.record-pager-tip {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 5;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gm-teal-950);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: 10px;
  box-shadow: 0 14px 40px var(--gm-glass-black-40);
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
}

.record-pager-arrow--previous .record-pager-tip {
  right: -70px;
}

.record-pager-arrow--next .record-pager-tip {
  right: 0;
}

.record-pager .record-pager-arrow:hover:not([aria-disabled="true"]) .record-pager-tip,
.record-pager .record-pager-arrow:focus-visible .record-pager-tip {
  display: flex;
}

.record-pager-tip-lead {
  color: var(--gm-ice-500);
}

.record-pager-tip-name {
  color: var(--gm-white);
  font-weight: 600;
}

.record-pager-tip-score {
  display: grid;
  place-items: center;
  height: 20px;
  min-width: 26px;
  padding: 0 6px;
  background: var(--gm-teal-500);
  border-radius: 6px;
  color: var(--gm-white);
  font-size: 11px;
  font-weight: 700;
}

.record-pager-tip-key {
  display: grid;
  place-items: center;
  height: 20px;
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--gm-glass-white-18);
  border-radius: 5px;
  color: var(--gm-ice-200);
  font-size: 11px;
}

@media (width <= 576px) {
  .record-pager {
    justify-content: space-between;
    gap: 8px;
  }
}

/* glass_morph/molecules/turbo_frame_error.css */
/* ============================================================================ */
/* == Molecule — TurboFrameError ============================================ */
/* ============================================================================ */
.turbo-frame-error {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.turbo-frame-error.loading .btn {
  position: relative;
  pointer-events: none;
}

.turbo-frame-error .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* Error content container - white background */
.turbo-frame-error-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--gm-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--gm-glass-black-15);
  width: 100%;
  max-width: 600px;
}

/* Icon container */
.turbo-frame-error-icon {
  flex-shrink: 0;
  color: var(--gm-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon color variants */
.turbo-frame-error-icon-danger {
  color: var(--gm-red-600); /* Bootstrap danger — outside palette */
}

.turbo-frame-error-icon-warning {
  color: var(--gm-yellow-500);
}

.turbo-frame-error-icon-info {
  color: var(--gm-teal-500);
}

/* Body content */
.turbo-frame-error-body {
  flex: 1;
  min-width: 0;
}

/* Title styling */
.turbo-frame-error-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gm-gray-800);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* Message styling */
.turbo-frame-error-message {
  font-size: 0.9375rem;
  color: var(--gm-gray-600);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* Details styling */
.turbo-frame-error-details {
  font-size: 0.8125rem;
  color: var(--gm-gray-400);
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--gm-gray-50);
  border-radius: 6px;
  border: 1px solid var(--gm-gray-200);
}

/* Meta information (timestamp and reference) */
.turbo-frame-error-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--gm-gray-500);
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--gm-gray-50);
  border-radius: 6px;
  border: 1px solid var(--gm-gray-200);
}

.turbo-frame-error-ref {
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
}

.turbo-frame-error-ref strong {
  font-weight: 600;
  color: var(--gm-gray-700);
}

.turbo-frame-error-timestamp {
  color: var(--gm-gray-400);
}

/* glass_morph/molecules/stakeholder_row.css */
/* ============================================================================ */
/* == Molecule — StakeholderRow ============================================= */
/* ============================================================================ */
.message-proposal-section {
  margin-top: 24px;
  padding: 20px;
  background: var(--gm-teal-3e7a8e-overlay-17);
  border-radius: 12px;
}

.message-proposal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-blue-800);
  margin: 0 0 12px;
}

.message-proposal-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gm-blue-800);
  margin: 0 0 16px;
}

.stakeholder-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.stakeholder-row {
  margin-bottom: 12px;
}

.stakeholder-row:last-child {
  margin-bottom: 0;
}

.stakeholder-row.stakeholder-secondary {
  color: var(--gm-white);
}

.stakeholder-row.stakeholder-secondary .stakeholder-row-header:hover {
  background: transparent;
}

/* Override heading-dark and text-dark classes in secondary variant header only */
.stakeholder-row.stakeholder-secondary .stakeholder-row-header .heading-dark,
.stakeholder-row.stakeholder-secondary .stakeholder-row-header .text-dark {
  color: var(--gm-white) !important;
}

.stakeholder-row.stakeholder-secondary .detail-link:hover {
  color: var(--gm-glass-white-80);
}

.stakeholder-row.stakeholder-secondary .stakeholder-avatar {
  background: linear-gradient(135deg, var(--gm-blue-500) 0%, var(--gm-blue-600) 100%);
  color: var(--gm-white);
  border: none;
}

.stakeholder-row.stakeholder-secondary .engagement-badge {
  background: var(--gm-white);
  color: var(--gm-teal-300);

  /* custom teal mid - outside palette */
}

/* Reset text colors inside expanded content (white card backgrounds) */
.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .meta-line {
  color: var(--gm-gray-500);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .notes-label {
  color: var(--gm-gray-500);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .detail-text {
  color: var(--gm-gray-500);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .detail-link {
  color: var(--gm-blue-500);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .section-content {
  color: var(--gm-gray-600);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .section-title {
  color: var(--gm-teal-700);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .stakeholder-profile-card h5 {
  color: var(--gm-teal-700);
}

.stakeholder-row.stakeholder-secondary .stakeholder-expanded-content .indicator-tag {
  color: var(--gm-gray-500);
}

/* The name column takes the free space and the contact column is only as wide
   as its content. Both used to be flexible, so a long e-mail address stole width
   from the name and the task indicator under it. A fixed column gap then keeps
   the columns apart whatever the content does.

   The contact column is capped because an auto track is sized before the 1fr
   one gets anything: a row carrying a phone number measured 406px of contacts
   against 246px for a row without one, and those 160px came straight off the
   name column, wrapping that one row's badges while its neighbours stayed on a
   single line. Past the cap the contacts wrap instead — they are a flex row
   built to, and the row's min-height already holds the second line.

   fit-content() and not minmax(0, cap): minmax hands the track the cap whether
   or not it has the content for it, so every row paid the widest row's price
   and all four wrapped instead of one. fit-content is "as wide as the content,
   never past the cap", which is what was meant. */

.stakeholder-row-header {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) fit-content(var(--gm-stakeholder-contacts-max)) 40px;
  grid-template-rows: auto auto;
  gap: 6px 28px;
  align-items: center;
  min-height: 95px;
  padding: 16px 20px 16px 24px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 10px;

  /* Clip hover background to card corners (parent overflow is visible) */
}

/* Two rows, and the right-hand column mirrors the left: contacts sit on the
   name's line, the "updated" line sits on the job title's. The contacts had
   their own column beside a 150px one holding 114px of text, which left them
   too little to stay on one line — giving them that column's width instead is
   what buys the single line.

   Placed rather than nested in a wrapper: below 1030px these two are pulled out
   to full-width rows of their own, and that only works while they are grid
   items of the row itself. */
.stakeholder-row-header > :first-child {
  grid-column: 1;
  grid-row: 1 / -1;
}

.stakeholder-basic-info {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  align-self: center;
}

.stakeholder-contact-info {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  align-items: center;
  justify-self: start;
  max-width: 100%;
  gap: 16px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  min-height: 33px;
}

.stakeholder-meta-right {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  margin-left: 0;
  place-self: center end;
  white-space: nowrap;
  min-width: 0;
}

.stakeholder-expand-btn {
  grid-column: 4;
  grid-row: 1 / -1;
  all: unset;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gm-glass-white-85);
  place-self: center end;
}

.stakeholder-row-header:hover {
  background: transparent;
}

.stakeholder-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gm-blue-500) 0%, var(--gm-blue-600) 100%);
  color: var(--gm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}

.stakeholder-avatar.has-badge {
  position: relative;
}

.stakeholder-name-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.stakeholder-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-white);
  margin: 0;
  min-width: 0;
}

.stakeholder-role-dept {
  font-size: 14px;
  color: var(--gm-glass-white-80);
  min-width: 0;
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No margins of its own: the badge row's 6px gap spaces it like every other
   item on the line, and the 28px it used to add was 28px the badges did not
   have. */
.stakeholder-name-feedback {
  display: flex;
  align-items: center;
}

/* max-width is what makes the track's cap bite. justify-self: start sizes this
   box to its content, not to the track, so a row carrying a phone number
   measured 448px inside a 420px column and spilled the 28px straight over the
   column gap — its contacts ended exactly where the expand chevron begins,
   while every other row stopped 28px short of it. The cap, the overflow and
   the ellipsis below were all inert until the box was told it may not outgrow
   its own column.

   The email is the only item allowed to give ground: it is the long one and
   the only one an ellipsis still leaves readable. "LinkedIn" and a phone
   number shrink to nonsense, so they hold their width and the address takes
   the squeeze. */

.stakeholder-contact-info .contact-item {
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.stakeholder-contact-info .contact-item--email {
  flex-shrink: 1;
}

.stakeholder-contact-info .detail-link,
.stakeholder-contact-info .detail-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stakeholder-meta-right .meta-line {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stakeholder-expand-btn:hover {
  color: var(--gm-white);
}

.stakeholder-row.expanded .stakeholder-row-header {
  border-radius: 12px 12px 0 0; /* Square bottom corners when expanded content is visible */
}

.stakeholders-group-header {
  align-items: center;
  margin-top: 24px;
  margin-bottom: 12px;
}

.stakeholders-group-title {
  margin: 0;
}

.stakeholders-group-link {
  color: inherit;
  border-radius: var(--gm-radius-sm);
}

.stakeholders-group-link:hover {
  color: inherit;
  text-decoration: underline !important;
}

.stakeholders-group-link:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 2px;
}

@media (width <= 2100px) {
  .stakeholder-row-header {
    grid-template-columns: 74px minmax(0, 1fr) fit-content(var(--gm-stakeholder-contacts-max)) 40px;
  }

  .stakeholder-contact-info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 16px;
    white-space: nowrap;
  }

  .stakeholder-contact-info .contact-item {
    min-width: 0;
  }

}

@media (width <= 1800px) {
  .stakeholder-row-header {
    grid-template-columns: 74px minmax(0, 1fr) fit-content(var(--gm-stakeholder-contacts-max)) 40px;
    column-gap: 24px;
  }

  .stakeholder-contact-info {
    gap: 8px 14px;
  }

}

@media (width > 640px) and (width <= 1480px) {
  /* The same two-row column as above, one size down: the contacts used to get a
     0.75fr track that a row with a phone number overflowed straight across the
     "updated" line beside it. Sized to their content instead, with that line
     underneath, there is nothing to run into. */
  .stakeholder-row-header {
    grid-template-columns: 56px minmax(230px, 1.35fr) fit-content(var(--gm-stakeholder-contacts-max)) 36px;
    gap: 12px;
  }

  /* Wrapping, not clipping. Holding the badges on one line at this width cut
     names to "Olaf Lan…" and labels to "Besluitne…", which is the one thing a
     row of badges cannot survive — a second line costs 25px and stays readable. */
  .stakeholder-name-badges {
    flex-wrap: wrap;
  }

  .stakeholder-role-dept {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stakeholder-contact-info {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    align-items: center;
    white-space: nowrap;
  }

  .stakeholder-rank-badge--2 {
    display: none;
  }

  .stakeholder-meta-right {
    width: 150px;
  }
}

@media (width > 640px) and (width <= 1320px) {
  .stakeholder-rank-badge {
    display: none;
  }
}

@media (width > 640px) and (width <= 1180px) {
  .stakeholder-contact-info .contact-item--email,
  .stakeholder-contact-info .contact-item--phone {
    display: none;
  }
}

@media (width > 640px) and (width <= 1030px) {
  .stakeholder-row-header {
    grid-template-columns: 56px minmax(0, 1fr) 36px;
    grid-template-rows: auto;
  }

  /* Three columns and no contact line left to place, so the stacking hands the
     placement back to auto-flow before the expand button claims column 3. */
  .stakeholder-row-header > :first-child,
  .stakeholder-basic-info,
  .stakeholder-contact-info,
  .stakeholder-meta-right,
  .stakeholder-expand-btn {
    grid-column: auto;
    grid-row: auto;
  }

  .stakeholder-contact-info .contact-item--linkedin,
  .stakeholder-meta-right {
    display: none;
  }

  .stakeholder-expand-btn {
    grid-column: 3;
    align-self: center;
  }
}

.stakeholder-expanded-content {
  display: none;
  padding: 0 24px 24px;
  border-top: 0 solid var(--gm-gray-200);
  background: transparent;
  border-radius: 0 0 12px 12px;

  /* Clip background to card corners (parent overflow is visible) */
  animation: slideDown 0.3s ease;
}

.stakeholder-row.expanded .stakeholder-expanded-content {
  display: block;
}

.notes-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gm-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.stakeholder-expanded-content > *:first-child {
  margin-top: 0;
}

/* ── Profile Section Cards ─────────────────────────────── */
.stakeholder-profile-card {
  background: var(--gm-white);
  border-radius: 10px;
  border: 1px solid var(--gm-gray-200);
  border-left: 4px solid var(--gm-teal-300);
  box-shadow: 0 1px 4px var(--gm-glass-black-6);
  padding: 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s ease;
}

.stakeholder-profile-card:hover {
  box-shadow: 0 3px 10px var(--gm-glass-black-10);
}

/* Profile table layout (reusable grid rows for career, education, etc.) */
.profile-table {
  display: inline-grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

/* Override old section styles to use card pattern */

.interest-indicators-section:hover {
  box-shadow: 0 3px 10px var(--gm-glass-black-10);
}

.influence-timeline-events {
  margin-top: 16px;
  border-top: 1px solid var(--gm-gray-50);
  padding-top: 12px;
}

.influence-timeline-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.influence-timeline-event {
  padding: 12px 16px;
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  background: var(--gm-gray-50);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.influence-timeline-event:hover {
  border-color: var(--gm-gray-300);
  box-shadow: 0 2px 8px var(--gm-glass-black-6);
}

.influence-event-header {
  margin-bottom: 6px;
}

.influence-event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gm-gray-800);
  flex: 1;
}

.influence-event-description {
  font-size: 13px;
  color: var(--gm-gray-600);
  line-height: 1.5;
  margin-bottom: 6px;
}

.influence-event-source {
  font-size: 11px;
  color: var(--gm-blue-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.influence-event-source:hover {
  color: var(--gm-blue-600);
  text-decoration: underline;
}

/* Subtle inline status line (styled like the task meta line) */
.metadata-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gm-ctx-text-secondary);
}

.metadata-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  cursor: help;
}

.metadata-item-label {
  color: var(--gm-ctx-text-muted);
}

.metadata-item + .metadata-item::before {
  content: "·";
  margin-right: 8px;
  color: var(--gm-ctx-text-muted);
}

/* Metadata section title - matches .metadata-title in reference */

.stakeholder-expanded-actions {
  display: flex;
  justify-content: flex-start;
}

.stakeholder-expanded-actions.px-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.stakeholder-selector.border-danger {
  margin-top: 0.25rem;
}

.stakeholder-selector .invalid-feedback {
  font-size: 0.875em;
  color: var(--gm-red-600);
  margin-top: 0.25rem;
}

.stakeholder-selector .invalid-feedback.show,
.stakeholder-selector .invalid-feedback.d-block {
  display: block !important;
}

/* ── tile-light (decision maker) row — dark text on white background ── */
.stakeholder-row.tile-light .stakeholder-row-header {
  color: var(--gm-gray-800);
}

.stakeholder-row.tile-light .stakeholder-name {
  color: var(--gm-gray-900);
}

.stakeholder-row.tile-light .stakeholder-role-dept {
  color: var(--gm-gray-600);
}

.stakeholder-row.tile-light .stakeholder-row-header:hover {
  background: var(--gm-gray-50);
}

.stakeholder-row.tile-light .stakeholder-expand-btn {
  color: var(--gm-gray-500);
}

.stakeholder-row.tile-light .stakeholder-expand-btn:hover {
  color: var(--gm-gray-900);
}

.stakeholder-row.tile-light .stakeholder-meta-right .meta-line {
  color: var(--gm-gray-600);
}

.stakeholder-row.tile-light .stakeholder-row-header .heading-dark,
.stakeholder-row.tile-light .stakeholder-row-header .text-dark {
  color: var(--gm-gray-900) !important;
}

.stakeholder-row.tile-light .stakeholder-row-header .detail-text,
.stakeholder-row.tile-light .stakeholder-row-header .detail-link {
  color: var(--gm-gray-600);
}

.stakeholder-row.tile-light .engagement-badge {
  background: var(--gm-white);
  color: var(--gm-blue-600);
}

/* DMU tab and the DMU overview in selection mode: the row header brings its own
   24px left padding, so a small indent puts the checkbox midway between the
   row's edge and the avatar. It is centred on the avatar (24px down, 48px tall)
   and stays there when a row is expanded (a fixed top, not 50% of the row). */
.stakeholder-selection-scope {
  --gm-row-select-indent: 28px;
  --gm-row-select-top: 48px;
}

@media (width <= 1024px) {
  .stakeholder-row-header {
    grid-template-columns: auto 1fr;
    gap: 12px;
    position: relative;
  }

  .stakeholder-expand-btn {
    position: absolute;
    right: 12px;
    top: 12px;
  }
}

@media (width <= 640px) {
  .stakeholder-name {
    font-size: 15px;
  }

  .stakeholder-name-badges {
    flex-wrap: wrap;
    gap: 4px;
  }

  .stakeholder-role-dept {
    font-size: 13px;
  }

  .stakeholder-badge,
  .stakeholder-contact-info {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gm-teal-700);
  letter-spacing: -0.01em;
}

.section-content {
  font-size: 15px;
  color: var(--gm-gray-600);
  line-height: 1.6;
}

/* ── Recent activity timeline ─────────────────────────────────────────────
   The Recente activiteit card in the expanded row: date on a rail at the
   left, a two-line title, and the type as a neutral chip. The generic
   .timeline-event rules in timeline.css stay for the Timeline-events card.
   Dates are left-aligned so they share the left edge of the cards above
   in the expanded row. */

/* Each row carries 14px of its own bottom padding for the hover surface, so the
   card's 20px would leave the last row 10px further from the edge than the
   cards above. The handoff gives this card 10px at the bottom. */
.activity-timeline {
  margin-bottom: -10px;
}

.activity-timeline-row {
  display: grid;
  grid-template-columns: 46px 16px minmax(0, 1fr);
  column-gap: 10px;
  margin: 0 -10px;
  padding: 0 10px;
  border-radius: 10px;
  color: inherit;
  transition: background 150ms ease;
}

.activity-timeline-row:hover {
  background: var(--gm-gray-100);
  color: inherit;
}

.activity-timeline-row:focus-visible {
  outline: var(--gm-outline-width) solid var(--gm-teal-300);
  outline-offset: 2px;
}

.activity-timeline-row--static {
  cursor: default;
}

.activity-timeline-row--static:hover {
  background: transparent;
}

.activity-timeline-date {
  padding-top: 11px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--gm-gray-600);
}

.activity-timeline-year {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--gm-gray-400);
}

.activity-timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 15px;
}

/* The line starts at the first dot and ends at the last one. */
.activity-timeline-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gm-gray-200);
}

.activity-timeline-row:first-child .activity-timeline-rail::before {
  top: 15px;
}

/* The fifth row ends the rail while the rest is folded away under it. */
.activity-timeline-row:last-child .activity-timeline-rail::before,
.activity-timeline-row:has(+ .activity-timeline-more:not([open])) .activity-timeline-rail::before {
  bottom: auto;
  height: 15px;
}

.activity-timeline-row:only-child .activity-timeline-rail::before {
  display: none;
}

.activity-timeline-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border: 2px solid var(--gm-teal-300);
  border-radius: 50%;
  background: var(--gm-white);
  transition: background 150ms ease;
}

.activity-timeline-row:not(.activity-timeline-row--static):hover .activity-timeline-dot {
  background: var(--gm-teal-300);
}

.activity-timeline-body {
  display: block;
  min-width: 0;
  padding: 10px 0 14px;
}

.activity-timeline-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
  color: var(--gm-gray-900);
  transition: color 150ms ease;
}

.activity-timeline-row:not(.activity-timeline-row--static):hover .activity-timeline-title {
  color: var(--gm-teal-500);
}

.activity-timeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gm-gray-100);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gm-gray-600);
}

.activity-timeline-row:not(.activity-timeline-row--static):hover .activity-timeline-chip {
  background: var(--gm-gray-200);
}

/* "Toon nog N posts": a quiet line in the title column under the fifth row.
   Opening it hides the line, so the folded rows continue on the same rail. */
.activity-timeline-more__summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 82px;
  padding: 0 0 14px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gm-gray-600);
  transition: color 150ms ease;
}

.activity-timeline-more__summary::-webkit-details-marker {
  display: none;
}

.activity-timeline-more__summary:hover {
  color: var(--gm-teal-500);
}

.activity-timeline-more__summary:focus-visible {
  outline: var(--gm-outline-width) solid var(--gm-teal-300);
  outline-offset: 2px;
  border-radius: 4px;
}

.activity-timeline-more[open] > .activity-timeline-more__summary {
  display: none;
}

.activity-timeline-more__summary [class*="gm-icon-"] {
  font-size: 11px !important;
  line-height: 1;
}

/* Icon(size: :xs) resolves to Bootstrap's .fs-6, a 1rem !important; the
   chip glyph is 11px. Same correction as molecules/coverage_avatar.css. */
.activity-timeline-chip [class*="gm-icon-"] {
  font-size: 11px !important;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .activity-timeline-row,
  .activity-timeline-dot,
  .activity-timeline-title,
  .activity-timeline-more__summary {
    transition: none;
  }
}

/* glass_morph/molecules/stakeholder_task_indicator.css */
/* ============================================================================ */

/* == Molecule — Stakeholder Task Indicator ================================== */

/* ============================================================================ */

/* One pip per task, on its own line under a DMU member's job title, plus the
   hover list that names them. The trigger sits on the dark DMU surface; the
   list is cloned into <body> by tooltip_controller and lands on the shared
   .gm-tooltip surface, so both halves are written for a dark ground.

   Everything here is a step quieter than the role line above it: a 12px icon
   against 14px text, 7px pips, 60-70% white. The indicator is a glance, not a
   control — it has to be findable without competing with the person's name. */

.gm-task-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: 100px;
  background: var(--gm-glass-white-8);
  cursor: default;
  transition: background 0.15s ease;
}

.gm-task-indicator:hover,
.gm-task-indicator:focus-visible {
  background: var(--gm-glass-white-15);
  outline: none;
}

/* The Icon atom has no size that is not a Bootstrap fs-* class: :xs and :sm both
   resolve to .fs-6, and omitting size: falls back to .fs-5. Bootstrap writes its
   font-size utilities with !important, so .fs-6's 1rem wins over anything short
   of !important and the icon renders taller than the 20px chip around it. */

.gm-task-indicator .gm-task-indicator-icon {
  font-size: 12px !important;
  line-height: 1;
  color: var(--gm-glass-white-60);
}

.gm-task-pips {
  display: inline-flex;
  gap: 3px;
}

/* -- The four states ------------------------------------------------------- */

/* A ring is work not started, half-filled is work moving, solid is work done,
   and the red ring is work whose date has gone. Shape carries the meaning as
   well as colour, so the row still reads without colour vision.              */

.gm-task-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gm-task-pip--open {
  box-shadow: inset 0 0 0 1.5px var(--gm-glass-white-70);
}

/* --gm-yellow-500 (#f59e0b) is a saturated orange: at this size the 1.5px ring
   meets in the middle, the half-fill stops reading, and the whole dot goes
   solid orange — which on teal reads as the alarm the red pip is supposed to
   own. The light amber keeps "moving" distinct from "late". */

.gm-task-pip--progress {
  background: linear-gradient(90deg, var(--gm-amber-300) 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px var(--gm-amber-300);
}

.gm-task-pip--done {
  background: var(--gm-green-500);
}

/* A ring with a faint wash inside, not a solid disc. A solid fill made this the
   heaviest mark in the set, putting more alarm on one late task than the whole
   row deserves. */

.gm-task-pip--late {
  background: var(--gm-red-300-overlay-35);
  box-shadow: inset 0 0 0 1.5px var(--gm-red-tw-300);
}

.gm-task-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gm-glass-white-70);
  font-variant-numeric: tabular-nums;
}

.gm-task-count--late {
  color: var(--gm-red-tw-300);
}

/* -- The hover list -------------------------------------------------------- */

/* A white card, as the design draws it. The shared .gm-tooltip shell is dark and
   tooltip_controller overwrites className on the clone it puts in <body>, so a
   modifier class cannot be handed to it — :has() reaches the shell from the
   content instead. It must key off a CHILD: the wrapper's own .gm-task-tip is
   one of the classes that overwrite destroys, so only what is nested inside
   survives the trip into <body>. Everything below is therefore written for a light
   surface, which is why the pips are repainted: the chip's pale shades exist to
   survive dark teal and would vanish here. */

/* Wider than the mock's 300px: task titles here are generated, not hand-picked
   ("LinkedIn Connectie naar Olaf Lange bij Van Omme & De Groot"), and at 300px
   nearly every one ended in an ellipsis. Fixed rather than max-content so the
   card is the same shape whichever member it opens under. */

.gm-tooltip:has(.gm-task-tip-head) {
  width: 420px;
  max-width: calc(100vw - 32px);
  padding: 10px;
  border-radius: 10px;
  background: var(--gm-white);
  color: var(--gm-gray-800);
  box-shadow: 0 14px 36px var(--gm-glass-black-30);
}

.gm-tooltip .gm-task-tip-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 6px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gm-gray-500);
}

/* .gm-tooltip--interactive paints its links white for the dark shell, so the
   card has to say otherwise. The underline stays — that rule is there because a
   link nobody can tell is a link is not a link. */

.gm-tooltip:has(.gm-task-tip-head) .gm-tooltip-link {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--gm-teal-200);
}

.gm-tooltip:has(.gm-task-tip-head) .gm-tooltip-link:hover,
.gm-tooltip:has(.gm-task-tip-head) .gm-tooltip-link:focus {
  color: var(--gm-teal-600);
}

.gm-tooltip .gm-task-tip-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 6px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--gm-gray-800);
  text-decoration: none;
}

a.gm-task-tip-row:hover,
a.gm-task-tip-row:focus-visible {
  background: var(--gm-gray-100);
  color: var(--gm-gray-800);
  outline: none;
}

/* -- Pips again, in the shades a white card needs -------------------------- */

.gm-tooltip .gm-task-pip--open {
  box-shadow: inset 0 0 0 1.5px var(--gm-gray-400);
}

.gm-tooltip .gm-task-pip--progress {
  background: linear-gradient(90deg, var(--gm-yellow-500) 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px var(--gm-yellow-500);
}

.gm-tooltip .gm-task-pip--done {
  background: var(--gm-green-600);
}

.gm-tooltip .gm-task-pip--late {
  background: var(--gm-red-500-overlay-15);
  box-shadow: inset 0 0 0 1.5px var(--gm-red-500);
}

.gm-tooltip .gm-task-tip-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-tooltip .gm-task-tip-row--done .gm-task-tip-title {
  color: var(--gm-gray-400);
  text-decoration: line-through;
  text-decoration-color: var(--gm-gray-300);
}

.gm-tooltip .gm-task-tip-due {
  font-size: 12px;
  color: var(--gm-gray-500);
  white-space: nowrap;
}

.gm-tooltip .gm-task-tip-due--late {
  color: var(--gm-red-700);
  font-weight: 600;
}

/* glass_morph/molecules/aged_out_task_flag.css */
/* ============================================================================ */
/* == Molecule — AgedOutTaskFlag ============================================ */
/* ============================================================================ */

/* The amber pill on a ready-to-reach-out row whose open task has outlived the
   engagement window. The rows are white tiles, so the pill follows the
   light-surface tint rule: a 12% wash, dark amber text, a 30% border. Amber
   rather than red or orange keeps it apart from the readiness badges in the
   same row: it asks for attention, it does not score anything. */

.gm-aged-task-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 22px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--gm-amber-overlay-30);
  border-radius: 100px;
  background: var(--gm-amber-overlay-12);
  color: var(--gm-amber-800);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.gm-aged-task-flag:hover,
.gm-aged-task-flag:focus-visible {
  background: var(--gm-amber-50);
  color: var(--gm-amber-900);
  box-shadow: 0 0 0 3px var(--gm-amber-overlay-12);
  text-decoration: none;
  outline: none;
}

.gm-aged-task-flag:focus-visible {
  box-shadow: 0 0 0 3px var(--gm-amber-overlay-30);
}

/* Icon atom sizes are Bootstrap fs-* classes with !important; see the same
   override in stakeholder_task_indicator.css. */

.gm-aged-task-flag .gm-aged-task-flag-icon {
  font-size: 12px !important;
  line-height: 1;
}

/* The hover is a rich tooltip: see .gm-tooltip-title and friends in
   organisms/tooltip.css, and the OverrunBar atom. */

/* glass_morph/molecules/task_pip_legend.css */
/* ============================================================================ */

/* == Molecule — Task Pip Legend ============================================= */

/* ============================================================================ */

/* The key to the pips in molecules/stakeholder_task_indicator.css, printed once
   at the top of a DMU list instead of once per row. The pip marks themselves are
   not restyled here — .gm-task-pip and its four modifiers are reused as drawn,
   so the legend cannot show a dot the rows do not.

   One pill on the dark DMU surface, a step quieter than the list below it: the
   same glass-white-8 ground as the indicator chip, 12px text, and a note that
   sits below the labels in contrast so the eye reaches the four states first.
   It wraps rather than scrolls — on a narrow viewport the note drops to its own
   line and the states stay together.

   fit-content, not inline-flex: FlexRow renders Bootstrap's .d-flex, whose
   display is !important and cannot be overridden from here. Sizing the box to
   its own content gets the same result — the pill hugs its text. Stretched to
   the column width it stops reading as one mark and starts reading as a banner
   the list is inside. */

.gm-task-legend {
  flex-wrap: wrap;
  row-gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--gm-glass-white-8);
  font-size: 12px;
  line-height: 1.4;
}

.gm-task-legend-title {
  font-weight: 600;
  color: var(--gm-glass-white-85);
}

/* Same !important as the indicator chip's icon, and for the same reason: the
   Icon atom's :xs resolves to Bootstrap's .fs-6, whose font-size is written
   !important and otherwise renders the glyph taller than the 12px text beside
   it. See molecules/stakeholder_task_indicator.css. */

.gm-task-legend .gm-task-legend-icon {
  font-size: 12px !important;
  line-height: 1;
  color: var(--gm-glass-white-60);
}

.gm-task-legend-states {
  flex-wrap: wrap;
  row-gap: 4px;
}

.gm-task-legend-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gm-task-legend-label {
  color: var(--gm-glass-white-70);
}

/* The rules the four dots cannot show: the cap, what an absent indicator means,
   and where the detail lives. Quietest thing in the bar — it is read once. */

.gm-task-legend-note {
  margin-left: 8px;
  color: var(--gm-glass-white-50);
}

@media (width <= 768px) {
  .gm-task-legend-note {
    margin-left: 0;
  }
}

/* glass_morph/molecules/autocomplete.css */
/* ============================================================================ */
/* == Molecule — Autocomplete =============================================== */
/* ============================================================================ */
.autocomplete-container {
  position: relative;
  width: 100%;
}

/* Remove bottom border-radius from input when dropdown is open */
.autocomplete-container.dropdown-open input,
.autocomplete-container.dropdown-open .input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--gm-teal-346f81-overlay-40);
}

.autocomplete-dropdown {
  max-height: 300px;
  overflow-y: auto;
  background: var(--gm-teal-900-overlay-98);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gm-teal-200-overlay-50);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--gm-glass-black-30);
}

.autocomplete-dropdown.hidden {
  display: none;
}

.autocomplete-dropdown.show {
  display: block;
}

.autocomplete-header {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-glass-white-60);
  background: var(--gm-teal-346f81-overlay-20);
  border-bottom: 1px solid var(--gm-teal-200-overlay-30);
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--gm-teal-346f81-overlay-20);
  transition: background-color 0.15s ease;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item--selected {
  background: var(--gm-blue-500-overlay-20);
}

.autocomplete-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-white);
  margin-bottom: 4px;
}

.autocomplete-item-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--gm-glass-white-60);
}

.autocomplete-item-kvk {
  font-family: "Fira Code", monospace;
}

.autocomplete-item-city {
  color: var(--gm-glass-white-50);
}

.autocomplete-item-description {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gm-glass-white-60);
}

.autocomplete-resolve-fail {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gm-glass-white-60);
}

.autocomplete-resolve-fail-icon {
  font-weight: 700;
  color: var(--gm-status-danger);
}

.autocomplete-status {
  padding: 0 0 8px;
  font-size: 13px;
}

/* Scrollbar styling for autocomplete dropdown */
.autocomplete-dropdown::-webkit-scrollbar {
  width: 6px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
  background: var(--gm-glass-white-5);
  border-radius: 3px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: var(--gm-glass-white-20);
  border-radius: 3px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--gm-glass-white-30);
}

.autocomplete-scroll-hint {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gm-glass-white-40);
  text-align: center;
  border-top: 1px solid var(--gm-teal-200-overlay-30);
  background: var(--gm-teal-346f81-overlay-10);
}

/* glass_morph/molecules/roi.css */
/* ============================================================================ */
/* == Molecule — ROI / PriorityTargets ====================================== */
/* ============================================================================ */
/* RDF sections use the same fixed 574px height as other content-sections, with scrolling */
/* Compact empty states inside RDF widgets */
.priority-targets-widget .empty-state-white,
.warmth-ranking-widget .empty-state-white {
  padding: 28px 20px;
  background: transparent;
  border: none;
  border-radius: 10px;
}

.priority-targets-widget .empty-state-white .bi,
.warmth-ranking-widget .empty-state-white .bi {
  font-size: 32px !important;
}

.priority-targets-widget .empty-state-white .empty-state-title,
.warmth-ranking-widget .empty-state-white .empty-state-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gm-gray-500);
}

.warmth-ranking-widget .gm-text-muted {
  color: var(--gm-gray-500) !important;
}

.warmth-ranking-widget .gm-icon-envelope,
.warmth-ranking-widget .bi {
  color: var(--gm-gray-500) !important;
}

.priority-targets-header-filters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  min-width: 0;
}

.priority-targets-header-filter {
  min-height: 31px;
}

/* ─── Priority Target Card (card chrome inherited from .list-item) ─── */
.priority-target-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.priority-target-info {
  flex: 1;
  min-width: 0;
}

.priority-target-company {
  color: var(--gm-gray-800);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-target-action {
  color: var(--gm-gray-500);
  font-size: 0.78rem;
  margin-bottom: 0;
  line-height: 1.3;
}

.priority-target-metrics {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.priority-target-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
}

.priority-target-metric-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gm-gray-400);
  margin-bottom: 2px;
}

.priority-target-metric-value {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

/* orange-600 — outside palette */
.priority-target-warmth-moderate {
  color: var(--gm-sky-700);
}

/* cyan-600 — outside palette */
.priority-target-warmth-cool {
  color: var(--gm-gray-500);
}

.priority-target-priority {
  color: var(--gm-amber-600);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

/* Signal badges row */
.priority-target-indicators-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.priority-target-indicators-empty {
  border-top: none;
  margin-top: 8px;
  padding-top: 0;
  gap: 6px;
}

.priority-target-indicators-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.priority-target-recency {
  font-size: 0.72rem;
  color: var(--gm-gray-400);
  flex-shrink: 0;
  white-space: nowrap;
}

.priority-target-more-link {
  font-size: 0.72rem;
  color: var(--gm-indigo-500);
  font-weight: 500;
  white-space: nowrap;
}

/* Company name link (replaces full-card link) */
.priority-target-company-link {
  text-decoration: none;
  color: inherit;
}

.priority-target-company-link:hover .priority-target-company {
  color: var(--gm-indigo-500);
}

/* Expand/collapse button */
.priority-target-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--gm-gray-400);
  border-radius: 4px;
}

.priority-target-expand-btn:hover {
  color: var(--gm-gray-500);
  background: var(--gm-glass-black-4);
}

/* Chevron icon transition */
.priority-target-chevron {
  transition: transform 0.2s ease;
}

/* Detail section (expanded) */
.priority-target-indicators-detail {
  border-top: 1px solid var(--gm-gray-50);
  margin-top: 8px;
  padding-top: 8px;
}

.priority-target-indicators-detail.hidden {
  display: none;
}

/* Individual event row */
.priority-target-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

a.priority-target-event-row {
  cursor: pointer;
}

a.priority-target-event-row:hover {
  background: var(--gm-indigo-50);
}

a.priority-target-event-row:hover .priority-target-event-title {
  color: var(--gm-indigo-500);
}

.priority-target-event-title {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--gm-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-target-event-date {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--gm-gray-400);
  white-space: nowrap;
}

@media (width <= 768px) {
  .priority-target-top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .priority-target-metrics {
    width: 100%;
    justify-content: flex-start;
  }
}

/* glass_morph/molecules/toggle_container.css */
/* ============================================================================ */
/* == Molecule — ToggleContainer / LanguageCurrency ========================= */
/* ============================================================================ */
/* ─── Page layout ─── */
/* ─── Public header ─── */
/* ─── Wizard card (glass-card pattern) ─── */
/* ─── Step indicator ─── */
/* ─── Wizard title/subtitle ─── */
/* ─── Introduction hero ─── */
/* ─── Preview cards (intro step) ─── */
/* ─── Expected improvements (intro step) ─── */
/* ─── Process steps (intro step) ─── */
/* ─── Info box ─── */
/* ─── Parameter input ─── */
/* ─── Slider input ─── */
.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

/* Reset margin when inside grid rows or entity-info */
.data-row .toggle-container,
.entity-info .toggle-container,
.activity-event-filter .toggle-container {
  margin-top: 0;
}

.row-avatar-container .toggle-container {
  margin-top: 0;
  justify-content: center;
}

/* Keep toggle first in entity-info context (prevent media query order override) */
.entity-info .toggle-container {
  order: 0;
}

/* Disabled toggle container (viewer role) */
.toggle-container--disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.language-toggle {
  background: var(--gm-glass-white-10);
  border: 1px solid var(--gm-glass-white-15);
  color: var(--gm-glass-white-85);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.language-toggle:hover,
.language-toggle:focus {
  background: var(--gm-glass-white-20);
  border-color: var(--gm-glass-white-30);
  color: var(--gm-white);
}

.language-toggle[aria-expanded="true"] .language-caret {
  transform: rotate(180deg);
}

@media (width <= 1024px) {
  .toggle-container {
    order: 1;
    grid-column: 1;
    grid-row: 2;
  }
}

/* glass_morph/molecules/info_card.css */
/* ============================================================================ */
/* == Molecule — InfoCard =================================================== */
/* ============================================================================ */
.info-card {
  background: var(--gm-glass-white-95);
  border-radius: 12px;
  padding: 24px;
  border: 0;
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
  color: var(--gm-gray-800);

  /* Re-establish light-surface context so body text resolves to dark colors.
     CardHeader's own element-level override still wins inside the header. */
}

/* glass_morph/molecules/content_tile.css */
/* ============================================================================ */

/* == Molecule — ContentTile ================================================= */

/* ============================================================================ */

/* ─── Link behaviour ─────────────────────────────────────────────────────── */

/* ─── Buying Windows Widget ──────────────────────────────────────────────── */

/* No drop shadow on the buying-windows tile-light card */
.buying-windows-widget .tile-light {
  box-shadow: none;
}

/* glass_morph/molecules/language_selector.css */
/* ============================================================================ */
/* == Molecule — LanguageSelector =========================================== */
/* ============================================================================ */
.language-selector {
  position: relative;
}

.language-caret {
  font-size: 0.75rem;
  opacity: 0.6;
  transition: transform 150ms ease-in-out;
}

.language-flag {
  font-size: 1rem;
  line-height: 1;
}

.language-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--gm-teal-900-overlay-95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 8px 24px var(--gm-glass-black-30);
  z-index: 100;
}

.language-menu.hidden {
  display: none;
}

.language-item {
  color: var(--gm-glass-white-80);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: all 100ms ease-in-out;
}

.language-item:hover,
.language-item:focus {
  background: var(--gm-glass-white-10);
  color: var(--gm-white);
  text-decoration: none;
}

.language-item.active {
  background: var(--gm-blue-overlay-30);
  color: var(--gm-white);
}

/* glass_morph/molecules/value_pillar_card.css */
/* ============================================================================ */
/* == Molecule — ValuePillarCard ============================================ */
/* ============================================================================ */
.value-pillar-metrics {
  display: flex;
  gap: 0;
  overflow: hidden;
}

.value-pillar-metric {
  flex: 1;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid var(--gm-gray-300);
}

.value-pillar-metric:last-child {
  border-right: none;
}

.value-pillar-metric-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--gm-gray-800);
  line-height: 1.2;
}

.value-pillar-metric-label {
  display: block;
  font-size: 11px;
  color: var(--gm-gray-600);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* glass_morph/molecules/task_item.css */
/* ============================================================================ */
/* == Molecule — Task Item =================================================== */
/* ============================================================================ */
/* Task-specific styles — base row layout inherited from atoms/list_item.css    */
.task-item {
  border-bottom: none;
}

.task-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--gm-gray-300);
  border-radius: 4px;
  background-color: var(--gm-teal-3c768a-overlay-10-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.task-checkbox:hover {
  border-color: var(--gm-blue-500);
}

.task-checkbox.checked {
  background-color: var(--gm-green-500);
  border-color: var(--gm-green-500);
  position: relative;
}

.task-checkbox.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--gm-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.task-meta--action {
  color: var(--gm-sky-700);
}

.task-meta--action i {
  color: var(--gm-sky-700);
}

.task-meta--prospect {
  color: var(--gm-green-700);
}

.task-meta--prospect i {
  color: var(--gm-green-700);
}

.task-meta--in-progress {
  color: var(--gm-amber-600);
  font-weight: 500;
}

.task-meta--in-progress i {
  color: var(--gm-amber-600);
}

.task-item-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-gray-900);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Completed task styling — background via list-item--completed in list_item.css */
.task-item-title--completed {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gm-gray-400);
  color: var(--gm-gray-400);
  opacity: 0.85;
}

.task-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--gm-slate-500);
  flex-wrap: wrap;
}

.task-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.created-by-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--gm-green-50);

  /* green-50 — not in palette */
  color: var(--gm-green-700);

  /* green-700 — not in palette */
}

/* Disabled checkbox for viewer role */
.task-checkbox-link:hover .task-checkbox {
  border-color: var(--gm-blue-500);
  transform: scale(1.05);
}

.task-checkbox-link:hover .task-checkbox.checked {
  background-color: var(--gm-green-700);
  border-color: var(--gm-green-700);
}

/* Task Activity Footer — subtle last-activity line */
.task-activity-footer {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-top: 0.4rem;
  margin-top: 0.4rem;
  border-top: none !important;
  font-size: 0.7rem;
  color: var(--gm-slate-500);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task content link - clickable area without underline */
.task-item-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.task-item-link:hover {
  text-decoration: none;
}

/* glass_morph/molecules/task_group.css */
/* Task group — one deadline group (Te laat / Vandaag / Later) in a task list.
   No box and no border around the group: its heading carries it. A label,
   the counter, then a line running on to the edge of the column or section,
   in the group's colour and weight. 8px from the heading to the first task;
   the list that stacks the groups puts 20px between a group's last task and
   the next heading. */
.task-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-group__items {
  display: flex;
  flex-direction: column;
}

/* Nothing loaded in it: an empty group, or one whose tasks are on a later
   page. Hidden until "load more" or a drop puts a task in it. Hidden groups
   take no gap, so the 12px stays between the groups that show. */
.task-group:not(:has(.task-group__items > *)) {
  display: none;
}

.task-group__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-glass-white-85);
}

.task-group__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gm-glass-white-18);
}

.task-group--overdue .task-group__heading::after {
  height: 2px;
  background: var(--gm-red-400-overlay-50);
}

.task-group--today .task-group__heading::after {
  background: var(--gm-amber-300-overlay-50);
}

.task-group--light .task-group__heading {
  color: var(--gm-gray-700);
}

.task-group--light .task-group__heading::after {
  background: var(--gm-glass-black-12);
}

.task-group--light.task-group--overdue .task-group__heading::after {
  background: var(--gm-red-600-overlay-40);
}

.task-group--light.task-group--today .task-group__heading::after {
  background: var(--gm-amber-600-overlay-45);
}

/* Five shown, the rest behind "Nog N verlopen taken" (TaskGroup foldable:,
   FOLD_AFTER = 5 in task_group.rb). */
.task-group--collapsed .task-group__items > :nth-child(n + 6) {
  display: none;
}

.task-group__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--gm-glass-white-8);
  color: var(--gm-glass-white-90);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.task-group__more:hover {
  background: var(--gm-glass-white-12);
}

.task-group__more:focus-visible {
  outline: 2px solid var(--gm-glass-white-60);
  outline-offset: 1px;
}

.task-group:not(.task-group--collapsed) .task-group__more {
  display: none;
}

/* Later on its own needs no heading: with nothing late and nothing due
   today, the list is just the list. The heading returns as soon as a drop or
   a page puts a task in Te laat or Vandaag. */
:is(.kanban-column-content, .task-groups):not(:has(:is(.task-group--overdue, .task-group--today) .task-group__items > *))
  .task-group--later .task-group__heading {
  display: none;
}

/* The dashboard's stack of groups (Home::TaskGroups). */
.task-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* glass_morph/molecules/activity_item.css */
/* ============================================================================ */
/* == Molecule — Activity Item =============================================== */
/* ============================================================================ */
/* Activity-specific styles — base row layout inherited from atoms/list_item.css */
.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.activity-icon.news,
.activity-icon.product,
.activity-icon.linkedin,
.activity-icon.full_snapshot {
  background: var(--gm-blue-100);
  color: var(--gm-blue-600);
}

.activity-icon.award,
.activity-icon.reorganization,
.activity-icon.email_correspondence,
.activity-icon.crm,
.activity-icon.readiness_change,
.activity-icon.outreach_hook {
  background: var(--gm-amber-50);
  color: var(--gm-amber-600);
}

.activity-icon.growth {
  background: var(--gm-green-100);
  color: var(--gm-green-600);
}

.activity-icon.leadership,
.activity-icon.projects,
.activity-icon.ecosystem_signal {
  background: var(--gm-indigo-50);
  color: var(--gm-indigo-500);
}

.activity-icon.buying_readiness {
  background: var(--gm-red-200);

  /* red-100 — not in palette */
  color: var(--gm-red-600);
}

.activity-company {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-blue-500);
  margin-bottom: 5px;
  line-height: 1.4;
}

.activity-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-gray-900);
  margin-bottom: 5px;
  line-height: 1.4;
}

.activity-description {
  font-size: 14px;
  color: var(--gm-slate-500);
  line-height: 1.6;
  margin-bottom: 10px;
}

.activity-new-star {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: baseline;
  position: relative;
  top: 1px;
}

.activity-time {
  font-size: 12px;
  color: var(--gm-gray-400);
}

/* === Timeline event categories (unified with activity-icon pattern) === */
.activity-icon.hiring {
  background: var(--gm-blue-100);
  color: var(--gm-blue-600);
}

.activity-icon.technology {
  background: var(--gm-green-100);
  color: var(--gm-green-600);
}

.activity-icon.funding {
  background: var(--gm-amber-50);
  color: var(--gm-amber-600);
}

.activity-icon.deals,
.activity-icon.publications,
.activity-icon.events,
.activity-icon.procurement_signal,
.activity-icon.website_visits {
  background: var(--gm-teal-overlay-15);
  color: var(--gm-teal-500);
}

.activity-icon.media {
  background: var(--gm-gray-100);
  color: var(--gm-gray-600);
}

.activity-icon.social, .activity-icon.pattern_detected {
  background: var(--gm-purple-500-overlay-15);
  color: var(--gm-violet-500);
}

/* Buying-readiness subtypes */
.activity-icon.risk_factor {
  background: var(--gm-red-100);
  color: var(--gm-red-600);
}


/* Interaction channels (the task cockpit's Interacties tab). */
.activity-icon.phone {
  background: var(--gm-green-100);
  color: var(--gm-green-600);
}

.activity-icon.meeting {
  background: var(--gm-indigo-50);
  color: var(--gm-indigo-500);
}

/* What was said, quoted under an interaction. */
.activity-snippet {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--gm-gray-100);
  border-radius: 10px;
  background: var(--gm-gray-50);
  color: var(--gm-gray-700);
  font-size: 13.5px;
  line-height: 1.5;
}

.activity-snippet .gm-context-panel__quote-meta {
  margin-top: 6px;
}

/* glass_morph/molecules/lead_card.css */
/* ============================================================================ */
/* == Molecule — Lead Card =================================================== */
/* ============================================================================ */
/* Lead Cards Grid */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0;
  max-height: 600px;
  overflow-y: auto;
  background-color: var(--gm-teal-e2eaed-overlay-90-2);
}

@media (width <= 1024px) {
  .lead-grid {
    grid-template-columns: 1fr;
  }
}

/* glass_morph/molecules/background_summary.css */
/* ============================================================================ */
/* == Molecule — Background Summary Item ===================================== */
/* ============================================================================ */

/* Auto-scrolling pane container — fills full content-section-body height */
.bg-summaries-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.bg-summaries-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 4px 0;
}

/* Hide scrollbar for cleaner look during auto-scroll */
.bg-summaries-list::-webkit-scrollbar {
  width: 4px;
}

.bg-summaries-list::-webkit-scrollbar-track {
  background: transparent;
}

.bg-summaries-list::-webkit-scrollbar-thumb {
  background: var(--gm-gray-200);
  border-radius: 4px;
}

.bg-summaries-list:hover::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
}

/* Inherit base list-item card style — matches task item appearance */
.bg-summaries-list .list-item {
  padding: 12px 20px;
}

.bg-summaries-list .list-item:hover {
  background: var(--gm-slate-100);
  border-color: var(--gm-teal-dbe7eb);
}

.bg-summary-item__header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  color: var(--gm-gray-500);
  font-size: 11px;
}

.bg-summary-item__type {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gm-gray-500);
  font-size: 11px;
}

.bg-summary-item__content {
  flex: 1;
  min-width: 0;
}

.bg-summary-item__summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-gray-800);
  line-height: 1.4;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-summary-item__summary a,
.bg-summary-item__inline-link {
  color: var(--gm-text-on-light-link);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.bg-summary-item__summary a:hover,
.bg-summary-item__inline-link:hover {
  color: var(--gm-sky-700);
}

/* Timestamp and duration */
.bg-summary-item__time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--gm-gray-400);
  text-align: right;
  white-space: nowrap;
  padding-top: 2px;
}

.bg-summary-item__duration {
  display: block;
  font-size: 10px;
  color: var(--gm-gray-300);
  margin-top: 1px;
}


/* glass_morph/molecules/user_avatar.css */
/* ============================================================================ */
/* == Molecule — UserAvatar =================================================== */
/* ============================================================================ */

/* Provides relative positioning context for the admin badge overlay */
.user-avatar-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* System admin indicator — shield-check badge pinned to the top-right corner */
.user-avatar-admin-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  background: var(--gm-teal-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gm-dark-900, var(--gm-blue-0c1e27));
}

/* glass_morph/molecules/maturity_stage_widget.css */
/* ============================================================================ */
/* == Molecule — Maturity Stage Widget ======================================= */
/* ============================================================================ */

.maturity-widget {
  border-top: 1px solid var(--gm-glass-white-10);
  flex-shrink: 0;
}

.maturity-widget .text-muted {
  color: var(--gm-glass-white-60) !important;
}

.maturity-widget .fw-semibold {
  color: var(--gm-white);
}

/* Progress bar segments */
.gm-stage-segment {
  height: 4px;
  background: var(--gm-glass-white-15);
  border-radius: 2px;
  transition: background 0.2s ease;
}

.gm-stage-segment--active {
  background: var(--gm-teal-300);
}

/* Stage labels */
.gm-stage-label {
  font-size: 10px;
  color: var(--gm-glass-white-40);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-stage-label--active {
  color: var(--gm-glass-white-60);
}

.gm-stage-label--current {
  color: var(--gm-white);
  font-weight: 600;
}

@media (width >= 1025px) and (width <= 1899px) {
  .maturity-widget {
    padding: 12px 8px !important;
  }
}

/* glass_morph/molecules/checkbox_select.css */
/* ============================================================================ */
/* == Molecule — CheckboxSelect (generic dropdown multi-select) ============= */
/* ============================================================================ */

/* Container — relative anchor for the dropdown panel */
.checkbox-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Trigger button — styled to match .select / .activity-filter-trigger */
.checkbox-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 36px 8px 12px;
  background-color: var(--gm-ctx-bg-field);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  border: 1px solid var(--gm-ctx-separator);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-gray-800);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.checkbox-select-trigger:hover {
  border-color: var(--gm-gray-400);
}

.checkbox-select-trigger:focus-visible {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

/* Trigger text — truncated summary of selections */
.checkbox-select-trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-gray-900);
  font-weight: 500;
}

/* Placeholder state — lighter than selected text */
.checkbox-select-trigger-text--placeholder {
  color: var(--gm-gray-500);
  font-weight: 400;
}

/* Count badge on trigger — positioned before the chevron zone */
.checkbox-select-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-right: 16px;
  background: var(--gm-filter-control-count);
  color: var(--gm-white);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Dropdown panel ────────────────────────────────────────────────── */

.checkbox-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--gm-black-overlay-12);
  min-width: 220px;
  overflow: hidden;
}

.checkbox-select-panel-inner {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}

/* ── Individual option row ─────────────────────────────────────────── */

.checkbox-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gm-gray-700);
  transition: background 0.1s;
  user-select: none;
  margin: 0;
  font-weight: 400;
}

.checkbox-select-option:hover {
  background: var(--gm-gray-100);
}

.checkbox-select-option.active {
  background: var(--gm-gray-50);
  color: var(--gm-gray-900);
  font-weight: 500;
}

/* Checkbox input inside option */
.checkbox-select-input {
  width: 14px;
  height: 14px;
  accent-color: var(--gm-teal-400);
  cursor: pointer;
  flex-shrink: 0;
}

/* Option label text */
.checkbox-select-label {
  flex: 1;
}

/* The count in its own right-hand column, as in every filter's open list. */
.checkbox-select-count {
  flex-shrink: 0;
  color: var(--gm-gray-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ── Footer: select all / clear all ────────────────────────────────── */

/* The two sit at opposite ends, because they are opposite answers to the same
   question. Pushed together they read as one broken sentence. */
.checkbox-select-footer {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 8px;
  border-top: 1px solid var(--gm-gray-200);
}

/* One shape for both — they differ only in what they do, and the hover colour
   is what says which. Same split as .activity-filter-select-all / -clear in
   molecules/filter_select.css, so the two footers read alike. Without the
   shared rule the select-all link falls back to the browser's blue underline
   and the pair stops looking like a pair. */
.checkbox-select-select-all,
.checkbox-select-clear {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--gm-gray-500);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.checkbox-select-select-all:hover {
  color: var(--gm-green-500);
  text-decoration: none;
}

.checkbox-select-clear:hover {
  color: var(--gm-red-500);
  text-decoration: none;
}

/* The Icon atom defaults to 1rem; scale it to the 12px link text beside it. */
.checkbox-select-footer [class*="gm-icon-"] {
  font-size: 1.2em;
}

/* ── Light surface adaptation ──────────────────────────────────────── */

.tile-light .checkbox-select-trigger,
.modal-content .checkbox-select-trigger {
  background-color: var(--gm-white);
  border-color: var(--gm-gray-300);
  color: var(--gm-gray-900);
}

.tile-light .checkbox-select-trigger:hover,
.modal-content .checkbox-select-trigger:hover {
  border-color: var(--gm-gray-400);
}

/* ── Global context filter bar variant ─────────────────────────────── */

/* The product filter sits in the toolbar beside the company select and the
   prospect filter menu. Those are translucent white over the teal bar, not
   opaque fields, so an opaque trigger reads as a white box among teal ones.

   The rules below are the same treatment .prospects-toolbar gives
   .select-input (components/atoms/input.css) and .activity-filter-trigger
   (molecules/filter_select.css) — same surface, border, height and white
   chevron — so the three controls stay one row of the same thing. */

.checkbox-select--navbar {
  width: auto;
}

.prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger,
.header-filter-bar .checkbox-select--navbar .checkbox-select-trigger {
  width: auto;
  min-width: 190px;
  height: 34px;
  padding: 0 1.8rem 0 0.75rem;
  line-height: 1.2;
  background-color: var(--gm-glass-white-15);
  border: 1px solid var(--gm-glass-white-30);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gm-white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 6px center;
  background-size: 12px;
}

/* The trigger's own text span sets gray-900, which would stay dark on the
   translucent surface — it inherits white here, placeholder included. */
.prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger-text,
.header-filter-bar .checkbox-select--navbar .checkbox-select-trigger-text,
.prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger-text--placeholder,
.header-filter-bar .checkbox-select--navbar .checkbox-select-trigger-text--placeholder {
  color: var(--gm-white);
}

.prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger:hover,
.header-filter-bar .checkbox-select--navbar .checkbox-select-trigger:hover,
.prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger:focus-visible,
.header-filter-bar .checkbox-select--navbar .checkbox-select-trigger:focus-visible {
  background-color: var(--gm-glass-white-20);
  border-color: var(--gm-glass-white-50);
  box-shadow: 0 0 0 2px var(--gm-glass-white-15);
  outline: none;
}

/* Matches .prospects-toolbar .activity-filter-badge beside it. */
.prospects-toolbar .checkbox-select--navbar .checkbox-select-badge,
.header-filter-bar .checkbox-select--navbar .checkbox-select-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-right: 8px;
  font-size: 10px;
}

/* The panel stays the light one the sibling menus use — only the trigger is
   part of the teal bar. It is wider than the trigger because a product name
   plus its count does not fit in 190px, and truncating every row would hide
   what the counts say. */
.checkbox-select--navbar .checkbox-select-panel {
  right: auto;
  min-width: 320px;
  width: max-content;
  max-width: calc(100vw - 32px);
}

/* glass_morph/molecules/connect_task_panel.css */
/* ConnectTaskPanel: a manual LinkedIn connection request in one click.
   Bundled into the extension (rake chrome_extension:copy_shared_css), which
   draws the same markup in focus mode. Dark glass only: the panel never sits
   on a light surface. */

.connect-task-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--gm-white);
}

.connect-task-panel__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The person this request is for wears the DMU's lead colour, as in the panel. */
.connect-task-panel__who .row-avatar {
  flex: none;
  background: var(--gm-avatar-rank-1);
}

.connect-task-panel__who-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.connect-task-panel__name {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-task-panel__company {
  font-size: 13px;
  color: var(--gm-gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-task-panel__kind {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-gray-300);
}

.connect-task-panel__kind svg {
  width: 14px;
  height: 14px;
}

/* The employer may be out of date (#1317): one amber line, read before the
   message and the button that sends it. */
.connect-task-panel__caution {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--gm-yellow-tw-300-overlay-35);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-yellow-tw-300-overlay-15);
  color: var(--gm-white);
  font-size: 13px;
  line-height: 1.45;
}

.connect-task-panel__caution svg,
.connect-task-panel__caution .icon {
  flex: none;
  margin-top: 2px;
}

/* The message, whole, in one dark well. Past five lines it folds, and only
   then does "Show more" appear. */
.connect-task-panel__message {
  display: -webkit-box;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  border-radius: var(--gm-radius-sm);
  background: var(--gm-glass-black-20);
  color: var(--gm-gray-200);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.connect-task-panel__message--expanded {
  display: block;
}

.connect-task-panel__quiet,
.connect-task-panel__reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}

/* Sized like the LinkedIn panel's other focus-mode buttons
   (.task-card__buttons--wide .task-card__btn): 8px corners, 10px padding,
   12px semibold, rather than the app's 38px pill. */
.connect-task-panel .button {
  min-width: 0;
  height: auto;
  padding: 10px;
  border-radius: var(--gm-radius-sm);
}

.connect-task-panel .button::before {
  border-radius: var(--gm-radius-sm);
}

.connect-task-panel .button .button-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

/* The quiet ways out are text, not pills: the one primary button is the task. */
.connect-task-panel .button.button-tertiary {
  padding: 6px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--gm-teal-tw-300);
}

.connect-task-panel .button.button-tertiary:hover {
  border-color: transparent;
  background: var(--gm-glass-white-6);
  color: var(--gm-white);
}

.connect-task-panel .button.button-tertiary:focus-visible {
  outline: 2px solid var(--gm-teal-tw-300);
  outline-offset: 2px;
}

.connect-task-panel__more {
  align-self: flex-start;
  margin-top: -8px;
}

/* A button's own display would otherwise beat the hidden attribute. */
.connect-task-panel .button[hidden] {
  display: none;
}

/* The panel inlines its icons inside the label (it ships no icon font). */
.connect-task-panel .button-text > svg {
  width: 14px;
  height: 14px;
  margin-inline-end: 6px;
  vertical-align: -2px;
}

.connect-task-panel__done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gm-mint-400-overlay-35);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-green-500-overlay-12);
}

.connect-task-panel__check {
  display: inline-flex;
  flex: none;
  color: var(--gm-mint-400);
}

.connect-task-panel__check svg {
  width: 22px;
  height: 22px;
}

.connect-task-panel__done-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.connect-task-panel__done-title {
  font-weight: 700;
}

.connect-task-panel__done-meta {
  font-size: 13px;
  color: var(--gm-gray-300);
}

.connect-task-panel--sent {
  gap: 8px;
}

.connect-task-panel__reason-list {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.connect-task-panel__reason-list[hidden],
.connect-task-panel__other[hidden] {
  display: none;
}

.connect-task-panel__other {
  display: flex;
  align-self: stretch;
  gap: 8px;
}

.connect-task-panel__other > :first-child {
  flex: 1;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .connect-task-panel .button {
    transition: none;
  }
}

/* glass_morph/molecules/dropdown_button.css */
/* ─── DropdownButton molecule ────────────────────────────────────────────── */

.gm-dropdown-button {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* One button with one click target, so the chevron follows the label inside
   it. A divider and a separate chevron segment drew a split button, two
   targets, which this is not. The right padding is the smaller one because
   the chevron glyph carries its own side bearing. */
.gm-dropdown-button .button {
  min-width: auto;
  position: relative;
  gap: 6px;
  padding-left: 18px;
  padding-right: 14px;
}

.gm-dropdown-button .button.button-sm {
  padding-left: 0.75rem;
  padding-right: 0.625rem;
}

.gm-dropdown-button .gm-dropdown-button__chevron {
  display: flex;
  align-items: center;
  opacity: 0.85;
  transition: transform 0.2s ease-out;
}

.gm-dropdown-button .button[aria-expanded="true"] .gm-dropdown-button__chevron {
  transform: rotate(180deg);
}

/* ─── Menu panel ─────────────────────────────────────────────────────────── */

.gm-dropdown-button__menu.hidden {
  display: none;
}

.gm-dropdown-button__menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 9900;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--gm-teal-850-95, var(--gm-teal-850-overlay-94));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: 12px;
  box-shadow:
    0 12px 40px var(--gm-glass-black-40),
    0 0 0 1px var(--gm-glass-white-5);
}

/* Alignment variants */
.gm-dropdown-button__menu--end {
  right: 0;
}

.gm-dropdown-button__menu--start {
  left: 0;
}

/* ─── Menu items ─────────────────────────────────────────────────────────── */

.gm-dropdown-button__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-glass-white-85);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.gm-dropdown-button__item:hover,
.gm-dropdown-button__item:focus-visible {
  background: var(--gm-glass-white-8);
  color: var(--gm-slate-100);
  outline: none;
}

.gm-dropdown-button__item:active {
  background: var(--gm-glass-white-12);
}

/* Danger variant */
.gm-dropdown-button__item--danger {
  color: var(--gm-red-400);
}

.gm-dropdown-button__item--danger:hover,
.gm-dropdown-button__item--danger:focus-visible {
  background: var(--gm-red-500-overlay-12);
  color: var(--gm-red-300);
}

/* Disabled state */
.gm-dropdown-button__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Item content ───────────────────────────────────────────────────────── */

.gm-dropdown-button__item-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.gm-dropdown-button__item:hover .gm-dropdown-button__item-icon {
  opacity: 1;
}

.gm-dropdown-button__item-text {
  flex: 1;
}

/* ─── Divider ────────────────────────────────────────────────────────────── */

.gm-dropdown-button__divider {
  height: 1px;
  margin: 4px 12px;
  background: var(--gm-glass-white-8);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (width <= 576px) {
  .gm-dropdown-button__menu {
    min-width: 180px;
  }
}

/* ─── Icon-only trigger ──────────────────────────────────────────────────────
   For a toolbar that has no room for a label. It borrows the ActionStatus
   metrics so a "⋯" sits level with the buttons beside it in an ActionBar. */

.gm-dropdown-button__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--gm-glass-white-60);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.gm-dropdown-button__trigger:hover,
.gm-dropdown-button__trigger:focus-visible,
.gm-dropdown-button__trigger[aria-expanded="true"] {
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
}

.gm-dropdown-button__trigger:focus-visible {
  outline: 2px solid var(--gm-glass-white-60);
  outline-offset: 1px;
}

/* glass_morph/molecules/product_membership.css */
/* ─── ProductMembershipDropdown molecule ───────────────────────────────────── */

.gm-product-membership {
  position: relative;
  display: inline-block;
}

/* Reserve room on the pill's trailing edge so the chevron sits INSIDE the tag. */
.gm-product-membership .prospect-product-badge {
  padding-inline-end: 28px;
}

/* Chevron lives inside the pill, pinned to its trailing edge (no separate box). */
.gm-product-membership__chevron {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gm-white);
  cursor: pointer;
  opacity: 0.85;
}

.gm-product-membership__chevron:hover {
  opacity: 1;
}

.gm-product-membership__menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-block-start: 4px;
  min-width: 16rem;
  padding: 8px;
  background: var(--gm-teal-850-95, var(--gm-teal-850-overlay-94));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gm-border-on-dark);
  border-radius: var(--gm-radius-md);
  box-shadow: var(--gm-shadow-md);
  z-index: 9900;
}

.gm-product-membership__heading {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--gm-ctx-text-muted);
  text-transform: uppercase;
}

.gm-product-membership__company {
  display: block;
  padding: 8px 8px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-ctx-text-primary);
}

.gm-product-membership__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--gm-radius-sm);
}

/* Menu sits on a dark surface — the product name is a link to that product's
   prospects page; keep it light and readable (atom defaults are for light bg). */
.gm-product-membership__row-link,
.gm-product-membership__row-name {
  flex: 1 1 auto;
  color: var(--gm-ctx-text-primary);
  text-decoration: none;
}

.gm-product-membership__row-link:hover {
  text-decoration: underline;
}

/* Dim only the label on a member row — the check marker stays bright (opacity
   on the whole row would compound onto the marker and can't be undone). */
.gm-product-membership__row.is-member .gm-product-membership__row-icon,
.gm-product-membership__row.is-member .gm-product-membership__row-link,
.gm-product-membership__row.is-member .gm-product-membership__row-name {
  opacity: 0.7;
}

.gm-product-membership__row.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.gm-product-membership__row-icon {
  color: var(--gm-ctx-text-primary);
}

/* Icon-only "+" add button — no box: strip the button chrome so only the glyph
   shows, matching the chevron affordance. Compact to sit snug in the menu row. */
.gm-product-membership__add.button {
  flex: 0 0 auto;
  padding: 2px 6px;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--gm-ctx-text-primary);
}

.gm-product-membership__add.button::before {
  display: none; /* remove the gradient glow border */
}

.gm-product-membership__add.button:hover {
  color: var(--gm-white);
}

/* One-way affordance: the add button disappears and the check marker appears
   once the row becomes a member (server-rendered or after a successful add). */
.gm-product-membership__added {
  flex: 0 0 auto;
  display: none;
  color: var(--gm-green-500);

  /* bright green check */
}

.gm-product-membership__row.is-member .gm-product-membership__add {
  display: none;
}

.gm-product-membership__row.is-member .gm-product-membership__added {
  display: inline-flex;
}

.gm-product-membership__error {
  font-size: 12px;
  color: var(--gm-status-danger);
}

/* glass_morph/molecules/feedback_form.css */
.feedback-form {
  margin-top: 4px;
}

/* Screenshot preview shown in the feedback modal so the user sees what is
   being sent. The wrapper holds either a status message (capturing/failed/
   disabled) or the captured image. */
.feedback-preview-wrap {
  overflow: hidden;
  border: 1px solid var(--gm-ctx-separator);
  border-radius: var(--gm-radius-sm);
  position: relative;
}

.feedback-preview-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  color: var(--gm-ctx-text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.feedback-preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  max-width: 100%;
  margin-bottom: var(--gm-space-3, 0.75rem);
  border-radius: var(--gm-radius-md);
}

.feedback-form__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-form__ratings {
  row-gap: 8px;
}

.feedback-form__reason {
  display: flex;
  flex-direction: column;
}

.feedback-form__reason .form-group {
  gap: 6px;
}

.feedback-form__reason .textarea {
  min-height: 88px;
}

.feedback-form__actions {
  display: flex;
  justify-content: flex-start;
}

.feedback-form__actions .button {
  min-width: 140px;
}

.feedback-btn {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-200);
  border-radius: 6px;
  color: var(--gm-gray-700);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}

.feedback-btn:hover {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-300);
  color: var(--gm-gray-900);
}

.feedback-btn--inactive {
  background: var(--gm-gray-50);
}

.feedback-btn--positive {
  background: var(--gm-green-600);
  border-color: var(--gm-green-600);
  color: var(--gm-white);
}

.feedback-btn--positive:hover {
  background: var(--gm-green-500);
  border-color: var(--gm-green-500);
  color: var(--gm-white);
}

.feedback-btn--negative {
  background: var(--gm-red-600);
  border-color: var(--gm-red-600);
  color: var(--gm-white);
}

.feedback-btn--negative:hover {
  background: var(--gm-red-500);
  border-color: var(--gm-red-500);
  color: var(--gm-white);
}

@media (width <= 576px) {
  .feedback-form__actions .button {
    width: 100%;
  }
}

/* glass_morph/molecules/field_disclosure.css */
/* == Molecule — FieldDisclosure == */

/* An optional field behind one quiet line. Collapsed it is a 13px toggle with no
   label, frame or hint, so it stops competing with the fields a user must fill.
   A count chip keeps filled-in content visible after collapsing. */
.field-disclosure {
  margin-bottom: 26px;
  border-top: 1px solid var(--gm-gray-100);
  padding-top: 14px;
}

.field-disclosure .button.field-disclosure__toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 0;
  font-family: Figtree, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-gray-500);
  cursor: pointer;
  transition: color 0.15s ease;
}

.field-disclosure .button.field-disclosure__toggle::before {
  display: none;
}

.field-disclosure .button.field-disclosure__toggle .button-container {
  gap: 7px;
}

.field-disclosure .button.field-disclosure__toggle .button-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.field-disclosure .button.field-disclosure__toggle:hover {
  background: none;
  border: none;
  color: var(--gm-teal-200);
}

.field-disclosure .button.field-disclosure__toggle:focus-visible {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: 3px;
  border-radius: 4px;
}

.field-disclosure .button.field-disclosure__toggle .me-1 {
  margin-right: 0 !important;
  font-size: 12px !important;
  transition: transform 0.2s ease;
}

.field-disclosure[data-open="true"] .button.field-disclosure__toggle .me-1 {
  transform: rotate(90deg);
}

.field-disclosure__head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Required: the field stopped being optional (e.g. the "custom" message type) */
.field-disclosure .field-disclosure__head .field-disclosure__required {
  margin-left: -6px;
  font-size: 12px;
  color: var(--gm-red-600);
}

.field-disclosure--required .button.field-disclosure__toggle,
.field-disclosure--required .button.field-disclosure__toggle .button-text {
  font-weight: 600;
  color: var(--gm-gray-700);
}

.field-disclosure__count {
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--gm-gray-100);
  color: var(--gm-gray-600);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.field-disclosure__body {
  padding-top: 12px;
}

.field-disclosure__body .textarea {
  width: 100%;
  min-height: 76px;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--gm-radius-sm);
}

.field-disclosure__body .input-hint {
  margin: 6px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .field-disclosure .button.field-disclosure__toggle,
  .field-disclosure .button.field-disclosure__toggle .me-1 {
    transition: none;
  }
}

/* A summary beside the toggle says what a collapsed group holds. */
.field-disclosure__summary {
  color: var(--gm-gray-800);
  font-size: 13px;
  font-weight: 500;
}

/* glass_morph/molecules/ai_source_chips.css */
/* AiSourceChips — what the AI writes from: the aanleiding the user picked
   and what it always reads besides. Sits in the AI panel above its controls. */
.gm-ai-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 14px;
  padding: 9px 12px;
  border: 1px dashed var(--gm-gray-200);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-white);
}

.gm-ai-sources__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-size: 13px;
}

.gm-ai-sources__label {
  color: var(--gm-gray-600);
  font-size: 12px;
  font-weight: 600;
}

.gm-ai-sources__empty {
  color: var(--gm-gray-500);
}

.gm-ai-sources__empty b {
  color: var(--gm-teal-200);
  font-weight: 600;
}

.gm-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 3px 0 10px;
  border-radius: 999px;
  background: var(--gm-teal-overlay-8);
  color: var(--gm-teal-200);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.gm-ai-chip[hidden],
.gm-ai-sources__empty[hidden],
.gm-ai-sources__note[hidden] {
  display: none;
}

.gm-ai-chip__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.gm-ai-chip__remove:hover {
  background: var(--gm-white);
}

.gm-ai-sources__note,
.gm-ai-sources__always {
  color: var(--gm-gray-500);
  font-size: 12px;
}

.gm-ai-sources__always {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* glass_morph/molecules/clamped_text.css */

/* == Molecule — ClampedText == */

/* A long text folded to about five lines with a fade at the fold, and one small
   underlined link under it, so it reads as something to click. The controller adds
   --collapsed only to a text that overflows, so a short text has no fade and
   no toggle. */
.clamped-text--collapsed .clamped-text__body {
  max-height: 7.5em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, var(--gm-white) 70%, transparent 100%);
}

.clamped-text .button.clamped-text__toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 4px 0;
  font-family: Figtree, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-text-on-light-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.clamped-text .button.clamped-text__toggle::before {
  display: none;
}

.clamped-text .button.clamped-text__toggle .button-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.clamped-text .button.clamped-text__toggle:hover {
  background: none;
  border: none;
  color: var(--gm-teal-600);
}

.clamped-text .button.clamped-text__toggle:focus-visible {
  outline: 2px solid var(--gm-teal-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.clamped-text .button.clamped-text__toggle[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .clamped-text .button.clamped-text__toggle {
    transition: none;
  }
}

/* glass_morph/molecules/coverage_avatar.css */
/* The card's own surface, taken from the design. Not GlassCard: its default
   variant resolves to tile-light, which is white, and every colour below is
   built for the dark ground the design puts this block on. */
.coverage-card {
  background: var(--gm-teal-900-overlay-45);
  border: 1px solid var(--gm-glass-white-8);
  border-radius: var(--gm-radius-lg);
  padding: 20px 22px 22px;
  color: var(--gm-glass-white-95);
}

.coverage-card .coverage-title {
  color: var(--gm-glass-white-95);
  font-size: 17px;
  font-weight: 600;
}

.coverage-subtitle {
  color: var(--gm-ice-200);
  font-size: 13.5px;
}

.coverage-subtitle strong {
  color: var(--gm-glass-white-95);
  font-weight: 600;
}

/* The warning keeps the design's tinted box; AlertBanner supplies only the
   icon and the two lines of text. */
.coverage-alert {
  background: var(--gm-amber-400-overlay-12);
  border: 1px solid var(--gm-amber-400-overlay-22);
  border-radius: var(--gm-radius-md);
  padding: 12px 14px;
}

/* A warning Alert paints its text in amber-800, which is meant for a light
   surface and disappears on this one. That utility carries !important, so
   overriding it needs the same weight. */
.coverage-alert .gm-text-amber-800 {
  color: var(--gm-amber-200) !important;
}

.coverage-spoken-label {
  color: var(--gm-ice-100);
  font-size: 12.5px;
  font-weight: 600;
}

/* Contact coverage card — the block from the DMU tab design.

   Colours come from that design rather than from the nearest existing ramp:
   the mint marking a reached member is lighter than --gm-green-500, and the
   blue-grey text scale is cool where --gm-glass-white-* is neutral. Both are
   declared in variables.css. */

.coverage-avatar {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

/* The base .row-avatar brings a solid --gm-teal-700 fill, a drop shadow and
   white initials, all of which read as a filled chip. An uncontacted member is
   the opposite of filled, so the fill, the shadow and the initial colour are
   all reset here. */
.coverage-avatar .row-avatar {
  width: 34px;
  height: 34px;
  border: 1.5px dashed var(--gm-glass-white-30);
  background: var(--gm-glass-white-5);
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.coverage-avatar .row-avatar-initials {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gm-ice-400);
  transition: color 0.2s ease;
}

.coverage-avatar:hover .row-avatar,
.coverage-avatar:focus-visible .row-avatar {
  border-color: var(--gm-glass-white-60);
}

.coverage-avatar:hover .row-avatar-initials,
.coverage-avatar:focus-visible .row-avatar-initials {
  color: var(--gm-glass-white-95);
}

.coverage-avatar:focus-visible {
  outline: 2px solid var(--gm-mint-400);
  outline-offset: 3px;
}

.coverage-avatar--reached .row-avatar {
  border: 2px solid var(--gm-mint-400);
  background: var(--gm-mint-400-overlay-16);
}

.coverage-avatar--reached .row-avatar-initials {
  color: var(--gm-glass-white-95);
}

/* The check sits on the ring rather than inside it: the initials stay
   readable, and the mark is what the eye counts across a row. */
.coverage-avatar-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--gm-teal-750);
  background: var(--gm-mint-400);
  color: var(--gm-mint-950);
  overflow: hidden;
}

/* Icon(size: :xs) resolves to Bootstrap's .fs-6, a 1rem !important that is
   wider than this 15px badge, and the base icon rule's vertical-align pushes
   the overflow out of the bottom of the circle. Same correction, and the same
   !important, as molecules/linkedin_connection_indicator.css. */
.coverage-avatar-check [class*="gm-icon-"] {
  font-size: 10px !important;
  line-height: 1;
}

.coverage-avatar-check [class*="gm-icon-"]::before {
  vertical-align: 0;
}

.coverage-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.coverage-card .coverage-role-name {
  color: var(--gm-ice-100);
  letter-spacing: 0.02em;
}

.coverage-card .coverage-role-count {
  color: var(--gm-ice-200);
  font-variant-numeric: tabular-nums;
}

/* Amber, not red: a role nobody has reached is a gap to close, not a failure. */
.coverage-card .coverage-role-count--zero {
  color: var(--gm-amber-200);
}

.coverage-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--gm-linkedin-blue);
  color: var(--gm-glass-white-95);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

/* A button, so the reset comes first: full width, left-aligned text and none of
   the chrome a button brings. The surface itself is set in the "Spoken to"
   section below, where the padding is. */
.coverage-spoken-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* The row the avatar sends you to, held long enough to find with the eye. */
.stakeholder-row.coverage-flash {
  background: var(--gm-mint-400-overlay-18);
  transition: background 0.3s ease;
}

/* ── The "Spoken to" rows ── */

.coverage-card .coverage-spoken-row {
  background: var(--gm-glass-white-5);
  border-radius: var(--gm-radius-md);
  padding: 10px 12px;
}

/* Scoped to .coverage-card so it outweighs the rule above — the same two
   classes, so the plain `.coverage-spoken-row:hover` would lose to it. */
.coverage-card .coverage-spoken-row:hover,
.coverage-card .coverage-spoken-row:focus-visible {
  background: var(--gm-glass-white-10);
}

.coverage-card .coverage-spoken-row:focus-visible {
  outline: 2px solid var(--gm-mint-400);
  outline-offset: 2px;
}

/* Filled, light and dark-lettered — the inverse of the outlined avatars on the
   left, because these are the people who answered. */
.coverage-spoken-avatar .row-avatar {
  width: 36px;
  height: 36px;
  background: var(--gm-ice-50);
  box-shadow: 0 0 0 2px var(--gm-mint-400);
}

.coverage-spoken-avatar .row-avatar-initials {
  font-size: 12px;
  font-weight: 700;
  color: var(--gm-teal-650);
}

.coverage-card .coverage-spoken-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gm-glass-white-95);
}

.coverage-card .coverage-spoken-title {
  font-size: 12.5px;
  color: var(--gm-ice-200);
}

.coverage-card .coverage-spoken-count {
  font-size: 12.5px;
  color: var(--gm-ice-300);
}

/* Passed to MetadataRow as its colour, which routes a class string straight
   onto the icon and the span — the two nodes that actually carry the colour. */
.coverage-ago {
  color: var(--gm-ice-200);
}

/* A last contact years back is the one thing on this row worth catching the
   eye, so it takes the same amber as a role nobody has reached. */
.coverage-ago-stale {
  color: var(--gm-amber-200);
}

/* The two badges carry their own palettes, which are built for other surfaces. */

.coverage-spoken-row .badge {
  background: var(--gm-glass-white-14);
  color: var(--gm-ice-300);
}

/* ── Open connection requests ──

   Blue, because mint already means reached and amber already means a gap or a
   date gone stale. Outlined and dashed rather than filled: the request is the
   shape of a contact without the contact, and the dash says so without relying
   on the hue, which a colour-blind reader would lose. */

.coverage-avatar--awaiting .row-avatar {
  border: 2px dashed var(--gm-blue-200);
  background: var(--gm-blue-400-overlay-15);
}

.coverage-avatar--awaiting .row-avatar-initials {
  color: var(--gm-glass-white-95);
}

.coverage-avatar-check--awaiting {
  background: var(--gm-blue-200);
  color: var(--gm-sky-700);
}

.coverage-card .coverage-role-awaiting {
  color: var(--gm-blue-200);
  font-variant-numeric: tabular-nums;
}

.coverage-card .coverage-subtitle-awaiting {
  color: var(--gm-blue-200);
}

.coverage-card .coverage-awaiting-label, .coverage-card .coverage-connected-label {
  color: var(--gm-blue-200);
  margin-top: 0.25rem;
}

/* The inverse of a spoken row: a dashed edge and no fill, so the two groups
   read as different kinds of thing at a glance down the column. */
.coverage-card .coverage-awaiting-row {
  background: transparent;
  border: 1px dashed var(--gm-glass-white-14);
}

.coverage-card .coverage-awaiting-row:hover,
.coverage-card .coverage-awaiting-row:focus-visible {
  background: var(--gm-blue-400-overlay-15);
  border-color: var(--gm-blue-200);
}

.coverage-awaiting-avatar .row-avatar {
  width: 36px;
  height: 36px;
  border: 2px dashed var(--gm-blue-200);
  background: var(--gm-blue-400-overlay-15);
  box-shadow: none;
}

.coverage-awaiting-avatar .row-avatar-initials {
  font-size: 12px;
  font-weight: 700;
  color: var(--gm-glass-white-95);
}

.coverage-awaiting-direction {
  color: var(--gm-blue-200);
}

/* Badge.status(:pending) resolves to gm-badge-amber, and amber is already spent
   on this card for stale dates and roles nobody reached. */
.coverage-awaiting-row .gm-badge-amber {
  background: var(--gm-blue-400-overlay-15);
  color: var(--gm-blue-200);
}

/* ── Connected, nothing written yet ──

   LinkedIn blue on a solid edge: the tie exists, so the dash of an open request
   would be wrong, and no fill, because the fill is kept for the people who
   answered. The LinkedIn mark on the avatar carries the state without the hue. */

.coverage-avatar--connected .row-avatar {
  border: 2px solid var(--gm-blue-200);
  background: var(--gm-glass-white-5);
}

.coverage-avatar--connected .row-avatar-initials {
  color: var(--gm-glass-white-95);
}

.coverage-avatar-check--connected {
  background: var(--gm-linkedin-blue);
  color: var(--gm-glass-white-95);
}

.coverage-card .coverage-connected-row {
  background: transparent;
  border: 1px solid var(--gm-glass-white-14);
}

.coverage-card .coverage-connected-row:hover,
.coverage-card .coverage-connected-row:focus-visible {
  background: var(--gm-glass-white-10);
  border-color: var(--gm-blue-200);
}

.coverage-connected-avatar .row-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid var(--gm-blue-200);
  background: var(--gm-glass-white-5);
  box-shadow: none;
}

.coverage-connected-avatar .row-avatar-initials {
  font-size: 12px;
  font-weight: 700;
  color: var(--gm-glass-white-95);
}

.coverage-connected-via {
  color: var(--gm-blue-200);
}

/* ── Spoken to, since archived off the DMU ──

   The conversation happened, so the row keeps the spoken row's shape, but it
   recedes: no fill, a faint edge, an outlined avatar. It is not a button, as
   there is no row below to jump to, so the pointer and the hover go too. */

.coverage-card .coverage-archived-label {
  color: var(--gm-ice-200);
  margin-top: 0.25rem;
}

.coverage-card .coverage-archived-row {
  background: transparent;
  border: 1px solid var(--gm-glass-white-8);
  cursor: default;
}

.coverage-card .coverage-archived-row:hover {
  background: transparent;
}

.coverage-archived-avatar .row-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid var(--gm-glass-white-14);
  background: transparent;
  box-shadow: none;
}

.coverage-archived-avatar .row-avatar-initials {
  font-size: 12px;
  font-weight: 700;
  color: var(--gm-ice-300);
}

/* glass_morph/molecules/feedback_button.css */
/* ── Feedback Thumb Button (inline row icon) ─────────────────────────── */

.feedback-thumb-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--gm-white);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  font: inherit;
  line-height: 1;
}

.feedback-thumb-btn:hover {
  background: var(--gm-glass-white-12);
}

/* ── Floating Feedback Button (FAB) ────────────────────────────────── */

.feedback-fab {
  position: fixed;

  /* Bottom-aligned with the chat launcher */
  bottom: 1rem;

  /* Offset left of the bottom-right chat launcher so the two FABs don't overlap */
  right: 5.5rem;

  /* Above .modal-overlay (1000) so the FAB stays clickable while a modal is open */
  z-index: 1001;
  width: 56px;
  height: 56px;

  /* Circular solid pill, matching the chat launcher's shape and muted color */
  border-radius: 50%;
  background: var(--gm-teal-600);
  border: none;
  box-shadow: var(--gm-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-white);
  text-decoration: none;
  transition: all 0.2s ease-out;
  cursor: pointer;
}

.feedback-fab:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px var(--gm-glass-black-20);
  transform: translateY(-2px);
}

.feedback-fab:active {
  transform: translateY(0);
}

/* ── Markdown description editor (write / preview panes) ───────────── */

/* Force a tall default (~8+ lines); specific selector beats generic .form-control */
.markdown-preview-field textarea.form-control {
  min-height: 12rem;
  resize: vertical;
}

/* ── Screenshot Preview (modal preview image) ──────────────────────── */

/* ── Screenshot Annotation (canvas + floating toolbar) ─────────────── */

.feedback-annotate-caption {
  margin-bottom: var(--gm-space-2, 0.5rem);
  font-size: 0.8125rem;
  color: var(--gm-ctx-text-muted);
}

.feedback-annotate-canvas {
  display: block;
  height: auto;
  cursor: crosshair;

  /* Prevent the page from scrolling while drawing with touch/pen */
  touch-action: none;
}

/* Toolbar floats as a glass pill over the top of the screenshot, so the
   controls read as part of the image being annotated. */
.feedback-annotate-toolbar {
  position: absolute;
  top: var(--gm-space-2, 0.5rem);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--gm-space-2, 0.5rem);
  max-width: calc(100% - var(--gm-space-3, 0.75rem));
  padding: var(--gm-space-1, 0.25rem) var(--gm-space-2, 0.5rem);
  color: var(--gm-white);
  background: var(--gm-teal-850-95, var(--gm-teal-850-overlay-94));
  backdrop-filter: blur(8px);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: var(--gm-radius-md);
  box-shadow: var(--gm-shadow-md);
  transform: translateX(-50%);
}

.feedback-annotate-group {
  display: flex;
  align-items: center;
  gap: var(--gm-space-1, 0.25rem);
}

/* Subtle divider between tool / color / action groups inside the pill */
.feedback-annotate-group + .feedback-annotate-group {
  padding-left: var(--gm-space-2, 0.5rem);
  border-left: 1px solid var(--gm-glass-white-12);
}

.feedback-annotate-tool,
.feedback-annotate-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--gm-white);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--gm-glass-white-12);
  border-radius: var(--gm-radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.feedback-annotate-tool:hover,
.feedback-annotate-action:hover {
  background: var(--gm-glass-white-15);
}

.feedback-annotate-tool.active {
  background: var(--gm-teal-600);
  border-color: var(--gm-teal-600);
}

.feedback-annotate-tool:focus-visible,
.feedback-annotate-action:focus-visible,
.feedback-annotate-color:focus-visible {
  outline: 2px solid var(--gm-white);
  outline-offset: 2px;
}

.feedback-annotate-color {
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 2px solid var(--gm-glass-white-20);
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feedback-annotate-color:hover {
  transform: scale(1.1);
}

.feedback-annotate-color.active {
  border-color: var(--gm-white);
  box-shadow: 0 0 0 2px var(--gm-glass-white-30);
}

.feedback-annotate-color--red {
  background: var(--gm-red-500);
}

.feedback-annotate-color--yellow {
  background: var(--gm-yellow-500);
}

.feedback-annotate-color--blue {
  background: var(--gm-blue-500);
}


/* Organisms */
/* glass_morph/organisms/linkedin_integrations.css */
/* ============================================================================ */
/* == Organism — LinkedIn integration pages =================================== */
/* ============================================================================ */
/* LinkedIn integrations page */
.linkedin-integration-name-wrap {
  min-width: 0;
}

.linkedin-integration-name-wrap .data-card-title {
  font-size: 1rem;
  max-width: 100%;
}

/* LinkedIn show page — positions grid (few items, card layout) */
.linkedin-positions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

/* LinkedIn match confidence cell (right-aligned value + label) */
.linkedin-connection-confidence {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.linkedin-connection-confidence-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--gm-green-400);
}

.linkedin-connection-confidence-label {
  font-size: 11px;
  color: var(--gm-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.linkedin-contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--gm-glass-black-6);
  background: var(--gm-white);
  box-shadow: 0 2px 8px var(--gm-glass-black-4);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.linkedin-contact-card:hover {
  box-shadow: 0 4px 16px var(--gm-glass-black-8);
  transform: translateY(-1px);
}

.linkedin-contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 12px 0 0 12px;
}
.linkedin-contact-card.border-success::before { background: var(--gm-green-500); }
.linkedin-contact-card.border-warning::before { background: var(--gm-yellow-500); }
.linkedin-contact-card.border-info::before    { background: var(--gm-teal-500); }

.linkedin-contact-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gm-white);
  background: linear-gradient(135deg, var(--gm-blue-500) 0%, var(--gm-teal-500) 100%);
}

.linkedin-contact-avatar.avatar-position {
  background: linear-gradient(135deg, var(--gm-yellow-500) 0%, var(--gm-orange-400, var(--gm-orange-500)) 100%);
}

.linkedin-contact-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gm-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.linkedin-contact-meta {
  font-size: 0.8rem;
  color: var(--gm-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

@media (width <= 480px) {
  .linkedin-positions-grid {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
}

/* glass_morph/organisms/admin_forms.css */
/* ============================================================================ */
/* == Organism — Admin forms and role cards =================================== */
/* ============================================================================ */
/* Shared admin form section treatment */
.admin-form-section.content-section {
  margin: 0;
  min-height: auto;
  max-height: none;
}

.admin-form-section .content-section-body {
  max-height: none;
  overflow: visible;
  padding: 18px 20px 20px;
}

.admin-form-section .bg-white {
  color: var(--gm-gray-900);

  --gm-ctx-text-primary: var(--gm-gray-900);
  --gm-ctx-text-secondary: var(--gm-gray-700);
  --gm-ctx-text-muted: var(--gm-gray-500);
  --gm-ctx-bg-field: var(--gm-gray-50);
  --gm-ctx-separator: var(--gm-gray-200);
}

.admin-role-card {
  display: flex;
  border: 1px solid var(--gm-gray-200);
  background: var(--gm-gray-50);
  color: var(--gm-gray-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-role-card:hover {
  border-color: var(--gm-teal-300);
  box-shadow: 0 4px 14px var(--gm-glass-black-6);
}

/* glass_morph/organisms/section_card.css */
/* ============================================================================ */
/* == Molecule — SectionCard ================================================ */
/* ============================================================================ */

/* Outer card — same visual as .content-section but without fixed height */
.section-card {
  background: var(--gm-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--gm-glass-black-2);
  transition: box-shadow 0.3s ease;
  margin-bottom: 12px;
}

.section-card:hover {
  box-shadow: 0 4px 12px var(--gm-glass-black-5);
}

/* glass_morph/organisms/data_card.css */
/* DataCard — generic content card matching the home dashboard LeadCard visual */

.data-card {
  background: var(--gm-white);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px var(--gm-glass-black-2);
  margin-bottom: 12px;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* Link variant — reset anchor styles */
.data-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.data-card-link:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px var(--gm-glass-black-10),
    0 2px 4px var(--gm-glass-black-6);
}

/* Header row: icon+title on the left, badge slot on the right */
.data-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.data-card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.data-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--gm-teal-400);
}

.data-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gm-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body */
.data-card-body {
  font-size: 0.875rem;
  color: var(--gm-gray-700);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Tags row */
.data-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* Footer row: left text slot + right badge/action slot */
.data-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gm-gray-100);
}

.data-card-footer-left {
  font-size: 0.8rem;
  color: var(--gm-gray-500);
}

.data-card-footer-right {
  margin-left: auto;
}

/* glass_morph/organisms/glass_card.css */
/* ============================================================================ */
/* == Organism — GlassCard ================================================== */
/* ============================================================================ */
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.card-icon {
  width: 32px;
  height: 32px;
  background: var(--gm-teal-500);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-header-icon,
.card-header-icon::before {
  color: var(--gm-white) !important;
}

.card-header-icon::before {
  font-size: 0.9em;
}

.card-icon img,
.card-icon svg {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-gray-900);
}

/* Glass card with backdrop */
.glass-card {
  background: var(--gm-surface-glass-dark);
  backdrop-filter: var(--gm-blur-md);
  border-radius: 16px;
  border: 1px solid var(--gm-border-on-dark);
  padding: 32px;
}

/* Ensure good text contrast on white backgrounds */
.card,
.bg-white,
.bg-light {
  color: var(--gm-gray-900) !important; /* Bootstrap default: keep as-is — not a GlassMorph token */
}

.card p,
.card span:not(.gm-badge),
.card div,
.bg-white p,
.bg-white span:not(.gm-badge),
.bg-white div,
.bg-light p,
.bg-light span:not(.gm-badge),
.bg-light div {
  color: inherit; /* Inherit the dark color */
}

.card .text-muted,
.bg-white .text-muted,
.bg-light .text-muted {
  color: var(--gm-gray-500) !important;
}

.card .text-secondary,
.bg-white .text-secondary,
.bg-light .text-secondary {
  color: var(--gm-gray-600) !important;
}

/* Ensure specific text classes work properly */
.card .text-dark,
.bg-white .text-dark,
.bg-light .text-dark {
  color: var(--gm-text-on-light-primary) !important;
}

/* Fix for any light text that shouldn't be light on white backgrounds */
.card .text-white-50,
.bg-white .text-white-50 {
  color: var(--gm-gray-500) !important; /* Convert light text to gray on white backgrounds */
}

/* --- Compound pattern utilities ------------------------------------------ */
.gm-card-shadow {
  box-shadow:
    0 1px 3px var(--gm-glass-black-8),
    0 1px 2px var(--gm-glass-black-6);
}

/* glass_morph/organisms/message_template_picker.css */
/* ============================================================================ */

/* == Organism — Message Template Picker ==================================== */

/* ============================================================================ */

/*
 * The standaardberichten picker, from Claude Design's "linkedin-bericht-
 * varianten" option 4b. The chips sit in the tab; the library is a popover
 * anchored under "Meer sjablonen".
 *
 * A popover rather than inline content for a reason that cost an afternoon:
 * the tab panel animates its height with a CSS grid and sets overflow: hidden
 * on itself and every child, so anything that expands inside it is clipped and
 * simply never appears. This is positioned against the picker instead.
 */

.message-template-picker {
  position: relative;
}

/* ── The library popover ─────────────────────────────────────────────────── */

/* Zero-height and positioned, sitting where the popover should hang from. It
   takes no space, so the fields below it stay where they were. */
.message-template-library-anchor {
  position: relative;
}

.message-template-library {
  position: absolute;
  z-index: 6;
  top: 4px;
  left: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 440px;
  max-width: 100%;
  border: 1px solid var(--gm-gray-200);
  border-radius: var(--gm-radius-md);
  background: var(--gm-white);
  box-shadow: var(--gm-shadow-popover);
}

.message-template-library[hidden] {
  display: none;
}

.message-template-library-search {
  padding: 10px;
  border-bottom: 1px solid var(--gm-gray-100);
}

.message-template-library-list {
  max-height: 300px;
  padding: 6px;
  overflow: auto;
}

/* The purpose heading — what a message is FOR, which is how somebody looks
   for one. Quiet, because the names below it are what you read. */
.message-template-group-label {
  padding: 10px 10px 4px;
  color: var(--gm-gray-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.message-template-choice {
  display: grid;
  border-radius: var(--gm-radius-sm);
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  transition: background 0.12s ease;
}

.message-template-choice:hover {
  background: var(--gm-gray-100);
}

.message-template-choice[hidden] {
  display: none;
}

/* Who a message came from is a footnote on the row, not a status on it. At the
   badge's own size and solid slate it read as loudly as the name beside it,
   which is the one thing on the row somebody is actually scanning for. */
.message-template-choice .gm-badge {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gm-gray-100);
  color: var(--gm-gray-600);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* One line of preview, clipped: enough to recognise the message, never enough
   to turn the list into a wall of text. */
.message-template-choice-preview {
  overflow: hidden;
  color: var(--gm-gray-500);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-template-library-empty {
  padding: 16px 10px;
  color: var(--gm-gray-500);
  font-size: 13px;
  text-align: center;
}

/* The whole row is the button — the design's .pi-b. A separate "Gebruiken"
   button on the right made the list read as a set of forms; clicking the row
   is what people try first anyway.
 *
 * The atom is shaped like a pill: 38px tall whatever is in it, 180px wide at
 * minimum, content centred and allowed to spill out both sides, grey with a
 * border. A row is none of those. Selecting on `.button.` is what makes this
 * stick — the atom's own rule is `.button.button-tertiary`, and a single class
 * loses to it, which is why the rows rendered as grey pills with the message
 * running out of them on both sides.
 */
.button.message-template-choice-button {
  display: flex;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 8px 10px;
  justify-content: flex-start;
  align-items: flex-start;
  border: 0;
  border-radius: var(--gm-radius-sm);
  background: transparent;
  text-align: left;
}

.button.message-template-choice-button:hover {
  border-color: transparent;
  background: transparent;
}

/* The pill centres one short label; a row is a column of text as wide as the
   row. Without min-width: 0 the whole chain refuses to shrink, and the
   preview's ellipsis never gets a width to clip against. */
.message-template-choice-button .button-container {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  align-items: stretch;
}

.message-template-choice-button .button-container > * {
  width: 100%;
  min-width: 0;
}

/* The two source panels. Plain show and hide: no height animation, so nothing
   inside can be clipped by a grid row that was measured before the content
   existed. See AiContentGenerator#render_sources for what that cost. */
.message-source-panel {
  display: none;
  padding-top: 12px;
}

.message-source-panel.active {
  display: block;
}

/* glass_morph/organisms/ai_panel.css */
/* == Organism — AiContentGenerator panel == */

/* Message type, tone, the generate button and the extra instructions store
   nothing: they fill the content fields below. One bounded panel with smaller
   type keeps them out of the rhythm of the fields a user has to fill in. */
.ai-panel {
  border: 1px solid var(--gm-gray-200);
  border-radius: var(--gm-radius-md);
  background: var(--gm-teal-field-tint-4);
  padding: 16px 18px 14px;
  margin-bottom: 26px;
}

.ai-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ai-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gm-gray-700);
}

.ai-panel__title .gm-icon-stars {
  color: var(--gm-teal-300);
}

.ai-panel__meta {
  font-size: 11.5px;
  color: var(--gm-gray-500);
  white-space: nowrap;
}

/* Controls: every select takes an equal share, the button keeps its width */
.ai-panel__controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.ai-panel__control {
  flex: 1 1 0;
  min-width: 0;
}

.ai-panel__action {
  flex: 0 0 auto;
}

.ai-panel .form-group {
  gap: 0;
  margin-bottom: 0;
}

.ai-panel .label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-gray-600);
}

.ai-panel__control .label-optional,
.ai-panel__control .invalid-feedback:not(.show),
.ai-panel__control .input-hint {
  display: none;
}

.ai-panel .select.select,
.ai-panel .form-select.form-select {
  height: 38px;
  padding: 0 36px 0 12px;
  font-size: 14px;
  border-radius: var(--gm-radius-sm);
  background-color: var(--gm-white);
}

/* Generate button: compact, one line, cost moved to the panel head */
.ai-panel__action .button {
  min-width: 0;
  height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--gm-radius-sm);
  background: var(--gm-green-600);
  color: var(--gm-white);
}

.ai-panel__action .button::before {
  display: none;
}

.ai-panel__action .button .button-text {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
}

.ai-panel__action .button:hover:not(:disabled) {
  background: var(--gm-green-700);
}

.ai-panel__action .button:focus-visible {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

.ai-panel__action .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* After a draft was filled in the button becomes a quiet "again" */
.ai-panel__action .button.ai-panel__generate--again {
  background: var(--gm-white);
  border-color: var(--gm-gray-300);
  color: var(--gm-gray-700) !important;
}

.ai-panel__action .button.ai-panel__generate--again:hover:not(:disabled) {
  background: var(--gm-gray-50);
}

/* Foot: collapsed, the instructions toggle and the draft status share one row;
   open, the instructions take the full width and the status moves below them */
.ai-panel__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--gm-gray-100);
}

.ai-panel__foot:has(> .ai-panel__status[hidden]:only-child) {
  display: none;
}

.ai-panel__foot:has(.field-disclosure[data-open="true"]) {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.ai-panel__instructions {
  flex: 1 1 auto;
  min-width: 0;
}

.ai-panel .field-disclosure {
  margin: 0;
  border-top: none;
  padding-top: 0;
}

.ai-panel .field-disclosure__body .textarea {
  background-color: var(--gm-white);
}

.ai-panel__status {
  display: flex;
  align-items: center;
  align-self: flex-end;
  margin-left: auto;
  gap: 6px;
  font-size: 11.5px;
  color: var(--gm-gray-500);
  white-space: nowrap;
}

.ai-panel__status .gm-icon-check-circle-fill {
  color: var(--gm-green-600);
}

.ai-panel__error {
  margin-top: 8px;
}

@media (width <= 576px) {
  .ai-panel__head,
  .ai-panel__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-panel__action .button {
    width: 100%;
  }
}

/* glass_morph/organisms/context_panel.css */
/* ContextPanel — a side panel beside a form: tabs over a scrolling body, a
   start tab chosen for the task at hand with a line saying why, and ⌥1–⌥4.
   Below ~1100px of modal width it folds into a 76px rail (--rail) whose
   buttons open the same bodies as a drawer over the form. */
.gm-context-panel {
  position: relative;
  display: flex;
  flex: 0 0 500px;
  flex-direction: column;
  width: 500px;
  min-height: 0;
  border-left: 1px solid var(--gm-gray-200);
  border-radius: 0 12px 12px 0;
  background: var(--gm-gray-50);
}

.gm-context-panel__tabs {
  flex-shrink: 0;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0 16px;
  border-radius: 0 12px 0 0;
  background: var(--gm-white);
}

.gm-context-panel__tabs .tile-tab-button {
  flex-shrink: 0;
  padding: 15px 2px 13px;
  font-size: 14.5px;
  font-family: inherit;
  white-space: nowrap;
}

.gm-context-panel__bodies {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.gm-context-panel__pane {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.gm-context-panel__pane[hidden] {
  display: none;
}

.gm-context-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 28px;
}

.gm-context-panel__stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gm-context-panel__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gm-context-panel__hint {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin: 18px 20px 0;
  padding: 7px 6px 7px 12px;
  border-radius: 10px;
  background: var(--gm-teal-overlay-8);
  color: var(--gm-teal-700);
  font-size: 13px;
  line-height: 1.35;
}

.gm-context-panel__hint[hidden] {
  display: none;
}

.gm-context-panel__hint > .gm-icon-stars {
  color: var(--gm-teal-500);
}

.gm-context-panel__hint-close,
.gm-context-panel__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gm-gray-500);
  cursor: pointer;
}

.gm-context-panel__hint-close {
  width: 26px;
  height: 26px;
  margin-left: auto;
}

.gm-context-panel__hint-close:hover {
  background: var(--gm-white);
  color: var(--gm-gray-900);
}

.gm-context-panel .tab-badge {
  display: inline-block;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  margin-left: 6px;
  padding: 0.125rem 0.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--gm-gray-200);
  color: var(--gm-gray-500);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

/* The rail: hidden in the wide layout, the tab strip hidden in the narrow one. */
.gm-context-panel__rail {
  display: none;
}

.gm-context-panel--rail {
  /* The drawer positions against the modal body, not against the rail. */
  position: static;
  flex: 0 0 76px;
  width: 76px;
  padding: 10px 6px;
}

.gm-context-panel--rail .gm-context-panel__tabs,
.gm-context-panel--rail .gm-context-panel__hint {
  display: none;
}

.gm-context-panel--rail .gm-context-panel__rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gm-context-panel__rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 78px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--gm-gray-500);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.gm-context-panel__rail-btn > [class*="gm-icon-"] {
  font-size: 18px;
}

.gm-context-panel__rail-btn .tab-badge {
  margin-left: 0;
}

.gm-context-panel__rail-btn:hover {
  background: var(--gm-gray-100);
  color: var(--gm-gray-900);
}

.gm-context-panel__rail-btn.active {
  background: var(--gm-teal-overlay-8);
  color: var(--gm-teal-200);
}

.gm-context-panel__rail-btn.active .tab-badge {
  background: var(--gm-white);
}

/* In the rail the bodies become the drawer, shown only while one is open. */
.gm-context-panel__drawer-head {
  display: none;
}

.gm-context-panel--rail .gm-context-panel__bodies {
  display: none;
}

.gm-context-panel--rail.is-drawer-open .gm-context-panel__bodies {
  position: absolute;
  top: 0;
  right: 76px;
  bottom: 0;
  z-index: 5;
  display: flex;
  width: min(460px, calc(100% - 76px));
  border-left: 1px solid var(--gm-gray-200);
  background: var(--gm-white);
  box-shadow: var(--gm-shadow-drawer);
  animation: gm-context-panel-drawer-in 0.2s ease-out;
}

.gm-context-panel--rail .gm-context-panel__drawer-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--gm-gray-200);
  color: var(--gm-gray-900);
  font-size: 15px;
  font-weight: 600;
}

.gm-context-panel__drawer-title {
  flex: 1;
}

.gm-context-panel__drawer-head > [class*="gm-icon-"] {
  color: var(--gm-teal-200);
}

.gm-context-panel__close {
  width: 32px;
  height: 32px;
}

.gm-context-panel__close:hover {
  background: var(--gm-gray-100);
  color: var(--gm-gray-900);
}

.gm-context-panel__kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--gm-gray-100);
  color: var(--gm-gray-500);
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* ── Panel contents ─────────────────────────────────────────────────────── */
.gm-context-panel .list-item {
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-color: var(--gm-gray-200);
}

.gm-context-panel .list-item[hidden] {
  display: none;
}

.gm-context-panel .activity-icon {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.gm-context-panel .activity-title {
  margin-bottom: 1px;
  font-size: 14px;
}

.gm-context-panel .activity-description {
  margin-bottom: 1px;
  font-size: 13px;
  line-height: 1.45;
}

.gm-context-panel .list-item-trailing {
  align-items: flex-start;
}

.gm-context-panel .progress-label {
  margin-bottom: 6px;
}

.gm-context-panel__section-title {
  margin: 0 0 8px;
  color: var(--gm-gray-800);
  font-size: 14px;
  font-weight: 600;
}

/* A heading inside a section card, a step below the card's own title. */
.gm-context-panel__subsection-title {
  margin: 0;
  color: var(--gm-gray-500);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gm-context-panel__kv {
  overflow: hidden;
  border: 1px solid var(--gm-gray-100);
  border-radius: 0.375rem;
}

.gm-context-panel__kv .data-table td:first-child {
  width: 96px;
}

.gm-context-panel__fit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--gm-gray-800);
  font-size: 13.5px;
  list-style: none;
}

.gm-context-panel__fit li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gm-context-panel__fit [class*="gm-icon-"] {
  color: var(--gm-green-600);
}

.gm-context-panel__fit .is-miss {
  color: var(--gm-gray-500);
}

.gm-context-panel__fit .is-miss [class*="gm-icon-"] {
  color: var(--gm-gray-400);
}

.gm-context-panel__quote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gm-gray-50);
}

.gm-context-panel__quote p {
  margin: 0;
  color: var(--gm-gray-800);
  font-size: 13.5px;
  line-height: 1.5;
}

.gm-context-panel__quote-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gm-gray-500);
  font-size: 12px;
}

.gm-context-panel__quote-meta > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-context-panel__center {
  align-self: center;
}

.gm-context-panel__segcount {
  margin-left: 2px;
  color: var(--gm-gray-400);
  font-size: 11.5px;
}

@keyframes gm-context-panel-drawer-in {
  from {
    transform: translateX(16px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-context-panel--rail.is-drawer-open .gm-context-panel__bodies {
    animation: none;
  }
}

/* glass_morph/organisms/dmu_member_row.css */
/* DmuMemberRow + DmuCoverage — the DMU tab of the task cockpit's context
   panel. A row opens its details in place; the current contact is ringed. */
.gm-dmu-coverage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gm-dmu-coverage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--gm-gray-800);
  font-size: 14px;
  font-weight: 500;
}

.gm-dmu-coverage__head b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gm-dmu-coverage__miss {
  color: var(--gm-gray-500);
  font-size: 12.5px;
}

.gm-dmu-member-row {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  background: var(--gm-white);
  transition:
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.gm-dmu-member-row.is-contact {
  border-color: var(--gm-teal-200);
  box-shadow: 0 0 0 1px var(--gm-teal-200);
}

.gm-dmu-member-row__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.gm-dmu-member-row__main:hover {
  background: var(--gm-gray-50);
}

.gm-dmu-member-row__main:focus-visible {
  outline: 2px solid var(--gm-teal-200);
  outline-offset: 2px;
}

.gm-dmu-member-row__main.is-static {
  cursor: default;
}

.gm-dmu-member-row__main.is-static:hover {
  background: none;
}

.gm-dmu-member-row__text {
  min-width: 0;
}

.gm-dmu-member-row__name,
.gm-dmu-member-row__role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-dmu-member-row__name {
  color: var(--gm-gray-900);
  font-size: 14.5px;
  font-weight: 600;
}

.gm-dmu-member-row__role {
  color: var(--gm-gray-500);
  font-size: 13px;
}

.gm-dmu-member-row__end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gm-dmu-member-row__chev {
  color: var(--gm-gray-400);
  transition: transform 0.15s ease-out;
}

.gm-dmu-member-row.is-open .gm-dmu-member-row__chev {
  transform: rotate(180deg);
}

.gm-dmu-member-row__meta {
  display: flex;
  grid-column: 2 / -1;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  color: var(--gm-gray-500);
  font-size: 12.5px;
}

.gm-dmu-member-row__spacer {
  flex: 1;
}

/* "✓ Contactpersoon" on the contact's row, "Kies als contact" on the rest. */
.gm-dmu-member-row__current {
  display: none;
  align-items: center;
  gap: 4px;
  color: var(--gm-green-800);
  font-weight: 600;
}

.gm-dmu-member-row.is-contact .gm-dmu-member-row__current {
  display: inline-flex;
}

.gm-dmu-member-row.is-contact .gm-dmu-member-row__choose {
  display: none;
}

.gm-dmu-member-row__detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--gm-gray-100);
}

.gm-dmu-member-row__detail[hidden] {
  display: none;
}

.gm-dmu-member-row--gap {
  border-style: dashed;
  border-color: var(--gm-gray-300);
  background: transparent;
}

.gm-dmu-member-row__ghost {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gm-gray-100);
  color: var(--gm-gray-400);
}

/* glass_morph/organisms/task_cockpit.css */
/* Task cockpit — one modal to make a task for a prospect: the form on the
   left, the ContextPanel on the right (organisms/context_panel.css). */
.modal-container--cockpit {
  width: calc(100% - 56px);
  max-width: 1280px;
  height: calc(100vh - 48px);
  max-height: none;
}

.modal-container--cockpit .modal-header {
  padding: 16px 14px;
}

.modal-container--cockpit .modal-step-title {
  font-size: 24px;
}

.modal-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--gm-glass-white-70);
  font-size: 13px;
  white-space: nowrap;
}

.modal-container--cockpit .modal-footer {
  flex-direction: row;
}

.gm-cockpit__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.gm-cockpit__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px 28px;
  overflow-y: auto;
}

.gm-cockpit__form .form-group {
  gap: 6px;
}

.gm-cockpit__form .label {
  font-size: 14px;
}

.gm-cockpit__form .input,
.gm-cockpit__form .select {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

.gm-cockpit__editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gm-cockpit__editor .ai-panel {
  margin-bottom: 16px;
}

.gm-cockpit__editor .textarea {
  line-height: 1.55;
}

.gm-cockpit__row {
  display: flex;
  gap: 14px;
}

.gm-cockpit__row > * {
  flex: 1;
  min-width: 0;
}

.gm-cockpit__keys {
  color: var(--gm-glass-white-70);
  font-size: 12.5px;
  white-space: nowrap;
}

.gm-cockpit__kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--gm-glass-white-15);
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.gm-cockpit__keys-narrow,
.modal-container--cockpit.is-narrow .gm-cockpit__keys-wide {
  display: none;
}

.modal-container--cockpit.is-narrow .gm-cockpit__keys-narrow {
  display: inline;
}

/* The inserted text flashes the field it landed in. */
.gm-cockpit__form .textarea.is-inserted,
.gm-cockpit__form .input.is-inserted {
  border-color: var(--gm-teal-500);
  box-shadow: 0 0 0 3px var(--gm-teal-overlay-15);
}

/* LinkedIn connection status under the contact select. */
.gm-cockpit__conn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--gm-gray-500);
  font-size: 12.5px;
}

.gm-cockpit__conn[hidden],
.gm-cockpit__conn-line[hidden] {
  display: none;
}

.gm-cockpit__conn .gm-icon-linkedin {
  color: var(--gm-linkedin-blue);
}

/* One hint per contact under Soort: the kind chosen does not fit them. */
.gm-type-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 8px;
  padding: 9px 10px 9px 12px;
  color: var(--gm-gray-800);
  font-size: 13.5px;
}

.gm-type-hint[hidden] {
  display: none;
}

.alert-warning.gm-type-hint > [class*="gm-icon-"] {
  color: var(--gm-amber-600);
}

.alert-info.gm-type-hint > [class*="gm-icon-"] {
  color: var(--gm-teal-400);
}

.gm-type-hint__text {
  flex: 1;
  min-width: 200px;
}

.gm-type-hint__actions {
  display: flex;
  gap: 6px;
}

/* Character counter under a LinkedIn connection note (300). */
.gm-charcount {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  color: var(--gm-gray-500);
  font-size: 12px;
}

.gm-charcount b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gm-charcount.is-over {
  color: var(--gm-red-600);
}

/* Planning sits at the foot of the form as one summarised line. */
.field-disclosure.gm-cockpit__planning {
  margin: auto 0 0;
}

@media (width <= 768px) {
  .modal-container--cockpit {
    width: 98%;
    height: 96vh;
  }

  .gm-cockpit__row {
    flex-direction: column;
  }
}

/* The task inspector in the cockpit layout (TaskInspectModal with a
   context_panel): the task takes the form's column, which is too narrow for
   the planning's four fields on one line, so they go two by two. */
.task-inspect-body--cockpit .task-inspect-scheduling-row {
  flex-wrap: wrap;
  row-gap: 10px;
}

.task-inspect-body--cockpit .task-inspect-field {
  flex: 1 1 calc(50% - 0.75rem);
}

.task-inspect-body--cockpit .task-inspect-field .label {
  min-width: 108px;
  white-space: nowrap;
}

/* glass_morph/organisms/token_gated_button.css */
/* == Organism — TokenGatedButton, :quiet layout == */

/* A compact action with its token cost as a footnote: the button is one short
   line, the price and balance sit beside or under it in muted text. Light on the
   dark teal page surfaces, gray-500 on white cards; the context token's muted
   gray-400 fails WCAG AA contrast on both. */
.token-gated-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.token-gated-button--cost-below {
  flex-direction: column;
  gap: 6px;
}

.token-gated-button--align-end {
  align-items: flex-end;
}

.token-gated-button__cost {
  font-size: 11.5px;
  color: var(--gm-glass-white-85);
  white-space: nowrap;
}

:is(.empty-state-white, .tile-light, .white-tile, .modal-content, .stat-card-rich, .gm-white-card, .gm-bg-white) .token-gated-button__cost {
  color: var(--gm-gray-500);
}

/* Dark bands inside a white tile (the teal scoring header) flip back to light */
:is(.scoring-header, .gradient-tile) .token-gated-button__cost {
  color: var(--gm-glass-white-85);
}

.token-gated-button .button {
  min-width: 0;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--gm-radius-sm);
}

.token-gated-button .button.button-primary {
  background: var(--gm-green-600);
}

.token-gated-button .button::before {
  display: none;
}

.token-gated-button .button .button-text {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
}

.token-gated-button .button.button-primary:hover:not(:disabled) {
  background: var(--gm-green-700);
}

.token-gated-button .button:focus-visible {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

.token-gated-button .button:disabled,
.token-gated-button .button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* glass_morph/organisms/legal_document.css */
/* Every legal document the product shows.
 *
 * One vocabulary (.legal-doc-*) for the body — sections, paragraphs, bullets,
 * callouts — because the body is identical wherever a document surfaces. The
 * three frames around it differ, so everything that differs is scoped under
 * .legal-doc--page, .legal-doc--record or .legal-doc--overlay.
 *
 * Rendered by Components::GlassMorph::Organisms::LegalDocument.
 */

/* ── page ──────────────────────────────────────────────────────────
   The published documents: /privacy, /terms-of-service and the
   account-user notice. Hero, rail, one padded white sheet. */

/* ============================================================================ */

/* == Frame — a published document on its own page =========================== */

/* ============================================================================ */

/* The account-user privacy notice (#1102), the privacy policy, the Terms — any
   long legal text that has to be read rather than skimmed. Three depths, deliberately: the gradient hero states
   what the document is, the dark glass card states the boundary, and the light
   sheet carries the text itself. A reader who stops after one screen has read the
   boundary, which is the part they were owed.

   The sheet is .tile-light on purpose. Eleven sections of white-on-teal is a wall;
   the context tokens flip the whole subtree to dark-on-light with no Ruby logic. */
.legal-doc--page, .legal-doc--record {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* How tall a document reads before it scrolls inside itself — and the one number
   the rail beside it answers to as well. They are two columns of one block, so a
   rail that ran on past the bottom of the white sheet made the document look like
   it had stopped early, when it had only been given a scrollbar of its own. */
.legal-doc {
  --legal-doc-reading-height: min(58vh, 720px);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

/* The notice title is a sentence, not a dashboard greeting, so it sits a size
   below .hero-title's dashboard scale and carries more weight instead. */
.legal-doc--page .legal-doc-hero .hero-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.legal-doc--page .legal-doc-subtitle {
  margin-bottom: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gm-glass-white-70);
}

/* Only reached by a page with one document; two or more put the button under the
   open tab's head instead. The same shape as .legal-doc-head-actions further down.
   Layout only: Button(variant: :secondary) carries its own colours, and on the teal
   hero those are the glass ones it already has. */
.legal-doc--page .legal-doc-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ── Boundary summary ──────────────────────────────────────────────────────── */

/* Glass on the teal pane, and unscoped: the card is the document's own, so it
   surfaces wherever the document does — above the sheet on a published page and
   above the tabs in Account admin, where four tiles of the page's own used to sit.
   The card was a GlassCard until the white surface it carries turned its tiles
   grey-on-white, which made the one block a reader sees first look like it came
   from another product. */
.legal-doc-highlight {
  padding: 24px;
  background: var(--gm-surface-glass-dark);
  backdrop-filter: var(--gm-blur-md);
  border: 1px solid var(--gm-border-on-dark);
  border-radius: var(--gm-radius-lg);
}

/* As many tiles across as fit, because the card is written per document: the
   account-user notice answers in two, "in plain terms" answers in four, and a fixed
   two-column grid gave the second one a 2×2 block where the page had room for a
   row. auto-fit collapses the tracks it does not use, so two tiles still take half
   the card each. */
.legal-doc-highlight-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.legal-doc-highlight-tile {
  padding: 18px;
  background: var(--gm-glass-white-8);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: var(--gm-radius-md);
}

.legal-doc-highlight-tile-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gm-glass-white-10);
}

.legal-doc-highlight-tile-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  background: var(--gm-teal-500);
  color: var(--gm-white);
  font-size: 15px;
}

/* ── Rail + sheet ──────────────────────────────────────────────────────────── */
.legal-doc--page .legal-doc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.legal-doc--page .legal-doc-rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  background: var(--gm-surface-glass-dark);
  backdrop-filter: var(--gm-blur-md);
  border: 1px solid var(--gm-border-on-dark);
  border-radius: var(--gm-radius-lg);
}

.legal-doc--page .legal-doc-rail-label {
  margin-bottom: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gm-glass-white-60);
}

.legal-doc--page .legal-doc-rail a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--gm-radius-sm);
  font-size: 14px;
  line-height: 1.4;
  color: var(--gm-glass-white-70);
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.legal-doc--page .legal-doc-rail a:hover {
  background: var(--gm-glass-white-8);
  color: var(--gm-white);
}

/* The section being read, marked by the scroll-spy. Same teal edge the record
   frame uses, so the two rails read as one idea. */
.legal-doc--page .legal-doc-rail a.active {
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--gm-teal-300);
}

.legal-doc--page .legal-doc-rail a:focus-visible,
.legal-doc .legal-doc-citation:focus-visible {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

.legal-doc--page .legal-doc-sheet:not(.legal-doc-sheet--tabbed) {
  padding: 40px;
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-md);
}

/* Scroll-margin so an anchor jump does not tuck the heading under the app navbar. */
.legal-doc--page .legal-doc-section {
  scroll-margin-top: 24px;
}

.legal-doc--page .legal-doc-section + .legal-doc-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--gm-ctx-separator);
}

.legal-doc--page .legal-doc-section .paragraph {
  line-height: 1.7;
}

/* ── Citations ─────────────────────────────────────────────────────────────── */

/* A clause that names a published instrument links to it. Underlined rather than
   coloured alone, because a printed copy of this page carries no colour and the
   citation still has to read as one. The link token flips with the surface, so the
   same rule works on the dark page and on the light sheet a tab puts it in. */
.legal-doc .legal-doc-citation {
  color: var(--gm-ctx-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease-out;
}

.legal-doc .legal-doc-citation:hover {
  color: var(--gm-ctx-text-primary);
}

/* ── Bullets ───────────────────────────────────────────────────────────────── */

/* The lines these carry are sentences, not labels, so they get list spacing and a
   hanging indent rather than a "• " glued to the front of a paragraph. */
.legal-doc--page .legal-doc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 1.15rem;
}

.legal-doc--page .legal-doc-list li {
  line-height: 1.7;
  color: var(--gm-ctx-text-secondary);
}

.legal-doc--page .legal-doc-list li::marker {
  color: var(--gm-ctx-text-muted);
}

/* ── Acknowledgement bar ───────────────────────────────────────────────────── */

/* Sticky, because the button belongs to the whole document rather than to its last
   section — a reader who has decided at section three should not have to scroll to
   the end to say so.

   Beside tabs it stops being sticky: the document has its own scrolling pane there,
   so the page under it barely moves and a floating bar would just sit across the
   text it is asking about. */
.legal-doc--page .legal-doc-actions {
  position: sticky;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: var(--gm-teal-850-95);
  backdrop-filter: var(--gm-blur-md);
  border: 1px solid var(--gm-border-on-dark);
  border-radius: var(--gm-radius-lg);
  box-shadow: 0 -6px 24px var(--gm-glass-black-30);
}

.legal-doc--page.legal-doc--tabbed .legal-doc-actions {
  position: static;
}

.legal-doc--page .legal-doc-actions form {
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (width <= 1024px) {
  /* The rail is a convenience, not content: every section it links to is still on
       the page below it, so it goes rather than becoming a stack of links to scroll
       past before reaching the document. */
  .legal-doc--page .legal-doc-layout {
      grid-template-columns: minmax(0, 1fr);
    }

  .legal-doc--page .legal-doc-rail {
      display: none;
    }

  .legal-doc--page .legal-doc-sheet:not(.legal-doc-sheet--tabbed) {
      padding: 24px;
    }
}

/* A block that belongs to one document rather than to the page: the boundary card,
   the acknowledgement, its rail entry. Hidden until its tab is the open one. A page
   carrying a single document has no tabs to switch, so nothing hides there.
   
   Only ever hides, never re-declares the shown display: these blocks are a card, a
   flex bar and an anchor, and one rule cannot restore three. Three classes, because
   .legal-doc--page .legal-doc-rail a would otherwise out-specify it. */
.legal-doc--tabbed .legal-doc-for-document:not(.active) {
  display: none;
}

/* ── record ──────────────────────────────────────────────────────────
   Account admin → Legal. Two documents behind tabs, a rail that
   swaps with them, and a scrolling sheet with a progress meter. */

/* ============================================================================ */

/* == Frame — documents side by side, as a record ============================ */

/* ============================================================================ */

/* Account admin → Legal, from the Claude Design page of the same name: the rail,
   the read-progress meter and the white document sheet. The page's own furniture —
   the plain-language tiles, the version colour in the hero — lives in
   organisms/account_admin_legal.css, because it is the page's and not the
   document's. */

/* ── Plain-language tiles, glass on the teal pane ───────────────── */

/* ── Document body: rail beside sheet ───────────────────────────── */
.legal-doc--record .legal-doc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.legal-doc--record .legal-doc-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-doc--record .legal-doc-rail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gm-glass-white-60);
  padding: 0 12px 10px;
}

.legal-doc-rail-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The links, and only the links. The rail's heading above them and the progress
   meter below stay where the reader left them; a twenty-chapter contract scrolls
   between the two. `overflow` with nothing to overflow is inert, so this is the
   same markup in every frame and only the height below differs. */
.legal-doc-rail-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Thin and glass, because this scrollbar sits on the dark pane rather than in the
   white document — the sheet's own is grey against white further down. */
.legal-doc-rail-scroll::-webkit-scrollbar {
  width: 6px;
}

.legal-doc-rail-scroll::-webkit-scrollbar-thumb {
  background: var(--gm-glass-white-15);
  border-radius: 3px;
}

.legal-doc-rail-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--gm-glass-white-30);
}

/* Beside a document that scrolls inside itself, the rail takes the same height, so
   the two columns end level instead of the rail running on past the bottom of the
   white sheet. */
.legal-doc--tabbed .legal-doc-rail {
  max-height: var(--legal-doc-reading-height);
}

/* Beside a document that scrolls the page, there is no sheet to match — the limit
   is the viewport the sticky rail is pinned in, minus the 24px it is pinned at and
   the same again beneath it. Without this the last chapters of a long contract sit
   below the fold of a rail that cannot scroll. */
.legal-doc--page:not(.legal-doc--tabbed) .legal-doc-rail {
  max-height: calc(100vh - 48px);
}

/* One group per document. Listing the other document's sections while this one is
   open would be a lie about where the reader is. */
.legal-doc--tabbed .legal-doc-rail-group {
  display: none;
}

.legal-doc--tabbed .legal-doc-rail-group.active {
  display: flex;
}

.legal-doc--record .legal-doc-rail a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--gm-glass-white-70);
  text-decoration: none;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.legal-doc--record .legal-doc-rail a:hover {
  background: var(--gm-glass-white-8);
  color: var(--gm-white);
}

.legal-doc--record .legal-doc-rail a.active {
  background: var(--gm-glass-white-12);
  color: var(--gm-white);
  font-weight: 500;
  border-left-color: var(--gm-teal-300);
}

/* ── Read progress — informative, never a gate ──────────────────── */
.legal-doc--record .legal-doc-progress {
  margin: 14px 12px 0;
  padding-top: 14px;
  border-top: 1px solid var(--gm-glass-white-10);
}

.legal-doc--record .legal-doc-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gm-glass-white-60);
  margin-bottom: 6px;
}

.legal-doc--record .legal-doc-progress-label strong {
  color: var(--gm-white);
  font-variant-numeric: tabular-nums;
}

.legal-doc--record .legal-doc-progress-track {
  height: 4px;
  background: var(--gm-glass-white-10);
  border-radius: 999px;
  overflow: hidden;
}

.legal-doc--record .legal-doc-progress-fill {
  height: 100%;
  background: var(--gm-teal-300);
  border-radius: 999px;
  width: 0;
  transition: width 0.15s linear;
}

.legal-doc--record .legal-doc-progress-note {
  font-size: 10px;
  color: var(--gm-glass-white-50);
  margin-top: 6px;
  line-height: 1.4;
}

/* ── The sheet: tab strip docking into the white document ───────── */
.legal-doc-sheet--tabbed .legal-doc-sheet {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The strip sits on the pane and the active tab takes the sheet's white, so
   the two read as one surface. */
.legal-doc-sheet--tabbed .legal-doc-tabs {
  display: flex;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.legal-doc-sheet--tabbed .legal-doc-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  background: var(--gm-tab-inactive-bg, var(--gm-teal-600));
  border: none;
  font-family: Figtree, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-glass-white-80);
  cursor: pointer;
  transition: all 0.2s ease;
}

.legal-doc-sheet--tabbed .legal-doc-tab:first-child {
  border-radius: 12px 0 0;
}

.legal-doc-sheet--tabbed .legal-doc-tab:last-child {
  border-radius: 0 12px 0 0;
}

.legal-doc-sheet--tabbed .legal-doc-tab:hover {
  background: var(--gm-tab-inactive-hover-bg, var(--gm-teal-700));
  color: var(--gm-white);
}

.legal-doc-sheet--tabbed .legal-doc-tab.active {
  background: var(--gm-white);
  color: var(--gm-gray-900);
  font-weight: 600;
}

.legal-doc-sheet--tabbed .legal-doc-tab .legal-doc-tab-ver {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--gm-glass-white-15);
  color: var(--gm-white);
  letter-spacing: 0.01em;
}

.legal-doc-sheet--tabbed .legal-doc-tab.active .legal-doc-tab-ver {
  background: var(--gm-gray-100);
  color: var(--gm-gray-600);
}

/* A contract should read like a contract: white, a measure, and its own scroll
   so the rail stays beside the document it indexes. */
.legal-doc-sheet--tabbed .legal-doc-scroll {
  background: var(--gm-white);
  border-radius: 0 12px 12px;
  padding: 36px 44px 40px;
  box-shadow: 0 4px 16px var(--gm-glass-black-20);
  max-height: var(--legal-doc-reading-height);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.legal-doc-sheet--tabbed .legal-doc-scroll::-webkit-scrollbar {
  width: 10px;
}

.legal-doc-sheet--tabbed .legal-doc-scroll::-webkit-scrollbar-track {
  background: var(--gm-gray-100);
  border-radius: 5px;
}

.legal-doc-sheet--tabbed .legal-doc-scroll::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
  border-radius: 5px;
}

.legal-doc-sheet--tabbed .legal-doc-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--gm-gray-400);
}

.legal-doc-sheet--tabbed .legal-doc-scroll .legal-doc-panel {
  display: none;
}

.legal-doc-sheet--tabbed .legal-doc-scroll .legal-doc-panel.active {
  display: block;
}

/* ── Version tiles: the version beside the document name ────────── */
@media (width <= 1100px) {
  .legal-doc--record .legal-doc-layout {
      grid-template-columns: minmax(0, 1fr);
    }

  .legal-doc--record .legal-doc-rail {
      position: static;
    }
}

@media (width <= 640px) {
  .legal-doc-sheet--tabbed .legal-doc-scroll {
      padding: 24px 20px 28px;
    }
}

/* Layout only, and unscoped: the download button under a panel head is the same
   button on a published page, in the Account admin sheet and in the signup overlay,
   so scoping this to one of them would leave the others' button unspaced. The
   light-surface colours come from surfaces/context.css, which lists
   .legal-doc-scroll as a white surface — a local copy here would be a second place
   to fix that treatment. */
.legal-doc-head-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Unscoped, because the head now carries the spacing under it in every frame: the
   heading inside it is margin-less so the number can share its line, and a rule
   that only knew about the page would leave the Account admin sheet and the signup
   overlay with a title glued to its first paragraph. */
.legal-doc-section-head {
  margin-bottom: 12px;
}

/* Baseline, not centre: the number is half the size of the title, and centring the
   two left it floating against the cap height instead of sitting on the line the
   title is written on. Two classes to outrank .align-center from the FlexRow atom,
   which is what the markup asks for and what the icon variant still wants. */
.legal-doc-section-head.legal-doc-section-head--num {
  align-items: baseline;
}

/* Typed as a marker rather than as copy, so "01" reads as the clause's number and
   not as the first word of its title. */
.legal-doc-section-num {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gm-teal-200);
}

/* ── overlay ──────────────────────────────────────────────────────────
   The modal that interrupts signup. Tabs and panels only — the
   shell around them belongs to LegalDocumentOverlay. */

/* ============================================================================ */

/* == Organism — LegalDocumentOverlay ======================================== */

/* ============================================================================ */

/* The document sheet layered over the signup form. The shell (.modal-overlay,
   .modal-container, .modal-header, .modal-content, .modal-footer) comes from
   molecules/modal.css; everything here is the sheet's own interior — two tabs
   over a white scrolling document.

   Deliberately short: four sections per document, enough to decide with, and a
   link to the complete text for anyone who wants all of it. */
.legal-doc--overlay .legal-doc-tabs {
  display: flex;
  padding: 0 32px;
  border-bottom: 1px solid var(--gm-gray-200);
  flex-shrink: 0;
  background: var(--gm-white);
}

.legal-doc--overlay .legal-doc-tab {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 14px 4px;
  margin-right: 26px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gm-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legal-doc--overlay .legal-doc-tab:hover {
  color: var(--gm-gray-700);
}

.legal-doc--overlay .legal-doc-tab.active {
  color: var(--gm-gray-800);
  border-bottom-color: var(--gm-teal-400);
}

.legal-doc--overlay .legal-doc-tab .legal-doc-tab-ver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--gm-gray-100);
  color: var(--gm-gray-500);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.legal-doc--overlay .legal-doc-tab.active .legal-doc-tab-ver {
  background: var(--gm-teal-400);
  color: var(--gm-white);
}

.legal-doc--overlay .legal-doc-scroll {
  overflow-y: auto;
  min-height: 0;
  padding: 28px 32px 36px;
  scroll-behavior: smooth;
}

.legal-doc--overlay .legal-doc-panel {
  display: none;
}

.legal-doc--overlay .legal-doc-panel.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

.legal-doc--overlay .legal-doc-head {
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gm-gray-200);
}

.legal-doc--overlay .legal-doc-head h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gm-gray-900);
  margin: 0 0 5px;
  letter-spacing: -0.01em;
}

.legal-doc--overlay .legal-doc-head p {
  font-size: 12px;
  color: var(--gm-gray-500);
  margin: 0;
}

.legal-doc--overlay .legal-doc-section {
  margin-bottom: 24px;
}

.legal-doc--overlay .legal-doc-section:last-child {
  margin-bottom: 0;
}

/* Denser than the pages, and one notch smaller beside a 15px title. */
.legal-doc--overlay .legal-doc-section-num {
  font-size: 10px;
}

.legal-doc--overlay .legal-doc-section-head {
  margin-bottom: 8px;
}

.legal-doc--overlay .legal-doc-section h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-gray-900);
  margin: 0;
}

.legal-doc--overlay .legal-doc-section p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gm-gray-700);
  margin: 0 0 10px;
}

.legal-doc--overlay .legal-doc-section p:last-child {
  margin-bottom: 0;
}

.legal-doc--overlay .legal-doc-section ul {
  margin: 0 0 10px;
  padding-left: 19px;
  display: grid;
  gap: 6px;
}

.legal-doc--overlay .legal-doc-section li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gm-gray-700);
}

.legal-doc--overlay .legal-doc-callout {
  background: var(--gm-gray-50);
  border-left: 3px solid var(--gm-teal-200);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 0 0 10px;
}

.legal-doc--overlay .legal-doc-callout p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gm-gray-700);
  margin: 0;
}

.legal-doc--overlay .legal-doc-foot {
  font-size: 11.5px;
  color: var(--gm-gray-500);
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--gm-gray-100);
}

/* The footer sits on the teal shell, so the link has to be white. The atom
   brings its own link colour, which is tuned for a light surface. */

@media (width <= 1024px) {
  .sidebar.active {
    transform: translateX(0);
    width: 300px;
  }

  /* Restore full user section when mobile sidebar is open
 */
  .sidebar.active .sidebar-user {
    padding: 16px !important;
  }

  .sidebar.active .sidebar-user-content {
    flex-direction: row !important;
    gap: 12px !important;
  }

  .sidebar.active .sidebar-user-info {
    display: block !important;
  }

  .sidebar.active .sidebar-user-dropdown {
    position: absolute !important;
    bottom: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-bottom: 8px !important;
  }
}

/* glass_morph/organisms/legal_document_overlay.css */
/* The shell around the documents layered over the signup form.
 *
 * The shell proper (.modal-overlay, .modal-container, .modal-header,
 * .modal-content, .modal-footer) comes from molecules/modal.css; the documents
 * inside it are Organisms::LegalDocument and carry their own styles in
 * organisms/legal_document.css — including the download button, which sits under
 * each document's own heading. What is left here is the two footer actions.
 */

.legal-overlay-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* glass_morph/organisms/sidebar.css */
/* ============================================================================ */
/* == Organism — Sidebar ==================================================== */
/* ============================================================================ */
/* Responsive Logo */
/* Full logo (with text) - shown on larger screens */
.logo-responsive {
  display: block !important;
}

/* Compact logo (without text) - shown on mobile */
.logo-compact {
  display: none !important;
}

.logo-sidebar {
  display: none !important;
}

/* Sidebar Styles */
.sidebar {
  position: relative;
  width: 300px;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.sidebar-header {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: transparent;
  flex-shrink: 0;
}

.sidebar-title {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--gm-nav-text-active);
  letter-spacing: -0.02em;
}

.sidebar-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Sidebar Layout Styles */
/* Mobile: Use compact logo with smaller size (matches sidebar breakpoint) */
.sidebar-version-link {
  font-size: 11px;
  color: var(--gm-gray-400);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.sidebar-version-link:hover {
  text-decoration: underline;
  color: var(--gm-gray-600);
}

.sidebar-user {
  flex-shrink: 0;
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--gm-glass-white-10);
}

.sidebar-user-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gm-teal-600);
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  color: var(--gm-white);
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  color: var(--gm-white);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  color: var(--gm-glass-white-60);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-menu-icon {
  color: var(--gm-glass-white-60);
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-user-menu {
  position: relative;
  width: 100%;
}

.sidebar-user-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--gm-glass-white-70);
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  border-radius: 10px;
  text-align: left;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.sidebar-user-toggle:hover {
  color: var(--gm-white);
  background: var(--gm-glass-white-10);
}

.sidebar-user-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: var(--gm-white);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--gm-glass-black-20);
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--gm-gray-700);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.15s ease;
  cursor: pointer;

  /* Reset for <button> elements used alongside <a> items */
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

/* A dropdown row that posts rather than navigates still has to sit in the
   column like the links around it, so its form contributes no box of its own. */
.sidebar-user-dropdown-form {
  display: contents;
}

/* Reset icon colors — sidebar context makes text-muted white, invisible on white dropdown */
.sidebar-user-dropdown-item .bi {
  color: var(--gm-gray-500);
}

.sidebar-user-dropdown-item--danger .bi {
  color: var(--gm-red-500);
}

.sidebar-user-dropdown-item:hover,
.sidebar-user-dropdown-checkbox-label:hover {
  background: var(--gm-gray-50);
  color: var(--gm-gray-900);
}

.sidebar-user-dropdown-item:first-child {
  border-radius: 12px 12px 0 0;
}

.sidebar-user-dropdown-item--danger {
  color: var(--gm-red-500);
}

.sidebar-user-dropdown-item--danger:hover {
  background: var(--gm-red-500-overlay-6);
  color: var(--gm-red-600);
}

.sidebar-user-dropdown-divider {
  border-top: 1px solid var(--gm-gray-100);
  margin: 4px 0;
}

/* ── Token section link wrapper ── */
.sidebar-user-dropdown-token-section {
  display: block;
  text-decoration: none;
  padding: 6px 10px 8px;
}

.sidebar-user-dropdown-token-section:hover .dropdown-token-box {
  border-color: var(--gm-gray-300);
  background: var(--gm-gray-100);
}

.dropdown-token-box {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dropdown-token-box-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--gm-gray-100);
}

.dropdown-token-box-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gm-gray-600);
}

.dropdown-token-bar-item {
  padding: 6px 10px 18px;
}

.dropdown-token-bar-item + .dropdown-token-bar-item {
  border-top: 1px solid var(--gm-gray-100);
}

/* Bar row: start-number | track-wrapper | end-number */
.dropdown-token-bar-track-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.dropdown-token-bar-track-wrapper {
  flex: 1;
  position: relative;
}

.dropdown-token-bar-track-wrapper .token-widget-track {
  width: 100%;
  background: var(--gm-glass-black-10);
  height: 8px;
}

.dropdown-token-bar-number--start,
.dropdown-token-bar-number--end {
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--gm-gray-400);
}

.dropdown-token-float-label {
  position: absolute;
  top: 11px;
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
  pointer-events: none;
}

/* Status colors — inherited by float label and numbers */
.dropdown-token-bar-item--ok { color: var(--gm-green-700); }
.dropdown-token-bar-item--low { color: var(--gm-amber-600); }
.dropdown-token-bar-item--critical { color: var(--gm-red-600); }
.dropdown-token-bar-item--purchased { color: var(--gm-amber-600); }

/* Box background tint by warning state */
.dropdown-token-box--ok {
  background: var(--gm-green-700-overlay-6);
  border-color: var(--gm-green-700-overlay-25);
}

.dropdown-token-box--low {
  background: var(--gm-amber-600-overlay-8);
  border-color: var(--gm-amber-600-overlay-30);
}

.dropdown-token-box--critical {
  background: var(--gm-red-600-overlay-8);
  border-color: var(--gm-red-600-overlay-30);
}

.sidebar-user-dropdown-token-section .token-widget-label {
  color: var(--gm-gray-500);
  opacity: 1;
}

/* Full-width fill for purchased bar */
.token-widget-fill--full {
  width: 100%;
}

/* Empty state for purchased bar */
.dropdown-token-bar-empty-text {
  display: block;
  font-size: 0.6875rem;
  color: var(--gm-gray-400);
  font-style: italic;
  margin-top: 4px;
}

/* Admin Preferences Checkboxes */
.sidebar-user-dropdown-admin-prefs {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-user-dropdown-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--gm-gray-700);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: background 0.15s ease;
}

/* The tutorial-peek box sits among the menu's links rather than inside the
   admin-preferences box, so it takes the link rows' padding and its label
   lines up with theirs. */
.sidebar-user-dropdown-checkbox-label--item {
  padding: 10px 14px;
}

.sidebar-user-dropdown-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-user-dropdown-version {
  padding: 8px 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0 0 12px 12px;
}

@media (width >= 1025px) and (width <= 1899px) {
  .sidebar-title {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .sidebar .logo-responsive {
    display: none !important;
  }

  .sidebar .logo-compact {
    display: none !important;
  }

  .sidebar .logo-sidebar {
    display: block !important;
    height: 48px !important;
    margin: 26px auto 0 !important;
  }

  .sidebar.account-dropdown-open .sidebar-nav {
    overflow: visible;
  }

  .sidebar.account-dropdown-open {
    z-index: 20;
  }

  .sidebar.user-dropdown-open {
    z-index: 20;
  }

  .sidebar.submenu-dropdown-open {
    z-index: 20;
  }

  .sidebar-user-content {
    justify-content: center;
    gap: 6px;
  }

  .sidebar-user-info {
    display: none;
  }

  .sidebar-user-menu-icon {
    display: none;
  }

  .sidebar-user-menu {
    width: 44px;
  }
}

@media (width <= 1024px) {
  .logo-responsive {
    display: none !important;
  }

  .logo-compact {
    display: block !important;
  }
}

/* glass_morph/organisms/data_rows.css */
/* ============================================================================ */
/* == Organism — DataRows ===================================================== */
/* ============================================================================ */
.data-row {
  position: relative;
  margin-bottom: 12px;
}

.data-row:last-child {
  margin-bottom: 0;
}

.data-row,
.stakeholder-row {
  border-radius: 12px;
  background: var(--gm-teal-1a3d4d-overlay-36);
  overflow: visible;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

/* A light row keeps the tile's look but not its blur. `.tile-light` blurs what is
   behind it, and every blurred element becomes its own compositor layer. On
   /left_behind, where the unjudged tab fetches rows as you scroll, a couple of
   hundred of those outran Chrome's tile memory: scrolling left the panel empty
   or with rows missing, while the DOM still held every one of them. Measured
   with 234 rows: five of eight scroll frames painted blank with the blur, none
   without. Behind a 95% white surface the blur was never visible anyway. */
.data-row.tile-light {
  backdrop-filter: none;
}

.data-row:hover,
.stakeholder-row:hover {
  background: var(--gm-teal-900-overlay-40);
  box-shadow: 0 6px 18px var(--gm-black-overlay-12);
}

.data-row.expanded,
.stakeholder-row.expanded {
  background: var(--gm-teal-900-overlay-60);
  box-shadow: 0 10px 24px var(--gm-glass-black-16);
}

.data-row-grid {
  display: grid;
  gap: 16px;
  place-items: start start;
  padding: var(--gm-row-padding-y) var(--gm-row-padding-x);
  padding-right: 30px;
  cursor: pointer;
  font-size: 14px;
}

/* The score column is 92px, not the 72px "Score" needed: at this width the
   header reads "Match score" (87px) / "Matchscore" (83px) in the 0.9rem header
   font, and .list-header__label is nowrap — a narrower column pushes the label
   through the 16px gap and into the Readiness header beside it. Below 1899px
   the header font drops to 0.6875rem and 72px is still wide enough, so only
   these two wide-desktop grids carry the extra width. */
.data-row-grid.data-row-grid--prospect,
.list-header.data-row-grid--prospect {
  grid-template-columns: 36px minmax(220px, 1.35fr) 92px 112px minmax(110px, 0.8fr) 64px 58px minmax(180px, 1fr) minmax(280px, 1.8fr) 44px;
  align-items: center;
}

.data-row-grid.data-row-grid--prospect-with-lead,
.list-header.data-row-grid--prospect-with-lead {
  grid-template-columns: 88px 36px minmax(220px, 1.35fr) 92px 112px minmax(110px, 0.8fr) 64px 58px minmax(180px, 1fr) minmax(280px, 1.8fr) 44px;
  align-items: center;
}

.data-row-grid > * {
  min-width: 0;
  align-self: start;
}

.data-row-grid .expand-button,
.stakeholder-row-header .stakeholder-expand-btn {
  justify-self: end;
}

.data-row-grid.data-row-grid--prospect .row-title,
.data-row-grid.data-row-grid--prospect-with-lead .row-title {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--gm-white);
  min-width: 0;
  max-width: none;
  margin-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-row-grid.data-row-grid--prospect > *,
.data-row-grid.data-row-grid--prospect-with-lead > * {
  align-self: center;
}

.data-row-grid.data-row-grid--prospect .score-momentum-cell,
.data-row-grid.data-row-grid--prospect-with-lead .score-momentum-cell {
  justify-self: start;
}

/* The grid sets `justify-items: start`, so the name cell sizes to its own
   content and a long company name runs out from under the score badge in the
   next column — which is what the reader sees as the score sitting on top of
   the name. Stretch the cell to its track so the ellipsis rules on .row-title
   fire. Same fix already applied to the company and ICP grids. */
.data-row-grid.data-row-grid--prospect .prospect-name-cell,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-name-cell {
  justify-self: stretch;
}

.data-row-grid.data-row-grid--prospect .website-link,
.data-row-grid.data-row-grid--prospect-with-lead .website-link,
.data-row-grid.data-row-grid--prospect .gm-badge,
.data-row-grid.data-row-grid--prospect-with-lead .gm-badge {
  white-space: nowrap;
}

.prospect-avatar-with-flag {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.prospect-avatar-with-flag .row-avatar {
  width: 100%;
  height: 100%;
}

.prospect-avatar-with-flag--lg {
  width: 80px;
  height: 80px;
}

.gm-country-flag.gm-country-flag--avatar {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0;
  overflow: hidden;
  background: var(--gm-avatar-flag-background, var(--gm-gray-300));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 2px var(--gm-glass-black-18);
  font-size: 0;
  line-height: 1;
  transform: none;
}

.gm-country-flag.gm-country-flag--avatar-lg {
  right: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 4px var(--gm-glass-black-18);
}

.gm-country-flag--nl {
  --gm-avatar-flag-background: linear-gradient(to bottom, var(--gm-flag-nl-red) 0 33.333%, var(--gm-white) 33.333% 66.666%, var(--gm-flag-nl-blue) 66.666% 100%);
}

.gm-country-flag--be {
  --gm-avatar-flag-background: linear-gradient(to right, var(--gm-black) 0 33.333%, var(--gm-flag-be-yellow) 33.333% 66.666%, var(--gm-flag-be-red) 66.666% 100%);
}

.gm-country-flag--de {
  --gm-avatar-flag-background: linear-gradient(to bottom, var(--gm-black) 0 33.333%, var(--gm-flag-de-red) 33.333% 66.666%, var(--gm-flag-de-gold) 66.666% 100%);
}

.gm-country-flag--fr {
  --gm-avatar-flag-background: linear-gradient(to right, var(--gm-flag-fr-blue) 0 33.333%, var(--gm-white) 33.333% 66.666%, var(--gm-flag-fr-red) 66.666% 100%);
}

.gm-country-flag--gb,
.gm-country-flag--uk {
  --gm-avatar-flag-background:
    linear-gradient(27deg, transparent 0 43%, var(--gm-white) 43% 49%, var(--gm-flag-gb-red) 49% 53%, var(--gm-white) 53% 59%, transparent 59% 100%),
    linear-gradient(153deg, transparent 0 43%, var(--gm-white) 43% 49%, var(--gm-flag-gb-red) 49% 53%, var(--gm-white) 53% 59%, transparent 59% 100%),
    linear-gradient(to right, transparent 0 40%, var(--gm-white) 40% 45%, var(--gm-flag-gb-red) 45% 55%, var(--gm-white) 55% 60%, transparent 60% 100%),
    linear-gradient(to bottom, transparent 0 35%, var(--gm-white) 35% 42%, var(--gm-flag-gb-red) 42% 58%, var(--gm-white) 58% 65%, transparent 65% 100%),
    var(--gm-flag-gb-blue);
}

.gm-country-flag--us {
  align-items: flex-start;
  justify-content: flex-start;

  --gm-avatar-flag-background:
    linear-gradient(to bottom, var(--gm-flag-us-red) 0 7.69%, var(--gm-white) 7.69% 15.38%, var(--gm-flag-us-red) 15.38% 23.07%, var(--gm-white) 23.07% 30.76%, var(--gm-flag-us-red) 30.76% 38.45%, var(--gm-white) 38.45% 46.14%, var(--gm-flag-us-red) 46.14% 53.83%, var(--gm-white) 53.83% 61.52%, var(--gm-flag-us-red) 61.52% 69.21%, var(--gm-white) 69.21% 76.9%, var(--gm-flag-us-red) 76.9% 84.59%, var(--gm-white) 84.59% 92.28%, var(--gm-flag-us-red) 92.28% 100%);
}

.gm-country-flag--us::before {
  content: "";
  width: 47%;
  height: 54%;
  place-self: flex-start flex-start;
  background: var(--gm-flag-us-blue);
}

.gm-country-flag--es {
  --gm-avatar-flag-background: linear-gradient(to bottom, var(--gm-flag-es-red) 0 25%, var(--gm-flag-es-yellow) 25% 75%, var(--gm-flag-es-red) 75% 100%);
}

.gm-country-flag--it {
  --gm-avatar-flag-background: linear-gradient(to right, var(--gm-flag-it-green) 0 33.333%, var(--gm-white) 33.333% 66.666%, var(--gm-flag-it-red) 66.666% 100%);
}

.gm-country-flag--pl {
  --gm-avatar-flag-background: linear-gradient(to bottom, var(--gm-white) 0 50%, var(--gm-flag-pl-red) 50% 100%);
}

.gm-country-flag--lu {
  --gm-avatar-flag-background: linear-gradient(to bottom, var(--gm-flag-be-red) 0 33.333%, var(--gm-white) 33.333% 66.666%, var(--gm-flag-lu-blue) 66.666% 100%);
}

.gm-country-flag--at {
  --gm-avatar-flag-background: linear-gradient(to bottom, var(--gm-flag-gb-red) 0 33.333%, var(--gm-white) 33.333% 66.666%, var(--gm-flag-gb-red) 66.666% 100%);
}

.gm-country-flag--ch {
  --gm-avatar-flag-background: var(--gm-flag-ch-red);
}

.gm-country-flag--ch::before,
.gm-country-flag--ch::after {
  content: "";
  position: absolute;
  background: var(--gm-white);
}

.gm-country-flag--ch::before {
  width: 56%;
  height: 18%;
}

.gm-country-flag--ch::after {
  width: 18%;
  height: 56%;
}

.data-row-grid.data-row-grid--prospect > :nth-child(6) {
  justify-self: center;
}

.data-row-grid.data-row-grid--prospect-with-lead > :nth-child(7) {
  justify-self: center;
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-width: 0;
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--hot .gm-badge,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--hot .gm-badge {
  background: var(--gm-red-b04343);
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--hot .momentum-rising,
.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--hot .momentum-falling,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--hot .momentum-rising,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--hot .momentum-falling {
  color: var(--gm-red-b04343);
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--warm .gm-badge,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--warm .gm-badge {
  background: var(--gm-amber-overlay-76-1);
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--warm .momentum-rising,
.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--warm .momentum-falling,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--warm .momentum-rising,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--warm .momentum-falling {
  color: var(--gm-amber-overlay-76-1);
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--cool .momentum-rising,
.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--cool .momentum-falling,
.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--cold .momentum-rising,
.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell.buyer-readiness--cold .momentum-falling,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--cool .momentum-rising,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--cool .momentum-falling,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--cold .momentum-rising,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell.buyer-readiness--cold .momentum-falling {
  color: var(--gm-slate-500);
}

.data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-empty,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-empty {
  color: var(--gm-gray-400);
  font-size: 0.875rem;
}

/* .prospect-update-frequency-badge base style lives in atoms/circle_badge.css */
.data-row-grid.data-row-grid--prospect .prospect-update-frequency-badge,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-update-frequency-badge {
  justify-self: center;
}

.data-row-grid.data-row-grid--prospect .prospect-update-frequency-badge--empty,
.data-row-grid.data-row-grid--prospect-with-lead .prospect-update-frequency-badge--empty {
  color: var(--gm-gray-400);
  font-weight: 500;
}

.data-row-grid.data-row-grid--prospect .website-link,
.data-row-grid.data-row-grid--prospect-with-lead .website-link {
  min-width: 0;
}

.data-row-grid.data-row-grid--prospect .description-text.product,
.data-row-grid.data-row-grid--prospect-with-lead .description-text.product {
  color: var(--gm-gray-300);
  font-weight: 500;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.data-row-grid.data-row-grid--prospect .description-text:not(.product),
.data-row-grid.data-row-grid--prospect-with-lead .description-text:not(.product) {
  color: var(--gm-gray-200);
  font-size: 0.875rem;
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.data-row-grid.data-row-grid--prospect .expand-button,
.data-row-grid.data-row-grid--prospect-with-lead .expand-button,
.data-row-grid.data-row-grid--products-list .expand-button,
.data-row-grid.data-row-grid--assistant .expand-button {
  width: 44px;
  margin-left: auto;
  justify-self: end;
}

.data-row-grid--prospect-with-lead .d-flex > .toggle-container:first-child {
  margin-left: 14px; /* gm-new-dot (8px) + gap-xs (6px) — align toggle when no dot */
}

@media (width <= 2050px) and (width > 1899px) {
  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px minmax(190px, 1.15fr) 72px 104px minmax(96px, 0.75fr) 64px 58px minmax(0, 1.55fr) 44px;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 88px 36px minmax(190px, 1.15fr) 72px 104px minmax(96px, 0.75fr) 64px 58px minmax(0, 1.55fr) 44px;
  }

  .data-row-grid.data-row-grid--prospect .description-text.product,
  .data-row-grid.data-row-grid--prospect-with-lead .description-text.product {
    display: none;
  }

  .list-header__label--description {
    grid-column: 9;
  }

  .list-header__label--actions {
    grid-column: 10;
  }
}

/* Company index grid (8 columns: logo, name, products, website, prospects, location, description, expand) */
.data-row-grid.data-row-grid--company,
.list-header.data-row-grid--company {
  grid-template-columns: 36px minmax(220px, 1.15fr) 110px minmax(130px, 0.9fr) 115px minmax(180px, 1fr) minmax(260px, 1.45fr) 44px;
  align-items: center;
}

.data-row-grid.data-row-grid--icp,
.list-header.data-row-grid--icp {
  grid-template-columns: 36px minmax(200px, 1.2fr) 110px minmax(130px, 0.9fr) minmax(250px, 2fr) auto;
  align-items: center;
}

.data-row-grid.data-row-grid--icp > * {
  align-self: center;
  min-width: 0;
}

.data-row-grid.data-row-grid--icp .row-title {
  display: block;
  min-width: 0;
  max-width: none;
  margin-right: 0;

  /* Fill the name column (grid sets justify-items: start) so the long
     ICP name clips with an ellipsis instead of overflowing onto the
     products badge in the next column. */
  justify-self: stretch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-row-grid.data-row-grid--icp .products-badge {
  white-space: nowrap;
  justify-self: center;
}

.data-row-grid.data-row-grid--icp .description-text.product {
  margin-left: 0;
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.data-row-grid.data-row-grid--icp .description-text:not(.product) {
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.data-row-grid.data-row-grid--icp .icp-row-actions {
  justify-self: end;
  margin-left: auto;
}

.data-row-grid.data-row-grid--company > * {
  align-self: center;
}

/* The grid sets `justify-items: start`, which sizes every cell to its own
   content — a long value then spills over the neighbouring column instead of
   clipping. Stretch the text cells to their track so the ellipsis rules below
   actually fire. Avatar, badges and the expand button stay content-sized. */
.data-row-grid.data-row-grid--company .row-title,
.data-row-grid.data-row-grid--company .company-website-link,
.data-row-grid.data-row-grid--company .description-text {
  justify-self: stretch;
}

.data-row-grid.data-row-grid--company .row-title {
  min-width: 0;
  max-width: none;
  margin-right: 0;
}

.data-row-grid.data-row-grid--company .company-website-link,
.data-row-grid.data-row-grid--company .company-prospects-badge,
.data-row-grid.data-row-grid--company .products-badge {
  white-space: nowrap;
}

.data-row-grid.data-row-grid--company .company-website-link {
  min-width: 0;
  overflow: hidden;
}

.data-row-grid.data-row-grid--company .description-text.product {
  margin-left: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-row-grid.data-row-grid--company .description-text:not(.product) {
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.data-row-grid.data-row-grid--company .company-row-actions,
.data-row-grid.data-row-grid--company .company-row-actions .expand-button {
  width: 44px;
  justify-self: end;
}

/* Products index grid (7 columns: avatar, name, type-badge, pricing, discovery, description, expand) */
.data-row-grid.data-row-grid--products-list,
.list-header.data-row-grid--products-list {
  grid-template-columns: 36px minmax(220px, 1.15fr) 120px minmax(150px, 0.9fr) 80px minmax(240px, 1.5fr) 44px;
  align-items: center;
}

.data-row-grid.data-row-grid--products-list .product-discovery-frequency {
  justify-self: center;
}

.data-row-grid.data-row-grid--products-list > * {
  align-self: center;
}

.data-row-grid.data-row-grid--products-list .row-title {
  min-width: 0;
  max-width: none;
  color: var(--gm-white);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0;
}

.data-row-grid.data-row-grid--products-list .product-list-type-cell,
.data-row-grid.data-row-grid--products-list .product-list-type-cell .gm-badge,
.data-row-grid.data-row-grid--products-list .product-list-pricing {
  white-space: nowrap;
}

.data-row-grid.data-row-grid--products-list .product-list-pricing {
  min-width: 0;
  color: var(--gm-gray-300);
}

.data-row-grid.data-row-grid--products-list .product-list-description {
  min-width: 0;
  color: var(--gm-gray-200);
  line-height: 1.45;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* LinkedIn connections grid (5 columns: avatar, name+title, stakeholder/headline, company, confidence/link) */
.data-row-grid.data-row-grid--linkedin-connection {
  grid-template-columns: 36px minmax(180px, 1.2fr) minmax(160px, 1.4fr) 160px 90px;
  align-items: center;
}

.data-row-grid.data-row-grid--linkedin-connection .row-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0;
}

.data-row-grid.data-row-grid--linkedin-connection .description-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-row-grid.data-row-grid--linkedin-connection .row-meta-text {
  font-size: 0.75rem;
  color: var(--gm-text-secondary, var(--gm-glass-white-60));
  white-space: nowrap;
}

/* Assistant index grid (5 columns: avatar, name, badges, description, expand) */
.data-row-grid.data-row-grid--assistant {
  grid-template-columns: 40px minmax(180px, 1.1fr) minmax(190px, 1fr) minmax(260px, 1.45fr) 44px;
  gap: 16px;
  padding: 18px 20px;
  padding-right: 30px;
  align-items: center;
}

.data-row-grid.data-row-grid--assistant > * {
  align-self: center;
}

.data-row-grid.data-row-grid--assistant .row-title {
  min-width: 0;
  max-width: none;
  margin-right: 0;
}

.data-row-grid.data-row-grid--assistant .assistant-row-stats {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.data-row-grid.data-row-grid--assistant .assistant-row-stats .gm-badge {
  white-space: nowrap;
}

.data-row-grid.data-row-grid--assistant .description-text {
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (width <= 1899px) {
  .data-row-grid {
    gap: 14px;
  }

  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px minmax(138px, 0.9fr) 72px 96px 32px 52px 52px minmax(0, 1.55fr) 44px;
    align-items: center;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 80px 36px minmax(138px, 0.9fr) 72px 96px 32px 52px 52px minmax(0, 1.55fr) 44px;
    align-items: center;
  }

  .data-row-grid.data-row-grid--prospect .description-text.product,
  .data-row-grid.data-row-grid--prospect-with-lead .description-text.product {
    display: none;
  }

  .list-header__label--description {
    grid-column: 9;
  }

  .list-header__label--actions {
    grid-column: 10;
  }

  .data-row-grid.data-row-grid--prospect .prospect-website-link,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-website-link {
    font-size: 0;
    gap: 0;
  }

  .data-row-grid.data-row-grid--prospect .prospect-website-link .globe-icon,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-website-link .globe-icon {
    font-size: 1rem;
  }

  .data-row-grid.data-row-grid--company,
  .list-header.data-row-grid--company {
    grid-template-columns: 36px minmax(180px, 1.1fr) 100px minmax(120px, 0.9fr) 100px minmax(0, 1.25fr) 44px;
  }

  .data-row-grid.data-row-grid--company .description-text.product {
    display: none;
  }

  .data-row-grid.data-row-grid--assistant {
    grid-template-columns: 40px minmax(150px, 1fr) minmax(170px, 0.95fr) minmax(200px, 1.2fr) 44px;
  }

  .data-row-grid.data-row-grid--products-list,
  .list-header.data-row-grid--products-list {
    grid-template-columns: 36px minmax(180px, 1.05fr) 110px minmax(0, 1.45fr) 44px;
  }

  .data-row-grid.data-row-grid--products-list .product-list-pricing,
  .data-row-grid.data-row-grid--products-list .product-discovery-frequency {
    display: none;
  }

  .data-row-grid.data-row-grid--account {
    grid-template-columns: minmax(210px, 1.2fr) 110px 90px 110px 44px;
  }

  .data-row-grid.data-row-grid--account-extended {
    grid-template-columns: minmax(200px, 1.1fr) 110px 110px 90px 110px 44px;
  }

  .data-row-grid.data-row-grid--account-member {
    grid-template-columns: minmax(210px, 1.3fr) 110px 120px 44px;
  }

  .data-row-grid.data-row-grid--account-invitation {
    grid-template-columns: minmax(210px, 1.3fr) 100px 110px 96px;
  }
}

@media (width <= 1600px) {
  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px minmax(168px, 1.05fr) 72px 88px 32px 44px 52px minmax(0, 1.3fr) 44px;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 80px 36px minmax(168px, 1.05fr) 72px 88px 32px 44px 52px minmax(0, 1.3fr) 44px;
  }

  .data-row-grid.data-row-grid--prospect .prospect-stakeholder-badge,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-stakeholder-badge {
    font-size: 11px;
    padding: 0;
  }

  .data-row-grid.data-row-grid--prospect .prospect-stakeholder-badge::after,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-stakeholder-badge::after {
    content: none;
  }
}

@media (width <= 1050px) {
  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px 40px minmax(150px, 1fr) 72px 96px 44px;
    grid-template-rows: auto;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 88px 40px minmax(150px, 1fr) 72px 96px 44px;
    grid-template-rows: auto;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .data-row-grid.data-row-grid--prospect .prospect-website-link,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-website-link,
  .data-row-grid.data-row-grid--prospect .prospect-stakeholder-badge,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-stakeholder-badge,
  .data-row-grid.data-row-grid--prospect .prospect-update-frequency-badge,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-update-frequency-badge,
  .data-row-grid.data-row-grid--prospect .description-text.product,
  .data-row-grid.data-row-grid--prospect-with-lead .description-text.product,
  .data-row-grid.data-row-grid--prospect .description-text:not(.product),
  .data-row-grid.data-row-grid--prospect-with-lead .description-text:not(.product) {
    display: none;
  }

  .data-row-grid.data-row-grid--prospect > *,
  .data-row-grid.data-row-grid--prospect-with-lead > * {
    order: initial;
  }

  .data-row-grid.data-row-grid--prospect .prospect-avatar-with-flag,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-avatar-with-flag,
  .data-row-grid.data-row-grid--prospect .prospect-name-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-name-cell,
  .data-row-grid.data-row-grid--prospect .score-momentum-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .score-momentum-cell,
  .data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell,
  .data-row-grid.data-row-grid--prospect .expand-button,
  .data-row-grid.data-row-grid--prospect-with-lead .expand-button {
    grid-row: 1;
  }

  .data-row-grid.data-row-grid--prospect > :nth-child(1),
  .data-row-grid.data-row-grid--prospect-with-lead > :nth-child(1) {
    grid-column: 1;
  }

  .data-row-grid.data-row-grid--prospect .prospect-avatar-with-flag,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-avatar-with-flag {
    grid-column: 2;
  }

  .data-row-grid.data-row-grid--prospect .prospect-name-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-name-cell {
    grid-column: 3;
  }

  .data-row-grid.data-row-grid--prospect .score-momentum-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .score-momentum-cell {
    grid-column: 4;
  }

  .data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell {
    grid-column: 5;
  }

  .data-row-grid.data-row-grid--prospect .row-title,
  .data-row-grid.data-row-grid--prospect-with-lead .row-title {
    grid-column: auto;
  }

  .data-row-grid.data-row-grid--prospect .expand-button,
  .data-row-grid.data-row-grid--prospect-with-lead .expand-button {
    grid-column: -1;
    place-self: center end;
    margin-top: 0;
  }
}

/* Invitation grid (5 columns: email, role, status, expires, cancel) */
.data-row-grid.data-row-grid--invitation {
  grid-template-columns: 1fr 90px 110px 120px 80px;
  gap: 12px;
  padding: 12px 16px;
  padding-right: 30px;
  align-items: center;
}

/* Account row — 5 cols: name+subdomain | status | members | created-at | expand */
.data-row-grid.data-row-grid--account {
  grid-template-columns: minmax(240px, 1.35fr) 120px 100px 120px 44px;
  gap: 16px;
  padding: 14px 16px;
  padding-right: 30px;
  align-items: center;
}

/* Account row extended — 6 cols: name+subdomain | status | onboarding | members | created-at | expand */
.data-row-grid.data-row-grid--account-extended {
  grid-template-columns: minmax(240px, 1.25fr) 120px 120px 100px 120px 44px;
  gap: 16px;
  padding: 14px 16px;
  padding-right: 30px;
  align-items: center;
}

/* Keep for backward compatibility with any existing usage */

.data-row-grid.data-row-grid--account > *,
.data-row-grid.data-row-grid--account-extended > *,
.data-row-grid.data-row-grid--account-member > *,
.data-row-grid.data-row-grid--account-invitation > * {
  align-self: center;
}

.account-summary-cell,
.account-member-details {
  min-width: 0;
}

.account-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-summary-title,
.account-member-name,
.account-invitation-email {
  display: block;
  min-width: 0;
  color: var(--gm-white) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-summary-meta,
.account-member-email {
  display: block;
  min-width: 0;
  color: var(--gm-gray-300) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-row-date, .account-row-members {
  color: var(--gm-gray-200) !important;
  white-space: nowrap;
}

.account-member-identity,
.account-invitation-identity {
  min-width: 0;
}

.account-member-identity {
  justify-self: stretch;
}

.account-member-role,
.account-invitation-role {
  min-width: 0;
  justify-self: start;
}

.account-invitation-action {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-invitation-action .button {
  white-space: nowrap;
}

.data-row-grid.data-row-grid--account .gm-badge,
.data-row-grid.data-row-grid--account-extended .gm-badge,
.data-row-grid.data-row-grid--account-member .gm-badge,
.data-row-grid.data-row-grid--account-invitation .gm-badge {
  white-space: nowrap;
}

/* Admin company grid (5 columns: name+badge, account, industry, status, expand) */
.data-row-grid.data-row-grid--admin-company {
  grid-template-columns: minmax(200px, 2fr) 160px 140px 90px 44px;
  gap: 16px;
  padding: 14px 16px;
  padding-right: 30px;
  align-items: center;
}

/* Admin source-finding (tender) grid (7 columns: title+buyer, country flag, value, source, deadline, status, expand) */
.data-row-grid.data-row-grid--admin-source-finding,
.list-header.data-row-grid--admin-source-finding {
  grid-template-columns: minmax(200px, 2fr) 40px 120px 90px 160px 110px 44px;
  gap: 16px;
  padding: 14px 16px;
  padding-right: 30px;
  align-items: center;
}

/* Header bar boxed style, matching the other admin list headers. */
.list-header.data-row-grid--admin-source-finding,
.list-header.data-row-grid--admin-data-update,
.list-header.data-row-grid--admin-background-job {
  align-items: end;
  background: var(--gm-glass-white-3);
  border: 1px solid var(--gm-glass-white-8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  margin-bottom: 12px;
}

/* Expanded plan detail — two white tiles side by side */
.plan-expanded-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px 16px;
}

/* Product expanded tiles — stats tile left, target customer tile right */
.product-expanded-tiles {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 12px 16px 16px;
  align-items: stretch;
}

.product-expanded-card {
  padding: 18px;
  min-width: 0;
}

.product-expanded-card .card-header {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.product-expanded-card .table-wrapper {
  overflow: hidden;
}

.product-expanded-card .data-table td:first-child {
  width: 42%;
}

.product-expanded-card .data-table td:last-child {
  font-weight: 500;
}

.product-target-card {
  min-width: 0;
}

.product-tile-body {
  line-height: 1.5;
  margin: 0;
}

/* Account team page — member rows (4 cols: avatar+name/email, role, joined date, expand) */
.data-row-grid.data-row-grid--account-member {
  grid-template-columns: minmax(240px, 1.45fr) 120px 130px 44px;
  gap: 16px;
  padding: 14px 16px;
  padding-right: 30px;
  align-items: center;
}

.data-row-grid.data-row-grid--account-member .expand-button {
  width: 44px;
  margin-left: auto;
  justify-self: end;
}

/* Account team page — invitation rows (4 cols: email, role, invited date, cancel) */
.data-row-grid.data-row-grid--account-invitation {
  grid-template-columns: minmax(240px, 1.5fr) 120px 130px auto;
  gap: 16px;
  padding: 14px 16px;
  padding-right: 30px;
  align-items: center;
}

/* Admin plan grid (5 columns: name+desc, tier, price, status, expand) */
.data-row-grid.data-row-grid--admin-plan {
  grid-template-columns: minmax(200px, 2fr) 120px 130px 90px 44px;
  gap: 16px;
  padding: 14px 16px;
  align-items: center;
}

/* Admin subscription grid (6 columns: account, status, tier, billing, mrr, expand) */
.data-row-grid.data-row-grid--admin-subscription {
  grid-template-columns: minmax(200px, 2fr) 110px 110px 120px 100px 44px;
  gap: 16px;
  padding: 14px 16px;
  align-items: center;
}

/* Admin all-accounts grid (7 columns: account, status, tier, billing, mrr, badge/feature, expand) */
.data-row-grid.data-row-grid--admin-subscription-account {
  grid-template-columns: minmax(200px, 2fr) 110px 110px 120px 100px 100px 44px;
  gap: 16px;
  padding: 14px 16px;
  align-items: center;
}

/* Follow details inline with icon */
.follow-text {
  font-size: 12px;
  color: var(--gm-gray-300);
}

@media (width <= 1400px) {
  .data-row-grid {
    grid-template-columns: 80px 32px minmax(130px, auto) 70px 100px 100px 150px 1fr 50px;
    gap: 10px;
  }

  .data-row-grid.data-row-grid--company,
  .list-header.data-row-grid--company {
    grid-template-columns: 32px minmax(150px, 1fr) 90px minmax(110px, 0.85fr) 90px minmax(0, 1.15fr) 44px;
  }

  .data-row-grid.data-row-grid--assistant {
    grid-template-columns: 36px minmax(110px, 0.95fr) minmax(140px, 0.95fr) minmax(140px, 1.1fr) 44px;
  }

  .data-row-grid.data-row-grid--products-list,
  .list-header.data-row-grid--products-list {
    grid-template-columns: 32px minmax(150px, 1fr) 96px minmax(0, 1.3fr) 44px;
    gap: 12px;
  }

  .data-row-grid.data-row-grid--account {
    grid-template-columns: minmax(180px, 1.1fr) 100px 84px 100px 44px;
    gap: 12px;
  }

  .data-row-grid.data-row-grid--account-extended {
    grid-template-columns: minmax(170px, 1fr) 100px 100px 84px 100px 44px;
    gap: 12px;
  }

  .data-row-grid.data-row-grid--account-member {
    grid-template-columns: minmax(180px, 1.2fr) 100px 108px 44px;
    gap: 12px;
  }

  .data-row-grid.data-row-grid--account-invitation {
    grid-template-columns: minmax(180px, 1.15fr) 90px 100px 88px;
    gap: 12px;
  }
}

/* ============================================================================ */
/* == Remove animation — triggered by Turbo Stream fade-remove interception ==== */
/* ============================================================================ */
@keyframes data-row-fade-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}

.fade-out-remove {
  animation: data-row-fade-out 300ms ease-out forwards;
  pointer-events: none;
}

/* ============================================================================ */
/* == Briefing — "Recente Indicatoren" events list ============================ */
/* Mirrors the dashboard "Klaar om contact op te nemen" white-row treatment so  */
/* events render as a clean light list (white rows, dark text, 4-col grid)      */
/* instead of dark glass rows on the white inner card (text was invisible).     */
/* ============================================================================ */
.data-row-grid--briefing-event {
  grid-template-columns: 120px minmax(0, 1fr) 72px 48px;
  gap: 16px;
}

/* Branchetrends — same white-row treatment, 3 columns (no "when"). */
.data-row-grid--briefing-trend {
  grid-template-columns: 120px minmax(0, 1fr) 72px;
  gap: 16px;
}

/* Bronnen — same white-row treatment, 2 columns (type | description). */
.data-row-grid--briefing-source {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
}

.briefing-events-list .list-header {
  align-items: center;
  font-size: 0.78rem;
  color: var(--gm-slate-500);
}

.briefing-events-list__row.data-row, .ready-to-reach-out-list__row.data-row {
  background-color: var(--gm-white);
  border: 1px solid var(--gm-white);
  border-radius: 10px;
  box-shadow: none;
  margin: 6px 0;
}

.briefing-events-list__row.data-row:hover {
  background: var(--gm-slate-100);
  border-color: var(--gm-gray-200);
  box-shadow: none;
}

.briefing-events-list .data-row-grid--briefing-event > * {
  align-self: center;
}

.briefing-events-list .briefing-events-list__cell--indicator .row-title {
  margin-right: 0;
  min-width: 0;
  max-width: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-gray-900);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.briefing-events-list .briefing-events-list__cell--indicator .description-text {
  font-size: 0.8125rem;
  color: var(--gm-gray-700);
}

.briefing-events-list__time {
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--gm-gray-900);
}

/* Admin VAT review row — account, identifier, country, status, expand */
.data-row-grid--admin-vat-review {
  grid-template-columns: 1fr 180px 100px 120px 44px;
  align-items: center;
}

/* Admin data update row — update, state, rows to change, last run, expand */
.data-row-grid--admin-data-update,
.list-header.data-row-grid--admin-data-update {
  grid-template-columns: minmax(220px, 1fr) 150px 160px 160px 44px;
  align-items: center;
}

/* The name takes its whole column and ends in an ellipsis there, as on the
   company list; the shared 240px cap cut most titles off halfway. */
.data-update-name-cell {
  min-width: 0;
  justify-self: stretch;
}

.data-row-grid--admin-data-update .data-update-name-cell .row-title,
.data-row-grid--admin-data-sequence .data-update-name-cell .row-title {
  align-self: stretch;
  min-width: 0;
  max-width: none;
  margin-right: 0;
}

/* A filed-away update, shown only when the archive switch is on. Dimmed rather
   than restyled: it is still a real row with real actions behind it. */
.data-row.data-row--archived {
  opacity: 0.65;
}

.data-row.data-row--archived:hover {
  opacity: 1;
}

/* A sequence renders as one group: a header row with its steps always visible
   beneath it, numbered. The border is what separates one runbook from the loose
   update after it — indentation alone read as an accident. */
.data-update-sequence {
  border: 1px solid var(--gm-glass-white-8);
  border-radius: 15px;
  margin-bottom: 12px;
  padding: 4px;
}

/* Group header — title, folded state, what is due next, expander. */
.data-row-grid--admin-data-sequence,
.list-header.data-row-grid--admin-data-sequence {
  grid-template-columns: minmax(220px, 1fr) 150px minmax(200px, 1fr) 44px;
  align-items: center;
}

/* Steps are indented rather than hidden behind the expander: the order is the
   thing the group exists to show. */
.data-update-sequence-steps {
  padding-left: 16px;
}

/* Admin background job row — activity, account, what it is working on, the
   state counts, how long the oldest one has waited, expand.
   The state column is the widest fixed one because it carries several badges
   at once: a group mid-fan-out is running, queued and failed in the same
   breath, and wrapping those onto a second line loses the comparison. */
.data-row-grid--admin-background-job,
.list-header.data-row-grid--admin-background-job {
  grid-template-columns:
    minmax(220px, 1fr) minmax(140px, 200px) minmax(180px, 1fr)
    240px 120px 44px;
  align-items: center;
}

/* Names of prospects and companies run long, and a group can list three of
   them. Two lines, then an ellipsis — the row keeps its height and the count
   beneath says how many were left out. */
.data-row-grid--admin-background-job .row-subjects-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (width <= 1024px) {
  .data-row-grid--admin-background-job,
  .list-header.data-row-grid--admin-background-job {
    grid-template-columns: minmax(160px, 1fr) minmax(120px, 160px) 200px 44px;
  }

  /* Subjects and the waiting age are the two the small layout drops: the
     state counts are why anyone opened the page, and the account is what
     makes them functional. */
  .data-row-grid--admin-background-job > :nth-child(3),
  .data-row-grid--admin-background-job > :nth-child(5),
  .list-header.data-row-grid--admin-background-job > :nth-child(3),
  .list-header.data-row-grid--admin-background-job > :nth-child(5) {
    display: none;
  }

  .website-link {
    order: 2;
    flex: 1;
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .stakeholders-badge,
  .products-badge,
  .description-text {
    order: 4;
  }

  .description-text.product {
    order: 3;
  }

  .data-row-grid.data-row-grid--company .row-avatar {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .data-row-grid.data-row-grid--company .row-title {
    grid-column: 1 / 3;
    grid-row: 1;
  }
}

/* Website visitor list (#1333): avatar, company, visits, last seen, actions, expand.
   Rows do not navigate, so no pointer; the actions column holds forms.
   Every row is its own grid, so no track may size to its content: an "auto"
   actions column made a row without the add form narrower, and its columns
   started somewhere else than the row above. */
.data-row-grid.data-row-grid--visitor {
  grid-template-columns: 40px minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(140px, 0.6fr) minmax(340px, 40rem) 44px;
  gap: var(--gm-row-padding-x);
  padding: var(--gm-row-padding-y) var(--gm-row-padding-x);
  align-items: center;
  cursor: default;
}

.data-row-grid.data-row-grid--visitor > * {
  min-width: 0;
  align-self: center;
}

.data-row-grid.data-row-grid--visitor .visitor-row-actions {
  justify-self: end;
}

/* A long "product (company)" label is cut, not allowed to widen the column. */
.visitor-product-select {
  max-width: 18rem;
  text-overflow: ellipsis;
}

/* Visitor connections, one row per own company (#1336): avatar, company,
   status, details, actions, expand. A key form may open below the grid;
   the expand holds the pages per product (#1247). */
.data-row-grid.data-row-grid--visitor-connection {
  grid-template-columns: 40px minmax(200px, 1.2fr) minmax(130px, 0.5fr) minmax(240px, 1.4fr) minmax(260px, auto) 44px;
  gap: var(--gm-row-padding-x);
  padding: var(--gm-row-padding-y) var(--gm-row-padding-x);
  align-items: center;
  cursor: default;
}

.data-row-grid.data-row-grid--visitor-connection > * {
  min-width: 0;
  align-self: center;
}

.data-row-grid.data-row-grid--visitor-connection .visitor-row-actions {
  justify-self: end;
}

.visitor-connection-panel {
  padding: 0 var(--gm-row-padding-x) var(--gm-row-padding-y);
}

.visitor-connection-form {
  padding: var(--gm-row-padding-y) var(--gm-row-padding-y);
}

/* A number field (score, daily cap) sized to its value, not the row. */
.visitor-number-field {
  width: 12rem;
  max-width: 100%;
}

.visitor-score-input {
  width: 5.5rem;
}

/* Marking interesting and its score as one framed group (#1335). */
.visitor-follow-group {
  display: inline-flex;
  padding: calc(var(--gm-row-padding-y) / 3) var(--gm-row-padding-x);
  border: 1px solid var(--gm-gray-200);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-gray-50);
}

/* A threshold slider in the automation table, with its value beside it.
   Fixed widths and tabular digits, so a value or count that grows a digit
   while dragging does not push the slider or the text after it. */
.visitor-slider {
  flex: 0 0 13rem;
  width: 13rem;
}

.visitor-slider .gm-range-slider-wrapper {
  flex: 1 1 auto;
}

.visitor-slider-value {
  width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Wide enough for "nu 9999 van 9999 prospects" / "now 9999 of 9999 prospects
   now": a fixed width, never wrapping, so the table never re-measures its
   columns while the count changes. */
.visitor-threshold-count {
  flex: 0 0 auto;
  width: 30ch;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A switch in a table cell sits on the text's line, not 32px below it. */
.visitor-automation-row .toggle-container {
  margin-top: 0;
}

/* glass_morph/organisms/system_admin.css */
/* ============================================================================ */
/* == Organism — System administration ======================================= */
/* ============================================================================ */
/* The frame Views::GlassMorph::Concerns::SystemAdminPage draws around every
   system admin page, and the /system_admin overview. */

.system-admin-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* -- Overview: one section card per group ------------------------------------- */
/* Three columns, so the six groups sit in two even rows instead of five
   columns and an orphan. */
.system-admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* A screen in a group: a quiet row that lifts on hover, so a card of six
   reads as a list rather than six buttons. */
.system-admin-link.list-item {
  margin: 0;
  padding: 10px 12px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--gm-radius-md);
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: var(--gm-transition-normal), background-color 0.15s ease;
}

.system-admin-link.list-item:hover,
.system-admin-link.list-item:focus-visible {
  background: var(--gm-slate-50);
  border-color: var(--gm-slate-200);
  box-shadow: var(--gm-shadow-card);
  transform: translateY(-1px);
}

.system-admin-link.list-item:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 2px;
}

.system-admin-link .list-item-content {
  flex: 1;
  min-width: 0;
}

.system-admin-link .list-item-trailing {
  color: var(--gm-ctx-text-muted);
}

@media (width <= 1280px) {
  .system-admin-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 768px) {
  .system-admin-hub-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-admin-link.list-item {
    transition: none;
  }

  .system-admin-link.list-item:hover {
    transform: none;
  }
}

/* -- Background jobs -- */
/* The single jobs behind a row carry a table of records and arguments each, so
   their card takes the full width under the two summary cards. */
.expanded-cards > .background-job-jobs-tile {
  grid-column: 1 / -1;
}

/* glass_morph/organisms/prospects.css */
/* ============================================================================ */
/* == Organism — Prospects ==================================================== */
/* ============================================================================ */
.prospects-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prospects-header .hero-title {
  margin: 0;
}

.prospects-list {
  background: transparent;
  border-radius: 8px;
  overflow-y: auto;
  flex: 1;
  padding-right: 6px;
}

.list-header {
  display: grid;
  gap: 16px;
  place-items: end start;
  padding: 0 var(--gm-row-padding-x) 10px;
  padding-right: 30px;
  margin-bottom: 0;
  color: var(--gm-glass-white-60);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: default;
}

.list-header.data-row-grid--prospect-with-lead,
.list-header.data-row-grid--company,
.list-header.data-row-grid--products-list,
.list-header.data-row-grid--icp,
.list-header.data-row-grid--account,
.list-header.data-row-grid--account-member,
.list-header.data-row-grid--unattended-prospect,
.list-header.data-row-grid--unattended-task {
  background: var(--gm-glass-white-3);
  border: 1px solid var(--gm-glass-white-8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 12px;
}

.list-header__label {
  min-width: 0;
  white-space: nowrap;
}

/* "Match score" and "Readiness score" are wider than the 72-112px columns they
   head, so nowrap pushed them under the neighbouring header. `min-content` wraps
   them at their space on every breakpoint rather than only on the narrow ones —
   measured, the two words alone are 44px and 71px, inside even the 72px column.
   A single unbreakable word (Dutch "Matchscore", "Koopbereidheid") has no break
   opportunity, so min-content leaves it at its natural width, exactly as before.
   Both prospect grids are `align-items: center` (data_rows.css), so the two lines
   stay centred against the single-line headers beside them. */
.list-header__label--score,
.list-header__label--buyer-readiness {
  width: min-content;
  white-space: normal;
  line-height: 1.15;

  /* Two lines at 1.15 measure 2.3em where every other label is a single 1.5em
     line, so the wrapped label would set the grid row and make the bar 0.8em
     taller. Take that 0.8em back out of the label's own box: the bar keeps the
     height it had, and the second line sits in padding the bar already has.
     Expressed in em, not px, because the header font drops from 0.9rem to
     0.6875rem below 1899px and the correction has to shrink with it. */
  margin-block: calc((1.5em - 2.3em) / 2);
}

.list-header__label--company {
  grid-column: 2 / span 2;
}

.list-header__label--score {
  grid-column: 4;
}

.list-header__label--buyer-readiness {
  grid-column: 5;
}

.list-header__label--url {
  grid-column: 6;
}

.list-header__label--stakeholders,
.list-header.data-row-grid--prospect .list-header__label--update {
  grid-column: 7;
  justify-self: center;
  text-align: center;
}

.list-header__label--update {
  grid-column: 8;
  justify-self: center;
  text-align: center;
}

.list-header__label--product {
  grid-column: 9;
}

.list-header__label--description {
  grid-column: 10;
}

.list-header__label--actions {
  grid-column: 11;
}

.list-header.data-row-grid--icp .list-header__label--avatar {
  grid-column: 1;
}

.list-header.data-row-grid--icp .list-header__label--name {
  grid-column: 2;
}

.list-header.data-row-grid--icp .list-header__label--products {
  grid-column: 3;
  justify-self: start;
  margin-left: -12px;
}

.list-header.data-row-grid--icp .list-header__label--sector {
  grid-column: 4;
}

.list-header.data-row-grid--icp .list-header__label--description {
  grid-column: 5;
}

.list-header.data-row-grid--icp .list-header__label--actions {
  grid-column: 6;
  justify-self: end;
}

/* Companies index header labels (8 columns: logo, name, products, url, prospects, location, description, expand) */
.list-header.data-row-grid--company .list-header__label--name {
  grid-column: 2;
}

.list-header.data-row-grid--company .list-header__label--products {
  grid-column: 3;
}

.list-header.data-row-grid--company .list-header__label--url {
  grid-column: 4;
}

.list-header.data-row-grid--company .list-header__label--prospects {
  grid-column: 5;
}

.list-header.data-row-grid--company .list-header__label--location {
  grid-column: 6;
}

.list-header.data-row-grid--company .list-header__label--description {
  grid-column: 7;
}

.list-header.data-row-grid--company .list-header__label--actions {
  grid-column: 8;
  justify-self: end;
}

/* Products index header labels (7 columns: avatar, name, type, pricing, discovery, description, expand) */
.list-header.data-row-grid--products-list .list-header__label--name {
  grid-column: 2;
}

.list-header.data-row-grid--products-list .list-header__label--type {
  grid-column: 3;
}

.list-header.data-row-grid--products-list .list-header__label--pricing {
  grid-column: 4;
}

.list-header.data-row-grid--products-list .list-header__label--discovery {
  grid-column: 5;
  justify-self: center;
  text-align: center;
}

.list-header.data-row-grid--products-list .list-header__label--description {
  grid-column: 6;
}

.list-header.data-row-grid--products-list .list-header__label--actions {
  grid-column: 7;
  justify-self: end;
}

/* Account admin index header labels (5 columns: name, status, users, created, expand) */
.list-header.data-row-grid--account {
  grid-template-columns: minmax(240px, 1.35fr) 120px 100px 120px 44px;
}

.list-header.data-row-grid--account .list-header__label--name {
  grid-column: 1;
}

.list-header.data-row-grid--account .list-header__label--status {
  grid-column: 2;
}

.list-header.data-row-grid--account .list-header__label--users {
  grid-column: 3;
}

.list-header.data-row-grid--account .list-header__label--created {
  grid-column: 4;
}

.list-header.data-row-grid--account .list-header__label--actions {
  grid-column: 5;
  justify-self: end;
}

/* Account team-members header labels (4 columns: member, role, joined, expand) */
.list-header.data-row-grid--account-member {
  grid-template-columns: minmax(240px, 1.45fr) 120px 130px 44px;
}

.list-header.data-row-grid--account-member .list-header__label--name {
  grid-column: 1;
}

.list-header.data-row-grid--account-member .list-header__label--role {
  grid-column: 2;
}

.list-header.data-row-grid--account-member .list-header__label--joined {
  grid-column: 3;
}

.list-header.data-row-grid--account-member .list-header__label--actions {
  grid-column: 4;
  justify-self: end;
}

.prospect-row-interest-toggle .follow-text {
  display: none;
}

.prospect-stakeholder-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  cursor: help;
  justify-self: center;
}

.prospect-stakeholder-status--info {
  color: var(--gm-glass-white-60);
}

.prospect-stakeholder-status--danger {
  color: var(--gm-red-d25f5a-overlay-80);
}

.prospect-stakeholder-status--loading {
  color: var(--gm-white);
}

.prospect-stakeholder-status__icon {
  display: inline-flex;
  line-height: 1;
  pointer-events: none;
  font-size: 1.125rem !important;
}

.prospect-stakeholder-status__icon--info {
  color: var(--gm-glass-white-60) !important;
}

.prospect-stakeholder-status__icon--danger {
  background: linear-gradient(to bottom, var(--gm-red-d25f5a-overlay-80), var(--gm-red-be4641-overlay-80));
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
}

.prospect-stakeholder-status__icon--loading {
  color: var(--gm-white) !important;
  animation: spin 1s linear infinite;
}

.prospect-stakeholder-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  justify-self: center;
  font-size: 11px;
}

.prospect-stakeholder-badge.gm-badge-blue {
  background: var(--gm-teal-500);
}

.prospect-stakeholder-badge.gm-badge-red {
  background: linear-gradient(to bottom, var(--gm-red-d25f5a-overlay-80), var(--gm-red-be4641-overlay-80));
}

.list-header.data-row-grid--prospect .list-header__label--company {
  grid-column: 1 / span 2;
}

.list-header.data-row-grid--prospect .list-header__label--score {
  grid-column: 3;
}

.list-header.data-row-grid--prospect .list-header__label--buyer-readiness {
  grid-column: 4;
}

.list-header.data-row-grid--prospect .list-header__label--url {
  grid-column: 5;
}

.list-header.data-row-grid--prospect .list-header__label--stakeholders {
  grid-column: 6;
  justify-self: center;
  text-align: center;
}

.list-header.data-row-grid--prospect .list-header__label--product {
  grid-column: 8;
}

.list-header.data-row-grid--prospect .list-header__label--description {
  grid-column: 9;
}

.list-header.data-row-grid--prospect .list-header__label--actions {
  grid-column: 10;
}

@media (width <= 2050px) and (width > 1899px) {
  .list-header__label--product {
    display: none;
  }

  .list-header.data-row-grid--prospect .list-header__label--description {
    grid-column: 8;
  }

  .list-header.data-row-grid--prospect .list-header__label--actions {
    grid-column: 9;
  }

  .list-header.data-row-grid--prospect-with-lead .list-header__label--description {
    grid-column: 9;
  }

  .list-header.data-row-grid--prospect-with-lead .list-header__label--actions {
    grid-column: 10;
  }
}

@media (width <= 1899px) {
  .list-header {
    gap: 12px;
    font-size: 0.6875rem;
  }

  .list-header__label--product {
    display: none;
  }

  .list-header.data-row-grid--prospect .list-header__label--description {
    grid-column: 8;
  }

  .list-header.data-row-grid--prospect .list-header__label--actions {
    grid-column: 9;
  }

  .list-header.data-row-grid--prospect-with-lead .list-header__label--description {
    grid-column: 9;
  }

  .list-header.data-row-grid--prospect-with-lead .list-header__label--actions {
    grid-column: 10;
  }

  /* Company header: row hides location below 1899px → drop to 7 columns to match */
  .list-header.data-row-grid--company .list-header__label--location {
    display: none;
  }

  .list-header.data-row-grid--company .list-header__label--description {
    grid-column: 6;
  }

  .list-header.data-row-grid--company .list-header__label--actions {
    grid-column: 7;
  }

  /* Products header: row hides pricing + discovery below 1899px → drop to 5 columns to match */
  .list-header.data-row-grid--products-list .list-header__label--pricing,
  .list-header.data-row-grid--products-list .list-header__label--discovery {
    display: none;
  }

  .list-header.data-row-grid--products-list .list-header__label--description {
    grid-column: 4;
  }

  .list-header.data-row-grid--products-list .list-header__label--actions {
    grid-column: 5;
  }
}

/* Prospect Card Layout Styles */
.prospect-card-link {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-left: 3.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  text-decoration: none;
}

.prospect-card-link.active {
  background-color: var(--gm-bs-primary-overlay-10);
}

/* ── Inline-style migration utilities (NoInlineStyles cop) ─────────────── */
.gm-prospects-list-bg {
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
}

.gm-customer-row {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
}

.gm-customer-row-content {
  flex: 1 1 0;
  min-width: 0;
}

.gm-customer-row-name {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-gray-800);
}

.gm-customer-row-meta {
  margin-top: 0.25rem;
}

.gm-customer-row .form-group {
  gap: 2px;
  margin-top: 0.5rem;
}

/* The list grows with its members and the page scrolls. A 70vh box of its own
   left everything below its fold behind a second, nested scrollbar: once the
   page reached its end, a 21-member DMU looked like it stopped at the last
   row in view. */
.stakeholder-scroll-list {
  /* Saving a contact swaps the card the reader is looking at. With scroll
     anchoring on, the browser lost its anchor in the swap and put the list
     scrolled 243px back at the top. */
  overflow-anchor: none;
}

/* Tender cards: separate the footer action (Create task) from the CPV list /
   body above it, matching the timeline's action spacing. Scoped to
   .tender-card so timeline/activity cards are unaffected. */
.tender-card .timeline-event-footer {
  margin-top: 0.75rem;
}

/* A tender past its deadline stays in the list, but it is history: the design
   system reserves the white tile for what the user can act on, so a closed card
   drops to the muted surface, loses its hover lift, and turns its badges slate.
   Opacity alone was not enough — a 70% white card on this background still read
   as the brightest thing in the tab. */
.tender-card--closed .timeline-event-card {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-200);
}

.tender-card--closed .timeline-event-card:hover {
  box-shadow: none;
}

.tender-card--closed .event-badges .gm-badge {
  background: var(--gm-slate-500);
}

.tender-card--closed .event-title {
  color: var(--gm-gray-600);
}

/* The toolbar's folded search. Hidden at full width, where the field itself is
   in the row; overrides/responsive.css turns it on below 1024px and gives the
   open field the whole row. Kept here rather than only in the responsive layer
   so the default state is stated where the component is.

   Written against .button as well, because the Button atom's own
   `.button.button-sm { display: inline-flex }` is two classes and would
   otherwise win — which showed the icon at every width, beside the field it
   is supposed to replace. */
.button.prospects-toolbar__search-trigger {
  display: none;
}

/* A search is still narrowing the list while its field is folded away — the
   dot is what says so. */
.prospects-toolbar__search-trigger.is-set {
  position: relative;
}

.prospects-toolbar__search-trigger.is-set::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-amber-400);
}

/* ══ Page header ═══════════════════════════════════════════════════════════
   Design: "Prospects header responsive" in the ProspectsRadar Design System.

   Three rows: what this list is, what it currently holds, and the controls
   that narrow it. The stacking sits on a modifier rather than on
   .prospects-header itself, because the Tasks page renders that same class
   (organisms/tasks_header.rb) and still wants its single row. */

.prospects-header--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.prospects-header__title-row,
.prospects-header__meta {
  width: 100%;
}

/* The eyebrow carries the word "Prospects", which frees the heading below it
   to be the one thing that changes between views: the product. */
.prospects-header__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-glass-white-60);
}

.prospects-header--stacked .hero-title {
  margin: 2px 0 0;
  line-height: 1.2;
}

/* A row that is empty except for the count still holds its height, so nothing
   beside it jumps when a notice appears or goes.

   The counts sit at the left and the toolbar against the right edge, and the
   row wraps: the toolbar keeps its own hypothetical width, so it drops to a
   line of its own — left-aligned, as space-between places a lone item — the
   moment what is left beside the counts cannot hold it. That is the width
   where it used to live, one row down, at every width. */
.prospects-header__meta {
  min-height: 26px;
  row-gap: 10px;
}

.prospects-header__meta > .prospects-toolbar {
  flex: 0 0 auto;
}

/* The counts give way first: their pills wrap among themselves rather than
   pushing the toolbar off the row a moment early. */
.prospects-header__counts {
  min-width: 0;
}

/* How many rows the list holds, and what it is not showing. Both read as one
   line under the title, so a short list and the reason it is short arrive
   together rather than one of them being somewhere else on the page. */
.prospects-notice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--gm-amber-400-overlay-12);
  color: var(--gm-amber-200);
  font-size: 0.7813rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.prospects-notice::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-amber-400);
}

a.prospects-notice:hover,
a.prospects-notice:focus-visible {
  background: var(--gm-amber-400-overlay-22);
  color: var(--gm-amber-200);
}

/* The word that says the pill is a way back, not just a report. */
.prospects-notice__action {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ Toolbar control widths ════════════════════════════════════════════════
   A multi-select names everything that is ticked, so its label grows with the
   selection: three products put the whole list in the trigger and pushed the
   search field off the right edge of the toolbar. The trigger already
   truncates (molecules/checkbox_select.css sets nowrap + ellipsis); what it
   had no ceiling above 1024px, where overrides/responsive.css sets one.

   Product keeps more room than company: it carries the longest names on the
   page and is the axis most often narrowed. */

.prospects-toolbar [data-testid="product-filter"] .checkbox-select-trigger {
  max-width: 340px;
}

.prospects-toolbar [data-testid="company-filter"] .checkbox-select-trigger {
  max-width: 240px;
}

@media (width <= 1024px) {
  /* ============================================================ */
  .list-header {
    display: none;
  }
}

/* glass_morph/organisms/readiness_header.css */
/* ============================================================================ */
/* == Organism — ReadinessHeader / BuyerReadiness =========================== */
/* ============================================================================ */
/* Buyer Readiness Tile */
.buyer-readiness-tile {
  padding: 0 !important;
  overflow: visible;

  /* Allow confidence-indicator tooltips to escape card boundary */
}

.buyer-readiness-header {
  padding: 24px;
  border-bottom: 2px solid var(--gm-glass-white-10);
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  /* Dark gradient surface — reset context tokens so child headings/text use white */
  --gm-ctx-text-primary: var(--gm-text-on-dark-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-dark-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-dark-muted);
}

.buyer-readiness-header a {
  color: var(--gm-white) !important;
  text-decoration: none !important;
}

.buyer-readiness-chart-section {
  padding: 16px;
}

/* .buyer-readiness-header - Using reference styles from styles.css */
.buyer-readiness-chart-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* glass_morph/organisms/chart.css */
/* ============================================================================ */
/* == Organism — D3 Chart =================================================== */
/* ============================================================================ */
.chart-header {
  margin-bottom: 16px;
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-gray-800);
  margin: 0;
}

.chart-icon {
  width: 20px;
  height: 20px;
  color: var(--gm-violet-500);
}

.chart-container {
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.chart-container--h300 {
  height: 300px;
}

.chart-container--h260 {
  height: 260px;
}

.chart-legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.chart-legend-color--new-prospects {
  background: var(--gm-violet-500, var(--gm-blue-6366f1));
}

.chart-legend-color--new-indicators {
  background: var(--gm-amber-500, var(--gm-amber-500));
}

.chart-legend-color--new-tasks {
  background: var(--gm-emerald-500, var(--gm-green-500));
}

.chart-legend-color--hot-leads {
  background: var(--gm-red-500, var(--gm-red-500));
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gm-gray-500);
}

.chart-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 1.5s ease-out forwards;
}

.chart-area {
  opacity: 0;
  animation: fadeIn 1s ease-out 0.5s forwards;
}

.chart-dot {
  transform-origin: center;
  transform: scale(0);
  animation: popIn 0.4s ease-out forwards;
}

/* .chart-legend, .legend-item, .legend-dot - from styles.css */
.chart-svg-container {
  width: 100%;
}

.chart-svg-container svg {
  display: block;
  max-width: 100%;
}

.chart-bars-icon {
  width: 20px;
  height: 20px;
  color: var(--gm-teal-300);
  margin-right: 8px;
}

@media (width <= 1024px) {
  .chart-legend {
    gap: 12px;
  }
}

/* glass_morph/organisms/cost_trend_chart.css */
/* ============================================================================ */

/* == Organism — CostTrendChart ============================================= */

/* ============================================================================ */

/* Stacked bars in CSS. The bar element carries its height as a percentage of
   the plot; each segment carries its height as a percentage of the bar, so the
   view only ever computes proportions. */
.gm-cost-trend {
  --gm-cost-gridline: repeating-linear-gradient(
    to right,
    var(--gm-gray-200) 0 4px,
    transparent 4px 9px
  );

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gm-cost-trend__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.gm-cost-trend__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gm-cost-trend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.gm-cost-trend__plot {
  display: grid;
  height: 300px;
  column-gap: 8px;
  grid-template-columns: 48px minmax(0, 1fr);
}

.gm-cost-trend__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  text-align: right;
}

.gm-cost-trend__labels {
  font-size: 11.5px;
  display: grid;
  margin-left: 56px;
  gap: 12px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  text-align: center;
}

.gm-cost-trend__bars {
  display: grid;
  height: 100%;
  align-items: end;
  border-bottom: 1px solid var(--gm-ctx-separator);

  /* One dashed guide per axis tick, painted as backgrounds so the bars sit on
     top of them and nothing has to be positioned per gridline. Four identical
     dashed rules, placed at each 20% of the plot. */
  background-image:
    var(--gm-cost-gridline), var(--gm-cost-gridline), var(--gm-cost-gridline),
    var(--gm-cost-gridline);
  background-repeat: repeat-x;
  background-position: 0 20%, 0 40%, 0 60%, 0 80%;
  background-size: 100% 1px;
  gap: 12px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.gm-cost-trend__bar {
  display: flex;
  min-height: 2px;
  flex-direction: column-reverse;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.gm-cost-trend__segment {
  display: block;
  width: 100%;
  flex: 0 0 auto;
}

/* The month still running is not comparable with the completed months beside
   it, so it reads as an outline rather than a solid bar. */
.gm-cost-trend__bar--current {
  border: 1.5px dashed var(--gm-ctx-separator);
  border-bottom: none;
}

.gm-cost-trend__bar--current .gm-cost-trend__segment {
  opacity: 0.45;
}

@media (width <= 768px) {
  .gm-cost-trend__plot {
    height: 180px;
  }

  .gm-cost-trend__bars,
  .gm-cost-trend__labels {
    gap: 6px;
  }
}

/* glass_morph/organisms/costs_page.css */
/* ============================================================================ */

/* == Page — System admin costs ============================================= */

/* ============================================================================ */

/* This page is a dense financial read: nine months of bars, six functions and
   a table of accounts on one screen. The shared components are tuned for pages
   where a card IS the content — 36px icon plates, 20px section titles, a stat
   value at fs-1/fw-black. At this density that reads as shouting, and the
   numbers stop being the loudest thing on screen, which is the whole point of
   the page.
   Everything below is a quieter scale for this page only, scoped to
   .gm-costs-page so no other page changes. Colours still come from tokens; only
   size, weight and emphasis move. */

/* ── Page body ───────────────────────────────────────────────────────────── */
/* One wrapper holds the page's blocks so the scale below stays scoped to this
   page; it repeats the shell's column gap because the shell's own children are
   now just this wrapper. */
.gm-costs-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Section cards ───────────────────────────────────────────────────────── */
/* The sort control sits in the section card's light header, where the
   dark-glass segmented control would read as a hole punched in the card. */
.gm-cost-tile__sort {
  margin: 0;
  flex-shrink: 0;
}

.gm-costs-page .gm-cost-tile__sort .gm-segmented-control {
  background: var(--gm-gray-100);
}

.gm-costs-page .gm-cost-tile__sort .gm-segmented-control__option {
  color: var(--gm-gray-600);
}

.gm-costs-page .gm-cost-tile__sort .gm-segmented-control__input:checked + .gm-segmented-control__option {
  background: var(--gm-white);
  color: var(--gm-gray-900);
  box-shadow: 0 1px 2px var(--gm-glass-black-8);
}

.gm-cost-tile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 12.5px;
  border-top: 1px solid var(--gm-gray-100);
}

/* ── Stat strip ──────────────────────────────────────────────────────────── */
.gm-costs-page .stat-card-rich {
  padding: 16px 18px 14px;
  border-radius: 14px;
}

.gm-costs-page [data-testid="stat-label"] {
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-glass-white-70);
}

/* A tinted 36px plate per stat gives four coloured blocks competing with four
   numbers. The design leaves the icon bare and lets the number lead. */
.gm-costs-page .gm-stat-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  color: var(--gm-glass-white-70) !important;
  font-size: 13px;
}

/* .fs-1/.fw-black are Bootstrap utilities and carry !important, so matching
   them takes one back. 28px/600 is the design's stat value. */
.gm-costs-page [data-testid="stat-value"] {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* The delta is a tinted pill, not a coloured sentence: it is the one thing on
   the card the eye should catch before reading the words beside it. */
.gm-costs-page .stat-card-change {
  height: 20px;
  padding: 0 7px;
  border-radius: 100px;
}

.gm-costs-page .stat-card-change--down {
  background: var(--gm-red-500-overlay-15);
}

.gm-costs-page .stat-card-change--up {
  background: var(--gm-green-300-overlay-15);
}

.gm-costs-page [data-testid="stat-change"] {
  font-size: 11.5px;
  font-weight: 600;
}

/* gm-text-muted on dark glass is faint by design — right for a hint beside a
   field, too quiet for the line that says what the number is measured
   against. */
.gm-costs-page .stat-card-rich .gm-text-muted {
  font-size: 12.5px;
  color: var(--gm-glass-white-70) !important;
}

/* 6px on a glass track, as the design draws it — the atom's default 8px on a
   black tint disappears on a translucent card. */
.gm-costs-page .stat-card-progress {
  margin-top: 2px;
}

.gm-costs-page .stat-card-dark .progress-bar-track {
  height: 6px;
  background: var(--gm-glass-white-15);
  border-radius: 3px;
}

.gm-costs-page .stat-card-dark .progress-bar-fill {
  height: 6px;
  border-radius: 3px;
}

/* ── Header filters ──────────────────────────────────────────────────────── */
.gm-costs-filter-form {
  margin: 0;
}

.gm-costs-search {
  width: 200px;
  max-width: 100%;
}

/* ── Chart legend ────────────────────────────────────────────────────────── */
.gm-cost-legend {
  font-size: 12px;
}

.gm-cost-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* ── Per-function rows ───────────────────────────────────────────────────── */
.gm-costs-page .gm-cost-breakdown-row__icon {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.gm-costs-page .gm-cost-breakdown-row__text > span:first-child {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gm-gray-900);
}

.gm-costs-page .gm-cost-breakdown-row__text > span + span {
  font-size: 12px;
}

.gm-costs-page .gm-cost-breakdown-row__amount > span:first-child {
  font-size: 14px;
}

.gm-costs-page .gm-cost-breakdown-row__amount > span + span {
  font-size: 11.5px;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.gm-costs-page .data-table {
  font-size: 13.5px;
}

/* The shared table paints every th steel-blue with white text and draws a 2px
   teal rule under the row, both with !important. That band is right on a page
   where the table is the whole content; here it puts a solid bar of colour
   above six numbers that are supposed to be the loudest thing in the tile.
   Matching !important is the only way past it. */
.gm-costs-page .data-table thead th {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gm-gray-500) !important;
  background: transparent !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-costs-page .data-table thead tr {
  border-bottom: 1px solid var(--gm-gray-200) !important;
}

/* Rows separate on a hairline, not on the white-on-white the shared table
   leaves once the header band is gone. */
.gm-costs-page .data-table tbody td {
  border-bottom: 1px solid var(--gm-gray-100);
}

.gm-costs-page .data-table tbody tr:last-child td {
  border-bottom: none;
}

.gm-costs-page .data-table tfoot td {
  background: var(--gm-gray-50);
  border-top: 1px solid var(--gm-gray-200);
}

.gm-costs-page .data-table td {
  padding: 11px 12px;
}

/* A 30px tinted square, not the 80px teal plate a detail header wants.
   context.css forces `.tile-light .row-avatar-initials` white with
   !important, on the assumption that an avatar always has a solid colour
   behind it. That holds everywhere else; on a 12% tint it paints the initials
   invisible, so this takes the !important back for this page only. */
.gm-costs-page .row-avatar {
  width: 30px;
  height: 30px;
  background: var(--gm-teal-200-overlay-12);
  border-radius: 8px;
  box-shadow: none;
}

.gm-costs-page .row-avatar .row-avatar-initials {
  color: var(--gm-teal-200) !important;
  font-size: 11px;
  font-weight: 700;
}

.gm-cost-account__text {
  min-width: 0;
}

.gm-cost-account__text > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-cost-account__text > span + span {
  font-size: 12px;
}

/* Plan pills stay quiet: small, soft, and only as wide as the tier name. */
.gm-costs-page .data-table .gm-badge {
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 22px;
}

/* A margin reads as a number; the track beside it makes a column of them
   comparable without reading every one. */
.gm-margin-track {
  width: 56px;
  flex-shrink: 0;
}

@media (width <= 768px) {
  .gm-costs-search {
    width: 100%;
  }
}

/* glass_morph/organisms/token_usage_tab.css */
/* ============================================================================ */

/* == Page — Token usage tab (Subscriptions::TokenUsageTab) ================== */

/* ============================================================================ */

/* The tab's scale and density on top of the component defaults, the way
   costs_page.css does it for the costs page. Everything is scoped to the tab. */
.gm-token-usage-tab {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* -- Overview: the dashboard's gradient hero -------------------------------- */
.gm-tu-hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.gm-tu-hero__head .hero-title {
  margin: 0 0 6px;
}

.gm-tu-hero__aside {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gm-tu-period {
  font-size: 13px;
  color: var(--gm-glass-white-80);
  white-space: nowrap;
}

.gm-tu-lede {
  max-width: 76ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gm-glass-white-80);
  text-wrap: pretty;
}

.gm-tu-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gm-tu-forecast {
  margin: 8px 0 0;
  padding-top: 8px;
  font-size: 12.5px;
  color: var(--gm-glass-white-80);
  border-top: 1px solid var(--gm-glass-white-15);
}

/* The distribution on dark glass: a white-to-ice ramp, legend in white. */
.gm-tu-hero .gm-distribution-bar--ranked {
  background: var(--gm-glass-white-15);
}

.gm-tu-hero .gm-distribution-bar__segment--rank-0,
.gm-tu-hero .gm-distribution__swatch--rank-0 {
  background: var(--gm-white);
}

.gm-tu-hero .gm-distribution-bar__segment--rank-1,
.gm-tu-hero .gm-distribution__swatch--rank-1 {
  background: var(--gm-ice-200);
}

.gm-tu-hero .gm-distribution-bar__segment--rank-2,
.gm-tu-hero .gm-distribution__swatch--rank-2 {
  background: var(--gm-ice-500);
}

.gm-tu-hero .gm-distribution-bar__segment--rank-3,
.gm-tu-hero .gm-distribution__swatch--rank-3 {
  background: var(--gm-glass-white-50);
}

.gm-tu-hero .gm-distribution-bar__segment--rank-other,
.gm-tu-hero .gm-distribution__swatch--rank-other {
  background: var(--gm-glass-white-25);
}

.gm-tu-hero .gm-distribution__item {
  color: var(--gm-glass-white-85);
}

.gm-tu-hero .gm-distribution__item b,
.gm-tu-hero a.gm-distribution__item:hover,
.gm-tu-hero .gm-distribution__item.is-active {
  color: var(--gm-white);
}

.gm-tu-hero a.gm-distribution__item:hover {
  background: var(--gm-glass-white-12);
}

.gm-tu-hero .gm-distribution__item.is-active {
  background: var(--gm-glass-white-20);
}

/* -- Transactions section ----------------------------------------------------- */
.gm-token-usage-tab .content-section-body {
  color: var(--gm-gray-900);
}

/* -- Toolbar ------------------------------------------------------------------ */
.gm-tu-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* The filter form's fields sit in the toolbar's own row, beside the menu form. */
.gm-tu-filters {
  display: contents;
}

.gm-tu-search {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 420px;
}

.gm-tu-search input {
  width: 100%;
  height: 38px;
  font-size: 14px;
  color: var(--gm-gray-900);
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
  border-radius: 19px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.gm-tu-search input:focus {
  border-color: var(--gm-teal-500);
  outline: none;
  box-shadow: 0 0 0 3px var(--gm-teal-500-overlay-18);
}

.gm-tu-search input::placeholder {
  color: var(--gm-gray-400);
}

.gm-token-usage-tab .gm-segmented-control {
  flex-wrap: nowrap;
  gap: 0;
  padding: 3px;
  background: var(--gm-teal-d5e1e6);
  border-radius: 999px;
}

.gm-token-usage-tab .gm-segmented-control__option {
  height: 32px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-gray-700);
  border-radius: 999px;
}

.gm-token-usage-tab .gm-segmented-control__input:checked + .gm-segmented-control__option {
  font-weight: 600;
  color: var(--gm-gray-900);
  background: var(--gm-white);
  box-shadow: 0 1px 2px var(--gm-teal-10303d-overlay-12);
}

.gm-token-usage-tab .prospect-filter-menu .activity-filter-trigger {
  gap: 8px;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 12px 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-gray-900);
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
  border-radius: 19px;
}

.gm-token-usage-tab .prospect-filter-menu .activity-filter-trigger:hover {
  background: var(--gm-gray-50);
}

.gm-token-usage-tab .prospect-filter-menu .activity-filter-trigger.is-active {
  font-weight: 600;
  color: var(--gm-teal-0a6f93);
  background: var(--gm-teal-e6f4fa);
  border-color: var(--gm-teal-500);
}

.gm-token-usage-tab .prospect-filter-menu__panel {
  min-width: 300px;
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--gm-teal-10303d-overlay-18);
}

.gm-tu-switch {
  display: inline-flex;
  order: 10;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 13px;
  color: var(--gm-gray-700);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.gm-tu-switch input[type="checkbox"] {
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  background: var(--gm-gray-300);
  border-radius: 10px;
  transition: background 0.15s ease;
  appearance: none;
}

.gm-tu-switch input[type="checkbox"]::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  content: "";
  background: var(--gm-white);
  border-radius: 50%;
  box-shadow: 0 1px 2px var(--gm-glass-black-20);
  transition: transform 0.15s ease;
}

.gm-tu-switch input[type="checkbox"]:checked {
  background: var(--gm-green-500);
}

.gm-tu-switch input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}

.gm-tu-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 2px;
}

.gm-tu-result {
  margin: 0 0 10px 4px;
  font-size: 13px;
  color: var(--gm-gray-600);
}

.gm-tu-result b {
  font-weight: 600;
  color: var(--gm-gray-900);
}

/* -- Table -------------------------------------------------------------------- */
.gm-token-usage-tab .table-wrapper {
  overflow: hidden;
  background: var(--gm-white);
  border-radius: 12px;
}

.gm-token-usage-tab .data-table {
  width: 100%;
  font-size: 14px;
  color: var(--gm-gray-900);
}

/* The shared table paints the head steel-blue with white text and a 2px rule,
   all !important (see costs_page.css); matching !important is the only way past. */
.gm-token-usage-tab .data-table thead tr {
  border-bottom: 0 !important;
}

.gm-token-usage-tab .data-table thead th {
  height: 38px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gm-gray-500) !important;
  background: var(--gm-teal-f6f9fa) !important;
}

.gm-token-usage-tab .data-table th:first-child,
.gm-token-usage-tab .data-table td:first-child {
  padding-left: 18px;
}

.gm-token-usage-tab .data-table th:nth-child(1) {
  width: 78px;
}

/* Action and For take the slack; the fixed columns keep their width. */
.gm-token-usage-tab .data-table th:nth-child(2) {
  width: 36%;
}

.gm-token-usage-tab .data-table th:nth-child(3) {
  width: 30%;
}

.gm-token-usage-tab .data-table th:nth-child(4) {
  width: 160px;
}

.gm-token-usage-tab .data-table th:nth-child(5) {
  width: 92px;
}

.gm-token-usage-tab .data-table th:nth-child(6) {
  width: 96px;
}

.gm-token-usage-tab .data-table th:nth-child(7) {
  width: 50px;
}

.gm-token-usage-tab .data-table td {
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--gm-gray-900);
  border-top: 1px solid var(--gm-gray-100);
}

.gm-token-usage-tab .gm-dtr td {
  height: 56px;
}

.gm-token-usage-tab .gm-dtr .gm-col-action,
.gm-token-usage-tab .gm-dtr .gm-col-for {
  max-width: 0;
}

.gm-token-usage-tab .gm-dtr .gm-dtr__toggle {
  padding-left: 4px;
  overflow: visible;
}

.gm-token-usage-tab .gm-dtr:hover td,
.gm-token-usage-tab .gm-dtr[aria-expanded="true"] td {
  background: var(--gm-teal-f6f9fa);
}

.gm-token-usage-tab .gm-dtr[aria-expanded="true"] td {
  border-top-color: var(--gm-teal-e5ecef);
}

.gm-token-usage-tab .gm-dtr-detail > td {
  padding: 2px 18px 16px 112px;
  overflow: visible;
  white-space: normal;
  background: var(--gm-teal-f6f9fa);
  border-top: 0;
}

.gm-token-usage-tab .gm-tgr > td {
  padding: 14px 18px 6px;
  overflow: visible;
  background: var(--gm-white);
  border-top: 0;
}

.gm-token-usage-tab .gm-tol__disc {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.gm-token-usage-tab .gm-tol__label {
  color: var(--gm-gray-900);
}

.gm-token-usage-tab .gm-tol__ctx {
  color: var(--gm-gray-500);
  opacity: 1;
}

.gm-token-usage-tab .gm-col-time {
  font-size: 12.5px;
  color: var(--gm-gray-500);
  font-variant-numeric: tabular-nums;
}

.gm-token-usage-tab .gm-col-bal {
  font-size: 13px;
  color: var(--gm-gray-500);
  font-variant-numeric: tabular-nums;
}

.gm-tu-for {
  display: grid;
  min-width: 0;
  font-size: 13.5px;
}

.gm-tu-for__name {
  display: block;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-gray-900);
  text-decoration: none;
}

a.gm-tu-for__name:hover {
  color: var(--gm-blue-600);
}

.gm-tu-for__kind {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  color: var(--gm-gray-500);
}

.gm-tu-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  color: var(--gm-gray-800);
}

.gm-tu-user > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-tu-muted {
  font-size: 13px;
  color: var(--gm-gray-400);
}

/* -- Pagination ------------------------------------------------------------- */
.gm-token-usage-tab .pagination-container {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
}

.gm-token-usage-tab .pagination-btn {
  min-width: 34px;
  height: 34px;
  font-size: 13px;
}

/* -- Narrow screens: drop the columns the detail line repeats ---------------- */
@media (width <= 1280px) {
  .gm-token-usage-tab .data-table th:nth-child(6),
  .gm-token-usage-tab .gm-dtr .gm-col-bal {
    display: none;
  }
}

@media (width <= 1100px) {
  .gm-tu-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 1024px) {
  .gm-token-usage-tab .data-table th:nth-child(4),
  .gm-token-usage-tab .gm-dtr .gm-col-by {
    display: none;
  }

  .gm-token-usage-tab .gm-dtr-detail > td {
    padding-left: 18px;
  }
}

/* -- Balance per day ------------------------------------------------------------ */
.gm-tu-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 18px 12px;
  background: var(--gm-white);
  border-radius: 12px;
}

.gm-tu-chart__title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-gray-500);
}

/* glass_morph/organisms/subscription_dashboard.css */
/* ============================================================================ */

/* == Page — Subscription dashboard ========================================= */

/* ============================================================================ */

/* The tab strip sits as far above its panel as a detail page's tabs do
   (.detail-tabs in detail_shell.css), so the panel does not butt against it. */
.subscription-tabs {
  margin-bottom: 24px;
}

/* -- Hero: title and status left, the plan change right, stats underneath ---- */
.subscription-hero {
  margin-bottom: 24px;
}

.subscription-hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
}

.subscription-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -- Abonnement tab ------------------------------------------------------------ */
.subscription-plan-tab {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* One white tile per section, the dashboard's row-card surface. */
.subscription-tile {
  display: flex;
  gap: 2px;
  padding: 16px 20px;
  background: var(--gm-white);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--gm-glass-black-5);
}

.subscription-tile:not(.flex-row) {
  flex-direction: column;
}

.subscription-tile__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-gray-500);
}

.subscription-plan__identity {
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gm-gray-100);
}

.subscription-plan__icon {
  color: var(--gm-teal-200);
  background: var(--gm-teal-200-overlay-12);
}

.subscription-plan__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gm-gray-900);
}

.subscription-plan__price,
.subscription-plan__price-note {
  font-size: 13px;
  color: var(--gm-gray-600);
}

.subscription-plan__price b {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-gray-900);
}

.subscription-plan__limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.subscription-billing__actions {
  margin-top: auto;
}

@media (width <= 768px) {
  .subscription-plan__limits {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* glass_morph/organisms/scoring.css */
/* ============================================================================ */
/* == Organism — ScoringCriteria ============================================ */
/* ============================================================================ */

/* --- Scoring select — custom rich dropdown (dropdown variant) --- */
.scoring-select-anchor {
  position: relative;
}

.scoring-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--gm-white);
  gap: 8px;
  height: auto;
  padding: 10px 12px;
}

/* Rich trigger — split into header strip + card preview */
.scoring-select-trigger--rich {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  border: 1.5px solid var(--gm-gray-300) !important;
  border-radius: 10px;
}

.scoring-select-trigger--rich:hover,
.scoring-select-trigger--rich[aria-expanded="true"] {
  border-color: var(--gm-teal-400) !important;
}

.scoring-select-trigger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--gm-gray-50);
  border-bottom: 1px solid var(--gm-gray-200);
  border-radius: 9px 9px 0 0;
}

.scoring-select-trigger-preview {
  padding: 10px 14px 12px;
}

.scoring-select-trigger-body {
  flex: 1;
  min-width: 0;
}

.scoring-select-trigger-content {
  pointer-events: none;
}

.scoring-select-trigger-card {
  pointer-events: none;
}

.scoring-select-trigger .scoring-select-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
  opacity: 0.5;
}

/* Chevron in rich header is fully opaque and slightly larger */
.scoring-select-trigger-header .scoring-select-chevron {
  opacity: 1;
  color: var(--gm-gray-500);
}

.scoring-select-trigger[aria-expanded="true"] .scoring-select-chevron {
  transform: rotate(180deg);
}

.scoring-select-panel {
  position: fixed;
  z-index: 1060;
  background: var(--gm-white);
  border: 1px solid var(--gm-border, var(--gm-bs-gray-300));
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--gm-black-overlay-12);
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
}

.scoring-select-option {
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.scoring-select-option:hover {
  background: var(--gm-slate-50, var(--gm-slate-50));
}

.scoring-select-option--selected {
  background: var(--gm-slate-100, var(--gm-slate-100));
}

.scoring-select-option--selected:hover {
  background: var(--gm-gray-200, var(--gm-bs-gray-200));
}

.scoring-select-option + .scoring-select-option {
  border-top: 1px solid var(--gm-border-light, var(--gm-gray-f0f0f0));
}

/* --- Readiness top section --- */
.readiness-top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
  position: relative;
}

/* ReadinessHeaderContent layout: :stacked — score and stage on top, the
   timing and the two dates as a row of three under them. */
.readiness-top-section--stacked {
  flex-direction: column;
  gap: 16px;
}

.readiness-top-section--stacked .readiness-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  text-align: left;
}

.readiness-top-section.historical-view {
  background: var(--gm-status-warning-bg);
  border-radius: 8px;
  padding: 12px;
  margin: -12px;
  margin-bottom: 16px;
}

.historical-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gm-glass-white-20);
}

.historical-badge .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.historical-badge .btn-link {
  padding: 0;
  font-size: 14px;
  text-decoration: underline;
}

/* --- Scoring tile header --- */
.scoring-tile {
  padding: 0 !important;
}

.scoring-header {
  padding: 24px;
  border-bottom: 2px solid var(--gm-glass-white-10);
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  /* Dark gradient surface — reset context tokens so child headings/text use white */
  --gm-ctx-text-primary: var(--gm-text-on-dark-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-dark-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-dark-muted);
}

.scoring-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

/* --- Shared left/right layout sections --- */
.readiness-left,
.scoring-left-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.readiness-right,
.scoring-right-section {
  display: flex;
  gap: 24px;
  text-align: right;
}

/* --- Shared score display --- */
.readiness-score-display,
.scoring-score-display {
  text-align: center;
  padding-right: 16px;
  border-right: 2px solid var(--gm-glass-white-20);
}

.readiness-score-number,
.scoring-score-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--gm-white);
  line-height: 1;
}

.readiness-score-max,
.scoring-score-max {
  font-size: 12px;
  color: var(--gm-glass-white-80);
  margin-top: 4px;
}

/* --- Info sections --- */
.readiness-info, .scoring-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.readiness-title,
.scoring-info-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* --- Badge rows --- */
.readiness-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.readiness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.readiness-badge.hot-lead {
  background: var(--gm-red-c14342-overlay-77) !important;
  color: var(--gm-white) !important;
}

.readiness-badge.warm-lead {
  background: var(--gm-yellow-500) !important;
  color: var(--gm-white) !important;
}

.readiness-badge.nurture {
  background: var(--gm-green-500) !important;
  color: var(--gm-white) !important;
}

.readiness-badge.confidence {
  cursor: help;
}

/* --- Shared stat cells --- */
.readiness-stat,
.scoring-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.readiness-stat-label,
.scoring-stat-label {
  font-size: 13px;
  color: var(--gm-glass-white-70);
}

.readiness-stat-value,
.scoring-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-white);
}

/* --- Readiness action section --- */
.readiness-action-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gm-glass-white-20);
}

.readiness-back-link {
  color: var(--gm-white);
}

.readiness-back-link:hover {
  color: var(--gm-glass-white-80);
}

/* --- Weight drag handle --- */
.weight-drag-handle {
  position: absolute;
  right: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
}

/* --- Scoring gate row --- */
.scoring-gate-row {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 15px;
  padding: 0.875rem 1rem;
}

/* --- Readiness chart SVG --- */
.readiness-chart-svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
}

/* --- Scoring section layout --- */
.scoring-section {
  padding: 32px;
}

.scoring-criteria-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.scoring-criteria-list-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gm-gray-800);
  margin-bottom: 0.5rem;
}

/* --- Weight stacked bar --- */
.weight-stacked-bar {
  display: flex;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gm-gray-200);
}

.weight-bar-segment {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  min-width: 2px;
  overflow: hidden;
  transition: flex 0.05s;
}

.weight-bar-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  pointer-events: none;
}

.weight-bar-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gm-white) !important;
  text-shadow: 0 1px 2px var(--gm-glass-black-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.weight-bar-pct {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gm-white) !important;
  text-shadow: 0 1px 2px var(--gm-glass-black-40);
  white-space: nowrap;
  flex-shrink: 0;
}

.weight-drag-indicator {
  width: 3px;
  height: 28px;
  background: var(--gm-white);
  border-radius: 2px;
  opacity: 0.75;
  box-shadow: 0 0 4px var(--gm-glass-black-30);
}

.weight-legend-label-cell {
  padding: 0.15rem 0.75rem 0.15rem 0;
  white-space: nowrap;
  color: var(--gm-gray-500);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.weight-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.weight-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  white-space: nowrap;
}

.weight-legend-value-cell {
  padding: 0.15rem 0;
  text-align: right;
  font-weight: 600;
  font-family: monospace;
  color: var(--gm-gray-900);
  min-width: 3rem;
}

/* --- Weight bar & legend colors (10 distinct hues evenly spaced around the hue wheel) --- */
.weight-bar-color-0,
.weight-legend-dot-0 {
  background: var(--gm-teal-tw-600); /* teal */
}

.weight-bar-color-1,
.weight-legend-dot-1 {
  background: var(--gm-blue-600); /* blue */
}

.weight-bar-color-2,
.weight-legend-dot-2 {
  background: var(--gm-indigo-600); /* indigo */
}

.weight-bar-color-3,
.weight-legend-dot-3 {
  background: var(--gm-indigo-500); /* purple */
}

.weight-bar-color-4,
.weight-legend-dot-4 {
  background: var(--gm-pink-600); /* pink */
}

.weight-bar-color-5,
.weight-legend-dot-5 {
  background: var(--gm-red-600); /* red */
}

.weight-bar-color-6,
.weight-legend-dot-6 {
  background: var(--gm-orange-600); /* orange */
}

.weight-bar-color-7,
.weight-legend-dot-7 {
  background: var(--gm-amber-600); /* amber */
}

.weight-bar-color-8,
.weight-legend-dot-8 {
  background: var(--gm-green-700); /* green */
}

.weight-bar-color-9,
.weight-legend-dot-9 {
  background: var(--gm-cyan-600); /* cyan */
}

/* --- Stage threshold cards --- */
.stage-cards-divider {
  border-top: 1px solid var(--gm-gray-200);
}

.stage-card {
  border-radius: 12px;
  padding: 0.75rem;
}

.stage-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Forms::CategoryRangeSliderComponent: one bar split into colored segments,
   with a drag handle on each divider. The controller sets segment widths
   and handle offsets inline. */
.category-range-slider--readonly {
  pointer-events: none;
}

.category-range-slider__bar {
  position: relative;
  display: flex;
  height: 2.5rem;
  border-radius: var(--gm-radius-sm);
}

.category-range-slider__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  transition: width 75ms ease;
}

.category-range-slider__segment--first {
  border-top-left-radius: var(--gm-radius-sm);
  border-bottom-left-radius: var(--gm-radius-sm);
}

.category-range-slider__segment--last {
  border-top-right-radius: var(--gm-radius-sm);
  border-bottom-right-radius: var(--gm-radius-sm);
}

.category-range-slider.is-dragging .category-range-slider__segment {
  transition: none;
}

.category-range-slider__labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  user-select: none;
}

.category-range-slider__handle {
  position: absolute;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 100%;
  cursor: ew-resize;
}

.category-range-slider__grip {
  width: 0.25rem;
  height: 1.5rem;
  border-radius: var(--gm-radius-sm);
  background: var(--gm-white);
  box-shadow: var(--gm-shadow-md);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.category-range-slider__handle:hover .category-range-slider__grip,
.category-range-slider.is-dragging .category-range-slider__grip {
  opacity: 1;
}

.category-range-slider-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 0.65rem;
  margin-bottom: 0.85rem;
  color: var(--gm-gray-500);
  font-size: 0.875rem;
  line-height: 1.25;
}

.category-range-slider-scale span {
  display: block;
}

.category-range-slider-scale span:nth-child(1) {
  text-align: left;
}

.category-range-slider-scale span:nth-child(n + 2):nth-child(-n + 4) {
  text-align: center;
}

.category-range-slider-scale span:nth-child(5) {
  text-align: right;
}

/* --- Scoring configuration form pages --- */
.scoring-configuration-page {
  gap: 1rem;
}

.scoring-configuration-type-row {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  margin-top: -0.25rem;
  margin-bottom: 0.25rem;
}

.scoring-configuration-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scoring-configuration-section.content-section {
  margin: 0;
  min-height: auto;
  max-height: none;
}

.scoring-configuration-section .content-section-body {
  max-height: none;
  overflow: visible;
  padding: 18px 20px 20px;
}

.scoring-configuration-section .tile-light,
.scoring-configuration-section .bg-white {
  color: var(--gm-gray-900);
}

.scoring-section-description {
  color: var(--gm-gray-600);
  margin-bottom: 1rem;
}

/* --- Criterion card selector --- */
.scoring-criteria-grid {
  align-items: stretch;
}

.scoring-criteria-grid-col {
  display: flex;
}

.criterion-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 156px;
  border-radius: 8px;
  padding: 1rem;
  color: var(--gm-gray-900);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.criterion-card:hover {
  box-shadow: 0 10px 22px var(--gm-glass-black-8);
  transform: translateY(-1px);
}

.criterion-card-selected {
  background: var(--gm-green-50);
  border: 1.5px solid var(--gm-green-500);
}

.criterion-card-unselected {
  background: var(--gm-white);
  border: 1.5px solid var(--gm-gray-200);
}

.criterion-card-check {
  color: var(--gm-green-600);
}

.criterion-card .heading {
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.criterion-card .paragraph {
  color: var(--gm-gray-600);
  margin-bottom: 0;
  line-height: 1.4;
}

.criterion-card .gm-badge {
  color: var(--gm-white) !important;
}

.criterion-mode-selector {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gm-gray-200);
}

.criterion-mode-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gm-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.criterion-mode-select {
  width: 100%;
  min-height: 38px;
  font-size: 0.875rem;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--gm-gray-200);
  background: var(--gm-white);
  color: var(--gm-gray-900);
  cursor: pointer;
}

/* --- Scoring criteria item --- */
.scoring-criteria-item {
  container-type: inline-size;
  padding: 1rem;
  border-radius: 8px;
  background: var(--gm-white);
  color: var(--gm-text-on-light-primary);
}

.criteria-header-row {
  margin-bottom: 0.75rem;
}

.criteria-item-header {
  margin-bottom: 0;
}

.criteria-item-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.criteria-item-name, .criteria-score {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gm-text-on-light-primary);
}

.criteria-score-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.criteria-points {
  font-size: 0.875rem;
  color: var(--gm-gray-500);
}

@container (width <= 34rem) {
  /* !important: the row is a FlexRow, and Bootstrap's .flex-row sets
     flex-direction: row !important */
  .criteria-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .criteria-item-header {
    width: 100%;
    min-width: 0;
  }

  .criteria-item-title-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .criteria-item-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .criteria-score-row {
    align-self: flex-start;
    flex-wrap: wrap;
  }
}

.criteria-progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--gm-gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.criteria-progress-fill {
  height: 100%;
  background-color: var(--gm-teal-400);
  transition: width 0.3s ease;
  border-radius: 4px;
}

.criteria-progress-fill.blue {
  background-color: var(--gm-teal-400);
}

.criteria-progress-fill.green {
  background-color: var(--gm-green-300);
}

.criteria-progress-fill.teal {
  background-color: var(--gm-teal-500);
}

.criteria-progress-fill.orange {
  background: var(--gm-score-poor);
}

.criteria-progress-fill.yellow {
  background: var(--gm-yellow-500);
}

.criteria-progress-fill.red {
  background: var(--gm-score-low);
}

.criteria-description-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gm-text-on-light-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  word-wrap: break-word;
}

.criteria-description-text p {
  margin: 0 0 0.5rem;
}

.criteria-bullet-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.25rem 0 0;
}

.criteria-bullet-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.criteria-bullet-list li:last-child {
  margin-bottom: 0;
}

/* --- Product scoring profile card (read-only summary on product page) --- */
.scoring-profile-card {
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--gm-white);
}

.scoring-profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
}

.scoring-profile-grid > * {
  min-width: 0;
}

.scoring-profile-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--gm-gray-50);
  border-bottom: 1px solid var(--gm-gray-200);
}

.scoring-profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
}

.scoring-profile-card-description {
  padding: 4px 14px 0;
  font-size: 11px;
  color: var(--gm-text-on-light-muted);
  line-height: 1.4;
}

/* Pill bar — rounded ends via :first-child/:last-child so tooltips can escape */
.scoring-pill-bar {
  display: flex;
  width: 100%;
  height: 28px;
  gap: 2px;
  background: var(--gm-gray-200);

  /* gap fill color */
  border-radius: 999px;

  /* matches first/last segment pill ends so gray bg doesn't bleed out */
  position: relative;
}

.scoring-pill-seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;

  /* allows tooltip to escape the bar */
  min-width: 4px;
  transition: filter 0.15s;
  cursor: default;
}

/* Rounded pill ends on first/last segment (replaces container overflow:hidden) */
.scoring-pill-seg:first-child { border-radius: 999px 0 0 999px; }
.scoring-pill-seg:last-child  { border-radius: 0 999px 999px 0; }
.scoring-pill-seg:only-child  { border-radius: 999px; }

.scoring-pill-seg:hover { filter: brightness(1.1); }

.scoring-pill-seg-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gm-glass-white-92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 7px;
  pointer-events: none;
  text-shadow: 0 1px 2px var(--gm-glass-black-35);
  min-width: 0;

  /* allow flex shrink so text truncates within segment */
}

/* Styled hover tooltip — appears above each pill segment */
.scoring-pill-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gm-slate-800);
  color: var(--gm-white);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px var(--gm-glass-black-25);
}

.scoring-pill-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gm-slate-800);
}

.scoring-pill-seg:hover .scoring-pill-tooltip { opacity: 1; }

/* Inline legend — tightly packed with separator between items */
.scoring-inline-legend {
  display: flex;
  flex-wrap: wrap;
  padding: 6px 14px 10px;
}

.scoring-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gm-gray-600);
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid var(--gm-gray-200);
  white-space: nowrap;
  line-height: 1.8;
}

.scoring-legend-item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.scoring-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scoring-legend-ko { color: var(--gm-red-700); }

.scoring-legend-ko-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gm-red-200);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scoring-legend-ko-dot::after {
  content: "×";
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  color: var(--gm-red-700);
}

/* --- Knockout criteria --- */
.knockout-criteria-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.knockout-criteria-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid;
}

.knockout-criteria-item.passed {
  background: var(--gm-teal-3e7a8c-overlay-14);
  border: none;
}

/* Inconclusive: the gate had no fact to judge, so it neither passed nor failed.
   Its own tint and its own icon colour — a gate we could not judge must not be
   mistaken for one the prospect cleared (ADR-0035). */
.knockout-criteria-item.inconclusive {
  background: var(--gm-amber-overlay-12);
  border: none;
}

.knockout-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--gm-green-500);
}

.knockout-criteria-item.inconclusive .knockout-icon {
  color: var(--gm-amber-600);
}

.knockout-content {
  flex: 1;
}

.knockout-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.knockout-name {
  font-weight: 500;
  color: var(--gm-gray-800);
  font-size: 15px;
}

.knockout-description {
  font-size: 14px;
  color: var(--gm-gray-700);
  line-height: 1.6;
  margin: 0;
}

@media (width <= 1024px) {
  .readiness-top-section {
    flex-direction: column;
  }

  .readiness-right, .scoring-right-section {
    width: 100%;
    justify-content: flex-start;
  }

  .scoring-header-content {
    flex-direction: column;
  }

  .scoring-criteria-list {
    grid-template-columns: 1fr;
  }

  .knockout-criteria-list {
    grid-template-columns: 1fr;
  }
}

@media (width <= 640px) {
  .scoring-left-section,
.event-header,
.readiness-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .scoring-right-section, .readiness-right {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }
}

@media (width <= 768px) {
  .scoring-criteria-list {
    gap: 1rem;
  }
}

/* glass_morph/organisms/stakeholder.css */
/* ============================================================================ */
/* == Organism — StakeholderContactSection ================================== */
/* ============================================================================ */

/* Placeholder row for a missing contact field — matches .contact-item layout  */
.contact-add-placeholder {
  opacity: 0.55;
  font-style: italic;
  cursor: default;
}

/* Action row (Edit button) sits below the contact list with a small gap */
.contact-section-actions {
  margin-top: 0.5rem;
}

/* Edit form: stack fields with breathing room, match the expanded-content card */
.contact-section-edit {
  padding-top: 0.5rem;
}

/* Action row inside the edit form (Save / Cancel) */
.contact-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ============================================================================ */
/* == Organism — CompanyContactSection ====================================== */
/* ============================================================================ */

/* Phone and email share one row equally */
.company-contact-half-field,
.company-contact-street-field,
.company-contact-city-field {
  flex: 1 1 0;
  min-width: 0;
}

/* Street takes remaining width; house number is compact */
.company-contact-housenr-field {
  flex: 0 0 7rem;
  min-width: 0;
}

/* Postal code is compact; city takes remaining width */
.company-contact-postal-field {
  flex: 0 0 8rem;
  min-width: 0;
}

/* All fields in the contact edit form are optional — hide the badge to avoid
   wrapping in narrow columns (same pattern as .gdpr-form .label-optional) */
.contact-section-edit .label-optional { display: none; }

/* ============================================================================ */
/* == Organism — StakeholderSection ========================================= */
/* ============================================================================ */
/* Responsive gap adjustment */
/* ScoringWeightEditor color palette (index-based, 10 slots) */

/* glass_morph/organisms/detail_shell.css */
/* ============================================================================ */
/* == Organism — DetailShell ================================================= */
/* Shared structural CSS for all entity detail/show pages.                      */
/* Used by: Prospects, Companies, Products, Assistants, BuyingReadinessSnapshots */
/* ============================================================================ */

/* Logo/avatar container: stack avatar + toggle vertically */
.row-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

/* Company Detail View */
.detail-view {
  min-height: 100%;
  background: transparent;
  border-radius: 12px;
  padding: 0 6px 0 0;
  display: flex;
  flex-direction: column;
}

.entity-detail-header {
  margin-bottom: 24px;
}

.snapshot-content-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.snapshot-content-section {
  min-height: auto;
  max-height: none;
}

.snapshot-content-section .content-section-body {
  max-height: none;
  overflow: visible;
}

.snapshot-section-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.snapshot-section-inner > .row {
  align-items: stretch;
  margin-top: 0;
}

.snapshot-section-inner > .row > [class*="col-"] {
  display: flex;
  margin-bottom: 16px;
}

.snapshot-section-inner > .row > [class*="col-"]:last-child {
  margin-bottom: 0;
}

.snapshot-content-section .gm-stat-icon {
  border-radius: 999px;
}

.snapshot-content-section .stat-card-rich {
  flex: 1 1 auto;
  height: 100% !important;
  width: 100%;
}

.snapshot-content-section .stat-card-rich > .d-flex.flex-column {
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
}

.snapshot-content-section .stat-card-rich:hover {
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
  transform: none;
}

.snapshot-section-copy {
  margin-bottom: 0;
  line-height: 1.65;
}

.snapshot-insight-row {
  margin-bottom: 0;
}

.detail-header-row {
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 24px var(--gm-glass-black-30);
  display: flex;
  flex-direction: column;
  gap: 24px;

  --gm-ctx-text-primary: var(--gm-text-on-dark-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-dark-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-dark-muted);
}

.detail-header-top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.row-avatar {
  width: 80px;
  height: 80px;
  background: var(--gm-teal-700);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--gm-glass-black-30);
}

/* White card background when showing actual logo image — ensures any logo
   (transparent, dark-background, or light) is always clearly visible against
   the dark glassmorphism card. Mirrors the standard used by LinkedIn/HubSpot. */
.row-avatar.row-avatar--has-image,
.row-avatar.row-avatar-sm.row-avatar--has-image {
  background: var(--gm-white) !important;
  box-shadow: 0 2px 8px var(--gm-glass-black-18) !important;
  padding: 6px;
}

.row-avatar-initials {
  font-size: 32px;
  font-weight: 700;
  color: var(--gm-white);
  letter-spacing: -0.02em;
}

/* Small variant for company index rows */
.row-avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 99px;
  box-shadow: 0 2px 4px var(--gm-glass-black-20);
}

.row-avatar.row-avatar-sm.row-avatar--has-image {
  padding: 4px;
}

.row-avatar-sm .row-avatar-initials {
  font-size: 11px;
  letter-spacing: 0;
}

.entity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entity-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.entity-badges .prospect-product-badge {
  border: 1px solid var(--gm-glass-white-14);
  background: var(--gm-glass-white-8);
}

.score-box {
  top: 0;
  right: 0;
  background: var(--gm-green-600);
  border-radius: 12px;
  padding: 13px 19px;
  text-align: center;
  box-shadow: 0 4px 16px var(--gm-green-600-overlay-40);
  min-width: 80px;
}

.score-value {
  font-size: 38px;
  font-weight: 700;
  color: var(--gm-white);
  line-height: 1;
  margin-bottom: 4px;
}

.score-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--gm-white);
  opacity: 0.9;
}

.detail-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 24px;
}

.detail-tabs {
  display: flex;
  gap: 0;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  position: relative;
}

.responsive-tabs-full,
.responsive-tabs-compact {
  display: flex;
  gap: 0;
}

.responsive-tabs-compact {
  display: none;
  position: relative;
}

/* The controller sets `responsive-tabs--compact` on whatever element it is
   attached to, so the switch between the full strip and the collapsed one is
   keyed on that class alone — any tab strip can opt in, not only `.detail-tabs`. */
.responsive-tabs--compact .responsive-tabs-full {
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  max-width: none;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

.responsive-tabs--compact .responsive-tabs-compact {
  display: flex;
}

.responsive-tabs-active {
  cursor: default;
  min-width: 0;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 28px 0 0 28px;
}

.responsive-tabs-active .tab-icon,
.responsive-tabs-more .tab-icon {
  display: inline-block;
  line-height: 1;
  overflow: visible;
}

.responsive-tabs-active .tab-text,
.responsive-tabs-more-text .tab-text,
.responsive-tabs-menu-item .tab-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.responsive-tabs-more {
  gap: 12px;
  min-width: 150px;
  max-width: min(260px, 42vw);
  justify-content: space-between;
  border-radius: 0 28px 28px 0;
  padding-left: 28px;
  padding-right: 30px;
}

.responsive-tabs-more-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}

.responsive-tabs-more-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  line-height: 1;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.responsive-tabs-more[aria-expanded="true"] .responsive-tabs-more-icon {
  transform: rotate(180deg);
}

.responsive-tabs-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 220;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  overflow: hidden;
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--gm-black-overlay-12);
}

.responsive-tabs-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  color: var(--gm-gray-700);
  background: var(--gm-white);
  border: 0;
  font-family: Figtree, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.responsive-tabs-menu-item:hover,
.responsive-tabs-menu-item:focus-visible {
  color: var(--gm-gray-900);
  background: var(--gm-gray-100);
  outline: none;
}

.responsive-tabs-menu-item:first-child {
  padding-top: 14px;
}

.responsive-tabs-menu-item:last-child {
  padding-bottom: 14px;
}

.responsive-tabs-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.responsive-tabs-menu-item .tab-icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.activity-tab-filters-slot,
.tenders-tab-filters-slot,
.interactions-tab-filters-slot {
  display: none;
}

/* Match the timeline filter's FlexRow(gap: :sm): column-gap keeps the count pill
   an 8px gap from the period dropdown / trigger at every width (the ≤768px block
   re-declares it for the wrapped layout). */
.detail-tabs-row:has(.tab-button[data-tab="activity"].active) .activity-tab-filters-slot,
.detail-tabs-row:has(.tab-button[data-tab="tenders"].active) .tenders-tab-filters-slot,
.detail-tabs-row:has(.tab-button[data-tab="interactions"].active) .interactions-tab-filters-slot {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

/* The tenders count pill lives in its own turbo-frame (kept fresh by
   tenders-count-sync). A bare <turbo-frame> is display:inline, so once
   blockified as a flex item it carries the inherited line-height and the pill
   floats above the "Filters" trigger's centre. Make the frame a tight, centred
   flex box so the pill lines up with the trigger — mirroring the activity
   filter's .activity-filter-shell grouping. */
.tenders-tab-filters-slot #tenders_count_pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* The compact tenders filter (trigger + panel) is hidden on wide screens; the
   inline slider + dropdown show instead. */
.tenders-filter--compact {
  display: none;
}

/* Small formfactor: swap the inline bar for the compact trigger + panel object
   (mirrors the activity filter), and let the slot drop onto its own line below
   the tab buttons so nothing overflows or squeezes the tabs. */
@media (width <= 768px) {
  .detail-tabs-row:has(.tab-button[data-tab="tenders"].active),
  .detail-tabs-row:has(.tab-button[data-tab="interactions"].active) {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .tenders-tab-filters-slot,
  .interactions-tab-filters-slot {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
  }

  .tenders-filter--inline {
    display: none;
  }

  .tenders-filter--compact {
    display: inline-flex;
    position: relative;
  }
}

/* Logo image styling */
.row-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.row-avatar-sm .row-avatar-image {
  border-radius: 99px;
}

/* Extra-small: beside a name in a dense table cell — flat, no shadow */
.row-avatar.row-avatar-xs {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 99px;
  background: var(--gm-teal-200);
  box-shadow: none;
}

.row-avatar-xs .row-avatar-initials {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gm-white);
}

/* glass_morph/organisms/ecosystem_graph.css */
.ecosystem-graph {
  --ecosystem-root-node-fill: var(--gm-teal-600);
  --ecosystem-company-node-fill: var(--gm-teal-500);
  --ecosystem-prospect-node-fill: var(--gm-blue-500);
  --ecosystem-layer-1-filter: saturate(1.1) contrast(1.08);
  --ecosystem-layer-2-filter: saturate(0.62) contrast(0.82) brightness(1.2);
  --ecosystem-layer-3-filter: saturate(0.34) contrast(0.68) brightness(1.36);
  --ecosystem-layer-final-node-fill: var(--gm-teal-bcdee6);
  --ecosystem-layer-final-edge-stroke: var(--gm-teal-9bcbd6);
  --ecosystem-layer-final-filter: saturate(0.9) contrast(0.76) brightness(1.18);
  --ecosystem-layer-1-node-border: var(--gm-teal-600);
  --ecosystem-layer-1-node-border-width: 1.5px;
  --ecosystem-layer-1-edge-opacity: 0.8;
  --ecosystem-layer-2-edge-opacity: 0.46;
  --ecosystem-layer-3-edge-opacity: 0.3;
  --ecosystem-layer-final-edge-opacity: 0.24;
  --ecosystem-layer-1-label-opacity: 1;
  --ecosystem-layer-2-label-opacity: 0.68;
  --ecosystem-layer-3-label-opacity: 0.48;
  --ecosystem-layer-final-label-opacity: 0.48;

  position: relative;
  overflow: hidden;
  padding: 0 !important;
}

.ecosystem-graph__legend {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  box-sizing: border-box;
  width: min(560px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  overflow: hidden;
  border: 1px solid var(--gm-glass-white-30);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-glass-white-92);
  box-shadow: var(--gm-shadow-md);
  backdrop-filter: blur(14px);
}

.ecosystem-graph__legend.is-dragging {
  user-select: none;
  box-shadow: var(--gm-shadow-lg);
}

.ecosystem-graph__legend-header {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto minmax(7rem, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gm-glass-black-8);
  cursor: move;
  touch-action: none;
}

.ecosystem-graph__legend-depth,
.ecosystem-graph__legend-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ecosystem-graph__legend-depth {
  justify-content: center;
  padding-right: 20px;
}

.ecosystem-graph__legend-actions {
  gap: 4px;
  justify-content: flex-end;
}

.ecosystem-graph__legend-title {
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
}

.ecosystem-graph__depth-control {
  width: min(10.25rem, 34vw);
  min-width: 7.5rem;
}

.ecosystem-graph__depth-control .gm-segmented-slider {
  margin: 0;
  width: 100%;
}

.ecosystem-graph__icon-button {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0 !important;
  border-radius: var(--gm-radius-sm);
  background: var(--gm-teal-500);
  color: var(--gm-white) !important;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.ecosystem-graph__layout-icon, .ecosystem-graph__fullscreen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ecosystem-graph__layout-icon--tree {
  display: none;
}

.ecosystem-graph__layout-button.is-active .ecosystem-graph__layout-icon--force {
  display: none;
}

.ecosystem-graph__layout-button.is-active .ecosystem-graph__layout-icon--tree {
  display: inline-flex;
}

.ecosystem-graph__fullscreen-icon--contract {
  display: none;
}

.ecosystem-graph__fullscreen-button.is-active .ecosystem-graph__fullscreen-icon--expand {
  display: none;
}

.ecosystem-graph__fullscreen-button.is-active .ecosystem-graph__fullscreen-icon--contract {
  display: inline-flex;
}

.ecosystem-graph__icon-button [class*="gm-icon-"],
.ecosystem-graph__icon-button [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

.ecosystem-graph__icon-button:hover {
  background: var(--gm-teal-600);
}

.ecosystem-graph__icon-button:hover [class*="gm-icon-"],
.ecosystem-graph__icon-button:hover [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

.ecosystem-graph__icon-button.is-active {
  background: var(--gm-blue-500);
  color: var(--gm-white);
  box-shadow: none;
}

.ecosystem-graph__icon-button.is-active [class*="gm-icon-"],
.ecosystem-graph__icon-button.is-active [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

.ecosystem-graph__legend-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gm-gray-700);
  cursor: pointer;
}

.ecosystem-graph__legend-toggle:hover {
  color: var(--gm-gray-900);
}

.ecosystem-graph__legend-toggle-icon {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(2px) rotate(225deg);
  transition: transform 160ms ease-out;
}

.ecosystem-graph__legend.is-collapsed .ecosystem-graph__legend-body {
  display: none;
}

.ecosystem-graph__legend.is-collapsed .ecosystem-graph__legend-footer {
  display: none;
}

.ecosystem-graph__legend.is-collapsed .ecosystem-graph__legend-header {
  border-bottom: 0;
}

.ecosystem-graph__legend.is-collapsed .ecosystem-graph__legend-toggle-icon {
  transform: translateY(-2px) rotate(45deg);
}

.ecosystem-graph__legend-body {
  max-height: calc(100% - 38px);
  overflow: auto;
  padding: 15px 30px 30px;
}

.ecosystem-graph__legend-footer {
  padding: 0 30px 30px;
}

.ecosystem-graph__legend-footer[hidden] {
  display: none !important;
}

.ecosystem-graph__legend-footer .button-subtitle {
  color: var(--gm-white) !important;
  opacity: 1;
}

.ecosystem-graph__filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  width: 100%;
}

.ecosystem-graph__filter-item {
  min-width: 0;
  font-size: 13px;
}

.ecosystem-graph__filter-item .gm-badge,
.ecosystem-graph__filter-label {
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (width < 720px) {
  .ecosystem-graph__filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 520px) {
  .ecosystem-graph__filter-grid {
    grid-template-columns: 1fr;
  }
}

.ecosystem-graph__relation-line {
  width: 24px;
  height: 3px;
  flex: none;
  border-radius: 999px;
  background: var(--gm-gray-400);
}

.ecosystem-graph__relation-line--parent {
  background: var(--gm-blue-500);
}

.ecosystem-graph__relation-line--supplier {
  background: var(--gm-green-500);
}

.ecosystem-graph__relation-line--subcontractor {
  background: var(--gm-teal-500);
}

.ecosystem-graph__relation-line--consortium_partner {
  background: var(--gm-amber-500);
}

.ecosystem-graph__relation-line--partner {
  background: var(--gm-slate-500);
}

.ecosystem-graph__relation-line--co_participant {
  background: var(--gm-indigo-500);
}

.ecosystem-graph__organization-dot {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--gm-white);
  border-radius: 50%;
  background: var(--gm-slate-500);
  box-shadow: 0 0 0 1px var(--gm-glass-black-12);
}

.ecosystem-graph__organization-dot [class*="gm-icon-"],
.ecosystem-graph__organization-dot [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
  font-size: 0.75rem;
}

.ecosystem-graph__organization-dot--root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ecosystem-root-node-fill);
}

.ecosystem-graph__organization-dot--company {
  background: var(--ecosystem-company-node-fill);
}

.ecosystem-graph__organization-dot--other {
  background: var(--gm-slate-500);
}

.ecosystem-graph__organization-dot--sports_team,
.ecosystem-graph__organization-dot--nonprofit {
  background: var(--gm-indigo-500);
}

.ecosystem-graph__organization-dot--government {
  background: var(--gm-amber-500);
}

.ecosystem-graph__organization-dot--event,
.ecosystem-graph__organization-dot--ambiguous {
  border-color: var(--gm-amber-500);
  background: var(--gm-amber-50);
}

.ecosystem-graph__organization-dot--identified {
  border-color: var(--gm-green-500);
  background: var(--gm-green-100);
}

.ecosystem-graph__organization-dot--identified,
.ecosystem-graph__organization-dot--ambiguous,
.ecosystem-graph__organization-dot--event {
  border-style: dashed;
}

.ecosystem-graph__status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.ecosystem-graph__status-dot--prospect {
  background: var(--gm-blue-500);
}

.ecosystem-graph__status-dot--customer {
  background: var(--gm-green-600);
}

.ecosystem-graph__status-dot--reference {
  background: var(--gm-purple-500);
}

.ecosystem-graph svg {
  width: 100%;
  height: 600px;
  display: block;
}

@media (width < 1000px) {
  .ecosystem-graph {
    overflow: visible;
  }

  .ecosystem-graph__legend {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .ecosystem-graph__legend-header {
    cursor: default;
    touch-action: auto;
  }
}

body.ecosystem-graph-fullscreen-open {
  overflow: hidden;
}

.ecosystem-graph.is-fullscreen {
  position: fixed;
  inset: 40px;
  z-index: 1050;
  width: auto;
  height: auto;
  overflow: hidden;
  background: var(--gm-white);
  border-radius: var(--gm-radius-sm);
  box-shadow: var(--gm-shadow-lg);
}

.ecosystem-graph.is-fullscreen svg {
  height: 100%;
  min-height: 0;
}

.ecosystem-graph.is-fullscreen .ecosystem-graph__legend {
  position: absolute;
  top: 20px;
  right: 20px;
  width: min(560px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  margin-top: 0;
  border-top-left-radius: var(--gm-radius-sm);
  border-top-right-radius: var(--gm-radius-sm);
}

.ecosystem-graph.is-fullscreen .ecosystem-graph__legend-header {
  cursor: move;
  touch-action: none;
}

/* Nodes and edges fade smoothly in and out of the hover-focus state. */
.ecosystem-graph .ecosystem-node,
.ecosystem-graph .ecosystem-edge-group {
  transition: opacity 200ms ease-out;
}

.ecosystem-graph .ecosystem-node.is-faded,
.ecosystem-graph .ecosystem-edge-group.is-faded {
  opacity: 0.15;
}

/* Watching indicator: a checkmark badge at a watched node's top-right corner.
   Hidden by default; shown when the group carries .ecosystem-node--watched. */
.ecosystem-graph .ecosystem-node__watch-badge {
  display: none;
}

.ecosystem-graph .ecosystem-node--watched .ecosystem-node__watch-badge {
  display: block;
}

.ecosystem-graph .ecosystem-node--watched .ecosystem-node__watch-badge circle {
  fill: var(--gm-green-500);
  stroke: var(--gm-white);
  stroke-width: 1.5px;
  filter: none;
}

.ecosystem-graph .ecosystem-node--watched .ecosystem-node__watch-badge path {
  fill: none;
  stroke: var(--gm-white);
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecosystem-graph .ecosystem-edge {
  stroke: var(--gm-gray-400);
  stroke-linecap: round;
  opacity: var(--ecosystem-layer-1-edge-opacity);
  pointer-events: none;
  transition:
    filter 200ms ease-out,
    opacity 200ms ease-out;
}

/* Per relationship-type stroke colors. Each matches the line sample used in the
   legend so relation edges and legend read as one. */
.ecosystem-graph .ecosystem-edge--parent {
  stroke: var(--gm-blue-500);
}

.ecosystem-graph .ecosystem-edge--supplier {
  stroke: var(--gm-green-500);
}

.ecosystem-graph .ecosystem-edge--subcontractor {
  stroke: var(--gm-teal-500);
}

.ecosystem-graph .ecosystem-edge--consortium_partner {
  stroke: var(--gm-amber-500);
}

.ecosystem-graph .ecosystem-edge--partner {
  stroke: var(--gm-slate-500);
}

.ecosystem-graph .ecosystem-edge--co_participant {
  stroke: var(--gm-indigo-500);
}

.ecosystem-graph .ecosystem-edge-group {
  cursor: pointer;
}

.ecosystem-graph .ecosystem-edge-group.is-layer-1 .ecosystem-edge {
  filter: var(--ecosystem-layer-1-filter);
  opacity: var(--ecosystem-layer-1-edge-opacity);
}

.ecosystem-graph .ecosystem-edge-group.is-layer-2 .ecosystem-edge {
  filter: var(--ecosystem-layer-2-filter);
  opacity: var(--ecosystem-layer-2-edge-opacity);
}

.ecosystem-graph .ecosystem-edge-group.is-layer-3 .ecosystem-edge {
  filter: var(--ecosystem-layer-3-filter);
  opacity: var(--ecosystem-layer-3-edge-opacity);
}

.ecosystem-graph .ecosystem-edge-group.is-layer-final .ecosystem-edge {
  stroke: var(--ecosystem-layer-final-edge-stroke);
  filter: none;
  opacity: var(--ecosystem-layer-final-edge-opacity);
}

.ecosystem-graph .ecosystem-edge-group:hover .ecosystem-edge {
  opacity: 1;
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge {
  filter: none;
  opacity: 1;
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge--parent {
  stroke: var(--gm-blue-500);
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge--supplier {
  stroke: var(--gm-green-500);
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge--subcontractor {
  stroke: var(--gm-teal-500);
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge--consortium_partner {
  stroke: var(--gm-amber-500);
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge--partner {
  stroke: var(--gm-slate-500);
}

.ecosystem-graph .ecosystem-edge-group.is-focus-context .ecosystem-edge--co_participant {
  stroke: var(--gm-indigo-500);
}

.ecosystem-graph .ecosystem-node circle {
  fill: var(--gm-teal-500);
  stroke: none;
  stroke-width: 0;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px var(--gm-glass-black-20));
  transition: filter 200ms ease-out;
}

/* Pipeline status (role) overrides node fill with distinct colors. The `g`
   element qualifier raises specificity above the .is-organization-* fill rules
   below so status wins regardless of source order. */
.ecosystem-graph g.ecosystem-node.is-status-prospect:not(.is-root) circle {
  --ecosystem-layer-1-node-border: var(--ecosystem-prospect-node-fill);

  fill: var(--ecosystem-prospect-node-fill);
}

.ecosystem-graph g.ecosystem-node.is-status-customer:not(.is-root) circle {
  --ecosystem-layer-1-node-border: var(--gm-green-600);

  fill: var(--gm-green-600);
}

.ecosystem-graph g.ecosystem-node.is-status-reference:not(.is-root) circle {
  --ecosystem-layer-1-node-border: var(--gm-indigo-400);

  fill: var(--gm-purple-500);
}

/* Root company: larger (sized in JS), heavier ring + deeper shadow so it reads
   as the anchor the ecosystem radiates from. */
.ecosystem-graph .ecosystem-node.is-root circle {
  filter: drop-shadow(0 4px 10px var(--gm-glass-black-30));
}

.ecosystem-graph .ecosystem-node.is-tentative circle {
  --ecosystem-layer-1-node-border: var(--gm-gray-400);

  fill: var(--gm-gray-300);
  stroke: var(--gm-gray-400);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
  filter: none;
}

/* Non-company entities: distinct muted styling (darker gray, solid stroke). */
.ecosystem-graph .ecosystem-node.is-non-company circle {
  --ecosystem-layer-1-node-border: var(--gm-gray-600);

  fill: var(--gm-gray-500);
  stroke: none;
  stroke-width: 0;
  filter: none;
}

.ecosystem-graph .ecosystem-node.is-organization-root circle {
  --ecosystem-layer-1-node-border: var(--ecosystem-root-node-fill);

  fill: var(--ecosystem-root-node-fill);
}

.ecosystem-graph .ecosystem-node.is-organization-company circle {
  --ecosystem-layer-1-node-border: var(--ecosystem-company-node-fill);

  fill: var(--ecosystem-company-node-fill);
}

.ecosystem-graph .ecosystem-node.is-organization-other circle {
  --ecosystem-layer-1-node-border: var(--gm-gray-500);

  fill: var(--gm-slate-500);
}

.ecosystem-graph .ecosystem-node.is-organization-sports_team circle,
.ecosystem-graph .ecosystem-node.is-organization-nonprofit circle {
  --ecosystem-layer-1-node-border: var(--gm-indigo-500);

  fill: var(--gm-indigo-500);
}

.ecosystem-graph .ecosystem-node.is-organization-government circle {
  --ecosystem-layer-1-node-border: var(--gm-amber-500);

  fill: var(--gm-amber-500);
}

.ecosystem-graph .ecosystem-node.is-organization-event circle {
  --ecosystem-layer-1-node-border: var(--gm-amber-500);

  fill: var(--gm-amber-50);
  stroke: var(--gm-amber-500);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
}

/* Settled identification verdicts recolor the tentative circle so the state
   reads at a glance: amber = multiple matches needing manual review, green =
   identified and awaiting the next scan. Pending/unidentified keep the grey. */
.ecosystem-graph .ecosystem-node.is-ident-ambiguous circle {
  --ecosystem-layer-1-node-border: var(--gm-amber-500);

  fill: var(--gm-amber-50);
  stroke: var(--gm-amber-500);
  stroke-width: 2px;
}

.ecosystem-graph .ecosystem-node.is-ident-identified circle {
  --ecosystem-layer-1-node-border: var(--gm-green-500);

  fill: var(--gm-green-100);
  stroke: var(--gm-green-500);
  stroke-width: 2px;
}

.ecosystem-graph .ecosystem-node.is-layer-1 circle {
  stroke: var(--ecosystem-layer-1-node-border);
  stroke-width: var(--ecosystem-layer-1-node-border-width);
  filter: var(--ecosystem-layer-1-filter) drop-shadow(0 2px 4px var(--gm-glass-black-20));
}

.ecosystem-graph .ecosystem-node.is-layer-2 circle {
  filter: var(--ecosystem-layer-2-filter) drop-shadow(0 1px 3px var(--gm-glass-black-10));
}

.ecosystem-graph .ecosystem-node.is-layer-3 circle {
  filter: var(--ecosystem-layer-3-filter);
}

.ecosystem-graph .ecosystem-node.is-layer-final circle {
  fill: var(--ecosystem-layer-final-node-fill);
  stroke: var(--ecosystem-layer-final-edge-stroke);
  stroke-width: 1px;
  filter: var(--ecosystem-layer-final-filter);
}

.ecosystem-graph .ecosystem-node.is-root.is-layer-1 circle {
  fill: var(--ecosystem-root-node-fill);
  stroke: var(--ecosystem-root-node-fill);
  filter: var(--ecosystem-layer-1-filter) drop-shadow(0 4px 10px var(--gm-glass-black-30));
}

.ecosystem-graph g.ecosystem-node.is-root circle {
  --ecosystem-layer-1-node-border: var(--ecosystem-root-node-fill);

  fill: var(--ecosystem-root-node-fill);
  stroke: var(--ecosystem-root-node-fill);
}

.ecosystem-graph .ecosystem-node:hover circle {
  filter: drop-shadow(0 4px 12px var(--gm-glass-black-30));
}

.ecosystem-graph .ecosystem-node.is-focus-context circle {
  fill: var(--gm-teal-500);
  stroke: none;
  stroke-width: 0;
  filter: drop-shadow(0 3px 9px var(--gm-glass-black-20));
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-tentative circle {
  fill: var(--gm-gray-300);
  stroke: var(--gm-gray-400);
  stroke-width: 2px;
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-non-company circle {
  fill: var(--gm-gray-500);
  stroke: none;
  stroke-width: 0;
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-root circle {
  fill: var(--ecosystem-root-node-fill);
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-company circle {
  fill: var(--ecosystem-company-node-fill);
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-other circle {
  fill: var(--gm-slate-500);
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-sports_team circle,
.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-nonprofit circle {
  fill: var(--gm-indigo-500);
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-government circle {
  fill: var(--gm-amber-500);
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-organization-event circle,
.ecosystem-graph .ecosystem-node.is-focus-context.is-ident-ambiguous circle {
  fill: var(--gm-amber-50);
  stroke: var(--gm-amber-500);
  stroke-width: 2px;
}

.ecosystem-graph .ecosystem-node.is-focus-context.is-ident-identified circle {
  fill: var(--gm-green-100);
  stroke: var(--gm-green-500);
  stroke-width: 2px;
}

.ecosystem-graph g.ecosystem-node.is-focus-context.is-status-prospect:not(.is-root) circle {
  fill: var(--ecosystem-prospect-node-fill);
}

.ecosystem-graph g.ecosystem-node.is-focus-context.is-status-customer:not(.is-root) circle {
  fill: var(--gm-green-600);
}

.ecosystem-graph g.ecosystem-node.is-focus-context.is-status-reference:not(.is-root) circle {
  fill: var(--gm-purple-500);
}

/* White halo (paint-order stroke) keeps labels legible where they cross edges. */
.ecosystem-graph .ecosystem-node text {
  fill: var(--gm-ctx-text-primary);
  font-size: 12px;
  opacity: var(--ecosystem-layer-1-label-opacity);
  paint-order: stroke;
  stroke: var(--gm-white);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.ecosystem-graph .ecosystem-node.is-root text {
  font-size: 13px;
  font-weight: 700;
}

.ecosystem-graph .ecosystem-node.is-layer-2 text {
  opacity: var(--ecosystem-layer-2-label-opacity);
}

.ecosystem-graph .ecosystem-node.is-layer-3 text {
  opacity: var(--ecosystem-layer-3-label-opacity);
}

.ecosystem-graph .ecosystem-node.is-layer-final text {
  opacity: var(--ecosystem-layer-final-label-opacity);
}

.ecosystem-graph .ecosystem-node text.ecosystem-node__root-icon {
  fill: var(--gm-white);
  opacity: 1;
  stroke: none;
  font-family: bootstrap-icons, sans-serif;
  font-size: 18px;
  font-weight: 400;
  paint-order: normal;
}

.ecosystem-graph .ecosystem-node text.ecosystem-node__prospect-icon {
  fill: var(--gm-white);
  opacity: 0.95;
  stroke: none;
  font-size: 11px;
  font-weight: 800;
  paint-order: normal;
}

/* Pinned node/edge detail panel (appended to <body>, not scoped to graph). */
.ecosystem-detail-panel {
  position: absolute;
  z-index: 9999;
  display: none;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--gm-gray-900);
  color: var(--gm-white);
  border-radius: var(--gm-radius-sm);
  box-shadow: var(--gm-shadow-md);
  font-size: 12px;
  line-height: 1.5;
}

.ecosystem-detail-panel__close {
  position: absolute;
  top: 4px;
  right: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gm-gray-300);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ecosystem-detail-panel__close:hover {
  color: var(--gm-white);
}

.ecosystem-detail-panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

/* Company node titles link through to the company profile page. A persistent
   underline plus a trailing "opens page" arrow signal the title is clickable;
   both brighten on hover/focus. */
.ecosystem-detail-panel__title-link {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--gm-glass-white-50);
}

.ecosystem-detail-panel__title-link::after {
  content: "\2197";

  /* ↗ north-east arrow — indicates the title opens a page */
  margin-left: 4px;
  font-size: 0.8em;
  opacity: 0.7;
}

.ecosystem-detail-panel__title-link:hover,
.ecosystem-detail-panel__title-link:focus-visible {
  text-decoration-color: currentcolor;
}

.ecosystem-detail-panel__title-link:hover::after,
.ecosystem-detail-panel__title-link:focus-visible::after {
  opacity: 1;
}

/* Relationship-type swatch in the edge panel title. Colors mirror the edge
   stroke + legend Badge (see EcosystemGraph::RELATION_COLORS) so the panel names
   the tie in the same color the line is drawn in. */
.ecosystem-type-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gm-gray-400);
}

.ecosystem-type-dot--parent {
  background: var(--gm-blue-500);
}

.ecosystem-type-dot--supplier {
  background: var(--gm-green-500);
}

.ecosystem-type-dot--subcontractor {
  background: var(--gm-teal-500);
}

.ecosystem-type-dot--consortium_partner {
  background: var(--gm-amber-500);
}

.ecosystem-type-dot--partner {
  background: var(--gm-slate-500);
}

.ecosystem-type-dot--co_participant {
  background: var(--gm-indigo-500);
}

.ecosystem-detail-panel__meta {
  margin-bottom: 8px;
  color: var(--gm-gray-300);
}

/* Short "why this edge exists" line, above the source list. */
.ecosystem-detail-panel__reason {
  margin-bottom: 8px;
  color: var(--gm-gray-100);
  font-style: italic;
  line-height: 1.35;
}

.ecosystem-detail-panel__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ecosystem-detail-panel__label {
  color: var(--gm-gray-300);
  font-weight: 600;
}

.ecosystem-detail-panel__list a {
  color: var(--gm-blue-200);
  word-break: break-all;
}

/* Inline "Translated" toggle appended to the About row when the description is
   a machine translation — swaps in the canonical original text on click.
   Subtle glass pill: it's a secondary affordance, not a call to action. */
.ecosystem-detail-panel__translation-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--gm-glass-white-15);
  border-radius: 30px;
  background: var(--gm-glass-white-8);
  color: var(--gm-teal-200);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 200ms ease-out,
    border-color 200ms ease-out;
}

.ecosystem-detail-panel__translation-toggle:hover {
  background: var(--gm-glass-white-12);
  border-color: var(--gm-glass-white-20);
}

/* "Review matches" is the primary human action on an ambiguous node — resolve
   the identity. It gets the full CTA treatment (echoing .button-primary): green
   gradient fill, white text, soft shadow, hover lift, and a nudging arrow. */
.ecosystem-detail-panel__review-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 14px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  color: var(--gm-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px var(--gm-glass-black-30);
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out;
}

/* Arrow slides right on hover to signal "opens the review". */
.ecosystem-detail-panel__review-link::after {
  content: "→";
  font-size: 0.8125rem;
  line-height: 1;
  transition: transform 200ms ease-out;
}

.ecosystem-detail-panel__review-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--gm-glass-black-30);
  filter: brightness(1.08);
}

.ecosystem-detail-panel__review-link:hover::after {
  transform: translateX(3px);
}

.ecosystem-detail-panel__review-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gm-green-500-overlay-35);
}

/* Anchor variant of the pill: suppress link underline and hold the white CTA
   text over the panel's generic `__list a` link rule. */
.ecosystem-detail-panel__list a.ecosystem-detail-panel__review-link {
  color: var(--gm-white);
  text-decoration: none;
  word-break: normal;
}

.ecosystem-detail-panel__list a.ecosystem-detail-panel__review-link:hover {
  color: var(--gm-white);
}

/* Loading row shown while a tentative node's remaining details are still being
   fetched (background enrichment). Reuses the shared .radar-loader scanner. */
.ecosystem-detail-panel__scanning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.ecosystem-detail-panel__scanning-text {
  color: var(--gm-gray-300);
  font-style: italic;
}

/* ── Monitor controls (node detail panel) ──────────────────────────────────
   Two independent rows: Observeren (watch ecosystem) + Volgen (follow prospect).
   Each has a frequency picker + button. */
.ecosystem-detail-panel__monitors {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gm-glass-white-8);
}

.ecosystem-detail-panel__monitors > * + * {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gm-glass-white-8);
}

/* ── Watch/Follow control (node detail panel) ──────────────────────────────
   A frequency picker (radio-card chips, cadences faster than the prospect
   disabled) + a primary button; once watching/following, a compact status
   line + a quiet unwatch/unfollow. */
.ecosystem-detail-panel__watch {
  margin: 0;
  padding: 0;
  border: none;
}

.ecosystem-detail-panel__watch-label {
  margin-bottom: 4px;
  color: var(--gm-glass-white-60);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ecosystem-detail-panel__watch-sublabel {
  margin-bottom: 6px;
  color: var(--gm-glass-white-50);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.3;
}

/* Why a monitoring change was refused (e.g. no tokens left). Dark-glass danger
   recipe: red tint + red border carry the meaning, white text carries the
   contrast. */
.ecosystem-detail-panel__monitor-error {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid var(--gm-red-300-overlay-35);
  border-radius: 6px;
  background: var(--gm-red-300-overlay-15);
  color: var(--gm-glass-white-90);
  font-size: 0.7rem;
  line-height: 1.3;
}

.ecosystem-detail-panel__freq-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-bottom: 10px;
}

.ecosystem-detail-panel__freq-chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--gm-glass-white-8);
  border-radius: 30px;
  background: var(--gm-glass-black-15);
  color: var(--gm-white);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out;
  white-space: nowrap;
}

.ecosystem-detail-panel__freq-chip:hover:not(.is-disabled, .is-selected) {
  border-color: var(--gm-glass-white-15);
}

.ecosystem-detail-panel__freq-chip.is-selected {
  border-color: var(--gm-teal-500);
  background: var(--gm-teal-500);
  color: var(--gm-white);
  font-weight: 600;
}

.ecosystem-detail-panel__freq-chip.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ecosystem-detail-panel__watch-btn {
  border: 0;
  font-size: 0.8125rem;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    filter 150ms ease-out,
    color 150ms ease-out;
}

.ecosystem-detail-panel__watch-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 5px 14px;
  font-size: 0.78rem;
  border-radius: var(--gm-radius-sm);
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  color: var(--gm-white);
  font-weight: 600;
  white-space: nowrap;
}

.ecosystem-detail-panel__watch-btn--primary:hover {
  filter: brightness(1.05);
}

.ecosystem-detail-panel__watch-btn--ghost {
  padding: 2px 0;
  background: transparent;
  color: var(--gm-glass-white-60);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ecosystem-detail-panel__watch-btn--ghost:hover {
  color: var(--gm-white);
}

.ecosystem-detail-panel__watching {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--gm-white);
  font-weight: 600;
}

.ecosystem-detail-panel__watching-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gm-accent);
}

.ecosystem-detail-panel__role {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gm-glass-white-8);
}

.ecosystem-detail-panel__role-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 30px;
  background: var(--gm-glass-black-15);
  border: 1px solid var(--gm-glass-white-8);
}

.ecosystem-detail-panel__role-btn {
  flex: 1 1 0;
  padding: 5px 6px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: var(--gm-white);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease-out;
}

.ecosystem-detail-panel__role-btn:hover:not(.is-active) {
  background: var(--gm-glass-white-8);
}

.ecosystem-detail-panel__role-btn.is-active {
  background: var(--gm-teal-500);
  font-weight: 600;
}

.ecosystem-detail-panel__role-btn.is-active--ref {
  background: var(--gm-amber-500);
  color: var(--gm-gray-900);
}

/* Widening the depth slider past what was served fetches the deeper ring, which
   is the expensive half of this tab. Dim and freeze the canvas while that is out
   so the slider reads as busy rather than broken. Matches the 200ms ease-out the
   node/edge fades already use. */
.ecosystem-graph.is-loading-depth svg {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

/* glass_morph/organisms/scoring_interview.css */
/* Scoring interview — the beta scoring step of the product wizard. Renders on
   the light modal surface, so colors come from the context tokens. */

.gm-scoring-interview-panel__slider {
  max-width: 24rem;
}

.gm-scoring-interview-panel__slider-labels {
  max-width: 24rem;
}

.gm-scoring-interview-preview {
  padding: 1rem;
  border: 1px solid var(--gm-ctx-separator);
  border-radius: var(--gm-radius-md);
  background: var(--gm-glass-black-3);
}

.gm-scoring-interview-preview__example {
  padding: 0.5rem 0;
}

.gm-scoring-interview-preview__example:last-child {
  border-bottom: 0;
}

/* glass_morph/organisms/prospect_show.css */
/* ============================================================================ */
/* == Organism — ProspectShow =============================================== */
/* ============================================================================ */

/* Archived prospect — muted/faded header to signal reduced importance */
.entity-detail-header[data-archived] .detail-header-row {
  background: linear-gradient(135deg, var(--gm-teal-600) 0%, var(--gm-teal-700) 100%);
  opacity: 0.75;
}

.expanded-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 4px 20px 20px;
}

.overview-tiles-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 100%;
  overflow: hidden;
  align-items: stretch;
}

.overview-tiles-container > * {
  min-width: 0;
}

.overview-tiles-container .tile-light {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-reference-customers-grid [data-testid="reference-card"],
.product-reference-customers-grid [data-testid="reference-card"] > .d-flex,
.product-reference-customers-grid [data-testid="reference-card"] > .d-flex > div:last-child {
  min-width: 0;
}

.product-reference-customers-grid [data-testid="reference-card"] h6,
.product-reference-customers-grid [data-testid="reference-card"] .gm-badge,
.product-reference-customers-grid [data-testid="reference-card"] .gm-badge-text {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.overview-tile {
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 12px var(--gm-glass-black-10);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push edit button to bottom of tile */
.overview-tile > .text-start.mt-3 {
  margin-top: auto;
}

/* Buying readiness snapshot section card hover effects */
.compound-pattern-card {
  --bs-body-color-rgb: 17, 24, 39;
  --bs-secondary-color: var(--gm-text-on-light-muted);
  --gm-ctx-text-primary: var(--gm-text-on-light-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-light-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-light-muted);
  --gm-ctx-text-link: var(--gm-text-on-light-link);

  border: 1px solid var(--gm-purple-500-overlay-20);
  background: var(--gm-purple-500-overlay-4);
  color: var(--gm-text-on-light-secondary);
  transition: border-color 150ms ease-in-out;
}

.compound-pattern-card .paragraph {
  color: var(--gm-text-on-light-secondary) !important;
}

.compound-pattern-card .text-body {
  color: var(--gm-text-on-light-primary) !important;
}

.compound-pattern-card .text-muted {
  color: var(--gm-text-on-light-muted) !important;
}

.compound-pattern-card .compound-pattern-badge {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-blue-100);
  color: var(--gm-text-on-light-primary);
}

.compound-pattern-card .compound-pattern-badge .bi,
.compound-pattern-card .compound-pattern-badge [class*="gm-icon-"] {
  color: var(--gm-teal-600);
}

.compound-pattern-indicators-divider {
  border-top: 1px solid var(--gm-purple-500-overlay-15);
}

.compound-pattern-card:hover {
  border-color: var(--gm-purple-500-overlay-35) !important;
}

/* Company Avatar Styles (Sidebar) */
.company-info-tile, .company-data-tile {
  background: var(--gm-white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px var(--gm-glass-black-10);
}

/* Company search section styling */
.company-search-section {
  margin-bottom: 1.5rem;
}

/* --- Risk factor card --- */
.risk-factor-card {
  transition:
    border-color 150ms ease-in-out,
    box-shadow 150ms ease-in-out;
}

.risk-factor-card:hover {
  box-shadow: 0 2px 8px var(--gm-glass-black-6);
}

.risk-factor-description {
  line-height: 1.6;
  font-size: 0.9375rem;
}

/* --- Criterion score card --- */
.criterion-score-card {
  padding: 16px;
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  margin-bottom: 16px;
}

.criterion-score-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.criterion-score-title,
.criterion-name-group,
.snapshot-info-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.criterion-score-name, .criterion-name {
  font-weight: 500;
  color: var(--gm-gray-900);
  font-size: 15px;
}

.criterion-score-stats, .criterion-score-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.criterion-score-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-gray-900);
}

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

.criterion-weighted-points {
  font-size: 12px;
  color: var(--gm-gray-500);
}

.criterion-progress-track {
  width: 100%;
  background: var(--gm-gray-200);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.criterion-progress-bar-fill {
  height: 10px;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.criterion-progress-bar-fill.gm-progress-success {
  background: var(--gm-green-500);
}

.criterion-progress-bar-fill.gm-progress-info {
  background: var(--gm-blue-500);
}

.criterion-progress-bar-fill.gm-progress-warning {
  background: var(--gm-amber-500);
}

.criterion-progress-bar-fill.gm-progress-danger {
  background: var(--gm-red-500);
}

/* --- Criterion section header --- */
.criterion-section-header {
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--gm-gray-200);
  margin-bottom: 16px;
}

.criterion-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-gray-900);
  display: flex;
  align-items: center;
}

/* --- Snapshot info banner --- */
.snapshot-info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background-color: var(--gm-blue-500-overlay-10);
  border: 1px solid var(--gm-blue-500-overlay-30);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gm-blue-800);
  margin-bottom: 12px;
}

.snapshot-info-icon {
  line-height: 1;
  flex-shrink: 0;
  color: var(--gm-blue-500);
}

.snapshot-info-text {
  font-weight: 500;
}

.snapshot-back-link {
  font-size: 12px;
  color: var(--gm-blue-500);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.snapshot-back-link:hover {
  color: var(--gm-blue-800);
  text-decoration: underline;
}

/* --- Buying windows widget --- */
.buying-windows-widget {
  margin-bottom: 1rem;
}

.buying-window-pattern {
  background-color: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-100);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 6px;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.buying-window-pattern:hover {
  background-color: var(--gm-gray-50);
  box-shadow: 0 1px 4px var(--gm-glass-black-6);
}

.buying-window-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  color: var(--gm-gray-500);
}

.buying-window-chevron.expanded {
  transform: rotate(90deg);
}

.buying-window-events {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gm-gray-100);
}

.buying-window-events.hidden {
  display: none;
}

.buying-window-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.8rem;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
}

a.buying-window-event-row:hover {
  background-color: var(--gm-glass-black-3);
  color: inherit;
}

.buying-window-event-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-gray-600);
}

.buying-window-event-date {
  flex-shrink: 0;
  font-size: 0.75rem;
}

/* --- Warmth ranking widget --- */
.warmth-ranking-widget {
  padding: 20px 24px;
}

.warmth-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.warmth-ranking-row {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card chrome for warmth items is on .list-item inside the link */
.warmth-ranking-item {
  justify-content: space-between;
}

.warmth-rank-number {
  color: var(--gm-gray-400);
  font-weight: 700;
  font-size: 0.8rem;
  min-width: 2rem;
}

.warmth-score-bar-container {
  width: 60px;
  height: 6px;
  background-color: var(--gm-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.warmth-score-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ============================================================================ */
/* == Recommended Actions tile ============================================== */
/* ============================================================================ */
.recommended-actions-tile {
  background: var(--gm-white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px var(--gm-glass-black-10);

  /* Light surface context — flips gm-text-*, gm-bg-*, gm-separator-* to dark text */
  --gm-ctx-text-primary: var(--gm-text-on-light-primary);
  --gm-ctx-separator: var(--gm-glass-black-8);
}

.risk-mitigation-divider {
  border-top: 1px solid var(--gm-glass-black-8);
}

@media (width <= 1200px) {
  .overview-tiles-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 768px) {
  .warmth-score-bar-container {
    display: none;
  }
}

/* glass_morph/organisms/carousel.css */
/* ============================================================================ */
/* == Organism — Carousel =================================================== */
/* ============================================================================ */
/* Carousel Container */
.advice-carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* Carousel Slide Wrapper */
.advice-carousel-slides-wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
  max-width: 100%;
}

/* Individual Slide */
.advice-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Ensure slide content respects boundaries */
.advice-carousel-slide > * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Navigation Controls (centered below) */
.advice-carousel-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

/* Nav Buttons */
.carousel-nav-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--gm-teal-300);
  padding: 4px;
}

.carousel-nav-button:hover:not(:disabled) {
  color: var(--gm-teal-400);
  transform: scale(1.2);
}

.carousel-nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Indicator Dots - override Bootstrap .carousel-indicators positioning */
.carousel-indicator:hover {
  background: var(--gm-gray-400);
}

/* Carousel Container */
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 16px;
}

/* Carousel Slides Wrapper */
.carousel-slides-wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
}

/* Individual Slide */
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure slide content respects boundaries */
.carousel-slide > * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* Navigation Controls */
.carousel-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* Indicator Dots - override Bootstrap .carousel-indicators positioning */
.carousel-indicators {
  position: static;
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gm-gray-300);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-indicator.active {
  background: var(--gm-teal-300);
  transform: scale(1.2);
}

/* glass_morph/organisms/auth.css */
/* ============================================================================ */

/* == Organism — Auth / OAuth =============================================== */

/* ============================================================================ */
.auth-icon-success-bg {
  background: var(--gm-green-700-overlay-15);
}

.auth-account-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gm-green-500-overlay-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.auth-account-avatar-initial {
  font-size: 24px;
  font-weight: 700;
  color: var(--gm-green-400);
  font-family: Figtree, Helvetica, sans-serif;
}

.auth-account-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--gm-white);
  font-family: Figtree, Helvetica, sans-serif;
}

.auth-section-divider {
  border-top: 1px solid var(--gm-glass-white-10);
}

.custom-btn {
  border: none;
  border-radius: 30px;
  padding: 0.5rem 2rem;
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--gm-white);
  text-align: center;
  letter-spacing: 0;
  line-height: 21px;
  cursor: pointer;
  box-shadow: 0 4px 4px var(--gm-black);
  background: linear-gradient(
    90deg,
    var(--gm-teal-500) 0%,
    var(--gm-green-600) 21%,
    var(--gm-teal-200) 50%,
    var(--gm-green-600) 100%
  );
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.custom-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 30px;
  background: linear-gradient(178deg, var(--gm-white) 0%, var(--gm-green-500) 6%);
  mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.custom-btn:hover {
  background: linear-gradient(
    90deg,
    var(--gm-green-600) 0%,
    var(--gm-teal-200) 28%,
    var(--gm-teal-200) 72%,
    var(--gm-green-600) 100%
  );
  color: var(--gm-white);
}

.custom-btn:active {
  background: var(--gm-teal-200);
  box-shadow: 0 2px 3px var(--gm-glass-black-3) inset;
  color: var(--gm-white);
}

.custom-btn:focus-visible {
  outline: 2px solid var(--gm-blue-500);
  outline-offset: 2px;
}

.btn-test-connection {
  background: var(--gm-gray-50) !important;
  color: var(--gm-gray-800) !important;
  border: 1px solid var(--gm-gray-200);
  border-radius: 10px;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-test-connection:hover {
  background: var(--gm-gray-100) !important;
  color: var(--gm-gray-800) !important;
  border-color: var(--gm-gray-300);
  transform: translateY(-1px);
  box-shadow: var(--gm-shadow-sm);
}

.btn-test-connection i {
  color: inherit !important;
}

.btn-remove-danger {
  background: var(--gm-red-50) !important;

  /* red-50 — not in palette */
  color: var(--gm-red-600) !important;
  border: 1px solid var(--gm-red-100);

  /* red-200 — not in palette */
  border-radius: 10px;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-remove-danger:hover {
  background: var(--gm-red-200) !important;

  /* red-100 — not in palette */
  color: var(--gm-red-700) !important;

  /* red-700 — not in palette */
  border-color: var(--gm-red-300);

  /* red-300 — not in palette */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--gm-red-600-overlay-15);
}

.btn-remove-danger i {
  color: inherit !important;
}

/* ─── Public Page Layout (invitation / login / public views) ─── */
.public-page-header {
  position: relative;
  z-index: 10;
  background: var(--gm-teal-900-overlay-80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gm-glass-white-10);
  padding: 20px 0;
}

/* Update container to account for header */
.public-page-container {
  min-height: calc(100vh - 80px) !important;
  padding-top: 40px;
  background-color: transparent;
  position: relative;

  /* z-index intentionally omitted: adding z-index here creates a stacking
     context that traps modal-overlay (z-index:1000) inside it, causing the
     page header (z-index:10 in root) to paint over the modal overlay. */
}

.public-page-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-page-logo-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.public-page-logo-link:hover {
  opacity: 0.8;
}

/* At 80px tall the wordmark is wider than a phone; it narrows to fit and
   object-fit keeps its proportions. */
.public-page-logo {
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* The legal footer. Signed out there is no sidebar and so no other route to a
   published legal document; this is the only one. */
.public-page-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--gm-glass-white-12);
  padding: 24px 40px 32px;
  margin-top: 48px;
}

.public-page-footer-links {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.public-page-footer-link {
  color: var(--gm-glass-white-60);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.public-page-footer-link:hover,
.public-page-footer-link:focus-visible {
  color: var(--gm-glass-white-85);
  text-decoration: underline;
}

.public-page-footer-link:focus-visible {
  outline: none;
  box-shadow: var(--gm-focus-ring-shadow);
  border-radius: 4px;
}

/* ─── Auth Layout ─── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.auth-page::before {
  background-position: center center;
  opacity: 0.15;
}

.auth-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 24px;
  z-index: 1;
}

/* The `?` on an auth screen. There is no navbar to hang it in, so it is pinned
   to the corner the navbar would have occupied. The panel positions itself
   against this wrapper exactly as it does in the app shell, and the wrapper
   sits above .auth-container (z-index 1) so the panel is never behind the
   dialog. */
.auth-help {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* The invitation page is not a form: it carries the account-user privacy
   notice beside a two-button decision, so it needs the width for two columns.
   Below 820px organisms/invitation.css stacks them again. */
.auth-container--wide {
  max-width: 900px;
}

.auth-dialog {
  position: relative;
  background: var(--gm-teal-317280-overlay-60);
  border: 1px solid var(--gm-teal-2a4d5d-overlay-50);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--gm-glass-black-30);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 32px;
}

.auth-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(179deg, var(--gm-glass-white-30) 0%, var(--gm-auth-accent-overlay-20) 100%);
  -webkit-mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--gm-white);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

/* Was an inline style on the img. It had to come out here so the split
   variant's header strip, which is shorter than a stacked one, can size it. */
.auth-logo img {
  height: 58px;
  max-width: 90%;
}

.auth-title {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--gm-glass-white-70);
  margin: 0;
}

.auth-form-group {
  margin-bottom: 20px;
}

.auth-form-group .invalid-feedback {
  margin-top: 4px;
  font-size: 13px;
}

.auth-input.is-invalid {
  border: 2px solid var(--gm-red-500);
  box-shadow: 0 0 0 2px var(--gm-red-dc3545-overlay-15);
}

.auth-input.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--gm-red-overlay-30);
}

.auth-label {
  display: block;
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--gm-white-overlay-90);
  margin-bottom: 8px;
}

.auth-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--gm-glass-white-95);
  border: none;
  border-radius: 8px;
  font-family: Figtree, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--gm-gray-700);
  transition: all 0.2s;
}

.auth-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--gm-auth-accent-overlay-30);
}

.auth-input::placeholder {
  color: var(--gm-gray-400);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--gm-glass-white-50);
  font-size: 14px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gm-glass-white-20);
}

.auth-link {
  color: var(--gm-auth-accent);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-link:hover {
  color: var(--gm-green-3fe0a4);
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gm-glass-white-10);
}

.auth-footer-text {
  font-size: 14px;
  color: var(--gm-glass-white-60);
}

.auth-back-link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gm-glass-white-70);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 16px;
  transition: color 0.2s;
  cursor: pointer;
  font-family: Figtree, Helvetica, sans-serif;
}

.auth-back-link:hover {
  color: var(--gm-white);
}

.auth-back-link i {
  font-size: 14px;
  line-height: 1;
}

.auth-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.auth-alert-info {
  background: var(--gm-auth-accent-overlay-20);
  color: var(--gm-auth-accent);
  border: 1px solid var(--gm-auth-accent-overlay-30);
}

.auth-alert-error {
  background: var(--gm-red-dc3545-overlay-20);
  color: var(--gm-red-ff6b6b);
  border: 1px solid var(--gm-red-overlay-30);
}

.auth-flash-stack {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: 400px;
  width: 100%;
}

/* Scope checkboxes to the green auth theme — the shared .checkbox atom
   defaults to --bs-primary (blue), which clashes with the green consent UI. */
.auth-dialog .checkbox {
  accent-color: var(--gm-green-500);
}

/* Checkbox labels default to --bs-body-color (dark) — unreadable on the
   dark auth background; switch to the light on-dark text token. */
.auth-dialog .checkbox-label-text {
  color: var(--gm-text-on-dark-primary);
}

/* ── The signup consent row ────────────────────────────────────────
   One line between the email field and the submit button: a checkbox, a
   sentence, and two document names that open an overlay rather than
   navigating away. Losing a half-filled signup to read a contract is the
   failure mode the overlay exists to prevent.

   The error treatment deliberately borrows the field's language — red
   border plus the shake keyframe from generic/animations.css — so somebody
   who has already seen the email error recognises this one instantly. */
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--gm-glass-white-5);
  border: 1px solid transparent;
  position: relative;
  z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-consent .checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--gm-green-600);
  cursor: pointer;
  flex-shrink: 0;
  margin: 1px 0 0;
}

.auth-consent-label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--gm-glass-white-85);
  cursor: pointer;
}

.auth-consent-label a {
  color: var(--gm-white);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--gm-glass-white-50);
  transition: text-decoration-color 0.15s ease;
}

.auth-consent-label a:hover {
  text-decoration-color: var(--gm-white);
}

/* The privacy notice sits under the consent row, not inside it: it is information,
   not something to agree to, so it reads a step quieter than the label above. */
.auth-consent-note {
  /* The note stands between the consent row and the submit button, so it owes the
     button the gap the row above used to give it. A few pixels more than
     .auth-consent's 20px, because this block ends in a text baseline rather than a
     border and the leading eats the difference. */
  margin: 10px 0 26px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--gm-glass-white-60);
}

.auth-consent-note a {
  color: var(--gm-glass-white-85);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--gm-glass-white-30);
  transition: text-decoration-color 0.15s ease;
}

.auth-consent-note a:hover {
  text-decoration-color: var(--gm-glass-white-85);
}

.auth-consent.is-invalid {
  background: var(--gm-red-overlay-10);
  border-color: var(--gm-red-500);
  animation: shake 0.3s ease;
}

.auth-consent.is-invalid .checkbox {
  accent-color: var(--gm-red-500);
  outline: 2px solid var(--gm-red-500);
  outline-offset: 2px;
}

.auth-consent-feedback {
  display: none;
  align-items: center;
  gap: 0.3rem;
  margin: -14px 0 20px;
  padding: 0 14px;
  position: relative;
  z-index: 2;
  font-size: 0.8125rem;
  color: var(--gm-red-400);
  line-height: 1.4;
}

.auth-consent-feedback.show {
  display: flex;
  animation: fadeIn 0.2s ease;
}

/* ─── Auth::Dialog, split variant ───────────────────────────────────────────
 *
 * One card, two panes: something to look at on the left, the form on the right,
 * under a header that spans both. The signup screen's intro video is what this
 * was built for — a video behind a link is not watched by the one reader it is
 * for, and above the form it pushes the form off the screen.
 *
 * Everything here is scoped to .auth-dialog--split, so the sign-in, password
 * and unlock screens are untouched by it.
 */
.auth-container:has(.auth-dialog--split) {
  max-width: 1180px;

  /* The gutter moves to the page below: a grid item's own margin is added
     outside the track it was sized against and pushes it back out. */
  margin: 0;
}

/* .auth-page centres its child with flexbox, and a centred flex item taller
   than the viewport overflows off the TOP, where no scrollbar reaches it. A
   login form never got near that; a card with a video stacked above the form
   does, on any short window. Grid centres the same way and does not: the row
   grows to the content and the page scrolls to all of it. (`align-items: safe
   center` is the narrower fix and is not honoured by every engine we ship to.)
   `1fr` here resolves to minmax(auto, 1fr): it fills the viewport while the
   content is shorter and grows to the content once it is taller. */
.auth-page:has(.auth-dialog--split) {
  display: grid;
  grid-template-rows: 1fr;
  place-items: center;
  padding: 24px;
}

/* The empty modal frame is the page's other in-flow child. Left to itself it
   takes a row of its own and half the free space, which pushes the card off
   centre; in the same cell it is the zero-height box it looks like. What
   renders into it is position: fixed, so it never overlaps anything. */
.auth-page:has(.auth-dialog--split) > * {
  grid-row: 1;
}

.auth-dialog--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
}

/* Above the panes rather than under them, so the card keeps one continuous
   border shine across the seam. */
.auth-dialog--split::before {
  z-index: 3;
}

/* ── the header strip, across both panes ── */
.auth-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 36px 20px;
  border-bottom: 1px solid var(--gm-glass-white-8);
}

.auth-top .auth-header {
  grid-column: 2;
  margin: 0;
}

.auth-top .auth-logo {
  margin-bottom: 8px;
}

.auth-top .auth-logo img {
  height: 44px;
}

/* The subtitle is the one long line in the strip; unchecked it stretches the
   header wider than the pane below it. */
.auth-top .auth-header p {
  max-width: 52ch;
  margin-inline: auto;
}

.auth-top .language-selector {
  grid-column: 3;
  justify-self: end;
}

/* ── left pane ── */

/* Both panes start at the top, not centred. Centring each in its own half
   lines nothing up: whichever pane is shorter sinks, so the first line of the
   aside and the first line of the form sit at different heights and the card
   reads as two unrelated things. */
.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 32px 36px;
  border-right: 1px solid var(--gm-glass-white-8);
  background: var(--gm-teal-800-14);
}

/* A short lit segment on the seam rather than a full rule: the border already
   separates the panes, and this says where the eye should cross it. */
.auth-aside::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--gm-auth-accent-60), transparent);
  transform: translateY(-50%);
}

.auth-aside-kicker {
  display: block;
  margin: 0 0 6px;
  color: var(--gm-auth-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-aside-title {
  margin: 0;
  color: var(--gm-white);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Held back until somebody looks at it. A bright still frame is the highest
   contrast thing on the card, and the card is a signup form — the eye should
   land on the e-mail field, not on a video the reader has not asked for. It
   comes up to full on hover, on keyboard focus, and for good once it plays. */
.auth-aside-video {
  overflow: hidden;
  margin-top: 18px;
  border-radius: var(--gm-radius-md);
  background: var(--gm-gray-900);
  box-shadow:
    0 12px 32px var(--gm-glass-black-30),
    inset 0 0 0 1px var(--gm-glass-white-8);
  line-height: 0;
  opacity: 0.62;
  filter: saturate(0.8);
  transition:
    opacity 0.2s ease-out,
    filter 0.2s ease-out;
}

.auth-aside-video:hover,
.auth-aside-video:focus-within,
.auth-aside-video--awake {
  opacity: 1;
  filter: none;
}

/* The dimming is the whole point, so it stays; only the fade to full goes. */
@media (prefers-reduced-motion: reduce) {
  .auth-aside-video {
    transition: none;
  }
}

/* What the video covers, before the reader has to decide whether to spend two
   minutes on it. */
.auth-aside-sub {
  max-width: 44ch;
  margin: 6px 0 0;
  color: var(--gm-glass-white-60);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* What else the pane can play: three across on the wide layout, one column when
   it is stacked. The titles are sentences and wrap to two or three lines at
   this width; the cards are flex columns, so they stay the same height. */
.auth-aside-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.auth-aside-more-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--gm-glass-white-10);
  border-radius: 10px;
  background: var(--gm-glass-white-5);
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.auth-aside-more-item:hover {
  border-color: var(--gm-glass-white-20);
  background: var(--gm-glass-white-10);
}

/* Which one the player is holding. Without it the pane silently swaps under a
   heading that never changes, and nothing on screen says what is playing. */
.auth-aside-more-item[aria-current="true"] {
  border-color: var(--gm-auth-accent-60);
  background: var(--gm-glass-white-10);
}

/* A real outline. `--gm-focus-ring-shadow` is documented in the design-system
   skill but defined nowhere, and an undefined custom property drops the whole
   declaration — with `outline: none` beside it that leaves no ring at all. */
.auth-aside-more-item:focus-visible {
  outline: 2px solid var(--gm-auth-accent);
  outline-offset: 2px;
}

.auth-aside-more-title {
  color: var(--gm-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.auth-aside-more-time {
  color: var(--gm-glass-white-50);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Said out loud under the video: skipping it costs nothing. */
.auth-aside-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--gm-glass-white-50);
  font-size: 12.5px;
}

.auth-aside-foot-icon {
  color: var(--gm-auth-accent);
}

/* ── right pane: the dialog's own contents, unchanged ── */
.auth-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 32px 36px;
}

/* ── the pane's heading as a button, for the stacked layout below ──
   Present in the DOM at every width and displayed at one of them. display:none
   takes the other heading out of the accessibility tree too, so nothing is
   announced twice. */
.auth-aside-toggle {
  display: none;
}

@media (width <= 900px) {
  .auth-dialog--split {
    grid-template-columns: 1fr;
  }

  .auth-top {
    padding: 18px 24px 16px;
  }

  .auth-aside {
    padding: 0 24px;
    border-right: none;
    border-bottom: 1px solid var(--gm-glass-white-8);
  }

  .auth-aside::after {
    display: none;
  }

  /* The video above the form pushes the e-mail field off the first screen, so
     the pane folds behind its own heading. It starts open: somebody who has not
     seen it is who it is for. */
  .auth-aside-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    border: none;
    background: none;
    color: var(--gm-white);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .auth-aside-toggle .auth-aside-title {
    font-size: 16px;
  }

  .auth-aside-toggle .auth-aside-chevron {
    color: var(--gm-glass-white-60);
    transition: transform 0.2s ease;
  }

  .auth-aside-toggle[aria-expanded="false"] .auth-aside-chevron {
    transform: rotate(-90deg);
  }

  .auth-aside > .auth-aside-kicker,
  .auth-aside > .auth-aside-title {
    display: none;
  }

  .auth-aside-body {
    padding-bottom: 20px;
  }

  .auth-aside-body--collapsed {
    display: none;
  }

  .auth-aside-video {
    margin-top: 0;
  }

  /* Three columns of a phone-width pane are three unreadable slivers. */
  .auth-aside-more {
    grid-template-columns: 1fr;
  }

  .auth-main {
    padding: 24px;
  }
}

/* The three-column header strip has no room for a centred block beside a
   language selector this narrow; the selector goes back above it. */
@media (width <= 560px) {
  .auth-top {
    grid-template-columns: 1fr;
  }

  .auth-top .auth-header {
    grid-column: 1;
  }

  .auth-top .language-selector {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (width <= 1024px) {
  .auth-logo img.logo-compact {
    height: 40px !important;
  }

  /* Ensure auth logo maintains good size on mobile */
  .auth-logo img.logo-responsive {
    height: 58px !important;
    max-width: 90%;
  }
}

/* glass_morph/organisms/tooltip.css */
/* ============================================================================ */
/* == Organism — Tooltip ==================================================== */
/* ============================================================================ */
/* Tooltip container */
/* Info Icon with Tooltip */
.info-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--gm-teal-200);
  color: var(--gm-teal-200);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  transition: all 0.2s ease;
}

.info-icon:hover {
  background: var(--gm-teal-200);
  color: var(--gm-white);
  transform: scale(1.1);
}

/* Global tooltip rendered via Stimulus tooltip_controller (appended to body) */
.gm-tooltip {
  position: absolute;
  background: var(--gm-gray-900);
  color: var(--gm-white);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  box-shadow: 0 4px 12px var(--gm-glass-black-25);
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.gm-tooltip-message {
  display: block;
}

.gm-tooltip-message--muted {
  color: var(--gm-gray-400);
}

/* -- Rich tooltip ----------------------------------------------------------- */

/* A tooltip about one thing: an eyebrow saying what state it is in, the thing
   itself as the title, the explanation, and a footer naming what a click does.
   tooltip_controller overwrites the wrapper's classes when it moves the clone
   into <body>, so the shell is widened through :has() on the title. 320px is
   the popover width; the default 260px wraps a task title onto three lines. */
.gm-tooltip:has(.gm-tooltip-title) {
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 12px;
  border-radius: 10px;
}

.gm-tooltip-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-glass-white-60);
}

.gm-tooltip-eyebrow--warning,
.gm-tooltip-footer--warning {
  color: var(--gm-amber-200);
}

.gm-tooltip-title {
  display: block;
  margin: 2px 0 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gm-white);
}

.gm-tooltip-title + .gm-tooltip-message,
.gm-overrun-bar + .gm-tooltip-message {
  margin-top: 12px;
}

.gm-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gm-glass-white-8);
  font-weight: 600;
}

.gm-tooltip-links {
  margin: 6px 0 0;
  padding-left: 1.1em;
  list-style: disc;
}

.gm-tooltip-links li + li {
  margin-top: 2px;
}

/* Why this criterion is on the list. Quieter than the link beside it — the
   link is what the user acts on, the cause only tells them what to expect. */
.gm-tooltip-cause {
  color: var(--gm-glass-white-70);
}

/* The Link atom carries Bootstrap's .text-decoration-none, and Bootstrap writes
   its utilities with !important — so nothing short of !important puts the
   underline back, and a link nobody can tell is a link is not a link. */
.gm-tooltip--interactive .gm-tooltip-link {
  color: var(--gm-white);
  text-decoration: underline !important;
}

/* An interactive tooltip carries links, so it has to accept the pointer. The
   plain tooltip stays click-through so it can never swallow a hover.

   It also sizes itself to its longest line — the base rule already sets
   width: max-content, so all this does is lift the cap out of the way and hand
   it to the viewport instead. A criterion name and its cause read badly split
   across two lines, and how long that line is depends on the criterion, the
   locale and the cause, none of which a fixed width can know. */
.gm-tooltip--interactive {
  pointer-events: auto;
  max-width: min(560px, calc(100vw - 32px));
}

/* glass_morph/organisms/sticky_admin_bar.css */
/* ============================================================================ */
/* == Organism — StickyAdminBar =============================================== */
/* ============================================================================ */
/* Sticky admin bar (StickyAdminBar): impersonating a user (red) or switched
   into another account (blue) */
.sticky-admin-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  color: var(--gm-white);
  padding: 8px 0;
  z-index: 1060;
  box-shadow: 0 4px 6px -1px var(--gm-glass-black-10);
}

.sticky-admin-bar-inner {
  /* Align content with the below-menu banner stack: sidebar (300) + main-content
     padding (24) + #global-banners padding (24) = 348px; right inset 48px. */
  margin-left: 348px;
  margin-right: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sticky-admin-bar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.sticky-admin-bar--red {
  background: var(--gm-red-600);
}

.sticky-admin-bar--red .sticky-admin-bar-avatar {
  background: var(--gm-red-700);
}

.sticky-admin-bar--red .sticky-admin-bar-detail {
  color: var(--gm-red-100);
}

.sticky-admin-bar--blue {
  background: var(--gm-blue-600);
}

.sticky-admin-bar--blue .sticky-admin-bar-avatar {
  background: var(--gm-blue-800);
}

.sticky-admin-bar--blue .sticky-admin-bar-detail {
  color: var(--gm-blue-200);
}

/* glass_morph/organisms/error_notification.css */
/* ============================================================================ */
/* == Organism — Error notification (global page errors) ====================== */
/* ============================================================================ */
/* Error notification (global page-level errors) */
.error-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 400px;
  z-index: 10000;
  animation: slideInUp 0.3s ease-out;
}

.error-notification-hiding {
  animation: slideOutDown 0.3s ease-in;
}

.error-notification-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background: var(--gm-white);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--gm-glass-black-15);
}

.error-notification-icon {
  flex-shrink: 0;
  margin-right: 12px;
  color: var(--gm-red-600);
}

.error-notification-body {
  flex: 1;
  min-width: 0;
}

.error-notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-gray-800);
  margin-bottom: 4px;
}

.error-notification-message {
  font-size: 13px;
  color: var(--gm-gray-500);
  line-height: 1.5;
}

.error-notification-code {
  font-size: 11px;
  color: var(--gm-gray-400);
  margin-top: 4px;
  font-family: "Courier New", monospace;
}

.error-notification-close {
  flex-shrink: 0;
  margin-left: 12px;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--gm-gray-500);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.error-notification-close:hover {
  background: var(--gm-gray-100);
  color: var(--gm-gray-800);
}

/* glass_morph/organisms/subscription_overlay.css */
/* ============================================================================ */
/* == Organism — SubscriptionExpiredOverlay =================================== */
/* ============================================================================ */
.subscription-overlay-wrapper {
  position: relative;
  min-height: 100%;
}

.subscription-overlay-blurred {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  opacity: 0.45;
}

.subscription-overlay-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gm-glass-black-55);
  z-index: 900;
}

.subscription-dialog {
  background: var(--gm-teal-900-overlay-92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gm-teal-200-overlay-30);
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow:
    0 25px 50px var(--gm-glass-black-30),
    0 0 0 1px var(--gm-glass-white-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.subscription-dialog-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gm-teal-overlay-15);
  border-radius: 50%;
  font-size: 28px;
  color: var(--gm-teal-500);
  border: 1px solid var(--gm-teal-overlay-20);
}

.subscription-dialog-title {
  color: var(--gm-white) !important;
  margin: 0;
}

/* glass_morph/organisms/markdown_preview.css */
/* ============================================================================ */
/* == Organism — Markdown preview field (call script) ======================== */
/* ============================================================================ */
/* ── Markdown Preview Field (phone call script) ─────────────────────────── */
.markdown-preview-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.markdown-tab-toggle {
  display: flex;
  gap: 2px;
  background: var(--gm-glass-black-5);
  border-radius: var(--gm-radius-sm);
  padding: 2px;
}

.markdown-tab-btn {
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  border-radius: calc(var(--gm-radius-sm) - 2px);
  background: transparent;
  color: var(--gm-gray-500);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.6;
}

.markdown-tab-btn:hover {
  color: var(--gm-gray-700);
  background: var(--gm-glass-white-10);
}

.markdown-tab-btn.active {
  background: var(--gm-white);
  color: var(--gm-gray-800);
  box-shadow: 0 1px 2px var(--gm-glass-black-8);
}

.md-script-preview {
  border: 1px solid var(--gm-gray-200);
  border-radius: var(--gm-radius-sm);
  padding: 12px 16px;
  background: var(--gm-white);
  overflow-y: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gm-gray-700);
}

.md-script-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 160px;
  color: var(--gm-gray-400);
  text-align: center;
  padding: 24px;
}

/* Rendered markdown typography inside the preview pane */
.md-script-preview h3,
.md-script-preview h4,
.md-script-preview h5 {
  margin: 1rem 0 0.25rem;
  font-weight: 600;
  color: var(--gm-gray-800);
  border-bottom: 1px solid var(--gm-gray-100);
  padding-bottom: 0.2rem;
}
.md-script-preview h3 { font-size: 0.95rem; }
.md-script-preview h4 { font-size: 0.875rem; }

.md-script-preview h5 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.md-script-preview p { margin: 0.4rem 0; }

.md-script-preview ul {
  margin: 0.4rem 0 0.4rem 1.2rem;
  padding: 0;
}
.md-script-preview li { margin-bottom: 0.2rem; }

.md-script-preview blockquote {
  margin: 0.5rem 0;
  padding: 6px 12px;
  border-left: 3px solid var(--gm-teal-300);
  background: var(--gm-glass-black-3);
  border-radius: 0 var(--gm-radius-sm) var(--gm-radius-sm) 0;
  color: var(--gm-gray-600);
  font-style: italic;
}

.md-script-preview hr {
  border: none;
  border-top: 1px solid var(--gm-gray-200);
  margin: 0.75rem 0;
}

.md-script-preview strong {
  font-weight: 600;
  color: var(--gm-gray-800);
}
.md-script-preview em     { font-style: italic; }

.md-script-preview h3:first-child,
.md-script-preview h4:first-child,
.md-script-preview p:first-child {
  margin-top: 0;
}

/* glass_morph/organisms/gdpr_compliance.css */
/* ============================================================================ */
/* == Organism — GdprCompliance ============================================= */
/* ============================================================================ */

/* Retention pie chart */
.gm-gdpr-pie {
  padding: 1rem 0;
}

.gm-gdpr-pie-svg {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

.gm-gdpr-pie-slice--active {
  fill: var(--gm-status-success);
}

.gm-gdpr-pie-slice--expiring_soon {
  fill: var(--gm-status-warning);
}

.gm-gdpr-pie-slice--grace_period {
  fill: var(--gm-status-danger);
}

.gm-gdpr-pie-slice--anonymized {
  fill: var(--gm-gray-400);
}

.gm-gdpr-pie-slice--deleted {
  fill: var(--gm-gray-200);
}

.gm-gdpr-pie-legend {
  padding-left: 0.5rem;
}

.gdpr-retention-stats .gdpr-retention-stat-card:hover {
  transform: none;
}

.gdpr-retention-stats .gdpr-retention-stat-card.tile-light:hover {
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
}

.gdpr-suppression-stat-card:hover {
  transform: none;
}

.gdpr-suppression-stat-card.tile-light:hover {
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
}

.gdpr-audit-stats .gdpr-audit-stat-card:hover {
  transform: none;
}

.gdpr-audit-stats .gdpr-audit-stat-card.tile-light:hover {
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
}

.gdpr-audit-breakdown-column {
  display: flex;
}

.gdpr-audit-breakdown-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gdpr-audit-breakdown-section .content-section-body {
  display: flex;
  flex: 1;
}

.gdpr-audit-breakdown-card {
  flex: 1;
  width: 100%;
}

.gdpr-audit-events-table .gdpr-audit-events-cell {
  font-size: 0.875rem;
  padding-top: 12px;
  padding-bottom: 12px;
}

.gdpr-audit-events-table .gm-badge {
  font-size: 0.875rem;
}

.gm-gdpr-chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.gm-gdpr-chart-swatch--active {
  background: var(--gm-status-success);
}

.gm-gdpr-chart-swatch--expiring_soon {
  background: var(--gm-status-warning);
}

.gm-gdpr-chart-swatch--grace_period {
  background: var(--gm-status-danger);
}

.gm-gdpr-chart-swatch--anonymized {
  background: var(--gm-gray-400);
}

.gm-gdpr-chart-swatch--deleted {
  background: var(--gm-gray-200);
}

/* glass_morph/organisms/configuration_card.css */
/* ============================================================================ */
/* == Organism — ConfigurationCard ========================================== */
/* ============================================================================ */
.configuration-card {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--gm-gray-100);
  background: var(--gm-white);
  box-shadow: 0 1px 3px var(--gm-glass-black-2);
  transition:
    box-shadow 0.3s ease,
    transform 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.configuration-card a[aria-label] {
  text-decoration: none;
}

.configuration-card .action-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
}

a.configuration-card-clickable {
  cursor: pointer;
  color: inherit;
}

a.configuration-card-clickable:hover {
  box-shadow: 0 4px 12px var(--gm-glass-black-6);
  transform: translateY(-2px);
}

.config-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 16px;
  position: relative;
  z-index: 0;
}

.config-card-title {
  color: var(--gm-gray-800);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.config-card-description {
  color: var(--gm-gray-500);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.config-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.config-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* List group active state override for settings nav */
.list-group-item.active {
  background-color: var(--gm-teal-200-overlay-10);
}

/* Hooks section */
.hooks-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* glass_morph/organisms/keys_page.css */
/* ============================================================================ */
/* == Organism — KeysPage (API Keys Settings) =============================== */
/* ============================================================================ */
.kp-code-box {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--gm-gray-700);
  word-break: break-all;
}

.kp-token-success {
  background: var(--gm-green-50);
  border: 1px solid var(--gm-green-300);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.kp-token-success-title {
  color: var(--gm-green-900);
}

.kp-token-success-warning {
  color: var(--gm-green-700);
}

.kp-limit-text {
  color: var(--gm-amber-800);
}

.kp-token-item {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.kp-upgrade-card {
  background: var(--gm-gray-50);
  border-radius: 12px;
  padding: 2rem;
  border: 1px dashed var(--gm-gray-300);
  text-align: center;
}

.kp-input {
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  border: 1px solid var(--gm-gray-200);
  background: var(--gm-white);
  color: var(--gm-gray-700);
  outline: none;
  flex: 1;
  min-width: 200px;
}

.kp-no-tokens-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gm-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.kp-upgrade-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gm-blue-overlay-8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.kp-limit-reached {
  background: var(--gm-amber-50);
  border: 1px solid var(--gm-yellow-500);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

/* glass_morph/organisms/value_dashboard.css */
/* ============================================================================ */
/* == Organism — ValueDashboard ============================================= */
/* ============================================================================ */
.value-dashboard, .dashboard {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 0 32px;
}

/* Hero header */
.value-hero {
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
  border-radius: 16px;
  padding: 14px 24px 24px;
  color: var(--gm-white);
  position: relative;
  overflow: hidden;
}

.value-hero > .d-flex.flex-row.gap-md.justify-between.align-center {
  align-items: flex-start;
}

.value-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--gm-glass-white-8) 0%, transparent 70%);
  pointer-events: none;
}

.value-hero .hero-title {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--gm-white);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 4px;
}

.value-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.value-hero-stats {
  display: flex;
  align-items: stretch;
  background: var(--gm-glass-black-15);
  border-radius: 12px;
  padding: 20px 0;
  margin-top: 24px;
}

.value-hero-stat {
  flex: 1;
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--gm-glass-white-15);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-hero-stat:last-child {
  border-right: none;
}

.value-hero-stat-value {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--gm-white);
  line-height: 1.1;
}

.value-hero-stat-label {
  display: block;
  font-size: 12px;
  color: var(--gm-glass-white-60);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 2×2 Pillar grid */
.value-pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Bottom sections — milestones & baselines */
.value-section {
  background: var(--gm-teal-e5ecef);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--gm-glass-black-2);
}

.value-section-content {
  padding: 24px;
}

/* Milestone items */
.value-milestone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--gm-white);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.value-milestone-item:hover {
  background: var(--gm-gray-50);
}

.value-milestone-item + .value-milestone-item {
  margin-top: 8px;
}

.value-milestone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gm-green-50);
  color: var(--gm-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.value-milestone-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-gray-800);
}

.value-milestone-date {
  font-size: 12px;
  color: var(--gm-gray-500);
  margin-left: auto;
  flex-shrink: 0;
}

/* Pending milestone label */
.value-milestones-pending-label {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 16px 0 8px;
}

/* Pending (locked) milestone items */
.value-milestone-item--pending {
  opacity: 0.55;
}

.value-milestone-item--pending:hover {
  opacity: 0.75;
  background: transparent;
}

.value-milestone-icon--pending {
  background: var(--gm-gray-100);
  color: var(--gm-gray-400);
}

.value-milestone-description {
  font-size: 12px;
  color: var(--gm-gray-500);
}

/* Baselines form */
.value-baselines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (width <= 768px) {
  .value-hero {
    padding: 12px 16px 16px;
  }

  .value-pillar-grid {
    grid-template-columns: 1fr;
  }

  .value-hero-stats {
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
  }

  .value-hero-stat {
    flex: 0 0 calc(50% - 8px);
    border-right: none;
    padding: 8px 0;
  }

  .value-baselines-grid {
    grid-template-columns: 1fr;
  }
}

/* glass_morph/organisms/industry_select.css */
/* ============================================================================ */
/* == Organism — IndustrySelect ============================================= */
/* ============================================================================ */
/* Monitors Container - Mirror prospects structure */
/* Scrollbar Styles for Monitors */
/* Dark mode select options */
/* Placeholder text styling for industry select input */
/* Industry badges container - wrapping support */
/* Individual industry badge styling */
.industry-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0.5rem 0.5rem 0;
  border-radius: 30px;
  background: var(--gm-teal-200);
  color: var(--gm-white);
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 500;
}

.industry-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.industry-badge-remove {
  transition: all 0.2s ease;
}

.industry-badge-remove:hover {
  opacity: 1 !important;
  background-color: var(--gm-glass-white-20) !important;
  transform: scale(1.1);
}

/* Container */
.industry-checkbox-select {
  position: relative;
}

/* Error state for container */
.industry-checkbox-select.is-invalid .form-label,
.region-checkbox-select.is-invalid .form-label {
  color: var(--gm-red-500);
}

/* Checkbox list container */
.industry-checkbox-list,
.region-checkbox-list {
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  background: var(--gm-white);
  overflow-y: auto;
}

/* Error state for checkbox list */
.industry-checkbox-select.is-invalid .industry-checkbox-list,
.region-checkbox-select.is-invalid .region-checkbox-list {
  border-color: var(--gm-red-500) !important;
  box-shadow: 0 0 0 3px var(--gm-status-danger-bg) !important;
}

/* Error state for search input wrapper */
.industry-checkbox-select.is-invalid .industry-search-wrapper input,
.region-checkbox-select.is-invalid .region-search-wrapper input {
  border-color: var(--gm-red-500) !important;
}

.industry-checkbox-select.is-invalid .industry-search-wrapper input:focus,
.region-checkbox-select.is-invalid .region-search-wrapper input:focus {
  border-color: var(--gm-red-500) !important;
  box-shadow: 0 0 0 3px var(--gm-red-overlay-15) !important;
}

/* Custom scrollbar */
.industry-checkbox-list::-webkit-scrollbar,
.region-checkbox-list::-webkit-scrollbar {
  width: 6px;
}

.industry-checkbox-list::-webkit-scrollbar-track,
.region-checkbox-list::-webkit-scrollbar-track {
  background: transparent;
}

.industry-checkbox-list::-webkit-scrollbar-thumb,
.region-checkbox-list::-webkit-scrollbar-thumb {
  background: var(--gm-teal-200-overlay-30);
  border-radius: 3px;
}

.industry-checkbox-list::-webkit-scrollbar-thumb:hover,
.region-checkbox-list::-webkit-scrollbar-thumb:hover {
  background: var(--gm-teal-200-overlay-50);
}

/* Selected section - highlighted at top */
.industry-selected-section,
.region-selected-section {
  background: linear-gradient(135deg, var(--gm-teal-200-overlay-8) 0%, var(--gm-teal-200-overlay-4) 100%);
  border-bottom: 2px solid var(--gm-teal-346f81-overlay-20);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* Available section */
.industry-available-section,
.region-available-section {
  padding: 4px 0;
}

/* Section headers (Selected / Available) */
.industry-section-header,
.region-section-header {
  padding: 10px 12px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gm-teal-200);
  display: flex;
  align-items: center;
  gap: 6px;
}

.industry-count,
.region-count {
  font-weight: 500;
  color: var(--gm-teal-200-overlay-70);
}

/* Section group (A - Agriculture, etc.) */
.industry-section-group,
.region-section-group {
  margin-top: 4px;
}

.region-group-header {
  padding: 8px 12px 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gm-gray-700);
  background: var(--gm-gray-50);
  border-top: 1px solid var(--gm-gray-100);
  border-bottom: 1px solid var(--gm-gray-100);
}

/* Division group */
.industry-division-group,
.region-division-group {
  margin-left: 8px;
}

.region-division-header {
  padding: 6px 12px 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gm-gray-500);
}

/* Countries within division groups (indent under subregion) */
.industry-division-group > .industry-checkbox-item:not(.is-region, .is-continent),
.region-division-group > .region-checkbox-item:not(.is-region, .is-continent) {
  margin-left: 16px;
}

/* Individual checkbox item */
.industry-checkbox-item,
.region-checkbox-item {
  padding: 4px 12px;
  margin: 0 4px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.industry-checkbox-item:hover,
.region-checkbox-item:hover {
  background-color: var(--gm-teal-200-overlay-6);
}

.industry-checkbox-item.selected,
.region-checkbox-item.selected {
  background-color: var(--gm-teal-346f81-overlay-10);
}

.industry-checkbox-item.disabled,
.region-checkbox-item.disabled {
  opacity: 0.58;
}

/* Checkbox label (wraps entire row) */
.industry-checkbox-label,
.region-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
  padding: 6px 0;
}

.industry-checkbox-item.disabled .industry-checkbox-label,
.region-checkbox-item.disabled .region-checkbox-label,
.industry-checkbox-item.disabled .industry-checkbox-text,
.region-checkbox-item.disabled .region-checkbox-text {
  cursor: not-allowed;
}

/* "No tender register" marker — cloned (from the hidden <template>) onto the
   selected rows the server flags, sitting just after the country/region name. */
.region-uncovered-marker-template {
  display: none;
}

.region-uncovered-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gm-amber-800);
  white-space: nowrap;
}

/* gm-icon-* glyphs render on ::before, so color both the element and the glyph
   (and outweigh the icon base rule) to keep the warning triangle yellow. */
.region-uncovered-marker .region-uncovered-marker-icon,
.region-uncovered-marker .region-uncovered-marker-icon::before {
  color: var(--gm-yellow-500);
}

/* Only ever on selected rows — never in the available list. */
.region-available-section .region-uncovered-marker {
  display: none;
}

/* Checkbox input styling */
.industry-checkbox-input,
.region-checkbox-input {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--gm-gray-300);
  border-radius: 4px;
  background: var(--gm-white);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-checkbox-input:hover,
.region-checkbox-input:hover {
  border-color: var(--gm-teal-200);
}

.industry-checkbox-item.disabled .industry-checkbox-input,
.region-checkbox-item.disabled .region-checkbox-input {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-300);
  cursor: not-allowed;
}

.industry-checkbox-item.disabled .industry-checkbox-input:hover,
.region-checkbox-item.disabled .region-checkbox-input:hover {
  border-color: var(--gm-gray-300);
}

.industry-checkbox-input:checked,
.region-checkbox-input:checked {
  background: var(--gm-teal-200);
  border-color: var(--gm-teal-200);
}

.industry-checkbox-input:checked::after,
.region-checkbox-input:checked::after,
.industry-agnostic-checkbox:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: solid var(--gm-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

/* Radio button variant (single selection) */
.industry-checkbox-input[type="radio"],
.region-checkbox-input[type="radio"] {
  border-radius: 50%;
}

.industry-checkbox-input[type="radio"]:checked::after,
.region-checkbox-input[type="radio"]:checked::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gm-white);
  border: none;
  transform: none;
  margin: 0;
}

/* Industry name text */
.industry-checkbox-text,
.region-checkbox-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--gm-gray-900);
  line-height: 1.4;
}

/* Label row — label + agnostic toggle side-by-side, no extra vertical space */
.industry-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.industry-label-row .form-label {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Compact toggle when inline with label — strip the box */
.industry-label-row .industry-agnostic-toggle {
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* Hide descriptive hint when toggle is inline — no room */
.industry-label-row .industry-agnostic-hint {
  display: none;
}

/* All-industries agnostic toggle */
.industry-agnostic-toggle {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--gm-teal-200-overlay-6) 0%, var(--gm-teal-200-overlay-3) 100%);
  border: 1px solid var(--gm-teal-346f81-overlay-20);
  border-radius: 8px;
}

.industry-agnostic-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

.industry-agnostic-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  border: 2px solid var(--gm-gray-300);
  border-radius: 4px;
  background: var(--gm-white);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-agnostic-checkbox:hover {
  border-color: var(--gm-teal-200);
}

.industry-agnostic-checkbox:checked {
  background: var(--gm-teal-200);
  border-color: var(--gm-teal-200);
}

.industry-agnostic-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.industry-agnostic-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gm-gray-900);
  line-height: 1.3;
}

.industry-agnostic-hint {
  font-size: 0.78rem;
  color: var(--gm-gray-500);
  line-height: 1.4;
}

/* Section header row — visually distinct parent above its divisions */
.industry-checkbox-item.is-section-header {
  background-color: var(--gm-gray-50);
  border-top: 1px solid var(--gm-gray-100);
  margin-top: 6px;
}

.industry-checkbox-item.is-section-header:hover {
  background-color: var(--gm-teal-200-overlay-8);
}

.industry-checkbox-item.is-section-header .industry-checkbox-text {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gm-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.industry-checkbox-item.is-section-header .industry-checkbox-code {
  font-weight: 700;
  background: var(--gm-teal-200);
  color: var(--gm-white);
  border-radius: 4px;
}

/* Division list — indented block of divisions under a section header */
.industry-division-list {
  padding-left: 8px;
  border-left: 2px solid var(--gm-gray-100);
  margin-left: 22px;
  margin-bottom: 4px;
}

/* Industry code */
.industry-checkbox-code {
  font-size: 0.75rem;
  color: var(--gm-gray-400);
  font-family: monospace;
  padding: 2px 6px;
  background: var(--gm-gray-100);
  border-radius: 4px;
}

/* Region item styling (make subregions slightly more prominent) */
.industry-checkbox-item.is-region,
.region-checkbox-item.is-region {
  background-color: var(--gm-teal-200-overlay-4);
  margin-top: 4px;
  margin-bottom: 2px;
}

.industry-checkbox-item.is-region:hover,
.region-checkbox-item.is-region:hover {
  background-color: var(--gm-teal-346f81-overlay-10);
}

/* Continental region item styling (more prominent than subregions) */
.industry-checkbox-item.is-continent,
.region-checkbox-item.is-continent {
  background-color: var(--gm-teal-200-overlay-8);
  margin-top: 8px;
  margin-bottom: 4px;
  border-left: 3px solid var(--gm-teal-200);
  padding-left: 9px;
}

.industry-checkbox-item.is-continent:hover,
.region-checkbox-item.is-continent:hover {
  background-color: var(--gm-teal-346f81-overlay-15);
}

/* Industry/Region search input styling */
.industry-search-wrapper,
.region-search-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.industry-search-wrapper input,
.region-search-wrapper input {
  width: 100%;
  background: var(--gm-teal-33616f-overlay-7);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  color: var(--gm-gray-900);
  font-size: 14px;
  font-family: Figtree, sans-serif;
  padding: 8px 32px;
  transition: all 0.2s ease;
}

/* Input size: :sm sets padding through .input.input-sm, which outranks the
   rule above and pulls the text under the search icon and the clear button. */
.industry-search-wrapper .input.input-sm,
.region-search-wrapper .input.input-sm {
  padding-inline: 32px;
}

.industry-search-wrapper input:focus,
.region-search-wrapper input:focus {
  outline: none;
  border-color: var(--gm-teal-200);
  box-shadow: 0 0 0 3px var(--gm-teal-346f81-overlay-15);
}

.industry-search-wrapper input::placeholder,
.region-search-wrapper input::placeholder {
  color: var(--gm-gray-400);
}

/* Search icon */
.industry-search-icon,
.region-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gm-gray-400);
  pointer-events: none;
  z-index: 1;
}

/* Clear button */
.industry-search-clear,
.region-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--gm-gray-400);
  display: none;
  z-index: 1;
  border-radius: 4px;
  line-height: 0;
}

.industry-search-clear:hover,
.region-search-clear:hover {
  color: var(--gm-gray-700);
  background: var(--gm-glass-black-5);
}

/* Show clear button when input has value */
.industry-search-wrapper.has-value .industry-search-clear,
.region-search-wrapper.has-value .region-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-search-wrapper.has-value .industry-search-icon,
.region-search-wrapper.has-value .region-search-icon {
  display: none;
}

/* glass_morph/organisms/dashboard.css */
/* ============================================================================ */
/* == Organism — Dashboard Layout ============================================ */
/* ============================================================================ */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;

  /* Equal height for task/activity sections */
}

.dashboard-prospect-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.ready-to-reach-out-list {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}

.ready-to-reach-out-list__header,
.ready-to-reach-out-list__grid,
.recent-prospects-list__header,
.recent-prospects-list__grid {
  grid-template-columns: minmax(250px, 1.65fr) minmax(84px, 0.42fr) minmax(120px, 0.62fr) 64px minmax(90px, 0.8fr) 86px;
  gap: 12px;
}

.ready-to-reach-out-list__header,
.ready-to-reach-out-list__grid {
  grid-template-columns: minmax(250px, 1.65fr) minmax(84px, 0.42fr) minmax(120px, 0.62fr) 64px minmax(90px, 0.8fr) 120px;
}

.dashboard-prospect-tiles .ready-to-reach-out-list__header,
.dashboard-prospect-tiles .ready-to-reach-out-list__grid {
  grid-template-columns: minmax(190px, 1.5fr) 84px 116px minmax(102px, 0.75fr) 76px 56px;
}

.dashboard-prospect-tiles .recent-prospects-list__header,
.dashboard-prospect-tiles .recent-prospects-list__grid {
  grid-template-columns: minmax(0, 1fr) 84px 86px;
}

.ready-to-reach-out-list__header {
  border-radius: 10px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--gm-slate-500);
}

.ready-to-reach-out-list__row.data-row:hover {
  background: var(--gm-slate-100);
  border-color: var(--gm-teal-dbe7eb);
  box-shadow: none;
}

.ready-to-reach-out-list__grid > * {
  align-self: center;
}

.ready-to-reach-out-list__header .list-header__label--company,
.ready-to-reach-out-list__grid .ready-to-reach-out-list__cell--company {
  grid-column: 1;
}

.ready-to-reach-out-list__header .list-header__label--score,
.ready-to-reach-out-list__grid .score-momentum-cell {
  grid-column: 2;
}

.ready-to-reach-out-list__header .ready-to-reach-out-list__label--lead-score,
.ready-to-reach-out-list__grid .ready-to-reach-out-list__cell--lead-score {
  grid-column: 3;
  padding-left: 14px;
}

.ready-to-reach-out-list__header .ready-to-reach-out-list__label--update,
.ready-to-reach-out-list__grid .ready-to-reach-out-list__time {
  grid-column: 4;
  justify-self: start;
  text-align: left;
}

.ready-to-reach-out-list__header .list-header__label--description,
.ready-to-reach-out-list__grid .ready-to-reach-out-list__info {
  grid-column: 5;
}

.ready-to-reach-out-list__header .list-header__label--actions,
.ready-to-reach-out-list__grid .ready-to-reach-out-list__source {
  grid-column: 6;
}

.dashboard-prospect-tiles .ready-to-reach-out-list__header .list-header__label--description,
.dashboard-prospect-tiles .ready-to-reach-out-list__grid > .ready-to-reach-out-list__info {
  display: none;
}

.dashboard-prospect-tiles .ready-to-reach-out-list__header .list-header__label--actions,
.dashboard-prospect-tiles .ready-to-reach-out-list__grid > .ready-to-reach-out-list__source {
  grid-column: 5;
}

.dashboard-prospect-tiles .ready-to-reach-out-list__header .ready-to-reach-out-list__label--snooze,
.dashboard-prospect-tiles .ready-to-reach-out-list__grid > .ready-to-reach-out-list__snooze {
  grid-column: 6;
}

/* Center the Source/Snooze headers over their cells (badge / clock) so each
   title sits directly above the element it labels. */
.dashboard-prospect-tiles .ready-to-reach-out-list__header .list-header__label--actions,
.dashboard-prospect-tiles .ready-to-reach-out-list__grid > .ready-to-reach-out-list__source,
.dashboard-prospect-tiles .ready-to-reach-out-list__header .ready-to-reach-out-list__label--snooze,
.dashboard-prospect-tiles .ready-to-reach-out-list__grid > .ready-to-reach-out-list__snooze {
  justify-self: center;
  text-align: center;
}

.dashboard-prospect-tiles .recent-prospects-list__header .list-header__label--description {
  display: none;
}

.dashboard-prospect-tiles .recent-prospects-list__header .list-header__label--actions,
.dashboard-prospect-tiles .recent-prospects-list__grid .ready-to-reach-out-list__source {
  grid-column: 3;
  justify-self: center;
  text-align: center;
}

.ready-to-reach-out-list__cell {
  min-width: 0;
}

.ready-to-reach-out-list__cell--lead-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ready-to-reach-out-list__cell--lead-score.buyer-readiness--hot .gm-badge {
  background: var(--gm-red-500);
}

.ready-to-reach-out-list__cell--lead-score.buyer-readiness--hot .momentum-rising,
.ready-to-reach-out-list__cell--lead-score.buyer-readiness--hot .momentum-falling {
  color: var(--gm-red-500);
}

.ready-to-reach-out-list__cell--lead-score.buyer-readiness--warm .gm-badge {
  background: var(--gm-yellow-500);
}

.ready-to-reach-out-list__cell--lead-score.buyer-readiness--warm .momentum-rising,
.ready-to-reach-out-list__cell--lead-score.buyer-readiness--warm .momentum-falling {
  color: var(--gm-yellow-500);
}

.ready-to-reach-out-list__cell--lead-score.buyer-readiness--cool .momentum-rising,
.ready-to-reach-out-list__cell--lead-score.buyer-readiness--cool .momentum-falling,
.ready-to-reach-out-list__cell--lead-score.buyer-readiness--cold .momentum-rising,
.ready-to-reach-out-list__cell--lead-score.buyer-readiness--cold .momentum-falling {
  color: var(--gm-slate-500);
}

.ready-to-reach-out-list__cell--company {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The aged-task pill sits on a second line under the name. Beside it, the
   company column (about 250px) left the name a few letters, and the row grid's
   `justify-items: start` let the cell grow to its content width and push the
   pill into the match score column. `stretch` holds the cell to its column,
   and `.data-row-grid .row-title`'s 240px minimum and 30px right margin are
   dropped so a long name truncates at the column edge. */

.ready-to-reach-out-list__cell--company:has(.gm-aged-task-flag) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  justify-self: stretch;
}

.ready-to-reach-out-list__cell--company:has(.gm-aged-task-flag) > .row-avatar {
  grid-row: 1 / span 2;
}

.ready-to-reach-out-list__cell--company:has(.gm-aged-task-flag) .ready-to-reach-out-list__title {
  align-self: end;
  min-width: 0;
  margin-right: 0;
}

.ready-to-reach-out-list__cell--company .gm-aged-task-flag {
  place-self: start;
}

.dashboard-prospect-tiles .score-momentum-cell--poor .score-nr-poor {
  background: var(--gm-score-poor);
}

.dashboard-prospect-tiles .score-momentum-cell--poor .momentum-rising,
.dashboard-prospect-tiles .score-momentum-cell--poor .momentum-falling {
  color: var(--gm-score-poor);
}

.dashboard-prospect-tiles .score-momentum-cell--low .score-nr-low {
  background: var(--gm-score-low);
}

.dashboard-prospect-tiles .score-momentum-cell--low .momentum-rising,
.dashboard-prospect-tiles .score-momentum-cell--low .momentum-falling {
  color: var(--gm-score-low);
}

.recent-prospects-list__cell--company {
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-right: 20px;
}

.recent-prospects-list__company-content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.recent-prospects-list__title,
.recent-prospects-list__info {
  display: block;
  width: 100%;
  max-width: 100%;
}

.ready-to-reach-out-list__title,
.ready-to-reach-out-list__info,
.ready-to-reach-out-list__time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ready-to-reach-out-list__info {
  color: var(--gm-gray-700);
}

.recent-prospects-list__info {
  display: block;
  line-height: 1.35;
  max-height: 2.7em;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
}

.ready-to-reach-out-list__title,
.ready-to-reach-out-list__time {
  color: var(--gm-gray-900) !important;
}

.ready-to-reach-out-list__lead-score-badge .gm-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ready-to-reach-out-list__source .gm-badge {
  max-width: 100%;
  padding-inline: 10px;
}

.ready-to-reach-out-list__snooze .task-action-btn {
  color: var(--gm-slate-500);
}

.ready-to-reach-out-list__snooze .task-action-btn:hover {
  /* Distinct button rectangle: the row itself hovers to slate-100, so the
     snooze button needs a darker gray-200 background to stand out. */
  background: var(--gm-gray-200);
  color: var(--gm-slate-800);
}

.ready-to-reach-out-list__grid .score-momentum-cell {
  justify-self: start;
}

.recent-prospects-list__tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recent-prospects-list__tags .gm-badge {
  max-width: 100%;
}

.recent-prospects-list__update-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-gray-600);
  font-size: 0.78rem;
  font-weight: 500;
}

/* "Klaar om contact op te nemen" grows past 620px to show up to six rows. The
   recent-prospects tile beside it takes the grid row's height instead of its
   content's (`contain: size`), keeps 620px as its floor, and scrolls inside. */
.dashboard-prospect-tiles .recent-prospects-tile {
  contain: size;
  max-height: none;
}

.dashboard-prospect-tiles .recent-prospects-tile > .content-section-body {
  max-height: none;
}

@media (width <= 1600px) {
  .dashboard-prospect-tiles {
    grid-template-columns: 1fr;
  }
}

@media (width >= 750px) and (width <= 1200px) {
  .ready-to-reach-out-list-tile .content-section-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "left middle right";
    align-items: center;
  }

  .ready-to-reach-out-list-tile .content-section-header-middle {
    justify-content: flex-end;
    margin-left: auto;
    width: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .ready-to-reach-out-list-tile .content-section-header-right--empty {
    display: block;
  }
}

@media (width <= 900px) {
  .dashboard-prospect-tiles .ready-to-reach-out-list__header,
  .dashboard-prospect-tiles .ready-to-reach-out-list__grid,
  .dashboard-prospect-tiles .recent-prospects-list__header,
  .dashboard-prospect-tiles .recent-prospects-list__grid {
    grid-template-columns: minmax(180px, 1fr) 76px minmax(96px, 0.7fr);
  }

  .dashboard-prospect-tiles .ready-to-reach-out-list__label--lead-score,
  .dashboard-prospect-tiles .ready-to-reach-out-list__cell--lead-score,
  .dashboard-prospect-tiles .ready-to-reach-out-list__source,
  .dashboard-prospect-tiles .ready-to-reach-out-list__snooze,
  .dashboard-prospect-tiles .ready-to-reach-out-list__label--snooze,
  .dashboard-prospect-tiles .list-header__label--actions {
    display: none;
  }

  .dashboard-prospect-tiles .ready-to-reach-out-list__header .ready-to-reach-out-list__label--update,
  .dashboard-prospect-tiles .ready-to-reach-out-list__grid .ready-to-reach-out-list__time,
  .dashboard-prospect-tiles .recent-prospects-list__header .ready-to-reach-out-list__label--update,
  .dashboard-prospect-tiles .recent-prospects-list__grid .ready-to-reach-out-list__time {
    grid-column: 3;
  }

  .dashboard-prospect-tiles .recent-prospects-list__header,
  .dashboard-prospect-tiles .recent-prospects-list__grid {
    grid-template-columns: minmax(180px, 1fr) 76px;
  }
}

@media (width <= 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dashboard {
    padding: 0 0 24px;
  }
}

/* glass_morph/organisms/hero_header.css */
/* ============================================================================ */
/* == Organism — Hero Header ================================================= */
/* ============================================================================ */
.hero-header {
  background:
    linear-gradient(180deg, var(--gm-glass-white-8) 0%, transparent 100%),
    linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-200) 62%, var(--gm-teal-100) 100%);
  border-radius: 16px;
  padding: 14px 24px 24px;
  box-shadow:
    inset 0 1px 0 var(--gm-glass-white-12),
    inset -1px 0 0 var(--gm-glass-white-10),
    0 8px 24px var(--gm-glass-black-30);
}

.hero-header-content {
  margin-bottom: 24px;
}

/* A header with nothing under it — no stats row, no tiles — closes under its
   description instead of holding the gap open for a block that is not there. */
.hero-header--titles-only .hero-header-content {
  margin-bottom: 0;
}

.hero-title {
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--gm-white);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.hero-header-content > .paragraph {
  line-height: 1.6;
  opacity: 0.95;
  margin: 0;
}

/* Combined stats: single row with divider between groups */
@media (width <= 1024px) {
  .hero-header {
    padding: 28px;
  }
}

@media (width <= 640px) {
  .hero-header-content {
    margin-bottom: 20px;
  }
}

/* glass_morph/organisms/content_section.css */
/* ============================================================================ */
/* == Organism — Content Section ============================================= */
/* ============================================================================ */
/* Section Cards */
.content-section {
  --content-section-height: 620px;
  --content-section-header-height: 73px;

  background: var(--gm-teal-e5ecef);
  border-radius: 16px;
  overflow: hidden;
  min-height: var(--content-section-height);
  max-height: var(--content-section-height);
  box-shadow: 0 1px 3px var(--gm-glass-black-2);
  transition: all 0.3s ease;
}

/* A fixed-height section stacks header and body in a column so the body takes
   whatever height the header leaves. The body's max-height subtracts a 73px
   header, but at 1200px and below the header wraps to two or three rows; the
   body then ran past the section's clipped bottom and its last rows could not
   be scrolled into view. */
.content-section:not(.content-section--full-width, .content-section--auto-height) {
  display: flex;
  flex-direction: column;
}

.content-section:not(.content-section--full-width, .content-section--auto-height) > .content-section-body {
  min-height: 0;
}

.content-section:hover {
  box-shadow: 0 4px 12px var(--gm-glass-black-5);
}

.content-section.content-section--full-width {
  grid-column: 1 / -1;
  min-height: auto;
  max-height: none;
}

.content-section.content-section--auto-height {
  min-height: auto;
  max-height: none;
}

.content-section.content-section--full-width .content-section-body {
  max-height: none;
  overflow-y: visible;
}

.content-section.content-section--auto-height .content-section-body {
  max-height: none;
  overflow-y: visible;
  padding-bottom: 26px;
}

.content-section-header {
  padding: 14px 20px;
  border-bottom: 2px solid var(--gm-glass-white-10);
  background:
    linear-gradient(180deg, var(--gm-glass-white-8) 0%, transparent 100%),
    linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-200) 62%, var(--gm-teal-100) 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "left middle right";
  align-items: center;
  gap: 8px 12px;
  box-shadow:
    inset 0 1px 0 var(--gm-glass-white-12),
    inset -1px 0 0 var(--gm-glass-white-10);
}

.content-section--danger .content-section-header,
.content-section--light-header .content-section-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 18px 20px 8px;
}

.content-section--danger .content-section-title {
  color: var(--gm-red-700);
  font-size: 16px;
  font-weight: 600;
  gap: 12px;
}

.content-section--danger .content-section-title > [class*="gm-icon-"] {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gm-red-600);
  color: var(--gm-white);
  font-size: 0.9rem;
}

.content-section--danger .content-section-title > [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

.content-section--danger .content-section-action {
  color: var(--gm-red-700);
}

.content-section--danger .content-section-action:hover {
  color: var(--gm-red-800);
}

.content-section--danger .content-section-body {
  padding-top: 8px;
}

.content-section--light-header .content-section-title {
  color: var(--gm-gray-900);
  font-size: 16px;
  font-weight: 600;
  gap: 12px;
}

.content-section--light-header .content-section-title > [class*="gm-icon-"] {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gm-teal-500);
  color: var(--gm-white);
  font-size: 0.9rem;
}

.content-section--light-header .content-section-title > [class*="gm-icon-"]::before {
  color: var(--gm-white) !important;
}

.content-section--light-header .content-section-title-copy .gm-badge {
  align-self: center;
}

.content-section--light-header .content-section-filter {
  background-color: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-gray-700);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.content-section--light-header .content-section-filter:hover {
  background-color: var(--gm-gray-50);
  border-color: var(--gm-gray-300);
}

.content-section--light-header .content-section-filter:focus {
  border-color: var(--gm-blue-500);
  box-shadow: 0 0 0 2px var(--gm-blue-overlay-10);
}

.content-section--light-header .content-section-filter option {
  background: var(--gm-white);
  color: var(--gm-gray-900);
}

.content-section--light-header .content-section-action {
  color: var(--gm-blue-600);
  font-size: 13px;
  font-weight: 600;
}

.content-section--light-header .content-section-action:hover {
  color: var(--gm-blue-800);
}

.content-section-header-left {
  grid-area: left;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
}

.content-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-white);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  margin: 0;
  line-height: 1.3;
  min-width: 0;
}

.content-section-title-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

.content-section-title-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-section-title-copy .gm-badge {
  flex-shrink: 0;
}

.content-section-header-middle {
  grid-area: middle;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
}

.content-section-header-right {
  grid-area: right;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  min-height: 32px;
}

.content-section-header-middle .paragraph,
.content-section-header-right .paragraph {
  margin: 0;
}

.content-section-header-right--empty {
  display: block;
  width: 0;
}

.content-section-header-middle--empty {
  display: none;
}

.content-section-filter {
  margin: 0;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: var(--gm-filter-control-height);
  padding: 0.3rem 1.8rem 0.3rem 10px;
  line-height: 1.3;
  background-color: var(--gm-filter-control-bg);
  border: 1px solid var(--gm-filter-control-border);
  border-radius: var(--gm-filter-control-radius);
  font-size: var(--gm-filter-control-font);
  font-weight: 600;
  color: var(--gm-filter-control-value);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}

.content-section-filter:hover {
  background-color: var(--gm-filter-control-bg-hover);
  border-color: var(--gm-filter-control-border-hover);
}

.content-section-filter:focus {
  border-color: var(--gm-glass-white-60);
  box-shadow: 0 0 0 2px var(--gm-glass-white-15);
  outline: none;
}

.content-section-filter option {
  background: var(--gm-teal-100);
  color: var(--gm-white);
}

.content-section-action {
  font-size: 13px;
  color: var(--gm-glass-white-85);
  text-decoration: none;
  margin-left: 16px;
  text-align: right;
  font-weight: 600;
  transition: color 0.2s;
  cursor: pointer;
}

.content-section-action:hover {
  color: var(--gm-white);
}

.content-section-body {
  background: var(--gm-teal-e5ecef);
  padding: 16px 20px;

  --gm-ctx-text-primary: var(--gm-gray-900);
  --gm-ctx-text-secondary: var(--gm-gray-700);
  --gm-ctx-text-muted: var(--gm-gray-500);
  --gm-ctx-text-link: var(--gm-blue-600);

  max-height: calc(var(--content-section-height) - var(--content-section-header-height));
  overflow: hidden auto;
}

.content-section--light-header .content-section-body {
  padding-top: 8px;
}

.content-section-inner-card {
  background: var(--gm-white);
  border-radius: 16px;
  box-shadow: 0 1px 3px var(--gm-glass-black-6);
  padding: 24px 28px 34px;
}

.profile-settings-section .content-section-inner-card {
  color: var(--gm-gray-900);
}

.profile-settings-section .content-section-inner-card .paragraph {
  color: var(--gm-gray-700);
}

.profile-settings-section .content-section-inner-card .paragraph-dark,
.profile-settings-section .content-section-inner-card .paragraph-strong-dark {
  color: var(--gm-gray-800);
}

.profile-settings-section .content-section-inner-card .paragraph-muted,
.profile-settings-section .content-section-inner-card .form-help,
.profile-settings-section .content-section-inner-card .input-hint {
  color: var(--gm-gray-500);
}

.content-section .gm-range-slider {
  height: 8px;
  background: var(--gm-white);
  border: 0;
  border-radius: 4px;
}

.content-section .gm-range-slider:hover {
  background: var(--gm-white);
}

.content-section .gm-range-slider::-webkit-slider-thumb {
  background: var(--gm-primary, var(--gm-blue-0b6ffd));
  border: 2px solid var(--gm-white);
  box-shadow: 0 1px 4px var(--gm-glass-black-15);
}

.content-section .gm-range-slider::-moz-range-track {
  height: 8px;
  background: var(--gm-white);
  border: 0;
  border-radius: 4px;
}

.content-section .gm-range-slider::-moz-range-thumb {
  background: var(--gm-primary, var(--gm-blue-0b6ffd));
  border: 2px solid var(--gm-white);
  box-shadow: 0 1px 4px var(--gm-glass-black-15);
}

.content-section-body .paragraph-muted {
  color: var(--gm-gray-500);
}

.content-section-body .gm-text-muted {
  color: var(--gm-gray-500) !important;
}

.features-overview-grid {
  --bs-gutter-x: 14px;
  --bs-gutter-y: 14px;
}

.activity-filter-trigger--header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* The trigger says what it filters, not a chosen value, so it reads like
   LevelFilter's name ("Relevantie"): weight 500. */
.content-section-filter.activity-filter-trigger--header {
  color: var(--gm-filter-control-name);
  font-weight: 500;
}

/* Icon() has no size below Bootstrap's .fs-6, written with !important, so the
   search glyph rendered at 20px beside LevelFilter's 13px bullseye. */
.activity-filter-trigger--header .activity-filter-funnel-icon {
  flex-shrink: 0;
  margin-right: 4px;
  color: var(--gm-filter-control-icon);
  font-size: var(--gm-filter-control-font) !important;
  line-height: 1;
}

.content-section--light-header .content-section-filter.activity-filter-trigger--header {
  color: var(--gm-gray-700);
}

.content-section--light-header .activity-filter-trigger--header .activity-filter-funnel-icon {
  color: inherit;
}

.activity-filter-trigger--header .activity-filter-badge {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 6px;
}

@media (width <= 1450px) {
  .content-section-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "left middle right";
    padding: 14px 16px;
    column-gap: 10px;
  }

  .content-section-header-middle,
  .content-section-header-right {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .content-section-header-middle {
    gap: 8px;
    margin-left: auto;
  }

  .content-section-filter {
    min-width: 100px;
    padding: 6px 26px 6px 10px;
  }

  .content-section-action {
    white-space: nowrap;
  }
}

@media (width <= 1200px) {
  .content-section-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left right"
      "middle middle";
    align-items: center;
  }

  .content-section-header-middle {
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .content-section-header-right {
    justify-content: flex-end;
  }

  .content-section-filter {
    min-width: 120px;
    max-width: none;
    flex-shrink: 0;
  }

  .activity-filter-trigger--header {
    max-width: none;
    flex-shrink: 0;
  }

  .content-section-header-right--empty {
    display: none;
  }
}

@media (width <= 700px) {
  .content-section-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "middle";
  }

  .content-section-header-right,
  .content-section-header-middle {
    justify-content: flex-start;
    width: 100%;
  }
}

/* glass_morph/organisms/analytics.css */
/* =========================================
   Analytics Dashboard
   ========================================= */

.analytics-dashboard {
  padding: 0;
}

.analytics-chart-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.analytics-chart-half {
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 360px;
}

.analytics-chart-header {
  margin-bottom: 1rem;
}

.analytics-chart-icon {
  color: var(--gm-primary, var(--gm-blue-6366f1));
  opacity: 0.8;
}

.analytics-chart-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--gm-text-primary, var(--gm-slate-800));
}

/* Chart legend checkboxes row */
.chart-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 0.25rem;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--gm-text-secondary, var(--gm-slate-500));
  user-select: none;
}

.chart-legend-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--gm-primary, var(--gm-blue-6366f1));
  cursor: pointer;
}

.analytics-chart-legend-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chart-legend-label {
  font-size: 0.8rem;
}

/* Heatmap SVG container */
.heatmap-svg-container {
  width: 100%;
  height: auto;
  overflow-x: auto;
}

.heatmap-svg-container svg {
  display: block;
}

/* Responsive: stack charts on small screens */
@media (width <= 768px) {
  .analytics-chart-half {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* glass_morph/organisms/token_card.css */
/* ── Token Card (subscription dashboard organism) ──────────────────────────── */

.token-card {
  padding: 1.5rem;
}

/* glass_morph/organisms/unsubscribe.css */
/* ── Unsubscribe Public Page — Dark Glass Cards ──────────────────────────── */
/* Used on body.public-page — dark teal background, white text                */

.gm-unsubscribe-card {
  position: relative;
  background: var(--gm-glass-white-8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gm-glass-white-12);
  border-radius: 16px;
  box-shadow: 0 4px 24px var(--gm-glass-black-20);
  padding: 24px;
  overflow: hidden;
}

/* Gradient shimmer border overlay */
.gm-unsubscribe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gm-glass-white-20) 0%, var(--gm-auth-accent-overlay-12) 100%);
  -webkit-mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ── Option tiles — subtle dark tile for radio options and product rows ───── */
.gm-option-tile {
  position: relative;
  background: var(--gm-glass-white-5);
  border: 1px solid var(--gm-glass-white-10);
  border-radius: 12px;
  padding: 16px;
  transition:
    background 150ms ease-in-out,
    border-color 150ms ease-in-out;
  cursor: pointer;
}

.gm-option-tile:hover {
  background: var(--gm-glass-white-9);
  border-color: var(--gm-glass-white-18);
}

.gm-option-tile.gm-option-tile--warning {
  background: var(--gm-yellow-overlay-8);
  border-color: var(--gm-amber-overlay-30);
}

.gm-option-tile.gm-option-tile--warning:hover {
  background: var(--gm-m-warning-bg);
}

.gm-option-tile.opacity-50 {
  cursor: default;
  pointer-events: none;
}

/* ── Section separator inside dark cards ─────────────────────────────────── */
.gm-unsubscribe-card .gm-separator-top {
  border-top-color: var(--gm-glass-white-10);
}

/* ── Form inputs inside dark glass cards ─────────────────────────────────── */
.gm-unsubscribe-card .form-control,
.gm-unsubscribe-card textarea {
  background: var(--gm-glass-black-20);
  border: 1px solid var(--gm-glass-white-12);
  color: var(--gm-white);
  border-radius: 8px;
}

.gm-unsubscribe-card .form-control:focus,
.gm-unsubscribe-card textarea:focus {
  background: var(--gm-glass-black-25);
  border-color: var(--gm-teal-300);
  box-shadow: 0 0 0 3px var(--gm-auth-accent-overlay-15);
  color: var(--gm-white);
}

.gm-unsubscribe-card .form-control::placeholder,
.gm-unsubscribe-card textarea::placeholder {
  color: var(--gm-glass-white-35);
}

/* ── Radio inputs inside option tiles ────────────────────────────────────── */
.gm-option-tile .form-check-input {
  background-color: var(--gm-glass-white-10);
  border-color: var(--gm-glass-white-30);
}

.gm-option-tile .form-check-input:checked,
.gm-option-tile .form-check-input[type="checkbox"]:checked {
  background-color: var(--gm-teal-400);
  border-color: var(--gm-teal-400);
}

/* ── Checkboxes inside option tiles ─────────────────────────────────────── */
.gm-option-tile .form-check-input[type="checkbox"] {
  background-color: var(--gm-glass-white-10);
  border-color: var(--gm-glass-white-30);
}

/* glass_morph/organisms/status_timeline.css */
/* ============================================================================ */
/* == Organism — StatusTimeline ============================================== */
/* Generic vertical timeline with dot/line connectors and done/current/pending */
/* states. Used by GDPR status page; reusable for any step-progress display.   */
/* ============================================================================ */

.status-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.status-timeline__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}

.status-timeline__item.is-last { padding-bottom: 0; }

/* ─── Marker column ─────────────────────────────────────────────────────── */

.status-timeline__marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-timeline__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gm-ctx-separator);
  background: var(--gm-ctx-bg-field, var(--gm-glass-white-5));
  color: var(--gm-ctx-text-muted);
  z-index: 1;
}

.status-timeline__line {
  position: absolute;
  top: 28px;
  bottom: -22px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--gm-ctx-separator);
}

/* ─── State variants ─────────────────────────────────────────────────────── */

.status-timeline__item--done .status-timeline__dot {
  background: var(--gm-green-600);
  border-color: var(--gm-green-600);
  color: var(--gm-white);
  box-shadow: 0 4px 10px -3px var(--gm-green-500-overlay-20);
}

.status-timeline__item--done .status-timeline__line {
  background: linear-gradient(180deg, var(--gm-green-600) 0%, var(--gm-ctx-separator) 100%);
}

.status-timeline__item--current .status-timeline__dot {
  border-color: var(--gm-green-600);
  background: var(--gm-green-300-overlay-15);
  color: var(--gm-green-700);
}

/* ─── Pulse animation ────────────────────────────────────────────────────── */

.status-timeline__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gm-green-500);
  animation: status-timeline-pulse 1.6s ease-in-out infinite;
}

@keyframes status-timeline-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

/* ─── Content column ─────────────────────────────────────────────────────── */

.status-timeline__content {
  padding-top: 2px;
  min-width: 0;
}

.status-timeline__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.status-timeline__title {
  color: var(--gm-ctx-text-primary);
  font-size: 14px;
  font-weight: 600;
}

.status-timeline__item--pending .status-timeline__title {
  color: var(--gm-ctx-text-muted);
  font-weight: 500;
}

.status-timeline__time {
  color: var(--gm-ctx-text-muted);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-timeline__desc {
  color: var(--gm-ctx-text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

/* Optional scroll container — caps a long timeline so the tile grows to a
   maximum height and scrolls internally instead of pushing the page down. */
.status-timeline-scroll {
  max-height: min(45vh, 18rem);
  overflow-y: auto;
  scrollbar-gutter: stable;

  /* Bleed toward the tile edge (overview-tile has 32px padding) so the
     scrollbar sits near the side, while keeping the text clear of it. */
  margin-inline-end: -1.25rem;
  padding-inline-end: 0.75rem;
}

/* glass_morph/organisms/product_presence.css */
/* Product Presence Card — GlassCard-wrapped product tiles */

/* Current product indicator — outline on the GlassCard */
.product-presence-card--current {
  outline: var(--gm-outline-width) solid var(--gm-teal-500);
  outline-offset: calc(-1 * var(--gm-outline-width));
  border-radius: var(--gm-radius-md);
}

/* Scoring state indicator */
.product-presence-card__scoring {
  padding: var(--gm-space-md, 1rem);
  text-align: center;
  color: var(--gm-ctx-text-muted);
  font-size: 0.875rem;
}

/* Add-row and archived-row tiles on dark glass — visible border + subtle glass background */
[data-testid="product-add-row"],
.product-presence__add-row,
.product-presence__archived-row {
  background-color: var(--gm-glass-white-8) !important;
  border: 1px solid var(--gm-glass-white-16, var(--gm-white-overlay-16)) !important;
  border-radius: var(--gm-radius-md) !important;
}

[data-testid="product-add-row"]:hover {
  background-color: var(--gm-glass-white-12) !important;
}

/* Archived rows container — gap and indentation */
.product-presence__archived-rows {
  padding: var(--gm-space-sm, 0.5rem) 0;
  padding-left: var(--gm-space-lg, 1.5rem);
}

/* Individual archived row — muted text for archived state */
.product-presence__archived-row {
  opacity: 0.75;
}

/* glass_morph/organisms/tutorial_modal.css */
/* ─── Tutorial video modal ────────────────────────────────────────────────
   Rides on .modal-overlay / .modal-container from TurboModal. What it does NOT
   use is .modal-content — that is a white surface with 30px of padding, which
   around a video is a white frame and a third of the width thrown away.        */

.gm-tutorial-modal .modal-container {
  width: 94%;
  max-width: 1400px;
  padding-left: 0;
  padding-right: 0;
  background: var(--gm-teal-900);
  border-color: var(--gm-glass-white-10);
}

/* The rail eats a fixed 280px, so it needs that much again on top of the plain
   width or the video shrinks the moment the course list appears. */
.gm-tutorial-modal--railed .modal-container { max-width: 1680px; }

.gm-tutorial-modal .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gm-glass-white-8);
}

.gm-tutorial-modal .modal-step-title {
  font-size: 16px;
  color: var(--gm-slate-100);
}

/* ── stage ──────────────────────────────────────────────────────────────── */

.gm-tutorial-modal__stage {
  position: relative;
  margin: 0 20px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gm-gray-900);
  line-height: 0;
}

.gm-tutorial-modal__video {
  display: block;
  width: 100%;

  /* The container caps at 90vh and the header plus meta strip take ~110px of
     that, so anything taller than this would be clipped rather than shown. */
  max-height: 78vh;
  background: var(--gm-gray-900);
}

/* The videos are screen recordings of a light interface, so a caption with no
   backing plate lands white-on-white. */
.gm-tutorial-modal__video::cue {
  background: var(--gm-glass-black-30);
  font-size: 0.9em;
}

/* ── meta strip ─────────────────────────────────────────────────────────── */

.gm-tutorial-modal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gm-gray-400);
}

.gm-tutorial-modal__meta-chapter {
  color: var(--gm-teal-500);
  font-weight: 600;
}
.gm-tutorial-modal__meta-sep { opacity: 0.4; }

/* The language pill on a borrowed render. Never shrinks: the badge ellipsises
   its own text, and a two-letter language code with a letter cut off says
   nothing. */
.gm-tutorial-modal__meta-lang { flex: 0 0 auto; }

/* Course navigation, pushed to the far end of the strip. Absent at the ends of
   the course and wherever the neighbour has no video in this locale, so the
   strip has to hold its shape with neither, one, or both present. */
.gm-tutorial-modal__meta-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.gm-tutorial-modal__meta-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gm-gray-300);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.gm-tutorial-modal__meta-step:hover { color: var(--gm-slate-100); }

.gm-tutorial-modal__meta-step:focus-visible,
.gm-tutorial-modal__seealso:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 2px;
}

/* ── cross-reference card ──────────────────────────────────── */

/* Floats in over the bottom-right of the stage while the narration hands a
   concept off to another leaf. Deliberately NOT full-bleed like the end card:
   the video is still playing and still the point, so this takes a corner and
   leaves the picture alone.

   Bottom right, which puts it where the reader's eye already is — on the play
   head and the control bar — rather than in the far corner they are not looking
   at. The caption band lives here too, and ::cue position cannot be set from
   CSS; the controller lifts the cues while a card is up instead. `bottom` clears
   the native control bar, which the browser draws about 40px tall and only while
   the pointer is over the video. */
.gm-tutorial-modal__seealso {
  position: absolute;
  right: 16px;
  bottom: 56px;
  z-index: 3;
  display: flex;
  visibility: hidden;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  padding: 14px 18px;
  border: 1px solid var(--gm-teal-500);
  border-radius: 14px;
  background: var(--gm-glass-black-50);
  backdrop-filter: var(--gm-blur-md);
  box-shadow: var(--gm-shadow-md);
  line-height: 1.35;
  text-decoration: none;
  opacity: 0;
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
  transform: translateY(12px);
}

.gm-tutorial-modal__seealso--shown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Brightens rather than darkens: the scrim has to stay exactly as opaque as it
   is, because it is what holds the text legible over moving footage. */
.gm-tutorial-modal__seealso:hover .gm-tutorial-modal__seealso-glyph {
  background: var(--gm-teal-500);
}

.gm-tutorial-modal__seealso:hover .gm-tutorial-modal__seealso-cue {
  color: var(--gm-glass-white-85);
}

/* The same teal chip the course rail puts beside a watchable neighbour. */
.gm-tutorial-modal__seealso-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gm-teal-overlay-20);
  transition: background 200ms ease-out;
}

.gm-tutorial-modal__seealso-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gm-tutorial-modal__seealso-eyebrow, .gm-tutorial-modal__endcard-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gm-teal-500);
}

.gm-tutorial-modal__seealso-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gm-slate-100);
}

.gm-tutorial-modal__seealso-cue {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--gm-glass-white-60);
}

/* The card is a moving element over moving footage. For a reader who asked for
   less motion it appears and disappears without sliding. */
@media (prefers-reduced-motion: reduce) {
  .gm-tutorial-modal__seealso {
    transition: none;
    transform: none;
  }
}

/* ── end card ───────────────────────────────────────────────────────────── */

.gm-tutorial-modal__endcard {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  line-height: 1.4;
  text-align: center;
  background: var(--gm-glass-black-30);
  backdrop-filter: blur(10px);
}

.gm-tutorial-modal__endcard--shown { display: flex; }

.gm-tutorial-modal__endcard-title {
  max-width: 26ch;
  font-size: 20px;
  font-weight: 600;
  color: var(--gm-slate-100);
}

.gm-tutorial-modal__endcard-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.gm-tutorial-modal__btn {
  padding: 8px 16px;
  border: 1px solid var(--gm-glass-white-15);
  border-radius: 30px;
  background: var(--gm-glass-white-10);
  color: var(--gm-slate-100);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.gm-tutorial-modal__btn:hover,
.gm-tutorial-modal__btn:focus-visible {
  background: var(--gm-glass-white-20);
  color: var(--gm-slate-100);
}

.gm-tutorial-modal__btn--primary {
  background: var(--gm-teal-500);
  border-color: var(--gm-teal-500);
  font-weight: 600;
}

/* ── unplayable ─────────────────────────────────────────────────────────── */

.gm-tutorial-modal__error {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  line-height: 1.5;
  text-align: center;
  background: var(--gm-teal-900);
}

.gm-tutorial-modal__error--shown { display: flex; }

.gm-tutorial-modal__error-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-slate-100);
}

.gm-tutorial-modal__error-body {
  max-width: 40ch;
  font-size: 12px;
  color: var(--gm-gray-400);
}

/* ── course rail ────────────────────────────────────────────────────────── */

.gm-tutorial-modal__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
}
.gm-tutorial-modal__split .gm-tutorial-modal__stage { margin-right: 0; }
.gm-tutorial-modal__main { min-width: 0; }

.gm-tutorial-modal__rail {
  margin-left: 20px;
  padding: 4px 20px 16px;
  border-left: 1px solid var(--gm-glass-white-8);
}

.gm-tutorial-modal__rail-eyebrow {
  display: block;
  padding: 4px 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gm-teal-500);
}

.gm-tutorial-modal__rail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--gm-slate-500);
  text-decoration: none;
}

.gm-tutorial-modal__rail-row--watchable { color: var(--gm-gray-300); }
.gm-tutorial-modal__rail-row--watchable:hover { color: var(--gm-slate-100); }

.gm-tutorial-modal__rail-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.gm-tutorial-modal__rail-row--watchable .gm-tutorial-modal__rail-glyph { background: var(--gm-teal-overlay-20); }

.gm-tutorial-modal__rail-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-tutorial-modal__rail-pill {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gm-gray-400);
  background: var(--gm-glass-white-5);
}

@media (width <= 768px) {
  .gm-tutorial-modal .modal-container { width: 95%; }
  .gm-tutorial-modal__split { grid-template-columns: minmax(0, 1fr); }

  .gm-tutorial-modal__rail {
    margin-left: 0;
    border-left: none;
    border-top: 1px solid var(--gm-glass-white-8);
  }
  .gm-tutorial-modal__split .gm-tutorial-modal__stage { margin-right: 20px; }
}

/* The base modal widens to 98% here; the width above is more specific than that
   rule, so it has to be restored by hand or the phone loses the extra 4%. */
@media (width <= 576px) {
  .gm-tutorial-modal .modal-container { width: 98%; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-tutorial-modal__btn,
  .gm-tutorial-modal__meta-step { transition: none; }
}

/* glass_morph/organisms/tutorial_library.css */
/* ─── Tutorial library — /tutorials ───────────────────────────────────────
   Two panes: a chapter rail carrying the whole curriculum beside one
   chapter's leaves. Chapters switch client-side through the shared hash-tabs
   controller, so a deep link is #chapter-4 and no pane costs a request.

   Rail counts are total leaves rather than watchable ones. The rail exists to
   show the shape of what the product teaches; counting watchable would render
   it as eleven zeros and a one (#567).

   Colours come from the --gm-ctx-* context tokens rather than the dark-glass
   palette the video modal uses. The library sits inside a GlassCard, which is
   a light surface, and the modal sits on its own black stage — same feature,
   opposite surfaces. Black tints rather than white ones for the same reason. */

/* The rail is wider than the 260px it used to be. Its titles run to 35
   characters and have always ellipsised inside it, so the larger row text would
   have eaten another few letters off every long chapter — the one place on the
   page where bigger type costs words. The pane gives up 40px it has to spare. */
.gm-tutorial-library {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;

  /* The leaf title stops at a fixed width, which is what puts the bars in one
     column beside the titles they report on rather than a screen away at the
     pane's right edge. Wide enough for the longest title in the curriculum (49
     characters, in Dutch), so nothing ellipsises at full width; it shrinks
     below this on a narrow pane.

     Both columns are measured against the row's own type size, so they grew
     with it — left at their old widths, the titles they were cut to fit would
     have started truncating and "resume" would have wrapped. */
  --gm-tutorial-title-col: 348px;

  /* Fixed and right-aligned: a running time is 4 characters and "resume" is 6,
     and a meta slot that sized to its text would move the bar beside it. */
  --gm-tutorial-meta-col: 60px;

  /* Wide enough for a two-letter language pill, and held on every row whether
     or not one is drawn — sized to its content it would step the running times
     and the bars after it out of column on the rows that carry a pill. */
  --gm-tutorial-lang-col: 34px;
}

/* ── chapter rail ───────────────────────────────────────────────────────── */

.gm-tutorial-library__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 16px;
  border-right: 1px solid var(--gm-ctx-separator);
}

.gm-tutorial-library__rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--gm-radius-sm);
  background: transparent;
  color: var(--gm-ctx-text-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    color 150ms ease-out;
}

.gm-tutorial-library__rail-item:hover,
.gm-tutorial-library__leaf--watchable:hover {
  background: var(--gm-glass-black-3);
  color: var(--gm-ctx-text-primary);
}

.gm-tutorial-library__rail-item:focus-visible,
.gm-tutorial-library__leaf--watchable:focus-visible,
.gm-tutorial-library__leaf-reach:focus-visible {
  outline: 2px solid var(--gm-teal-500);
  outline-offset: 2px;
}

.gm-tutorial-library__rail-item.active {
  background: var(--gm-teal-overlay-8);
  border-color: var(--gm-teal-overlay-20);
  color: var(--gm-ctx-text-primary);
  font-weight: 600;
}

.gm-tutorial-library__rail-number {
  flex: 0 0 auto;
  min-width: 24px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gm-teal-600);
}

.gm-tutorial-library__rail-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-tutorial-library__rail-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-ctx-text-secondary);
}

/* Progress reads louder than the bare chapter size it replaces: once there is
   something to report, it is the number the reader came to the rail for. */
.gm-tutorial-library__rail-count.is-started,
.gm-tutorial-library__leaf--in-progress .gm-tutorial-library__leaf-meta {
  color: var(--gm-teal-600);
  font-weight: 600;
}

.gm-tutorial-library__rail-count.is-complete {
  color: var(--gm-status-success);
  font-weight: 600;
}

/* The toggles sit together at the right-hand end, so the strip stays a
   two-part row whether or not a filter chip is on the left. */
.gm-tutorial-library__toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-left: auto;
}

/* ── chapter pane ───────────────────────────────────────────────────────── */

.gm-tutorial-library__pane {
  display: none;
  min-width: 0;
}

.gm-tutorial-library__pane.active {
  display: block;
}

.gm-tutorial-library__pane-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gm-ctx-text-primary);
}

.gm-tutorial-library__pane-count {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--gm-ctx-text-secondary);
}

/* Uppercase is the hardest thing on the page to read at a small size, so this
   one carries the largest share of the type bump and a touch less tracking —
   letters set wider apart than this stop reading as a word. */
.gm-tutorial-library__sub {
  display: block;
  padding: 16px 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gm-teal-600);
}

/* The first subchapter follows the chapter count, which brings its own bottom
   margin. Matched as a sibling of that line rather than with `:first-child` or
   `:first-of-type`: the count is what comes first in the pane, and it is a span
   too, so neither of those ever matches the heading this means. */
.gm-tutorial-library__pane-count + .gm-tutorial-library__sub {
  padding-top: 0;
}

/* ── leaf row ───────────────────────────────────────────────────────────── */

/* Secondary rather than muted. This is the planned row's colour — quieter than
   a watchable one, which is the point — but these are still whole sentences a
   reader is meant to read, not a timestamp they glance past. */
.gm-tutorial-library__leaf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--gm-radius-sm);
  font-size: 14px;
  line-height: 1.4;
  color: var(--gm-ctx-text-secondary);
  text-decoration: none;
}

.gm-tutorial-library__leaf--watchable {
  color: var(--gm-ctx-text-primary);
  transition: background 150ms ease-out;
}

.gm-tutorial-library__leaf-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--gm-teal-600);
}

.gm-tutorial-library__leaf--watchable .gm-tutorial-library__leaf-glyph {
  background: var(--gm-teal-overlay-8);
}

/* A leaf row beside its reach figure, for a system admin. The row stays an
   anchor of its own, so the two cannot be nested. */
.gm-tutorial-library__leaf-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gm-tutorial-library__leaf-line .gm-tutorial-library__leaf {
  flex: 1 1 auto;
  min-width: 0;
}

.gm-tutorial-library__leaf-reach {
  flex: 0 0 auto;
  width: 78px;
  text-align: center;
  padding: 3px 8px;
  border-radius: var(--gm-radius-sm);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-ctx-text-secondary);
  background: var(--gm-glass-black-3);
  transition: background 150ms ease-out;
}

.gm-tutorial-library__leaf-reach:hover {
  background: var(--gm-teal-overlay-8);
  color: var(--gm-teal-600);
}

/* Watched: the glyph turns green and the title steps back. A finished leaf is
   still worth re-watching, so it stays a full row rather than being greyed to
   the point of looking disabled. */
.gm-tutorial-library__leaf--watched .gm-tutorial-library__leaf-glyph {
  background: var(--gm-green-500-overlay-8);
  color: var(--gm-status-success);
}

.gm-tutorial-library__leaf--watched .gm-tutorial-library__leaf-title {
  color: var(--gm-ctx-text-secondary);
}

/* ── progress bar: on leaf rows only ─────────────────────────────────────── */

/* A leaf row is the one place a bar says something its count cannot: how far
   into a single video the reader got. Chapters and subchapters report progress
   as a figure instead — bars at three depths read as a chart of the library
   rather than as a mark on the row you are looking at.

   A fixed width rather than a proportional one, so no row's bar is longer for
   no reason but the length of the title beside it. */
.gm-tutorial-library__bar {
  flex: 0 0 auto;
  width: 56px;
  height: 4px;
  overflow: hidden;
  background: var(--gm-glass-black-10);
  border-radius: 999px;
}

/* Width arrives as --gm-progress-width from the row; the colour stays here.
   Not `.gm-progress-bar-teal` — that class paints with var(--gm-teal), which
   no stylesheet defines, so it renders an invisible bar. */
.gm-tutorial-library__bar-fill {
  display: block;
  width: var(--gm-progress-width, 0%);
  height: 100%;
  background: var(--gm-teal-500);
  border-radius: 999px;
  transition: width 200ms ease-out;
}

.gm-tutorial-library__bar-fill.is-complete {
  background: var(--gm-status-success);
}

/* Tabular figures: these are dotted numbers stacked down a column, and
   proportional digits set them at a different width on every row. */
.gm-tutorial-library__leaf-number {
  flex: 0 0 auto;
  min-width: 42px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-ctx-text-secondary);
}

/* Capped rather than growing: a title that filled the row would carry the meta
   slot and the bar out to the pane's right edge, far from the words they report
   on. It still shrinks, so a narrow pane ellipsises instead of overflowing. */
.gm-tutorial-library__leaf-title {
  flex: 0 1 var(--gm-tutorial-title-col);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The language slot. Empty on nearly every row, which is the point: it holds
   the column open so the pill on a borrowed render does not shift its
   neighbours. */
.gm-tutorial-library__leaf-lang {
  display: inline-flex;
  flex: 0 0 var(--gm-tutorial-lang-col);
  align-items: center;
  justify-content: flex-end;
}

.gm-tutorial-library__leaf-meta {
  flex: 0 0 var(--gm-tutorial-meta-col);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--gm-ctx-text-secondary);
}

/* The row still spans the pane — the hover band and the reach figure beside it
   both need that — so the width the title gave up is parked after the bar
   rather than before it. */
.gm-tutorial-library__leaf > .gm-tutorial-library__bar {
  margin-right: auto;
}

/* ── header strip: filter chip on the left, planned toggle on the right ─── */

.gm-tutorial-library__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--gm-ctx-separator);
  font-size: 13px;
  color: var(--gm-ctx-text-secondary);
}

.gm-tutorial-library__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--gm-ctx-separator);
  border-radius: 30px;
  background: var(--gm-glass-black-3);
}

.gm-tutorial-library__chip-clear,
.gm-tutorial-library__toggle {
  color: var(--gm-teal-600);
  text-decoration: none;
}

/* ── track chips: the subjects that run across the chapters ─────────────── */

.gm-tutorial-library__tracks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* No font-size of its own: the track chips inherit the page's 16px body text,
   which is already the most legible thing in the library. Only the colour
   needed lifting, to match the rest of the type. */
.gm-tutorial-library__chip--track {
  gap: 8px;
  color: var(--gm-ctx-text-secondary);
  text-decoration: none;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.gm-tutorial-library__chip--track:hover {
  background: var(--gm-teal-overlay-8);
  border-color: var(--gm-teal-overlay-20);
  color: var(--gm-teal-600);
}

/* The chosen subject reads as chosen without a second control to unset it —
   the chip is its own off switch. */
.gm-tutorial-library__chip--track.is-active {
  background: var(--gm-teal-overlay-15);
  border-color: var(--gm-teal-overlay-20);
  color: var(--gm-teal-600);
  font-weight: 600;
}

.gm-tutorial-library__chip-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* The repo's focus ring is a real outline — `--gm-focus-ring-shadow` is
   documented in the design-system skill but defined nowhere, and an undefined
   custom property drops the declaration, which with `outline: none` would
   leave keyboard users no ring at all. */
.gm-tutorial-library__chip--track:focus-visible,
.gm-tutorial-library__chip-clear:focus-visible,
.gm-tutorial-library__toggle:focus-visible {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}

/* The toggle is the only thing in the strip on the bare library, and it belongs
   at the far end rather than stranded under the page title. */
.gm-tutorial-library__toggle {
  margin-left: auto;
}

.gm-tutorial-library__chip-clear:hover,
.gm-tutorial-library__toggle:hover {
  text-decoration: underline;
}

/* Every leaf in this chapter is planned and planned rows are hidden — say so
   rather than rendering an empty pane that reads as a broken page. */
.gm-tutorial-library__pane-empty {
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gm-ctx-text-secondary);
}

@media (width <= 1024px) {
  .gm-tutorial-library {
    grid-template-columns: minmax(0, 1fr);
  }

  .gm-tutorial-library__rail {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--gm-ctx-separator);
  }

  .gm-tutorial-library__rail-item {
    width: auto;
    white-space: nowrap;
  }

  .gm-tutorial-library__rail-title {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-tutorial-library__rail-item,
  .gm-tutorial-library__leaf--watchable {
    transition: none;
  }
}

/* glass_morph/organisms/register_financials_card.css */
/* Register financials tile — the annual accounts a register published.
 *
 * Stat pairs rather than a table: a statement carries six attributes and an
 * overview tile is narrow, so columns either overflow or squeeze the amounts
 * into unreadable widths. Every colour here comes from a --gm-ctx-* token, so
 * the tile reads correctly on the white surface it sits on and would still
 * read correctly on dark glass. */

.register-financials-statement + .register-financials-statement {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gm-ctx-separator);
}

/* Period, consolidation and currency: which figures these are. Held on one line
   — allowed to wrap, the currency dropped underneath and read as a stray label
   rather than as the unit for the amounts below. */
.register-financials-period {
  margin-bottom: 14px;
  flex-wrap: nowrap;
}

/* line-height matches .badge (1.25) so the year and the consolidation badge
   share an optical centre. At line-height 1 the digits sit low in their box and
   the badge reads as floating above them. */
.register-financials-year {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gm-ctx-text-primary);
}

/* Pushed to the far edge so it reads as the unit for the column of amounts
   rather than as part of the badge beside it. Quiet but never hidden — ADR-0052
   keeps amounts in the filing's own currency, so this is load-bearing. */
.register-financials-currency {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gm-ctx-text-muted);
}

/* The tile is a container query root so the figure grid responds to the tile's
   own width, not the viewport's: this tile sits in a grid that is one column on
   some pages and two on others, so the same viewport can hand it very different
   widths. */
.register-financials-tile {
  container-type: inline-size;
}

/* Two across: four figures make a calm 2x2 that survives a narrow tile. */
.register-financials-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}

/* Wide enough for all four side by side, which reads as one row of figures
   rather than a block with a lot of air between two columns. Kept to 2 or 4 —
   three would orphan the fourth. */
@container (width >= 620px) {
  .register-financials-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.register-financials-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Smaller than the 36px dashboard stat: four of these share a tile. */
.register-financials-value {
  font-size: 22px;
  line-height: 1.1;
  white-space: nowrap;
}

/* A named absence stands where an amount would: same slot, quieter weight, so
   the row still scans as four figures rather than as a hole. */
.register-financials-missing {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  padding-block: 4px;
  color: var(--gm-ctx-text-muted);
}

.register-financials-label {
  line-height: 1.2;
}

/* Provenance, not content: it must be findable and must not compete with the
   figures, so it sits a step down in size. */
.register-financials-footnotes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gm-ctx-separator);
  font-size: 12px;
  line-height: 1.5;
}

/* ExternalLink renders a paragraph; drop its trailing margin so the notice sits
   with the other footnotes rather than pushing the tile taller. */
.register-financials-attribution {
  margin-bottom: 0;
  font-size: 12px;
}

/* One column below the tile grid's narrow breakpoint, where 2x2 would clip. */
@media (width <= 480px) {
  .register-financials-figures {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* glass_morph/organisms/register_identity_card.css */
/* Register identity tile — what the register itself says about a company.
 * Reuses the InfoRow atom's own `.info-row` styling; only the activity list
 * needs rules of its own. */

/* A list value is left-aligned and given room: right-aligned in a narrow column
   the activity lines wrap into an unreadable ladder. */
.register-identity-value-wide {
  min-width: 0;
  flex: 1 1 auto;
  padding-left: 16px;
  text-align: left;
}

.register-identity-activity {
  line-height: 1.5;
}

/* The activity code is an identifier, so it is never abbreviated and never
   wraps away from the description it belongs to. */
.register-identity-code {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gm-ctx-text-primary);
}

/* glass_morph/organisms/unattended_opportunities.css */
/* ============================================================================
   == Organism — UnattendedOpportunities ====================================
   ============================================================================ */

/* The list borrows the shared row, tab and card organisms and only restates the
   measurements this page draws them at. Every rule is scoped to
   `.unattended-list` so the prospect rows, the ICP tiles and the five other tab
   strips keep theirs. */

/* ── The surfaces ────────────────────────────────────────────────────────── */

/* The header carries the teal and the rows are white cards on top of it, the
   way the company and prospect pages draw a list on the dark page. The row
   itself wears `tile-light`, so every label, link and icon inside resolves to a
   dark colour through the context tokens rather than by being named here. The
   stat row keeps its own black glass inside the header, the way it does on the
   dashboard — a second gradient inside the first only flattened both. */
.unattended-list .data-row {
  background: var(--gm-white);
  border-radius: 12px;
}

.unattended-list .data-row:hover {
  background: var(--gm-gray-50);
}

/* An open row stays lifted while the reader is inside it. It keeps the white
   of a closed row and takes the depth instead: a card that darkened on opening
   would read as disabled rather than as active. */
.unattended-list .data-row:has(.expanded-content.visible) {
  background: var(--gm-white);
  box-shadow: 0 8px 24px var(--gm-glass-black-15);
}

/* The chevron and the reason line are drawn for dark glass by default, and the
   context tokens do not reach either — one is an icon colour, the other a fixed
   grey. Both are restated for the light card. */
.unattended-list .data-row .expand-icon {
  color: var(--gm-slate-500);
}

/* ── The prospect row ────────────────────────────────────────────────────── */

/* The prospect list's columns, minus the ones that say nothing here: no URL,
   no DMU count, no update rhythm, no company description. What is left is who
   it is, what it scores, how ready it is and why it is on this list — and the
   first five tracks keep the widths the prospect list uses, so the two pages
   line up column for column as far as they go. */
.unattended-list .data-row-grid--unattended-prospect,
.unattended-list .list-header.data-row-grid--unattended-prospect {
  grid-template-columns: 88px 36px minmax(180px, 1.1fr) 92px 112px minmax(220px, 1.7fr) auto 44px;
  align-items: center;
  padding-right: 24px;
}

/* `--reason` takes the track the prospect list gives its URL column; the
   shared label rules position the four before it. */
.unattended-list .list-header.data-row-grid--unattended-prospect .list-header__label--reason {
  grid-column: 6;
}

/* The name is a link in a free track here rather than the prospect list's fixed
   cell, so it takes the track and ellipses only when that runs out.

   `justify-self: stretch` is what makes that true. `.data-row-grid` sets
   `justify-items: start`, which sizes a grid item at its max-content and lets
   it overflow its track — so a long name grew past the column and ran under
   the match score badge instead of ellipsing, because `overflow: hidden` never
   had a narrower box to clip against. Stretching the link to its track gives
   the ellipsis something to happen in. */
.unattended-list .data-row-grid--unattended-prospect .row-title,
.unattended-list .data-row-grid--unattended-task .row-title {
  justify-self: stretch;
  min-width: 0;
  max-width: none;
  font-size: 16px;
  font-weight: 400;
  margin-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gm-gray-900);
}

/* ── The row ─────────────────────────────────────────────────────────────── */

/* The work row is the same table as the prospect row, in the columns a piece
   of work has: what it asks for, how urgent it was called, and how far past its
   term it is. The tracks are the prospect row's own where they can be — the
   priority badge takes the match score's 92px — so the two shapes sit under
   column bars of the same rhythm. */
.unattended-list .data-row-grid--unattended-task,
.unattended-list .list-header.data-row-grid--unattended-task {
  grid-template-columns: minmax(200px, 1.2fr) 92px minmax(220px, 1.7fr) auto 44px;
  align-items: center;
  padding-right: 24px;
  cursor: default;
}

.unattended-list .list-header.data-row-grid--unattended-task .list-header__label--reason {
  grid-column: 3;
}

/* A task is named by a sentence rather than by a company, so it carries a
   little more weight to stay apart from the reason line under it. */
.unattended-list .data-row-grid--unattended-task .row-title--task {
  font-weight: 500;
}

.unattended-list .data-row-grid--unattended-task .description-text,
.unattended-list .data-row-grid--unattended-prospect .description-text {
  font-size: 0.875rem;
  color: var(--gm-gray-600);
  white-space: normal;
}

/* The chevron follows the panel it opens. The expandable-section controller
   only toggles `visible` on the content, so the rotation is read off that
   rather than off a second class nobody sets. */
.data-row:has(.expanded-content.visible) .expand-icon {
  transform: rotate(180deg);
}

/* ── The expansion ───────────────────────────────────────────────────────── */

/* `.expanded-content` already insets by 20px, so the card grid inside it adds
   none of its own — two nested paddings would push the tiles a full 40px in. */
.unattended-list .expanded-cards {
  gap: 12px;
  padding: 0;
}

/* A row with one tile gives it the whole width rather than leaving half the
   expansion empty. */
.unattended-list .expanded-cards:has(.info-card:only-child) {
  grid-template-columns: 1fr;
}

/* The tiles sit on a white row now, so they step down to the subtle grey a
   light surface uses for its own panels — two whites with a shadow between them
   read as a rendering fault rather than as a card inside a card. */
.unattended-list .info-card {
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  box-shadow: none;
}

.unattended-list .info-card .card-header {
  gap: 8px;
  padding-bottom: 0;
  margin-bottom: 10px;
}

.unattended-list .info-card .card-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

/* The glyph is sized by a Bootstrap `fs-*` utility the component picks, which
   carries !important — the ::before it draws through does not, so the icon is
   scaled back to the smaller badge there. */
.unattended-list .info-card .card-icon .card-header-icon::before {
  font-size: 0.75em;
}

.unattended-list .info-card .card-title {
  font-size: 13px;
}

/* ── The key/value pairs inside a tile ───────────────────────────────────── */

/* DetailItem stacks its label over its value. Here the pair reads as a table
   row instead: a fixed label column, and a rule between the rows so four facts
   scan as four rather than as eight lines. */
.unattended-list .kv-table {
  display: grid;
  gap: 0;
}

.unattended-list .kv-table .gm-detail-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gm-gray-100);
}

.unattended-list .kv-table .gm-detail-item:last-child {
  border-bottom: none;
}

/* 11px, uppercase and letter-spaced is the smallest text on the card, so it
   cannot also be the palest: at gray-400 the label read 2.4:1 against the
   tile, well under the 4.5:1 small text needs. gray-600 is 7.2:1 and still a
   step lighter than the value beside it, which is what keeps the pair reading
   as label and answer rather than as two equal columns. */
.unattended-list .kv-table .gm-detail-item-label {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--gm-gray-600);
}

/* DetailItem sets `fw-semibold` on its value, and Bootstrap's weight utility
   carries !important — so does the override that puts it back to book weight.
   A tile of four facts reads as a list; four bold values read as four headings. */
.unattended-list .kv-table .gm-detail-item-value {
  margin: 0;
  font-size: 13px;
  font-weight: 400 !important;
  line-height: 1.45;
  color: var(--gm-gray-800);
}

/* ── The tab strip ───────────────────────────────────────────────────────── */

/* Six pills have to fit on one line at 1440px, which the shared 28px of side
   padding does not allow. */
.unattended-list .tab-button {
  padding: 12px 22px;
}

/* The strip needs air on both sides: the frame under it is a solid block, and
   a pill sitting flush on top of it reads as part of the frame. */
.unattended-list .tab-bar-row {
  min-width: 0;
  max-width: 100%;
  margin: 20px 0;
}

@media (width <= 1024px) {
  .expanded-cards {
    grid-template-columns: 1fr;
    padding: 4px 4px 12px;
    gap: 12px;
  }

  .info-card {
    padding: 12px;
  }

  .info-card .card-body {
    padding: 8px;
  }
}


/* glass_morph/organisms/invitation.css */
/* Invitation acceptance page (#1102).
 *
 * Two columns: the decision on the left, the privacy scope it is made under on
 * the right. The old layout stacked the notice on top of the buttons inside a
 * 420px column, so Accept sat below the fold.
 *
 * Secondary text here is separated by weight and size, never by opacity. The
 * dialog's rgb(49 114 128 / 60%) glass composites to roughly rgb(35 85 98),
 * light enough that white at 60% lands at 4.13:1 — under AA. Everything
 * secondary is white/85 instead.
 */

/* ── Head: logo left, language selector right ─────────────────────────── */
.invitation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.invitation-logo {
  display: block;
  width: auto;
  height: 38px;
}

/* ── The two columns ──────────────────────────────────────────────────── */
.invitation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 28px;
  align-items: start;
}

.invitation-decide,
.invitation-scope-col {
  min-width: 0;
}

/* ── Identity: the account name, stated once ──────────────────────────── */
.invitation-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.invitation-eyebrow {
  margin: 0 0 4px;
  color: var(--gm-glass-white-85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── The role, as the consequence it is ───────────────────────────────── */
.invitation-role {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 8px;
  padding: 16px 18px;
  border: 1px solid var(--gm-glass-white-15);
  border-radius: var(--gm-radius-md);
  background: var(--gm-glass-white-8);
}

.invitation-role-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--gm-green-500-overlay-20);
  color: var(--gm-green-400);
  font-size: 15px;
}

.invitation-role-body {
  min-width: 0;
}

.invitation-role-line {
  margin: 0 0 3px;
  color: var(--gm-white);
  font-size: 15px;
  line-height: 1.4;
}

.invitation-role-name {
  font-weight: 700;
}

.invitation-role-note {
  margin: 0;
  color: var(--gm-glass-white-85);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Facts: hairlines, not a nested panel ─────────────────────────────── */
.invitation-facts {
  display: grid;
  margin: 14px 0 20px;
}

.invitation-fact {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--gm-glass-white-10);
}

.invitation-fact:last-child {
  border-bottom: none;
}

.invitation-fact-label {
  color: var(--gm-glass-white-85);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invitation-fact-value {
  overflow-wrap: anywhere;
  color: var(--gm-white);
  font-size: 13.5px;
  line-height: 1.45;
}

.invitation-mono {
  color: var(--gm-glass-white-85);
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: 12.5px;
}

/* The relative time carries the urgency; the date is the audit detail. */
.invitation-expiry-relative {
  color: var(--gm-white);
  font-weight: 600;
}

.invitation-expiry-absolute {
  color: var(--gm-glass-white-85);
  font-size: 12.5px;
}

.invitation-expiry-soon .invitation-expiry-relative {
  color: var(--gm-yellow-500);
}

/* ── Auth notice ──────────────────────────────────────────────────────── */
.invitation-auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.invitation-auth-notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 17px;
}

.invitation-auth-notice-body {
  min-width: 0;
}

.invitation-auth-notice-title {
  margin: 0 0 2px;
  color: var(--gm-white);
  font-weight: 600;
}

.invitation-auth-notice-detail {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--gm-glass-white-80);
}

.invitation-auth-notice-ok {
  border: 1px solid var(--gm-green-500-overlay-20);
  background: var(--gm-green-500-overlay-20);
}

.invitation-auth-notice-ok .invitation-auth-notice-icon {
  color: var(--gm-green-400);
}

.invitation-auth-notice-info {
  border: 1px solid var(--gm-status-warning-bg);
  background: var(--gm-status-warning-bg);
}

.invitation-auth-notice-info .invitation-auth-notice-icon {
  color: var(--gm-yellow-500);
}

/* ── Actions: Accept is what the page is for; Decline is not its peer ─── */
.invitation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}

.invitation-actions-stacked {
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.invitation-decline .button {
  height: auto;
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--gm-glass-white-70);
  font-size: 13.5px;
  transition: color 0.15s ease;
}

.invitation-decline .button::before {
  display: none;
}

.invitation-decline .button:hover {
  background: none;
  color: var(--gm-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.invitation-decline .button .button-text {
  font-size: 13.5px;
  font-weight: 500;
}

/* ── Scope column: the first layer of the notice ──────────────────────── */
.invitation-scope {
  padding: 18px 20px;
  border: 1px solid var(--gm-glass-white-12);
  border-radius: var(--gm-radius-md);
  background: var(--gm-glass-white-5);
}

.invitation-scope-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 6px;
  color: var(--gm-white);
  font-size: 13.5px;
  font-weight: 600;
}

.invitation-scope-icon {
  color: var(--gm-teal-500);
  font-size: 15px;
}

/* A left rule tells the three statements apart without a second surface:
 * green for what this does, neutral for who answers for it and what you
 * may ask of them. */
.invitation-scope-body {
  margin: 0 0 14px;
  padding: 0 0 0 13px;
  border-left: 2px solid var(--gm-green-400);
  color: var(--gm-glass-white-85);
  font-size: 12.5px;
  line-height: 1.55;
}

.invitation-scope-note {
  margin: 0 0 12px;
  padding: 0 0 0 13px;
  border-left: 2px solid var(--gm-glass-white-30);
  color: var(--gm-glass-white-85);
  font-size: 12.5px;
  line-height: 1.55;
}

/* The link was the Link atom's blue on teal glass, near 2:1, and wrapped
 * mid-phrase. White with a visible underline instead. */
.invitation-scope-link a {
  display: inline;
  border-bottom: 1px solid var(--gm-glass-white-50);
  color: var(--gm-white);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.15s ease;
}

.invitation-scope-link a:hover {
  border-bottom-color: var(--gm-white);
  color: var(--gm-white);
}

.invitation-scope-link-icon {
  margin-left: 5px;
  font-size: 11px;
}

/* ── Terminal states: the decision is gone, so the columns are too ────── */
.invitation-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--gm-glass-white-15);
  border-radius: var(--gm-radius-md);
  background: var(--gm-glass-white-5);
}

.invitation-status-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 21px;
}

.invitation-status-body {
  min-width: 0;
}

.invitation-status-title {
  margin: 0 0 5px;
  color: var(--gm-white);
  font-size: 16px;
  font-weight: 600;
}

.invitation-status-detail {
  margin: 0;
  color: var(--gm-glass-white-85);
  font-size: 13px;
  line-height: 1.55;
}

.invitation-status-expired .invitation-status-icon {
  background: var(--gm-red-overlay-15);
  color: var(--gm-red-400);
}

.invitation-status-accepted .invitation-status-icon {
  background: var(--gm-green-500-overlay-20);
  color: var(--gm-green-400);
}

.invitation-status-declined .invitation-status-icon {
  background: var(--gm-glass-white-10);
  color: var(--gm-glass-white-70);
}

.invitation-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@media (width <= 820px) {
  .invitation-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* glass_morph/organisms/mobile.css */
/*
 * Phone pages (/m). iOS conventions on the brand navy: large titles, inset
 * grouped lists, 44px touch targets, safe-area padding for the notch and the
 * home indicator. Only loaded styles are scoped under .gm-m, so nothing here
 * reaches the desktop pages.
 */

/* The desktop shell locks body height and scrolls inside .main-content; the
   phone pages scroll the page itself, like public-page does. */
body.gm-m {
  display: block;
  height: auto;
  overflow: auto;
}

body.gm-m::before {
  display: none;
}

.gm-m {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 32px)
    env(safe-area-inset-left);
  background: var(--gm-m-bg);
  color: var(--gm-m-text);
  font-family: var(--gm-m-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.gm-m a {
  color: var(--gm-m-tint);
}

.gm-m :focus-visible,
.gm-m-opt:has(:focus-visible) .gm-m-opt__mark,
.gm-m .gm-m-kind:has(:focus-visible) {
  outline: 2px solid var(--gm-m-tint);
  outline-offset: 2px;
}

/* ── Navigation bar ─────────────────────────────────────────────────────── */

.gm-m-navbar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px 8px 0;
}

/* The back link is the phone's whole breadcrumb: a thin chevron tight against
   the parent's name, the way iOS draws it. The chevron overhangs the 16px
   content gutter by its own side bearing so the label lines up with the titles
   and list rows below it. */
.gm-m-navbar__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 62%;
  min-height: 44px;
  margin-inline-start: -2px;
  padding: 0 8px 0 6px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    opacity 150ms ease-out,
    background 150ms ease-out;
}

/* Taller than the label, like SF Symbols' chevron.left, and nudged up a hair
   because the glyph sits low in its em box. */
.gm-m-navbar__chevron {
  font-size: 22px;
  line-height: 1;
  margin-block-start: -1px;
}

.gm-m-navbar__back-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* iOS dims a pressed bar button rather than filling it. */
.gm-m-navbar__back:active {
  opacity: 0.4;
}

@media (hover: hover) {
  .gm-m-navbar__back:hover {
    background: var(--gm-m-fill);
  }
}

.gm-m-navbar__spacer {
  flex-grow: 1;
}

/* The account, trailing on the nav bar opposite the way back. Quiet uppercase
   so the bar still reads as the back link first, and it shrinks before the
   back label does — the parent you came from is the more useful of the two
   when only one fits. */
.gm-m .gm-m-navbar__account {
  display: inline-flex;
  min-width: 0;
  max-width: 38%;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 4px 0 8px;
  border-radius: 12px;
  color: var(--gm-m-text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gm-m-navbar__account-name {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-m-navbar__account-chevron, .gm-m-row__chevron {
  flex-shrink: 0;
  color: var(--gm-m-text-tertiary);
}

.gm-m-navbar__account:active {
  opacity: 0.4;
}

@media (hover: hover) {
  .gm-m-navbar__account:hover {
    background: var(--gm-m-fill);
  }
}

.gm-m-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--gm-m-fill);
  color: var(--gm-m-text);
}

/* ── Large title ────────────────────────────────────────────────────────── */

.gm-m-title {
  padding: 2px 16px 0;
}

.gm-m-title__text {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gm-m-text);
}

.gm-m-title__subtitle {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--gm-m-text-secondary);
}

/* ── Search and segmented filter ────────────────────────────────────────── */

.gm-m-search {
  margin: 14px 16px 0;
}

.gm-m-search input {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--gm-m-fill);
  color: var(--gm-m-text);
  font-family: inherit;
  font-size: 17px;
}

.gm-m-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 14px 16px 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--gm-m-fill);
}

.gm-m .gm-m-segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 7px;
  color: var(--gm-m-text);
  font-size: 13px;
  font-weight: 600;
}

/* ── Sideways-scrolling strips ──────────────────────────────────────────── */

/* A strip wider than the screen is only obviously a strip if something says so.
   The wrapper fades each edge over a chevron for as long as there is more that
   way, so a chip or a tile cut off at the edge reads as "swipe" rather than as
   a layout mistake. `scroll-edges` marks the wrapper `data-at-start` and
   `data-at-end`, and the fade on that side goes — an affordance still lit at
   the end of the strip is telling a lie about what is left. */
.gm-m-scroll-wrap {
  position: relative;
}

.gm-m-scroll-more {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  width: 72px;
  color: var(--gm-m-tint);
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.gm-m-scroll-more--end {
  right: 0;
  justify-content: flex-end;
  padding-right: 10px;
  background: linear-gradient(to right, transparent, var(--gm-m-bg) 70%);
}

.gm-m-scroll-more--start {
  left: 0;
  justify-content: flex-start;
  padding-left: 10px;
  background: linear-gradient(to left, transparent, var(--gm-m-bg) 70%);
}

.gm-m-scroll-wrap[data-at-end] .gm-m-scroll-more--end,
.gm-m-scroll-wrap[data-at-start] .gm-m-scroll-more--start {
  opacity: 0;
}

/* ── Filter chips and their sheets ──────────────────────────────────────── */

/* The refine bar: a row of chips that scrolls sideways, and one button under it
   saying what the current selection is worth. The row bleeds into both gutters
   so a chip half off the edge tells the reader there is more to the right. */
.gm-m-refine {
  margin: 14px 0 0;
}

.gm-m-chips {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gm-m-chips::-webkit-scrollbar {
  display: none;
}

.gm-m-chip {
  flex: none;
}

/* The chip itself is the <summary>. The default disclosure triangle is removed
   twice: once for every browser, once for Safari, which only honours the
   pseudo-element. */
.gm-m .gm-m-chip__button {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--gm-m-separator);
  border-radius: 999px;
  background: var(--gm-glass-white-5);
  color: var(--gm-m-text);
  font-size: 13px;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.gm-m .gm-m-chip__button::-webkit-details-marker {
  display: none;
}

.gm-m-chip__key {
  color: var(--gm-m-text-tertiary);
}

.gm-m-chip__value {
  font-weight: 500;
}

.gm-m-chip__count {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gm-m-tint);
  color: var(--gm-teal-850);
  font-size: 11px;
  font-weight: 700;
}

.gm-m .gm-m-chip__icon,
.gm-m .gm-m-chip__chevron {
  color: var(--gm-m-text-tertiary);
}

/* Green the moment the choice behind the chip differs from the default, which
   is what makes "which filters are on" answerable without opening anything. */
.gm-m .gm-m-chip--set .gm-m-chip__button {
  border-color: var(--gm-m-tint);
  background: var(--gm-m-tint-bg);
}

.gm-m-chip--set .gm-m-chip__key,
.gm-m-chip--set .gm-m-chip__value,
.gm-m .gm-m-chip--set .gm-m-chip__chevron,
.gm-m .gm-m-chip--set .gm-m-chip__icon {
  color: var(--gm-m-tint);
}

.gm-m-chip[open] .gm-m-chip__chevron {
  transform: rotate(180deg);
}

/* The scrim belongs to the open chip rather than to the bar, so nothing has to
   be toggled to show it. */
.gm-m-chip[open]::before {
  content: "";
  position: fixed;
  z-index: 40;
  inset: 0;
  background: var(--gm-m-scrim);
}

.gm-m-sheet {
  display: flex;
  position: fixed;
  z-index: 41;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  max-height: 80vh;
  max-height: 80dvh;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--gm-m-separator);
  border-radius: 20px 20px 0 0;
  background: var(--gm-m-sheet);
  text-align: start;
  white-space: normal;
}

.gm-m-sheet__grip {
  width: 36px;
  height: 4px;
  margin: 8px auto 4px;
  border-radius: 2px;
  background: var(--gm-m-track);
}

.gm-m-sheet__head {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 6px 16px 10px;
}

.gm-m-sheet__title, .gm-m-tile__label {
  font-size: 15px;
  font-weight: 600;
}

.gm-m-sheet__subtitle, .gm-m .gm-m-refine__clear {
  color: var(--gm-m-text-tertiary);
  font-size: 12px;
}

.gm-m-sheet__search {
  margin: 0 16px 6px;
}

.gm-m-sheet__options {
  flex: 1;
  padding: 0 4px 4px;
  overflow-y: auto;
}

.gm-m-sheet__group {
  display: block;
  padding: 14px 12px 4px;
  color: var(--gm-m-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-m-sheet__options > .gm-m-sheet__group:first-child {
  padding-top: 2px;
}

/* One option. The real input sits inside and is never seen; .gm-m-opt__mark is
   the box or the dot, and :has() on the label is what colours the row. */
.gm-m-opt {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--gm-radius-sm);
  color: var(--gm-m-text-secondary);
  font-size: 14px;
  cursor: pointer;
}

.gm-m-opt:active {
  background: var(--gm-glass-white-5);
}

.gm-m .gm-m-opt__input, .gm-m .gm-m-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gm-m-opt__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gm-m-control-border);
  border-radius: 6px;
}

/* The tick is drawn rather than rendered, so no SVG has to live in a molecule. */
.gm-m-opt__mark::after {
  width: 5px;
  height: 9px;
  transform: rotate(45deg) translate(-1px, -1px);
  border: solid var(--gm-teal-850);
  border-width: 0 2px 2px 0;
  opacity: 0;
  content: "";
}

/* The row that says "no company named yet". It sits above the names and is
   separated from them, because it is a statement about the whole list rather
   than one more thing in it. */
.gm-m-opt--all {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gm-m-separator);
  border-radius: 0;
  font-weight: 500;
}

/* The option that is not one more of the list — "custom", which asks for the
   instructions the rest stand in for — is ruled off from them, the mirror of
   the "all" row that heads a filter's list. */
.gm-m-opt[data-tint] {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--gm-m-separator);
  border-radius: 0;
}

.gm-m-opt:has(.radio) .gm-m-opt__mark {
  border-radius: 50%;
}

.gm-m-opt:has(.radio) .gm-m-opt__mark::after {
  width: 8px;
  height: 8px;
  transform: none;
  border: 0;
  border-radius: 50%;
  background: var(--gm-teal-850);
}

.gm-m-opt:has(:checked) {
  color: var(--gm-m-text);
}

.gm-m-opt:has(:checked) .gm-m-opt__mark {
  border-color: var(--gm-m-tint);
  background: var(--gm-m-tint);
}

.gm-m-opt:has(:checked) .gm-m-opt__mark::after {
  opacity: 1;
}

.gm-m-opt__label {
  flex: 1;
}

.gm-m-opt__count {
  color: var(--gm-m-text-tertiary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.gm-m-sheet__foot {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px 18px;
  border-top: 1px solid var(--gm-m-separator);
}

.gm-m .gm-m-sheet__reset {
  flex: none;
  color: var(--gm-m-text-tertiary);
  font-size: 12px;
}

/* The atom's ::before glow is switched off just below, so these two carry their
   own 1px edge: on the lifted page the fill alone clears it by only 2.8:1,
   under the 3:1 WCAG asks of a control's boundary. The edge reads 6.0:1. */
.gm-m .gm-m-sheet__foot .button,
.gm-m .gm-m-pager .button {
  min-height: 44px;
  border: 1px solid var(--gm-m-button-edge);
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-button);
  box-shadow: none;
  color: var(--gm-m-text);
  font-size: 15px;
  font-weight: 600;
}

.gm-m .gm-m-sheet__foot .button::before,
.gm-m .gm-m-pager .button::before {
  display: none;
}

.gm-m-refine__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px 8px;
}

.gm-m-refine__eyebrow {
  color: var(--gm-m-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-m-pager {
  display: flex;
  gap: 8px;
  margin: 12px 16px 0;
}

/* The chips animate open; a reader who asked for less motion gets none. */
@media (prefers-reduced-motion: no-preference) {
  .gm-m-chip__chevron {
    transition: transform 150ms ease-out;
  }
}

/* ── Grouped sections and rows ──────────────────────────────────────────── */

.gm-m-section {
  margin: 24px 16px 0;
}

.gm-m-section__header {
  margin: 0 16px 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gm-m-text-tertiary);
}

/* A header with its count (MobileSection count:): the tasks home's
   "Te laat" and "Komend". Only the counter carries the group's colour. */
.gm-m-section__header--counted {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gm-m-section__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gm-m-separator);
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-cell);
}

.gm-m-section__footer {
  margin: 6px 16px 0;
  font-size: 13px;
  color: var(--gm-m-text-tertiary);
}

.gm-m .gm-m-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 14px;
  color: var(--gm-m-text);
}

.gm-m-row + .gm-m-row {
  border-top: 0.5px solid var(--gm-m-separator);
}

.gm-m .gm-m-row--link:active {
  background: var(--gm-m-fill);
}

.gm-m-row__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}

.gm-m-row__title {
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.gm-m-row__title--wrap {
  font-size: 16px;
}

.gm-m-row__title--plain {
  font-weight: 400;
}

/* Title and its note share a line, the note keeping its width so a long title
   gives way first. */
.gm-m-row__titles {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.gm-m-row__note {
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gm-m-text-tertiary);
}

/* A mark drawn across the body column rather than beside the value: it is a
   property of the title above it, not a second value. */
.gm-m-row__meter {
  margin-top: 4px;
}

.gm-m-row__subtitle {
  font-size: 14px;
  color: var(--gm-m-text-secondary);
}

.gm-m-row__meta {
  overflow: hidden;
  font-size: 13px;
  color: var(--gm-m-text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabular figures so a column of scores lines up instead of jittering per row. */
.gm-m-row__detail {
  flex-shrink: 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-m-text-secondary);
  text-align: right;
}

.gm-m-row__trailing {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 4px;
}

.gm-m-row__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--gm-m-tint-bg);
  color: var(--gm-m-tint);
}

.gm-m-row__icon--hot {
  color: var(--gm-m-stage-hot);
}

.gm-m-row .row-avatar {
  flex-shrink: 0;
}

.gm-m .gm-m-row--danger,
.gm-m .gm-m-row--danger .gm-m-row__icon {
  color: var(--gm-m-danger);
}

.gm-m .gm-m-row--danger .gm-m-row__icon {
  background: var(--gm-m-danger-bg);
}

/* Something to know before starting, which refuses nothing: an email can be
   written without an account connected, just not sent. Amber rather than the
   red a refused submit gets. */
.gm-m .gm-m-row--warning,
.gm-m .gm-m-row--warning .gm-m-row__icon {
  color: var(--gm-m-warning);
}

.gm-m .gm-m-row--warning .gm-m-row__icon {
  background: var(--gm-m-warning-bg);
}

.gm-m-row__hint {
  flex-shrink: 0;
  color: var(--gm-m-tint);
}

/* ── Prospect header, metric tiles and quick actions ────────────────────── */

.gm-m-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 0;
  text-align: center;
}

.gm-m-hero__name {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--gm-m-text);
}

.gm-m-hero__meta {
  font-size: 15px;
  color: var(--gm-m-text-secondary);
}

.gm-m-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 16px 0;
}

/* The home screen has one tile since readiness became the desktop's single
   "ready to reach out" question; it takes the row rather than half of it. */
.gm-m-tiles--single {
  grid-template-columns: minmax(0, 1fr);
}

.gm-m .gm-m-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--gm-m-separator);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-m-cell);
  color: var(--gm-m-text);
}

.gm-m-tile__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.gm-m-tile__caption {
  font-size: 13px;
  color: var(--gm-m-text-secondary);
}

.gm-m-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 16px 0;
}

.gm-m .gm-m-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  border: 1px solid var(--gm-m-separator);
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-cell);
  font-size: 12px;
  font-weight: 600;
}

.gm-m-action--disabled {
  opacity: 0.4;
}

/* ── Score marks: fit ring and readiness bars ─────────────────── */

/* Arc length is the score, stroke colour is the band, so the mark still reads
   in greyscale and for colour-blind users. Band colours are the app-wide
   --gm-score-* set, the same five the desktop scores by. */
.gm-m-ring {
  position: relative;
  flex-shrink: 0;
  line-height: 1;
}

.gm-m-ring__track {
  stroke: var(--gm-m-track);
}

.gm-m-ring__value {
  stroke: currentcolor;
}

.gm-m-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gm-m-text);
}

.gm-m-ring--excellent { color: var(--gm-score-excellent); }
.gm-m-ring--good { color: var(--gm-score-good); }
.gm-m-ring--fair { color: var(--gm-score-fair); }
.gm-m-ring--poor { color: var(--gm-score-poor); }
.gm-m-ring--low { color: var(--gm-score-low); }

.gm-m-ring--sm .gm-m-ring__label {
  font-size: 11.5px;
}

.gm-m-ring--md .gm-m-ring__label {
  font-size: 19px;
}

.gm-m-ring--lg .gm-m-ring__label {
  font-size: 32px;
}

/* Fit then readiness, side by side, so a row keeps its height. */
.gm-m-marks {
  flex-shrink: 0;
}

/* Three chevrons, lit from the bottom. Unlit strokes are the text colour at
   18%, so the height of the stack reads before any colour does. */
.gm-m-importance {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
}

.gm-m-importance__mark {
  flex-shrink: 0;
  overflow: visible;
}

.gm-m-importance__chevron {
  stroke: currentcolor;
  stroke-opacity: 0.18;
}

.gm-m-importance__chevron--on {
  stroke: currentcolor;
  stroke-opacity: 1;
}

.gm-m-importance__name {
  font-size: 13px;
  font-weight: 600;
}

.gm-m-importance--low { color: var(--gm-importance-low); }
.gm-m-importance--normal { color: var(--gm-importance-normal); }
.gm-m-importance--high { color: var(--gm-importance-high); }
.gm-m-importance--critical { color: var(--gm-importance-critical); }

.gm-m-importance--md .gm-m-importance__name {
  font-size: 18px;
  font-weight: 700;
}

/* Critical is the only filled state: white chevrons on the level's colour. */
.gm-m-importance--solid .gm-m-importance__plate {
  fill: currentcolor;
}

.gm-m-importance--solid .gm-m-importance__chevron,
.gm-m-importance--solid .gm-m-importance__chevron--on {
  stroke: var(--gm-white);
  stroke-opacity: 1;
}

/* One criterion as a line: length is the score, colour is the same band the
   ring uses, so the parts and the total are read off one scale. Thin enough to
   live under a row's title, where the number itself is already printed. */
.gm-m-scorebar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gm-m-track);
}

.gm-m-scorebar__fill {
  height: 100%;
  border-radius: 999px;
  background: currentcolor;
}

.gm-m-scorebar--excellent { color: var(--gm-score-excellent); }
.gm-m-scorebar--good { color: var(--gm-score-good); }
.gm-m-scorebar--fair { color: var(--gm-score-fair); }
.gm-m-scorebar--poor { color: var(--gm-score-poor); }
.gm-m-scorebar--low { color: var(--gm-score-low); }

/* ── Disclosure cell ────────────────────────────────────────────────────── */

.gm-m-disclosure + .gm-m-disclosure,
.gm-m-row + .gm-m-disclosure,
.gm-m-disclosure + .gm-m-row {
  border-top: 0.5px solid var(--gm-m-separator);
}

.gm-m-disclosure__summary {
  cursor: pointer;
  list-style: none;
}

.gm-m-disclosure__summary::-webkit-details-marker {
  display: none;
}

.gm-m-disclosure__summary:active {
  background: var(--gm-m-fill);
}

.gm-m-disclosure__chevron {
  flex-shrink: 0;
  color: var(--gm-m-text-tertiary);
  transition: transform 200ms ease-out;
}

.gm-m-disclosure[open] .gm-m-disclosure__chevron {
  transform: rotate(180deg);
}

.gm-m-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 12px;
}

.gm-m-disclosure__note {
  font-size: 14px;
  line-height: 1.4;
  color: var(--gm-m-tint);
}

.gm-m .gm-m-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 15px;
  color: var(--gm-m-tint);
}

.gm-m-hint {
  margin: 8px 16px 0;
  font-size: 13px;
  color: var(--gm-m-text-tertiary);
}

.gm-m-disclosure__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gm-m-text-secondary);
  white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
  .gm-m-disclosure__chevron {
    transition: none;
  }
}

/* ── Account strip and picker ───────────────────────────────────────────── */

/* The account the phone is showing, on one line at the top of every screen:
   a small avatar, the name, and the chevron that opens the picker. Quiet
   enough to sit above a large title without competing with it. */

/* Platform admin inside somebody else's account. Danger rather than warning,
   because the desktop banner it mirrors is critical, and it sits above the nav
   bar so it is read before the name of the account is. */
.gm-m .gm-m-admin-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-danger-bg);
  color: var(--gm-m-danger);
  font-size: 13px;
  font-weight: 600;
}

.gm-m-admin-banner__name {
  overflow: hidden;
  min-width: 0;
  flex-grow: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The way out keeps its own 44px target inside the banner's tighter line. */
.gm-m .gm-m-admin-banner__leave {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  padding-inline: 4px;
  color: var(--gm-m-danger);
  text-decoration: none;
}

.gm-m .gm-m-admin-banner__leave:active {
  opacity: 0.4;
}

.gm-m-row__check {
  color: var(--gm-m-tint);
}

/* ── Empty state and footer ─────────────────────────────────────────────── */

.gm-m-empty {
  margin: 48px 32px 0;
  font-size: 15px;
  color: var(--gm-m-text-secondary);
  text-align: center;
}

.gm-m-footer {
  margin: 32px 16px 0;
  font-size: 13px;
  text-align: center;
}

.gm-m-done {
  text-decoration: line-through;
  color: var(--gm-m-text-tertiary);
}

.gm-m-task-toggle form {
  margin: 0;
}

.gm-m .gm-m-task-toggle .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 22px;
  background: var(--gm-m-tint-bg);
  box-shadow: none;
  color: var(--gm-m-tint);
}

.gm-m .gm-m-task-toggle .button::before {
  display: none;
}

/* The chevron beside a task's circle: its own 44px target, so a thumb aiming
   for the detail screen cannot complete the task by mistake. */
.gm-m-row__open {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--gm-m-text-tertiary);
}

/* A row that opens a screen but also carries a button: the chevron's link
   spreads an invisible layer over the whole line, so a thumb anywhere on it
   lands on the link, while the button stays on top of that layer with its own
   44px. One target for reading, one for acting, and no nested <a>. */
.gm-m .gm-m-row--stretch {
  position: relative;
}

.gm-m-row--stretch .gm-m-row__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.gm-m-row--stretch .gm-m-task-toggle {
  position: relative;
  z-index: 1;
}

.gm-m .gm-m-row--stretch:active {
  background: var(--gm-m-fill);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

/* A field is a row of the inset grouped list: label small above, the control
   filling the row, the same hairline between fields that rows have. The
   desktop atoms bring a light box of their own; here the cell is the box. */
.gm-m-form {
  margin: 0;
}

.gm-m-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 6px;
}

.gm-m-field + .gm-m-field {
  border-top: 0.5px solid var(--gm-m-separator);
}

.gm-m .gm-m-field__label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--gm-m-text-tertiary);
}

/* The desktop draws "optional" as a light chip, which on the navy would shout
   louder than the label it qualifies. Here it is a word beside the label, in
   the label's own colour. */
.gm-m .gm-m-field__label .label-optional {
  margin-left: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--gm-m-text-tertiary);
  font-size: 13px;
  line-height: inherit;
}

/* A field that shows text instead of taking it: a standard message previewed
   for one person, and the variables nothing could fill. */

.gm-m .gm-m-field .input,
.gm-m .gm-m-field .textarea,
.gm-m .gm-m-field .select {
  width: 100%;
  min-height: 36px;
  padding: 6px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gm-m-text);
  color-scheme: dark;
  font-family: inherit;
  font-size: 17px;
}

.gm-m .gm-m-field .input:focus,
.gm-m .gm-m-field .textarea:focus,
.gm-m .gm-m-field .select:focus {
  background: transparent;
  outline: none;
}

.gm-m .gm-m-field .input::placeholder,
.gm-m .gm-m-field .textarea::placeholder {
  color: var(--gm-m-text-tertiary);
}

.gm-m .gm-m-field .textarea {
  min-height: 72px;
  resize: none;
}

/* The native chevron in the tint, on the right, where iOS puts it. */
.gm-m .gm-m-field .select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%2334d399'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 20px;
}

.gm-m-form__submit {
  margin: 24px 16px 0;
}

.gm-m .gm-m-form__submit .button {
  min-height: 50px;
  border: 1px solid var(--gm-m-button-edge);
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-button);
  box-shadow: none;
  color: var(--gm-m-text);
  font-size: 17px;
  font-weight: 600;
}

.gm-m .gm-m-form__submit .button::before {
  display: none;
}

/* A hidden field or section stays out of the layout, whatever display the
   component set. */
.gm-m [hidden] {
  display: none;
}

/* ── Pickers: kind tiles, writer segments, message cards ────────────────── */

/* A picker is a bare section (MobileSection body: false): the header and
   footer line up with a section's, the middle is the control's own. */
.gm-m-section--bare .gm-m-section__header {
  margin-bottom: 8px;
}

.gm-m-section--bare .gm-m-section__footer {
  margin-top: 8px;
}

.gm-m-section--bare .gm-m-section {
  margin: 12px 0 0;
}

/* The radio itself is for the browser; the label around it is the control.
   The label is positioned so the radio's one hidden pixel stays inside it: an
   unanchored absolute radio in a tile scrolled off to the right widened the
   page, and a phone then laid the whole screen out to that width. */
.gm-m .gm-m-kind,
.gm-m .gm-m-segmented__item--choice {
  position: relative;
  overflow: hidden;
}

.gm-m .radio--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kind tiles: a sideways-scrolling row, snapping tile by tile, that bleeds
   past the 16px gutter so a half-visible tile says there are more. */
.gm-m-kinds-wrap {
  margin: 0 -16px;
}

.gm-m-kinds {
  display: flex;
  gap: 8px;
  padding: 2px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gm-m-kinds::-webkit-scrollbar {
  display: none;
}

.gm-m .gm-m-kind {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-height: 84px;
  margin: 0;
  padding: 10px 6px;
  border: 1.5px solid var(--gm-m-separator);
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-cell);
  color: var(--gm-m-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  scroll-snap-align: start;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

.gm-m-kind__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--gm-m-fill);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.gm-m-kind__label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gm-m .gm-m-kind:has(:checked) {
  border-color: var(--gm-m-tint);
  background: var(--gm-m-tint-bg);
  color: var(--gm-m-text);
}

.gm-m .gm-m-kind:has(:checked) .gm-m-kind__icon {
  background: var(--gm-m-tint);
  color: var(--gm-m-bg);
}

.gm-m .gm-m-kind--disabled {
  opacity: 0.4;
}

/* Writer segments: the links' segmented control, with radios inside. */
.gm-m-segmented--form {
  margin: 0;
}

.gm-m .gm-m-segmented__item--choice {
  gap: 6px;
  min-height: 40px;
  margin: 0;
  color: var(--gm-m-text-secondary);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.gm-m .gm-m-segmented__item--choice:has(:checked) {
  background: var(--gm-m-fill-active);
  color: var(--gm-m-text);
}

.gm-m .gm-m-segmented__item--choice:has(:focus-visible) {
  outline: 2px solid var(--gm-m-tint);
  outline-offset: -2px;
}

/* The line under the message field that says what is happening to it. */
.gm-m .gm-m-row--status {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 8px;
  color: var(--gm-m-text-tertiary);
  font-size: 13px;
}

/* Half a minute is a long time to hold a phone, so the line says the work is
   under way in the tint rather than in the grey it says everything else in.
   The radar above it carries the motion. */
.gm-m .gm-m-row--working {
  color: var(--gm-m-tint);
  text-align: center;
}

/* A message that could not be written, out of tokens most often: a red
   block in the look of the alert notice, so it is not read past. */
.gm-m .gm-m-row--alert {
  margin: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--gm-radius-md);
  background: var(--gm-m-danger-bg);
  color: var(--gm-m-danger);
  font-size: 15px;
  font-weight: 600;
}

.gm-m .gm-m-row--alert .gm-m-row__subtitle {
  color: var(--gm-m-danger);
  font-size: 15px;
}

/* The message fields light up in the tint for a moment when something
   wrote into them, so a fill that happened below the fold is noticed as
   the screen scrolls to it. */
@keyframes gm-m-filled {
  from {
    background-color: var(--gm-m-tint-bg);
  }

  to {
    background-color: transparent;
  }
}

.gm-m .gm-m-section--filled .gm-m-field {
  animation: gm-m-filled 1400ms ease-out;
}

/* The button that was tapped is where the thumb already is, so it says the
   waiting word while it waits. A button that only greys out reads as one that
   broke. The turning is the radar's, below — one wait, one animation. */
.gm-m .gm-m-button--working {
  pointer-events: none;
  opacity: 1;
}

/* The radar sweeps in the message field itself while the model writes: the
   product's own loader rather than a browser ring, drawn where the answer is
   going to appear. The text it is about to replace is held out of sight rather
   than removed, so the field keeps its height and nothing has to be painted
   over. :not([hidden]) throughout, so the attribute still wins. */
.gm-m .gm-m-field__control:has(.gm-m-radar:not([hidden])) {
  position: relative;
}

.gm-m .gm-m-field__control:has(.gm-m-radar:not([hidden])) .textarea {
  visibility: hidden;
}

.gm-m .gm-m-radar:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .gm-m .gm-m-kind,
  .gm-m-kind__icon,
  .gm-m .gm-m-segmented__item--choice {
    transition: none;
  }

  .gm-m .gm-m-section--filled .gm-m-field {
    animation: none;
  }
}

/* ── The AI draft panel ─────────────────────────────────────────────────── */

/* Three stacked selects and a button stood about 320px tall and pushed the
   button below the fold, so the panel read as a form owed before anything would
   happen. Here the two questions are chips already carrying their answer and
   the panel is about a third of that. The chips are the list's own filter
   chips: same pill, same sheet, same green for the answer that is not the
   ordinary one. */
.gm-m-ai__head {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 14px 0;
  color: var(--gm-m-text-tertiary);
  font-size: 12px;
  font-weight: 600;
}

.gm-m .gm-m-ai__head .icon {
  color: var(--gm-m-tint);
}

/* The chips wrap rather than scroll: there are two of them, and a row that
   scrolls sideways inside a card invites a swipe that does nothing. */
.gm-m-ai__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
}

.gm-m-ai__chip {
  flex: none;
}

/* The field is one of the card's own, so it keeps the hairline above it — but
   only while it is open. */
.gm-m .gm-m-ai__instructions {
  border-top: 0.5px solid var(--gm-m-separator);
}

.gm-m-ai__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
}

.gm-m .gm-m-ai__more {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gm-m-text-tertiary);
  font-size: 12px;
  font-weight: 500;
}

.gm-m .gm-m-ai__more::before {
  display: none;
}

.gm-m .gm-m-ai__more:active {
  color: var(--gm-m-text);
}

.gm-m .gm-m-ai__more .button-container {
  gap: 5px;
}

/* The plus belongs to "open this", not to "hide it again", and it gives way to
   the dot when there is already text behind the fold. */
.gm-m .gm-m-ai__more[data-open] .icon,
.gm-m .gm-m-ai__more[data-filled] .icon {
  display: none;
}

/* Instructions that were typed and then folded away are still going to be sent,
   so the toggle keeps a mark saying the field behind it is not empty. */
.gm-m .gm-m-ai__more[data-filled] .button-container::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-m-tint);
}

/* The button that acts goes to the far end, whether or not the toggle beside it
   is on screen — under "custom" there is nothing left to toggle. */
.gm-m-ai__foot .button-primary {
  margin-left: auto;
}

/* ── Notices ────────────────────────────────────────────────────────────── */

/* What the last request left to say, as one line at the top: the tint for
   good news, the danger colours for bad. */
.gm-m-notice {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: var(--gm-radius-md);
  font-size: 15px;
}

.gm-m-notice--notice {
  background: var(--gm-m-tint-bg);
  color: var(--gm-m-tint);
}

.gm-m-notice--alert {
  background: var(--gm-m-danger-bg);
  color: var(--gm-m-danger);
}


/* ── 5. Surfaces (context-aware color flipping) ─────────────────────────────── */
/* glass_morph/surfaces/context.css */
/* ============================================================================ */
/* == Surface Contexts (tile-light / gm-surface / white-tile / gradient-tile)  */
/* ============================================================================ */
/* Mobile Responsive Adjustments */
/* Navbar Layout Styles */
/* Dark context (glassmorphism panels) - restore original dark theme */
.glass-panel .form-label,
.sidebar-left .form-label,
.tile-light .form-label {
  color: var(--gm-gray-300);
}

/* Light context (white cards) - keep the new light theme */
.white-tile .form-label,
.overview-tile .form-label {
  color: var(--gm-gray-700);
}

.white-tile .form-select,
.overview-tile .form-select {
  background: var(--gm-glass-black-2);
  border: 1px solid var(--gm-glass-black-15);
  color: var(--gm-gray-800);
}

.white-tile .form-select:focus {
  border-color: var(--gm-indigo-500);
  background: var(--gm-purple-500-overlay-5);
}

/* desktop breakpoint, same as Bootstrap's sm */
/* Light-surface override — auto-applies via CSS cascade in modal-content, tile-light, glass-card-light */
.modal-content .gm-badge-step-step,
.tile-light .gm-badge-step-step {
  background: linear-gradient(135deg, var(--gm-teal-500) 0%, var(--gm-green-500) 100%);
  box-shadow: 0 1px 3px var(--gm-glass-black-20);
}

.white-tile {
  background: var(--gm-white);
  font-size: 15px;
  color: var(--gm-gray-700);

  /* Default dark text for all white-tile content */
  /* Light surface context — flips gm-text-*, gm-bg-*, gm-separator-* to dark text */
  --gm-ctx-text-primary: var(--gm-text-on-light-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-light-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-light-muted);
  --gm-ctx-text-link: var(--gm-text-on-light-link);
  --gm-ctx-separator: var(--gm-glass-black-8);
}

.white-tile .info-row strong {
  color: var(--gm-teal-700);
}

.white-tile .info-row span {
  color: var(--gm-gray-700); /* slate-700 - outside palette */
}

.white-tile .tile-tab-content {
  color: var(--gm-gray-700); /* slate-700 - outside palette */
}

.gradient-tile {
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
  box-shadow: 0 8px 24px var(--gm-glass-black-30);

  --gm-ctx-text-primary: var(--gm-text-on-dark-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-dark-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-dark-muted);
  --gm-ctx-text-link: var(--gm-white);
}

.gradient-tile a,
.gradient-tile .detail-link,
.gradient-tile [data-controller="external-link"] {
  color: var(--gm-white) !important;
  text-decoration: underline;
  text-decoration-color: var(--gm-glass-white-30);
  text-underline-offset: 2px;
}

.gradient-tile a:hover,
.gradient-tile .detail-link:hover,
.gradient-tile [data-controller="external-link"]:hover {
  text-decoration-color: var(--gm-white);
}

.gradient-tile [data-controller="external-link"] .bi {
  color: var(--gm-white) !important;
}

.gradient-tile .info-row span {
  color: var(--gm-glass-white-85);
}

/* ------------------------------------
   READINESS HEADER - LIGHT BACKGROUND OVERRIDES
   When ReadinessHeaderContent sits inside a GlassCard (.tile-light),
   flip white-on-dark colors to dark-on-light for proper contrast.
   ------------------------------------ */
.tile-light .readiness-score-number {
  color: var(--gm-teal-700);
}

.tile-light .readiness-score-max {
  color: var(--gm-gray-500);
}

.tile-light .readiness-score-display {
  border-right-color: var(--gm-glass-black-10);
}

.tile-light .readiness-stat-label {
  color: var(--gm-gray-500);
}

.tile-light .readiness-stat-value {
  color: var(--gm-gray-800);
}

.tile-light .readiness-action-section {
  border-top-color: var(--gm-glass-black-8);
}

.tile-light .action-label {
  color: var(--gm-gray-600);
  font-weight: 600;
}

/* Light bg: primary link color */
.tile-light .readiness-back-link {
  color: var(--gm-blue-primary);
}

.tile-light .readiness-back-link:hover {
  color: var(--gm-blue-600);
}

/* Mobile: score divider override for light bg */
.tile-light .influence-timeline-event,
.tile-light .pagination-container .pagination-jump-input:hover,
.tile-light .pagination-container .pagination-jump-input:focus,
.stat-card-rich .pagination-container .pagination-jump-input:hover,
.stat-card-rich .pagination-container .pagination-jump-input:focus,
.modal-content .pagination-container .pagination-jump-input:hover,
.modal-content .pagination-container .pagination-jump-input:focus {
  background: var(--gm-white);
  border-color: var(--gm-gray-200);
}

.glass-checkbox {
  cursor: pointer;
  transition: all 0.2s;
}

.glass-checkbox:hover {
  transform: scale(1.05);
}

/* Auto-detect light surfaces for pagination — same pattern as button overrides.
   Pagination on tile-light, stat-card-rich, modal-content, or gm-surface-light
   surfaces automatically gets light styling without requiring variant: :light. */
.tile-light .pagination-container,
.stat-card-rich .pagination-container,
.modal-content .pagination-container {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  backdrop-filter: none;
}

.tile-light .pagination-container .pagination-info,
.stat-card-rich .pagination-container .pagination-info,
.modal-content .pagination-container .pagination-info {
  color: var(--gm-gray-500);
}

.tile-light .pagination-container .pagination-info-highlight,
.stat-card-rich .pagination-container .pagination-info-highlight,
.modal-content .pagination-container .pagination-info-highlight {
  color: var(--gm-gray-800);
}

.tile-light .pagination-container .pagination-btn,
.stat-card-rich .pagination-container .pagination-btn,
.modal-content .pagination-container .pagination-btn {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-gray-700);
}

.tile-light .pagination-container .pagination-btn:hover,
.stat-card-rich .pagination-container .pagination-btn:hover,
.modal-content .pagination-container .pagination-btn:hover {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-300);
  color: var(--gm-gray-900);
}

.tile-light .pagination-container .pagination-btn.active,
.stat-card-rich .pagination-container .pagination-btn.active,
.modal-content .pagination-container .pagination-btn.active {
  background: var(--gm-blue-primary);
  border-color: var(--gm-blue-primary);
  color: var(--gm-white);
}

.tile-light .pagination-container .pagination-btn.active:hover,
.stat-card-rich .pagination-container .pagination-btn.active:hover,
.modal-content .pagination-container .pagination-btn.active:hover {
  transform: none;
}

.tile-light .pagination-container .pagination-btn.nav-btn.disabled,
.stat-card-rich .pagination-container .pagination-btn.nav-btn.disabled,
.modal-content .pagination-container .pagination-btn.nav-btn.disabled {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-400);
}

.tile-light .pagination-container .pagination-ellipsis,
.stat-card-rich .pagination-container .pagination-ellipsis,
.modal-content .pagination-container .pagination-ellipsis {
  color: var(--gm-gray-400);
}

.tile-light .pagination-container .pagination-jump-input,
.stat-card-rich .pagination-container .pagination-jump-input,
.modal-content .pagination-container .pagination-jump-input {
  color: var(--gm-gray-900);
}

.tile-light .pagination-container .pagination-jump-input::placeholder,
.stat-card-rich .pagination-container .pagination-jump-input::placeholder,
.modal-content .pagination-container .pagination-jump-input::placeholder {
  color: var(--gm-gray-400);
}

/* Tile light - lighter glassmorphism variant for cards */
.tile-light {
  background: var(--gm-surface-glass-light);
  backdrop-filter: var(--gm-blur-md);
  border-radius: 16px;
  border: 1px solid var(--gm-glass-white-20);
  box-shadow: var(--gm-shadow-md);
  color: var(--gm-text-on-light-secondary);
}

.tile-light h1,
.tile-light h2,
.tile-light h3,
.tile-light h4,
.tile-light h5,
.tile-light h6,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
  color: var(--gm-text-on-light-primary);
}

/* Icon spans are excluded: an icon carries the colour its own context gave it —
   the yellow of .gm-score-flag, the shade of the heading or link it sits in —
   and repainting every span on a light surface overrode that, since this
   selector outranks the one that set the colour. An icon with no such context
   still lands on --gm-text-on-light-secondary, inherited from .tile-light
   itself, so nothing that was already right changes. */
.tile-light p,
.tile-light span:not([class*="gm-badge"], [class*="gm-icon-"], .button-text),
.tile-light label,
.modal-content p,
.modal-content span:not([class*="gm-badge"], [class*="gm-icon-"], .button-text),
.modal-content label {
  color: var(--gm-text-on-light-secondary);
}

/* .task-action-btn is a button drawn as an anchor, and button.css already gives
   it slate on a light surface. Without the exclusion this link rule outranks
   that one and paints it page-teal. */
.tile-light a:not(.button, .task-action-btn) {
  color: var(--gm-content-pane-bg);
}

.tile-light .text-muted,
.tile-light .text-secondary {
  color: var(--gm-text-on-light-muted);
}

.tile-light .text-body {
  color: var(--gm-text-on-light-primary) !important;
}

.tile-light .text-body-secondary {
  color: var(--gm-text-on-light-secondary) !important;
}

.tile-light .text-gray-900 {
  color: var(--gm-gray-900) !important;
}

.tile-light .text-primary-dark {
  color: var(--gm-text-on-light-primary) !important;
}

/* Avatar initials always stay white over their own coloured background, even on tile-light */
.tile-light .row-avatar-initials {
  color: var(--gm-white) !important;
}

.tile-light .mb-0 {
  margin-bottom: 0 !important;
}

.tile-light .mb-2 {
  margin-bottom: 0.5rem !important;
}

/* StatCard uses tile-light for white background — ensure tile-light wins */
.stat-card.tile-light {
  background: var(--gm-glass-white-95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--gm-glass-white-20);
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
}

.stat-card.tile-light:hover {
  box-shadow: 0 6px 20px var(--gm-glass-black-15);
}

/* Toggle switch, off — on a light surface. The default off track is
   glass-white-30, made for dark glass; on a white card it vanishes and only
   the white knob is left, so the switch reads as nothing at all (the
   auto-create switches on the Snitcher page). Gray-300 gives the track an
   edge; the on state is green everywhere and needs no flip. */
.modal-content .form-toggle-track-off,
.modal-body .form-toggle-track-off,
.tile-light .form-toggle-track-off,
.white-tile .form-toggle-track-off,
.gm-white-card .form-toggle-track-off,
.stat-card-rich .form-toggle-track-off,
.content-section-inner-card .form-toggle-track-off {
  background: var(--gm-gray-300);
}

/* Range slider — on a light surface. The track is glass-white-15, made for
   dark glass; on a white card only the knob was left (the score and daily-cap
   sliders on a company's website-visitor page). Gray-200, gray-300 on hover,
   on the same light surfaces as the toggle above. */
.modal-content .gm-range-slider,
.modal-body .gm-range-slider,
.tile-light .gm-range-slider,
.white-tile .gm-range-slider,
.gm-white-card .gm-range-slider,
.stat-card-rich .gm-range-slider,
.content-section-inner-card .gm-range-slider {
  background: var(--gm-gray-200);
}

.modal-content .gm-range-slider:hover,
.modal-body .gm-range-slider:hover,
.tile-light .gm-range-slider:hover,
.white-tile .gm-range-slider:hover,
.gm-white-card .gm-range-slider:hover,
.stat-card-rich .gm-range-slider:hover,
.content-section-inner-card .gm-range-slider:hover {
  background: var(--gm-gray-300);
}

/* Secondary button — context-aware flip for white/light surfaces.
   .modal-content (background: white), .tile-light, and .gm-surface-light
   are light surfaces where the default dark-glass secondary button
   (#d1d5db text, rgba-white border) would be invisible.

   .content-section-inner-card was missing from this list for as long as it has
   existed, and it is `background: var(--gm-white)` — so every secondary button
   inside any section card went white-on-white the moment you hovered it. Same
   for .terms-doc, the white document sheet on Account admin - Legal.

   .modal-body is the white card inside the .modal-container shell, the task
   modal among others, which has no .modal-content around it. The
   standaardberichten chips and language trigger there were gray-200 on white.
   These selectors automatically apply light-surface styling without
   requiring light: true on every call site. */
.modal-content .button.button-secondary,
.modal-body .button.button-secondary,
.tile-light .button.button-secondary,
.white-tile .button.button-secondary,
.gm-white-card .button.button-secondary,
.stat-card-rich .button.button-secondary,
.content-section-inner-card .button.button-secondary {
  background: var(--gm-white);

  /* gray-300 rather than gray-200: these sit on white cards as often as on
     gray ones, and a 200 border on white leaves the button with no edge. */
  border: 1px solid var(--gm-gray-300);
  color: var(--gm-slate-800);
}

.modal-content .button.button-secondary::before,
.modal-body .button.button-secondary::before,
.tile-light .button.button-secondary::before,
.white-tile .button.button-secondary::before,
.gm-white-card .button.button-secondary::before,
.stat-card-rich .button.button-secondary::before,
.content-section-inner-card .button.button-secondary::before {
  display: none;
}

/* Use !important to override the global .button-secondary:hover rule
   at line ~10179 which sets background with !important for dark surfaces. */
.modal-content .button.button-secondary:hover,
.modal-body .button.button-secondary:hover,
.tile-light .button.button-secondary:hover,
.white-tile .button.button-secondary:hover,
.gm-white-card .button.button-secondary:hover,
.stat-card-rich .button.button-secondary:hover,
.content-section-inner-card .button.button-secondary:hover {
  background: var(--gm-slate-100) !important;

  /* !important on the colour too. The global .button-secondary:hover sets
     `color: white !important` for dark surfaces, and without a matching
     !important here that rule wins on specificity ties — the button went white
     text on a near-white background, so hovering it made it disappear. */
  border-color: var(--gm-gray-400) !important;
  color: var(--gm-slate-900) !important;
  transform: none !important;
  box-shadow: none;
}

/* Expand chevron — flip for the white inner card of a section card.
   `.expand-icon` is coloured `--gm-white` outright (it was written for the dark
   data-row lists), so a chevron inside `.content-section-inner-card`, which is
   `background: var(--gm-white)`, is invisible. Scoped to that one surface on
   purpose: every other expand button in the app sits on dark glass and must keep
   its white chevron. Same specificity as `.expand-icon.collapsed`, and this file
   loads after the component layer, so these win on the tie. */
.content-section-inner-card .expand-icon {
  color: var(--gm-gray-500);
}

.content-section-inner-card .expand-button:hover .expand-icon {
  color: var(--gm-gray-900);
}

/* Table styling for admin pages */
.tile-light .table {
  margin-bottom: 0;
}

.tile-light .table thead th {
  border-bottom: 1px solid var(--gm-glass-black-8);
  background-color: transparent;
}

.tile-light .table tbody tr {
  border-bottom: 1px solid var(--gm-glass-black-5);
  transition: all 150ms ease-in-out;
}

.tile-light .table tbody tr:last-child {
  border-bottom: none;
}

.tile-light .table tbody td {
  padding: 16px;
  vertical-align: middle;
}

/* Account badges in table */
.tile-light .badge.bg-light {
  background-color: var(--gm-slate-100-overlay-80) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--gm-glass-black-5);
}

/* Light surface context — flip tokens to dark-on-light values */
.tile-light,
.modal-content,
.gm-white-card,
.gm-bg-white,
.section-card,
.info-card {
  --gm-ctx-text-primary: var(--gm-gray-900);
  --gm-ctx-text-secondary: var(--gm-gray-700);
  --gm-ctx-text-muted: var(--gm-gray-500);
  --gm-ctx-text-link: var(--gm-blue-600);
  --gm-ctx-separator: var(--gm-glass-black-8);
  --gm-ctx-bg-field: var(--gm-gray-50);
  --gm-ctx-bg-subtle: var(--gm-gray-100);

  /* Stat row — flip to dark-on-light for readability */
  --gm-ctx-stat-value: var(--gm-text-on-light-primary);
  --gm-ctx-stat-value-highlight: var(--gm-green-900);
  --gm-ctx-stat-value-alert: var(--gm-red-700);
  --gm-ctx-stat-label: var(--gm-text-on-light-muted);
  --gm-ctx-stat-label-opacity: 1;
  --gm-ctx-stat-separator: var(--gm-glass-black-8);
  --gm-ctx-stat-bg: transparent;
}

/* ── Tile base styles ─────────────────────────────────────────────────────── */
.tab-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.overview-tile .tile-content-wrapper {
  flex: 1;
}

.white-tile .tile-title {
  color: var(--gm-teal-700);
}

.white-tile .tile-content {
  color: var(--gm-gray-700);
}

.white-tile .tile-section strong {
  color: var(--gm-teal-700);
}

.gradient-tile .tile-title {
  color: var(--gm-white);
}

.gradient-tile .tile-content {
  color: var(--gm-white);
  opacity: 0.9;
}

.gradient-tile .tile-section strong {
  color: var(--gm-white);
}

.tile-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}

.tile-content {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.tile-section {
  margin-bottom: 20px;
  overflow-x: hidden;
  max-width: 100%;
}

.tile-section:last-child {
  margin-bottom: 0;
}

.tile-section strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-teal-700);
  display: block;
  margin-bottom: 8px;
}

/* ─── Dropdown menus on a light surface ─────────────────────────────────────
 *
 * The menu is dark glass by default, which is right on the page background and
 * unreadable inside a modal or a white tile: dark text on a dark panel, or
 * light text on white once the context tokens flip. Nothing here covered it,
 * so every DropdownButton in a modal had this — it showed up first on the
 * template picker's language control.
 *
 * Structural rather than a token swap, for the same reason the button rules
 * above are: the panel changes surface, not just its text colour.
 */
.tile-light .gm-dropdown-button__menu,
.modal-content .gm-dropdown-button__menu,
.white-tile .gm-dropdown-button__menu {
  border: 1px solid var(--gm-gray-200);
  background: var(--gm-white);
  box-shadow: var(--gm-shadow-popover);
  backdrop-filter: none;
}

.tile-light .gm-dropdown-button__item,
.modal-content .gm-dropdown-button__item,
.white-tile .gm-dropdown-button__item {
  color: var(--gm-gray-900);
}

.tile-light .gm-dropdown-button__item:hover,
.modal-content .gm-dropdown-button__item:hover,
.white-tile .gm-dropdown-button__item:hover {
  background: var(--gm-gray-100);
  color: var(--gm-gray-900);
}

.tile-light .gm-dropdown-button__divider,
.modal-content .gm-dropdown-button__divider,
.white-tile .gm-dropdown-button__divider {
  background: var(--gm-gray-200);
}


/* ── 6. Utilities (single-purpose helpers, high specificity) ─────────────────── */
/* glass_morph/utilities/colors.css */
/* ============================================================================ */
/* == Utility — Background Colors =========================================== */
/* ============================================================================ */
/* Custom Bootstrap-style color utilities (not in Bootstrap 5 core) */
.text-indigo {
  color: var(--gm-blue-800) !important;
}

.text-purple {
  color: var(--gm-purple-500) !important;
}

.text-teal {
  color: var(--gm-teal-500) !important;
}

.gm-text-teal-700 {
  color: var(--gm-teal-700) !important;
}

.text-pink {
  color: var(--gm-red-700) !important;
}

.text-orange {
  color: var(--gm-amber-600) !important;
}

/* Subtle background tints for the five colours Bootstrap has no -subtle variant
   for. EventTypeBadge and the timeline icon circles build `bg-<color>-subtle`
   from the category registry, so without these the badge text landed on a
   transparent pill and the category read as unfinished (#1056). Each tint
   matches the .text-* rule directly above. */
.bg-purple-subtle {
  background-color: var(--gm-purple-500-overlay-12) !important;
}

.bg-indigo-subtle {
  background-color: var(--gm-indigo-500-overlay-12) !important;
}

.bg-teal-subtle {
  background-color: var(--gm-teal-overlay-15) !important;
}

.bg-orange-subtle {
  background-color: var(--gm-amber-overlay-12) !important;
}

.bg-pink-subtle {
  background-color: var(--gm-red-600-overlay-12) !important;
}

.text-blue-600 {
  color: var(--gm-blue-600);
}

.text-blue-800 {
  color: var(--gm-blue-800);
}

.text-purple-500 {
  color: var(--gm-violet-500); /* purple-500 — not in GlassMorph palette, keep literal */
}

/* Background utilities */
.bg-gray-50 {
  background: var(--gm-gray-50);
}

.bg-gray-100 {
  background: var(--gm-gray-100);
}

.bg-blue-50 {
  background: var(--gm-blue-50); /* blue-50 — not in GlassMorph palette, keep literal */
}

.bg-blue-100 {
  background: var(--gm-blue-100);
}

/* Confidence/status color classes */
.text-green-500 {
  color: var(--gm-green-500);
}

.text-yellow-500 {
  color: var(--gm-yellow-500);
}

.text-red-500 {
  color: var(--gm-red-500);
}

.gm-bg-subtle {
  background: var(--gm-ctx-bg-subtle, var(--gm-glass-black-3)) !important;
}

/* --- Background utilities ------------------------------------------------ */
.gm-bg-gray-25 {
  background: var(--gm-gray-50) !important;
}

.gm-bg-red-50 {
  background: var(--gm-red-50) !important;
}

.gm-bg-red-600 {
  background: var(--gm-red-600) !important;
}

.gm-bg-green-50 {
  background: var(--gm-green-50) !important;
}

.gm-bg-blue-50 {
  background: var(--gm-blue-50) !important;
}

.gm-bg-amber-50 {
  background: var(--gm-amber-50) !important;
}

.gm-bg-blue-overlay-8 {
  background: var(--gm-blue-overlay-8) !important;
}

.gm-bg-teal-overlay-15 {
  background: var(--gm-teal-overlay-15) !important;
}

.gm-bg-green-overlay-10 {
  background: var(--gm-green-700-overlay-10) !important;
}

.gm-bg-yellow-overlay-8 {
  background-color: var(--gm-yellow-overlay-8) !important;
}

.gm-bg-glass-white-10 {
  background: var(--gm-glass-white-10) !important;
}

.gm-bg-glass-white-15 {
  background: var(--gm-glass-white-15) !important;
}

.gm-bg-glass-white-50 {
  background: var(--gm-glass-white-50) !important;
}

.gm-bg-none {
  background: none !important;
}

.gm-bg-white {
  background: var(--gm-white) !important;
}

/* ── Page-level utility classes ─────────────────────────────────────────── */
/* Backgrounds (extended) */
.gm-bg-green-500-overlay-8 {
  background: var(--gm-green-500-overlay-8) !important;
}

.gm-bg-blue-500-overlay-10 {
  background: var(--gm-blue-500-overlay-10) !important;
}

/* Glass-white-80 background */
.gm-bg-glass-white-80 {
  background: var(--gm-glass-white-80);
}

/* ── Additional utilities (subscriptions/accounts/emails/email-providers) ── */
/* Amber overlay avatar background */
.gm-bg-indigo-50 {
  background: var(--gm-indigo-50) !important;
}

.gm-bg-blue-overlay-15 {
  background: var(--gm-blue-400-overlay-15) !important;
}

.gm-bg-blue-overlay-10 {
  background: var(--gm-blue-overlay-10) !important;
}

.gm-bg-yellow-overlay-15 {
  background: var(--gm-yellow-overlay-15) !important;
}

.gm-bg-green-300-overlay-15 {
  background: var(--gm-green-300-overlay-15) !important;
}

/* Cost series fills — used by the trend chart, distribution bars and
   breakdown rows so one colour means one source of spend across the page. */
.gm-series-bg-llm {
  background: var(--gm-series-llm) !important;
}

.gm-series-bg-search {
  background: var(--gm-series-search) !important;
}

.gm-series-bg-enrichment {
  background: var(--gm-series-enrichment) !important;
}

.gm-series-bg-other {
  background: var(--gm-series-other) !important;
}

/* Status text — surface-independent (same color on dark and light) */
.gm-status-success {
  color: var(--gm-status-success, var(--gm-green-500)) !important;
}

.gm-status-warning {
  color: var(--gm-status-warning, var(--gm-yellow-500)) !important;
}

.gm-status-danger {
  color: var(--gm-status-danger, var(--gm-red-500)) !important;
}

/* Something could not be established — distinct from warning, which says the
   answer is bad. Amber-600 rather than the lighter yellow-500 warning tone so
   the glyph still reads on a white tile. */
.gm-status-incomplete {
  color: var(--gm-amber-600) !important;
}

/* glass_morph/utilities/borders.css */
/* ============================================================================ */
/* == Utility — Borders ===================================================== */
/* ============================================================================ */
/* Border utilities */
.border-gray-200 {
  border: 1px solid var(--gm-gray-200);
}

/* --- Border utilities ---------------------------------------------------- */
.gm-border-glass-8 {
  border: 1px solid var(--gm-glass-black-8) !important;
}

.gm-border-red-100 {
  border: 1px solid var(--gm-red-100) !important;
}

.gm-border-left-yellow {
  border-left: 4px solid var(--gm-yellow-500) !important;
}

.gm-border-dashed-gray-300 {
  border: 1px dashed var(--gm-gray-300) !important;
}

.gm-border-left-success {
  border-left: 3px solid var(--bs-success);
}

/* Borders (extended) */
.gm-border-blue-200 {
  border: 1px solid var(--gm-blue-200) !important;
}

.gm-border-gray-200 {
  border: 1px solid var(--gm-gray-200) !important;
}

/* Border-color utilities */
.gm-border-color-gray-100 {
  border-color: var(--gm-gray-100) !important;
}

.gm-border-green-connected {
  border: 1px solid var(--gm-green-300) !important;
}

/* glass_morph/utilities/sizing.css */
/* ============================================================================ */
/* == Utility — Sizing ====================================================== */
/* ============================================================================ */
/* Size utilities */
.w-20 {
  width: 20px;
}

.w-32 {
  width: 32px;
}

/* Font weight utilities */
.gm-size-1_25rem {
  width: 1.25rem;
  height: 1.25rem;
}

.gm-size-4rem {
  width: 4rem;
  height: 4rem;
}

.gm-size-32 {
  width: 32px;
  height: 32px;
}

.gm-max-w-320 {
  max-width: 320px;
}

.gm-max-w-360 {
  max-width: 360px;
}

.gm-max-w-400 {
  max-width: 400px;
}

.gm-max-w-480 {
  max-width: 480px;
}

.gm-max-w-250 {
  max-width: 250px;
}

.gm-max-w-500 {
  max-width: 500px;
}

.gm-max-w-520 {
  max-width: 520px;
}

.gm-max-w-720 {
  max-width: 720px;
}

.gm-max-w-820 {
  max-width: 820px;
}

.gm-max-w-42rem {
  max-width: 42rem;
}

.gm-max-w-60pct {
  max-width: 60%;
}

.gm-max-h-400 {
  max-height: 400px;
}

.gm-max-h-70vh {
  max-height: 70vh;
}

.gm-min-h-full {
  height: auto;
  min-height: 100%;
}

.gm-h-full {
  height: 100%;
}

.gm-min-w-140 {
  min-width: 140px;
}

.gm-min-w-180 {
  min-width: 180px;
}

.gm-min-w-2-5rem {
  min-width: 2.5rem;
}

.gm-min-w-4rem {
  min-width: 4rem;
}

.gm-min-w-5rem {
  min-width: 5rem;
}

.gm-min-h-200 {
  min-height: 200px;
}

/* ── Inline-style replacement utilities (DEC-NoInlineStyles) ──────────── */
/* Size: 44x44 icon container */
.gm-brand-icon-box {
  width: 44px;
  height: 44px;
}

/* Size: 28x28 circle */
.gm-size-28 {
  width: 28px;
  height: 28px;
}

/* Size 48x48 */
.gm-size-48 {
  width: 48px;
  height: 48px;
}

/* --- Additional utilities (cleanup pass) --------------------------------- */
.gm-size-36 {
  width: 36px;
  height: 36px;
}

.gm-min-w-110 {
  min-width: 110px;
}

/* Lets a flex child shrink below its content so text-truncate can work */
.gm-min-w-0 {
  min-width: 0;
}

.gm-w-40 {
  width: 40px;
}

.gm-w-1rem {
  width: 1rem;
}

.gm-w-14rem {
  width: 14rem;
}

.gm-w-auto {
  width: auto;
}

/* Width: 40px for table header columns */
.gm-w-40px {
  width: 40px;
}

/* glass_morph/utilities/spacing.css */
/* ============================================================================ */
/* == Utility — Spacing ===================================================== */
/* ============================================================================ */
/* Spacing utilities (extending Bootstrap) */
.mb-6 {
  margin-bottom: 6px;
}

.mb-8 {
  margin-bottom: 8px;
}

/* Gap variants */
.gap-xs {
  gap: 6px;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 12px;
}

.gap-lg {
  gap: 16px;
}

/* Non-standard spacing utilities (for values not in Bootstrap's 0-5 scale) */
/* Micro margin-top adjustments */
.mt-2px {
  margin-top: 2px;
}

.mt-12px {
  margin-top: 12px;
}

.mt-20px {
  margin-top: 20px;
}

.mt-0125 {
  margin-top: 0.125rem;
}

.mt-075 {
  margin-top: 0.75rem;
}

/* Micro margin-bottom adjustments */
.mb-10px {
  margin-bottom: 10px;
}

.mb-12px {
  margin-bottom: 12px;
}

.mb-20px {
  margin-bottom: 20px;
}

.mb-075 {
  margin-bottom: 0.75rem;
}

/* Margin-left / right */
.ms-175 {
  margin-left: 1.75rem;
}

/* Padding single-value non-standard */
.p-075 {
  padding: 0.75rem;
}

.p-125 {
  padding: 1.25rem;
}

.p-200 {
  padding: 2rem;
}

.p-20px {
  padding: 20px;
}

/* Padding multi-value non-standard (for badges, tags, buttons, sections) */
.p-2-10 {
  padding: 2px 10px;
}

.p-10-16 {
  padding: 10px 16px;
}

.p-12-16 {
  padding: 12px 16px;
}

.p-28-32 {
  padding: 28px 32px;
}

.p-0625-075 {
  padding: 0.625rem 0.75rem;
}

/* Padding directional non-standard */
.pt-075 {
  padding-top: 0.75rem;
}

.pt-125 {
  padding-top: 1.25rem;
}

.gap-xl {
  gap: 20px;
}

/* Bootstrap 5 already provides the full mb/mt/ms/me/mx/my
   pb/pt/ps/pe/px/py/p/m 0-5 scale — no redeclaration needed. */

/* glass_morph/utilities/opacity.css */
/* ============================================================================ */
/* == Utility — Opacity ===================================================== */
/* ============================================================================ */
/* Spacing micro-utilities */
/* --- Opacity utilities --------------------------------------------------- */
.gm-opacity-40 {
  opacity: 0.4;
}

.gm-opacity-50 {
  opacity: 0.5;
}

.gm-opacity-70 {
  opacity: 0.7;
}

.gm-opacity-75 {
  opacity: 0.75;
}

/* glass_morph/utilities/layout.css */
/* ============================================================================ */
/* == Utility — Layout Helpers ============================================== */
/* ============================================================================ */
.meta-line {
  font-size: 13px;
  color: var(--gm-glass-white-75);
}

.detail-link {
  color: var(--gm-ctx-text-link);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.detail-link:hover {
  color: var(--gm-ctx-text-link);
  opacity: 0.8;
  text-decoration: underline;
}

.detail-text {
  color: var(--gm-glass-white-75);
  font-size: 13px;
}

/* Text colors */
.text-white-50 {
  color: var(--gm-glass-white-50);
}

.text-gray-900 {
  color: var(--gm-gray-900);
}

.text-gray-700 {
  color: var(--gm-gray-700);
}

.text-gray-600 {
  color: var(--gm-gray-600);
}

.text-gray-500 {
  color: var(--gm-gray-500);
}

/* Section spacing */
.flex-1 {
  flex: 1;
}

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

.grid-auto-fit-320 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Hover transitions */
.hover-shadow {
  transition: all 0.3s ease;
}

.hover-shadow:hover {
  box-shadow:
    0 8px 24px var(--gm-glass-black-20),
    0 2px 8px var(--gm-glass-black-15);
  transform: translateY(-2px);
}

/* Justify content variants */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.cursor-pointer {
  cursor: pointer;
}

/* Dim the content behind the overlay */
.sync-radar-active > *:not([data-sync-radar-target="radar"]) {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gm-display-contents {
  display: contents;
}

.gm-display-inline {
  display: inline;
}

.gm-search-icon-pos {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* --- Transition utilities ------------------------------------------------ */
.gm-transition-opacity {
  transition: opacity 0.2s;
}

.gm-offscreen {
  position: absolute;
  left: -10000px;
}

.gm-no-pointer {
  pointer-events: none;
  user-select: none;
}

/* Subsection: gray-50 bg + gray-100 border + 1rem padding */
.gm-subsection {
  padding: 1rem;
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-100);
}

.gm-clear-btn-pos {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 0;
  width: auto;
  height: auto;
  background: transparent;
  z-index: 2;
}

/* Strip the .button glow ::before so the clear icon has no teal chrome */
.gm-clear-btn-pos::before {
  display: none;
}

/* The secondary button's hover sets `transform: none !important` and a glass
   pill, which drops the icon below the field and paints a tall bar behind it.
   Keep the centering and the bare icon; only the colour reacts. */
.button.button-secondary.gm-clear-btn-pos:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gm-ctx-text-primary, var(--gm-gray-900)) !important;
  transform: translateY(-50%) !important;
}

.gm-resize-vertical {
  resize: vertical;
}

.cursor-help {
  cursor: help;
}

.align-start {
  align-items: flex-start;
}

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

/* --- Layout utilities ---------------------------------------------------- */
.gm-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
}

/* Loading overlay z-index */
.gm-z-overlay {
  z-index: 10;
}

/* Utility used by toggle_controller.js to show/hide elements */
.hidden {
  display: none !important;
}

/* glass_morph/utilities/score_variants.css */
/* ============================================================================ */
/* == Utility — Score / Category / Status Badge Variants ==================== */
/* ============================================================================ */
/* Score badge color variants (English names — matching reference frontend) */
.score-green {
  background: var(--gm-score-excellent);
  color: var(--gm-white);
} /* Excellent */
.score-blue {
  background: var(--gm-score-good);
  color: var(--gm-white);
} /* Good */
.score-gray {
  background: var(--gm-score-fair);
  color: var(--gm-white);
} /* Fair */
.score-orange {
  background: var(--gm-score-poor);
  color: var(--gm-white);
} /* Poor */
.score-red {
  background: var(--gm-score-low);
  color: var(--gm-white);
}

/* Score + Momentum wrapper */
.score-momentum-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-momentum-cell--excellent .momentum-rising,
.score-momentum-cell--excellent .momentum-falling {
  color: var(--gm-score-excellent);
}

.score-momentum-cell--good .momentum-rising,
.score-momentum-cell--good .momentum-falling {
  color: var(--gm-score-good);
}

.score-momentum-cell--fair .momentum-rising,
.score-momentum-cell--fair .momentum-falling {
  color: var(--gm-score-fair);
}

.score-momentum-cell--poor .score-nr-poor {
  background: var(--gm-amber-overlay-76-1);
}

.score-momentum-cell--poor .momentum-rising,
.score-momentum-cell--poor .momentum-falling {
  color: var(--gm-amber-overlay-76-1);
}

.score-momentum-cell--low .score-nr-low {
  background: var(--gm-red-b04343);
}

.score-momentum-cell--low .momentum-rising,
.score-momentum-cell--low .momentum-falling {
  color: var(--gm-red-b04343);
}

/* StatusBadge Atom Styles */
.status-badge i {
  margin-right: 6px;
}

/* Info badge (cyan) */
.status-badge-info {
  background-color: var(--gm-teal-overlay-10) !important;

  /* teal-500 at 10% — keep composite */
  color: var(--gm-teal-500) !important;
}

/* Danger badge (red) */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 9999px;
  min-width: fit-content;
}

/* Score warning: a small sign overlaid on the bottom-right corner of the score
   element. No background, ring or badge — the glyph anchors directly to the
   score box, so the score keeps its original width.

   Yellow whichever state raised it. A rejection and an unjudged criterion are
   both "read this before you trust the number", and the tooltip says which in
   words; two colours only asked the user to decode a legend first. */
.score-momentum-cell,
.score-box,
.scoring-score-display {
  position: relative;
}

.gm-score-flag {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: var(--gm-yellow-500);
  line-height: 1;

  /* Carries its own contrast now that no white disc separates it from the
     score, whose colour runs from blue through orange to red. */
  filter: drop-shadow(0 1px 1px var(--gm-glass-black-30));
}

.gm-score-flag--lg {
  right: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
}

/* glass_morph/utilities/text_size.css */
/* ============================================================================ */
/* == Utility — Text sizes ==================================================== */
/* ============================================================================ */
/* Size variants — must live in utilities layer (after organisms) so that
   organism-level font-size rules (e.g. .hero-subtitle 16px) don't override
   explicit size helpers like .text-md 14px applied by components. */
.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 13px;
}

.text-md {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

.text-xl {
  font-size: 18px;
}

/* glass_morph/utilities/late_components.css */
/* ============================================================================ */
/* == Utility — Component rules that must load after the organisms ============ */
/* ============================================================================ */
/* Each rule here belongs to a component, but a rule in an organism or surface
   file of equal specificity sets the same property, so it only wins from this
   late position. Moving one into its component file changes what renders. */
.gm-tooltip--interactive .gm-tooltip-link:hover,
.gm-tooltip--interactive .gm-tooltip-link:focus {
  color: var(--gm-glass-white-70);
}

.search-terms-form-group .invalid-feedback {
  display: none;
}

/* Fade the entire action item background when its radar activates.
   Two cases: controller IS the outer div (.sync-radar-active on self),
   or controller is an inner wrapper (:has picks up the descendant). */
.sync-action-item {
  position: relative;
}

.sync-action-item.sync-radar-active::after,
.sync-action-item:has(.sync-radar-active)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gm-glass-white-50);
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;

  /* above content (0), below radar overlay (10) */
  transition: opacity 0.2s ease;
}

/* White card surfaces — standard light containers on dark glassmorphism bg */
.gm-white-card {
  background: var(--gm-white);
  border-radius: 16px;
  box-shadow:
    0 1px 3px var(--gm-glass-black-8),
    0 1px 2px var(--gm-glass-black-6);
}

/* Token success banner */
.gm-token-success {
  background: var(--gm-green-50);
  border: 1px solid var(--gm-green-300);
  padding: 1rem 1.25rem;
}

/* Upgrade card (dashed border) */
.gm-upgrade-card {
  background: var(--gm-gray-50);
  padding: 2rem;
  border: 1px dashed var(--gm-gray-300);
}

/* Feature card enabled state */
.gm-feature-enabled {
  background: var(--gm-green-500-overlay-8);
  border: 1px solid var(--gm-green-500-overlay-20);
}

/* Feature card disabled state */
.gm-feature-disabled {
  background: var(--gm-gray-300-overlay-20);
  border: 1px solid var(--gm-gray-300-overlay-50);
}

/* Dropdown shadow */
.gm-dropdown-shadow {
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
  border: 1px solid var(--gm-gray-100);
}

.gm-transition-bg {
  transition: background 0.2s;
}

/* New-item teal dot indicator */
.gm-new-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gm-teal-500);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Country flag shown as a small superscript to the right of a name */
.gm-country-flag {
  display: inline-block;
  flex-shrink: 0;

  /* keep room for the flag when the name ellipsizes on narrow rows */
  margin-left: 0.15em;
  font-size: 0.85em;
  line-height: 1;
  transform: translateY(-0.2em);
}

/* Name + flag share one grid track; the name yields width so the flag never
   overflows into the adjacent column on narrow rows. */
.prospect-name-cell {
  min-width: 0;
  overflow: hidden;
}

.prospect-name-cell .row-title {
  flex: 1 1 0;
  min-width: 0;
}

/* glass_morph/utilities/typography.css */
/* ============================================================================ */
/* == Utility — Typography helpers ============================================ */
/* ============================================================================ */
/* Tabular figures so amounts in a column line up digit-for-digit. Carries no
   colour and no spacing — the only new rule the register financials card needs. */
.gm-tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Text a person typed, shown as they typed it. A standaardbericht is written
   with line breaks that carry meaning — a greeting, a paragraph, a sign-off —
   and collapsing them makes the preview a different message from the one that
   gets sent. pre-wrap rather than pre so long lines still wrap. */
.gm-preserve-newlines {
  white-space: pre-wrap;
}


/* ── 7. Overrides (responsive breakpoints — highest specificity) ─────────────── */
/* glass_morph/overrides/responsive.css */
@media (width >= 1025px) and (width <= 1899px) {
  .sidebar {
    width: 88px;
    overflow: visible;
  }

  .main-content {
    padding-left: 0;
  }

  .sidebar-header {
    justify-content: center;
    padding: 0 12px;
  }

  .sidebar-nav {
    align-items: center;
    padding: 24px 12px;
  }

  .sidebar-nav > .nav-item,
  .sidebar-nav > .nav-item-wrapper,
  .sidebar-nav > .nav-item-wrapper > .position-relative,
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item {
    width: 44px;
  }

  .sidebar-nav > .nav-item,
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item {
    aspect-ratio: 1;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    position: relative;
  }

  .sidebar-nav > .nav-item > .nav-item-content,
  .sidebar-nav > .nav-item > .account-selector-toggle .nav-item-content,
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item > .nav-item-content {
    justify-content: center;
    gap: 0;
    width: 100%;
    overflow: visible;
  }

  .sidebar-nav > .nav-item .nav-icon,
  .sidebar-nav > .nav-item-wrapper > .position-relative > .nav-item .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 1;
    flex-shrink: 0;
  }

  .sidebar-nav > .nav-item > .nav-item-badge {
    position: absolute;
    top: 8px;
    left: calc(50% + 15px);
    display: block !important;
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--gm-green-500);
    border: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  /* Collapsed sidebar shows the badge as a dot, so the colour is all that is
     left of it. Keep the alert red here too. */
  .sidebar-nav > .nav-item > .nav-item-badge--alert {
    background: var(--gm-red-600);
  }

  .sidebar-nav > .nav-item > .account-selector-toggle {
    justify-content: center;
  }

  .sidebar-nav > .nav-item > .account-selector-toggle > [class*="gm-icon-chevron"] {
    display: none;
  }

  .sidebar.submenu-dropdown-open .sidebar-nav {
    overflow: visible;
  }

  .sidebar-nav > .account-selector {
    overflow: visible;
    position: relative;
  }

  .sidebar-nav > .account-selector .account-selector-toggle {
    height: 44px;
    justify-content: center;
    width: 44px;
  }

  .sidebar-nav > .account-selector .account-selector-dropdown {
    top: 0;
    left: calc(100% + 12px);
    margin-top: 0;
    z-index: 200;
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open > .nav-submenu {
    display: flex !important;
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    z-index: 200;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    max-height: 70vh;
    margin: 0;
    padding: 8px !important;
    overflow-y: auto;
    background: var(--gm-white);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--gm-glass-black-20);
    transform: translateY(-50%);
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open .nav-submenu-item {
    gap: 10px;
    padding: 10px 14px !important;
    margin-bottom: 0;
    color: var(--gm-gray-700) !important;
    white-space: nowrap;
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open .nav-submenu-item [class*="gm-icon-"] {
    color: var(--gm-gray-500) !important;
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open .nav-submenu-item:hover {
    background: var(--gm-gray-100);
    color: var(--gm-gray-900) !important;
  }

  .sidebar-nav > .nav-item-wrapper.submenu-flyout-open .nav-submenu-item.active {
    background: var(--gm-teal-overlay-8);
    color: var(--gm-teal-500) !important;
  }

  .maturity-widget > :first-child,
  .maturity-widget .gm-stage-label {
    display: none;
  }

  .sidebar-user {
    padding: 12px 8px;
  }

  .sidebar-user-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 50%;
  }

  .sidebar-user-dropdown {
    right: auto;
    left: calc(100% + 12px);
    bottom: 0;
    margin-bottom: 0;
  }
}

@media (width <= 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    background: var(--gm-teal-800);
    transform: translateX(-100%);
    box-shadow: 2px 0 10px var(--gm-glass-black-30);
  }

  .sidebar.active .nav-item {
    justify-content: space-between;
    padding: 12px 16px;
  }

  .sidebar.active .nav-item-content {
    gap: 12px;
  }

  .sidebar.active .sidebar-title {
    display: block;
  }

  .sidebar.active .nav-chevron {
    display: block;
  }

  .main-content {
    padding: 16px;
  }

  .navbar {
    padding: 12px 16px;
  }

  .prospects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .prospects-toolbar,
  .header-filter-bar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .prospects-toolbar .position-relative,
  .header-filter-bar .position-relative {
    width: 100%;
  }

  .prospects-toolbar .navbar-controls,
  .header-filter-bar .navbar-controls {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
  }

  .prospects-toolbar .navbar-controls .select-wrapper,
  .header-filter-bar .navbar-controls .select-wrapper {
    flex: 1;
    min-width: 0;
  }

  .prospects-toolbar .navbar-controls .select-input,
  .header-filter-bar .navbar-controls .select-input {
    width: 100%;
  }

  .select-wrapper {
    width: 100%;
  }

  .page-container {
    padding: 16px;
  }

  .page-inner {
    padding: 12px 16px 16px;
  }

  .data-row-grid {
    flex-direction: column;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto auto auto auto;
  gap: 12px;
  align-items: center;
  }

  .data-row {
    width: 100%;
  overflow-x: hidden;
  }

  .row-title {
    order: 1;
    flex: 1;
  grid-column: 1 / 4;
  grid-row: 1;
  margin-right: 0;
  margin-bottom: 10px;
  font-size: 20px;
  }

  .expand-button {
    order: 5;
    place-self: flex-end end;
  grid-column: 3;
  grid-row: 6;
  margin-top: 0;
  }

  .data-row-grid > *:nth-child(1),
  .data-row-grid > *:nth-child(2),
  .data-row-grid > *:nth-child(3) {
    display: flex;
  }

  .stakeholders-badge,
  .products-badge,
  .description-text.product {
    display: block;
    grid-column: 1 / 4;
    grid-row: 4;
  }

  .description-text:not(.product) {
    grid-column: 1 / 4;
    grid-row: 5;
  }

  .data-row-grid.data-row-grid--company {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto auto auto;
  }

  .data-row-grid.data-row-grid--company > :last-child {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  .data-row-grid.data-row-grid--assistant {
    grid-template-columns: 36px 1fr 44px;
    gap: 10px;
  }

  .data-row-grid.data-row-grid--visitor {
    grid-template-columns: 36px 1fr;
  }

  .data-row-grid.data-row-grid--visitor > :nth-child(n + 3) {
    grid-column: 2 / 3;
  }

  .data-row-grid.data-row-grid--visitor .visitor-row-actions {
    justify-self: start;
  }

  .data-row-grid.data-row-grid--visitor-connection {
    grid-template-columns: 36px 1fr;
  }

  .data-row-grid.data-row-grid--visitor-connection > :nth-child(n + 3) {
    grid-column: 2 / 3;
  }

  .data-row-grid.data-row-grid--visitor-connection .visitor-row-actions {
    justify-self: start;
  }

  .data-row-grid.data-row-grid--assistant .assistant-row-stats {
    grid-column: 2 / 3;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .data-row-grid.data-row-grid--assistant .description-text {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .expanded-content {
    padding: 0 4px 12px;
  }

  .info-card .card-body .p-3 {
    padding: 4px !important;
  }

  .detail-view {
    padding: 0;
  }

  .detail-header-row {
    padding: 24px;
  }

  .detail-header-top, .buyer-readiness-header {
    flex-direction: column;
    gap: 16px;
  }

  .score-box {
    /* relative (not static) keeps normal flow while remaining the
       containing block for the absolutely-positioned .gm-score-flag,
       so the failed-gate indicator stays pinned to the score corner */
    position: relative;
    align-self: center;
    width: fit-content;
  }

  .detail-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .detail-tabs[data-controller~="responsive-tabs"] {
    overflow: visible;
  }

  .tab-button {
    padding: 10px 22px;
    font-size: 14px;
    white-space: nowrap;
  }

  .tab-icon {
    width: 16px;
    height: 16px;
  }

  .detail-stats-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 0;
  }

  .stat-item {
    padding: 16px;
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-right: 1px solid var(--gm-glass-white-10);
  }

  .stat-value {
    font-size: 28px;
  }

  .kanban-board {
    height: calc(100vh - 240px);
  }

  .kanban-column {
    padding: 0.875rem;
  }

  /* Only apply responsive logo switching in sidebar (not auth screens) */
  .sidebar .logo-responsive {
    display: none;
  }

  .sidebar .logo-compact {
    display: block;
    margin: 0 auto;

    /* Center the compact logo */
  }

  /* Center and adjust compact logo in sidebar header */
  .sidebar-header {
    display: flex;
    justify-content: center;
  }

  .sidebar-header .sidebar-title {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Adjust sidebar logo size on mobile */
  .sidebar-header img.logo-compact {
    height: 84px !important;

    /* Even larger - 30% bigger than 64px */
    margin-top: 28px !important;
    margin-bottom: 20px !important;
  }

  /* Keep full logo on auth screens (no switching) */
  .auth-logo .logo-responsive {
    display: block !important;
  }

  .auth-logo .logo-compact {
    display: none !important;
  }

  /* ============================================================ */
  /* Index list cards (company / ICP / products) below 1024px.    */
  /* Rows stack vertically, so the column-header bar no longer    */
  /* maps to a grid — hide it. Then lay each row out as a simple  */
  /* vertical stack in DOM order so cells never collide (the      */
  /* shared prospect grid above puts the product badge and the    */
  /* sector text on the same cell, which overlapped on ICP).      */

  .data-row-grid.data-row-grid--company,
  .data-row-grid.data-row-grid--icp,
  .data-row-grid.data-row-grid--products-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Pills, avatar and badges size to their content (left-aligned),
     while name/description cells stretch to the full card width. */
  .data-row-grid.data-row-grid--company > .row-avatar,
  .data-row-grid.data-row-grid--company > .products-badge,
  .data-row-grid.data-row-grid--company > .company-prospects-badge,
  .data-row-grid.data-row-grid--company > .company-website-link,
  .data-row-grid.data-row-grid--icp > .row-avatar,
  .data-row-grid.data-row-grid--icp > .products-badge,
  .data-row-grid.data-row-grid--products-list > .row-avatar,
  .data-row-grid.data-row-grid--products-list > .product-list-type-cell {
    align-self: flex-start;
  }

  /* Row actions / expand affordance pinned to the bottom-right of the card. */
  .data-row-grid.data-row-grid--company > .company-row-actions,
  .data-row-grid.data-row-grid--icp > .icp-row-actions,
  .data-row-grid.data-row-grid--products-list > .expand-button {
    align-self: flex-end;
    margin-top: 0;
  }
}

@media (width >= 450px) and (width <= 1024px) {
  .navbar-controls {
    flex-direction: row;
    align-items: center;
  }

  .select-wrapper {
    width: auto;
  }

  .select-input {
    width: 180px;
  }
}

@media (width <= 1200px) {
  .detail-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-right: 1px solid var(--gm-glass-white-10);
  }

  .lead-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .expanded-cards {
    grid-template-columns: 1fr;
  }
}

@media (width <= 640px) {
  .detail-tabs:not([data-controller~="responsive-tabs"]) {
    display: none;
  }

  .detail-tabs[data-controller~="responsive-tabs"] {
    display: flex;
  }

  .tile-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .stakeholder-row-header {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    gap: 6px 10px;
    padding: 14px;
    position: relative;
    align-items: start;
  border-radius: 10px;
  }

  .stakeholder-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    font-size: 13px;
    align-self: center;
  }

  .stakeholder-basic-info {
    grid-column: 2 / -1;
    grid-row: 1;
    gap: 3px;
    min-width: 0;
    padding-right: 36px;
  }

  .stakeholder-contact-info .contact-item {
    font-size: 12px;
    overflow: hidden;
  }

  .stakeholder-contact-info .contact-item .detail-text,
  .stakeholder-contact-info .contact-item a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 100px);
  }

  .stakeholder-meta-right {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
    margin-left: 0;
    flex-flow: row wrap;
    gap: 4px 12px;
  }

  .stakeholder-meta-right .meta-line {
    font-size: 11px;
  }

  .stakeholder-expand-btn {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  /* Stakeholder page: header, metrics, and filter controls */
  .stakeholder-row {
    border-radius: 10px;
  }

  .stakeholder-row.expanded .stakeholder-row-header {
    border-radius: 10px 10px 0 0;
  }

  .stakeholder-expanded-content {
    border-radius: 0 0 10px 10px;
    padding: 12px;
  }

  .stakeholder-profile-card {
    padding: 12px;
  }

  .hero-header {
    padding: 24px;
    border-radius: 12px;
  }

  .hero-title {
    font-size: 26px;
  }

  .list-item {
    padding: 14px 16px;
  }

  .lead-grid {
    padding: 0;
    gap: 16px;
  }

  .priority-targets-widget {
    padding: 16px;
  }

  /* Action Queue: stack controls */

  .navbar-controls {
    flex-flow: column wrap;
  width: 100%;
  gap: 0.5rem;
  }

  .navbar-controls .select-wrapper {
    flex: 1;
    min-width: 120px;
  }

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

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--gm-glass-white-10);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  /* Badges: keep on single line */
  .stakeholders-badge,
  .products-badge,
  /* Prevent horizontal scrollbar */
  .main-content {
    overflow-x: hidden;
  }

  .page-container {
    padding: 1rem;
  }

  .prospects-header {
    align-items: flex-start;
  }

  .select-wrapper {
    width: 100%;
  }

  .select-input {
    width: 100%;
  }

  .kanban-column-content {
    padding: 0.5rem;
  }

  .task-card {
    padding: 0.75rem;
  }

  .tile-light .readiness-score-display {
    border-bottom-color: var(--gm-glass-black-10);
  }

  .scoring-score-display, .readiness-score-display {
    border-right: none;
    border-bottom: 2px solid var(--gm-gray-200);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .timeline-events {
    padding: 16px;
  }

  .event-badges {
    margin-left: 0;
  }
}

.tile-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tile-title-row .tile-title {
  margin-bottom: 0;
}

/* Contact discovery hover popup */
.contact-discovery-popup {
  display: none;
  position: absolute;
  left: 100%;
  top: 100%;
  margin-left: 8px;
  margin-top: 4px;
  width: 320px;
  padding: 12px;
  background: var(--gm-gray-800);
  color: var(--gm-white);
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--gm-glass-black-20);
  z-index: 50;
  line-height: 1.5;
}

/* Stakeholder page: filter controls wrap on narrow screens */
@media (width <= 480px) {
  .page-inner > .flex-row.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-inner > .flex-row.justify-between .badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .page-inner > .flex-row.justify-between .form-select-sm {
    font-size: 12px;
  }

  /* Compact metrics cards */
  .pricing-container {
    padding: 24px 12px;
  }

  .pricing-card {
    padding: 24px 20px;
  }

  .pricing-card-content {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .info-tooltip {
    min-width: 220px;
    max-width: 280px;
    font-size: 12px;
  }
}

@media (width <= 768px) {
  .modal-container {
    width: 95%;
    max-height: 95vh;
    border-radius: 16px;
  }

  .modal-header,
  .modal-content,
  .modal-footer {
    padding: 20px;
  }

  .footer-actions {
    width: 100%;
  }

  /* Stack columns vertically on mobile */
  .kanban-board {
    height: auto;
    gap: 1.5rem;
  grid-template-columns: 1fr !important;
  }

  /* Disable drag on mobile - use tap interactions instead */

  .date-title {
    font-size: 16px;
  }

  .timeline-events {
    padding: 16px 20px;
  }

  .pricing-container {
    padding: 32px 16px;
  }

  .pricing-header .hero-title {
    font-size: 28px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-card {
    padding: 32px 28px;
  }

  .pricing-card-content {
    margin-left: -26px;
    margin-right: -26px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .pricing-badge {
    font-size: 12px;
    padding: 6px 14px;
  }

  .pagination-container {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .pagination-btn {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* Hide some page numbers on mobile */
  .pagination-btn:not(.nav-btn, .active):nth-child(n + 6) {
    display: none;
  }

  .grid-auto-fit-320 {
    grid-template-columns: 1fr;
  }
}

/* Tile nav - page header on dark glassmorphism background */
.tile-nav h1,
.tile-nav h2,
.tile-nav h3,
.tile-nav h4,
.tile-nav h5,
.tile-nav h6 {
  color: var(--gm-white);
}

.tile-nav .text-primary-dark {
  color: var(--gm-white) !important;
}

.tile-nav .bi {
  color: var(--gm-white);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-grid > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

/* Override stat text colors for light context - matches reference */
*:hover > .contact-discovery-popup {
  display: block;
}

@media (width < 2100px) {
  [data-testid="prospects-header-radar-loader"] > .gm-text-shadow-sm {
    display: none;
  }
}

@media (width < 1900px) {
  [data-testid="prospects-register-button"] {
    display: none;
  }
}

@media (width < 1680px) {
  [data-testid="filter-select"]:has([data-testid="company-filter"]) {
    display: none;
  }
}

@media (width < 1500px) {
  [data-testid="filter-select"]:has([data-testid="product-filter"]) {
    display: none;
  }
}

@media (width < 1240px) {
  [data-testid="filter-select"]:has([data-testid="prospects-score-filter"]) {
    display: none;
  }
}

/* ══ Prospects header, toolbar and list ════════════════════════════════════
   Design: "Prospects header responsive" in the ProspectsRadar Design System.

   One ladder, narrowest rule last, so this section is the single place the
   page's responsive behaviour is decided. It supersedes the prospects rules in
   the generic width <= 1024px block above, which stacked the toolbar into a
   column — the design keeps it one row and lets it scroll instead.

   The controls are never hidden. The rule that used to drop the company and
   product filters below 1050px stopped matching when they became multi-selects
   (their test-ids moved off the .select-wrapper), and hiding a filter is the
   wrong answer anyway: a reader who cannot see which products the list is
   narrowed to cannot tell a short list from a filtered one.

   What gives way instead, in order, is list columns — widest and least load
   bearing first. The information does not vanish: every dropped column is in
   the row's expanded panel. */

@media (width <= 1280px) {
  /* URL and Update: an icon and a cadence marker, both repeated in the
     expanded panel, and the two widest cells carrying the least. */

  .data-row-grid.data-row-grid--prospect .prospect-website-link,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-website-link,
  .data-row-grid.data-row-grid--prospect .prospect-update-frequency-badge,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-update-frequency-badge,
  .list-header.data-row-grid--prospect .list-header__label--url,
  .list-header.data-row-grid--prospect-with-lead .list-header__label--url,
  .list-header.data-row-grid--prospect .list-header__label--update,
  .list-header.data-row-grid--prospect-with-lead .list-header__label--update {
    display: none;
  }

  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px minmax(200px, 1.35fr) 92px 112px 64px minmax(160px, 1fr) minmax(220px, 1.8fr) 44px;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 88px 36px minmax(200px, 1.35fr) 92px 112px 64px minmax(160px, 1fr) minmax(220px, 1.8fr) 44px;
  }
}

@media (width <= 1024px) {
  /* The toolbar stays a single row of controls, against the column the generic
     1024px block sets for every filter bar.

     The prospects header is a column at every width now (organisms/prospects.css
     — eyebrow and title, then a row holding the counts and the toolbar), so the
     row below only reaches headers that are not: the Tasks page renders this
     same class. */

  .prospects-header:not(.prospects-header--stacked) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .prospects-header--stacked {
    align-items: stretch;
    gap: 10px;
  }

  /* The title steps down here and again at 640px, rather than once: a product
     name is long enough that one step leaves it wrapping to three lines at the
     widths in between. */

  .prospects-header--stacked .hero-title {
    font-size: 1.5rem;
  }

  .prospects-toolbar {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 0;
  }

  /* Below this width the toolbar always takes a row of its own: the full width
     is what wraps it out of the counts row, and it starts where the title does
     rather than being pushed against the right edge. */

  .prospects-header--stacked .prospects-toolbar {
    justify-content: flex-start;
    width: 100%;
  }

  .prospects-toolbar .navbar-controls {
    width: auto;
    flex: 0 0 auto;
  }

  /* The search form is display:contents, so the field is what has to be told
     to give way — it yields width to the filters rather than the other way
     round, and stops well short of unusable. */

  .prospects-toolbar .gm-display-contents {
    display: block;
    flex: 0 1 260px;
    min-width: 150px;
  }

  .prospects-toolbar .position-relative,
  .prospects-toolbar .form-control {
    width: 100%;
  }

  /* The field folds away behind its own button, and takes the whole row when
     opened. Both states are one class on the toolbar — see
     controllers/toolbar_search_controller.js, which knows nothing about this
     width. */

  .button.prospects-toolbar__search-trigger {
    display: inline-flex;
  }

  .prospects-toolbar > .gm-display-contents {
    display: none;
  }

  /* Acties (beta header B) closes the toolbar and stays beside the open field. */
  .prospects-toolbar.is-searching > :not(.gm-display-contents, .prospects-toolbar__actions) {
    display: none;
  }

  .prospects-toolbar.is-searching > .gm-display-contents {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Each control gives up its fixed width and truncates its own label instead
     of pushing the row wider than the page. */

  .prospects-toolbar .navbar-controls .select-input,
  .prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger {
    width: auto;
    min-width: 0;
    max-width: 180px;
  }

  .prospects-toolbar .activity-filter-trigger {
    min-width: 0;
  }

  /* Product carries the longest label on the page and is the axis most often
     narrowed, so it keeps more room than the company beside it. */

  .prospects-toolbar [data-testid="company-filter"] .checkbox-select-trigger {
    max-width: 150px;
  }

  .prospects-toolbar [data-testid="product-filter"] .checkbox-select-trigger {
    max-width: 210px;
  }

  /* Product column out. The description says more about a company than the
     company/product pair does, and that pair is also in the page title. */

  .data-row-grid.data-row-grid--prospect .description-text.product,
  .data-row-grid.data-row-grid--prospect-with-lead .description-text.product,
  .list-header.data-row-grid--prospect .list-header__label--product,
  .list-header.data-row-grid--prospect-with-lead .list-header__label--product {
    display: none;
  }

  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px minmax(160px, 1.2fr) 92px 112px 64px minmax(200px, 1.8fr) 44px;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 88px 36px minmax(160px, 1.2fr) 92px 112px 64px minmax(200px, 1.8fr) 44px;
  }
}

@media (width <= 768px) {
  /* Description out. What is left is the row's identity, its two scores, and
     how many people are known — the four things the list is read for. */

  .data-row-grid.data-row-grid--prospect .description-text,
  .data-row-grid.data-row-grid--prospect-with-lead .description-text,
  .list-header.data-row-grid--prospect .list-header__label--description,
  .list-header.data-row-grid--prospect-with-lead .list-header__label--description {
    display: none;
  }

  .data-row-grid.data-row-grid--prospect,
  .list-header.data-row-grid--prospect {
    grid-template-columns: 36px minmax(0, 1fr) 92px 112px 64px 44px;
  }

  .data-row-grid.data-row-grid--prospect-with-lead,
  .list-header.data-row-grid--prospect-with-lead {
    grid-template-columns: 88px 36px minmax(0, 1fr) 92px 112px 64px 44px;
  }
}

@media (width <= 640px) {
  .prospects-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .prospects-header .hero-title {
    font-size: 1.25rem;
  }

  /* One scrolling strip rather than a wrapping block: a wrapped toolbar pushes
     the list below the fold, and every control here is one the reader reaches
     for by name. The negative margin lets it bleed to the page edge so the
     last pill is visibly cut off — which is what says it scrolls. */

  .prospects-toolbar {
    width: 100%;
    margin-inline: -16px;
    padding-inline: 16px;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .prospects-toolbar > *,
  .prospects-toolbar .navbar-controls > * {
    flex: none;
  }

  /* Pills, matching the phone app's filter chips (organisms/mobile.css). */

  .prospects-toolbar .navbar-controls .select-input,
  .prospects-toolbar .checkbox-select--navbar .checkbox-select-trigger,
  .prospects-toolbar .activity-filter-trigger {
    height: 32px;
    min-height: 32px;
    border-radius: 999px;
    font-size: 0.8125rem;
  }

  .prospects-toolbar [data-testid="product-filter"] .checkbox-select-trigger {
    max-width: 170px;
  }

  .prospects-toolbar.is-searching > .gm-display-contents {
    flex: 1 0 200px;
  }

  /* ── The toolbar's pickers become bottom sheets ──────────────────────────
     A dropdown anchored under a pill in a horizontally scrolling strip lands
     half off-screen and scrolls away from its own trigger. At this width each
     one takes the bottom of the viewport instead — the same surface and scrim
     the phone app's filter chips use (organisms/mobile.css), so the two do not
     read as different mechanisms.

     Each picker opens differently (a class, a class, and a native <details>),
     which is why there are three selectors and not one. */

  .prospects-toolbar .checkbox-select-panel:not(.d-none),
  .prospects-toolbar .prospect-filter-menu__panel:not(.d-none),
  .prospects-toolbar .prospects-sort-filter[open] .prospects-sort-filter__panel {
    position: fixed;
    z-index: 1041;
    inset: auto 0 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 80dvh;
    padding-top: 14px;
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    background: var(--gm-m-sheet);
  }

  /* The grip is what says this one can be dismissed by leaving it, where a
     dropdown says it by pointing at its trigger. */

  .prospects-toolbar .checkbox-select-panel:not(.d-none) .checkbox-select-panel-inner,
  .prospects-toolbar .prospect-filter-menu__panel:not(.d-none) {
    max-height: 64dvh;
  }

  /* The scrim hangs off the toolbar, not off the open picker: the pickers
     close on a click outside themselves, and a pseudo-element of the picker
     counts as inside it — so a scrim drawn there would swallow the tap that is
     meant to dismiss the sheet. */

  /* The list header names columns the card below no longer has. */

  .list-header.data-row-grid--prospect,
  .list-header.data-row-grid--prospect-with-lead {
    display: none;
  }

  /* Two rows: who it is and how it scores, then the marks the reader sets,
     with the chevron closing the second row.

         avatar   name ─────────────────  score
         interest readiness   dmu         expand

     Every cell names itself rather than counting siblings. Counting was the
     first attempt and it lost: organisms/data_rows.css has its own
     `width <= 1050px` block that pins these same cells by class to columns of a
     six-column grid, and a class selector beats `> :nth-child(n)` on the tie it
     creates — so the readiness cell kept the `grid-column: 5` set there, grew
     two implicit columns out of a three-column track list, and landed beside
     the expand button instead of under the name.

     Each cell is therefore given both its row and its column here, which is
     what actually overrides that block; nothing is left to auto-placement. */

  .data-row-grid.data-row-grid--prospect,
  .data-row-grid.data-row-grid--prospect-with-lead {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
  }

  /* The name runs to the score rather than stopping at its own column, which
     is what stopped "Provincie Gelderland" being cut to "Provincie Ge…" with
     half the card empty beside it. */

  .data-row-grid.data-row-grid--prospect .prospect-avatar-with-flag,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-avatar-with-flag {
    grid-area: 1 / 1;
  }

  .data-row-grid.data-row-grid--prospect .prospect-name-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-name-cell {
    grid-area: 1 / 2 / auto / 4;
    min-width: 0;
  }

  .data-row-grid.data-row-grid--prospect .score-momentum-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .score-momentum-cell {
    grid-area: 1 / 4;
    justify-self: end;
  }

  /* The interest toggle leads the second row: it is the one control on the card
     the reader operates, so it sits where a thumb reaches first. */

  .data-row-grid.data-row-grid--prospect > :nth-child(1),
  .data-row-grid.data-row-grid--prospect-with-lead > :nth-child(1) {
    grid-area: 2 / 1;
    justify-self: start;
  }

  .data-row-grid.data-row-grid--prospect .prospect-buyer-readiness-cell,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-buyer-readiness-cell {
    grid-area: 2 / 2;
    justify-self: start;
  }

  /* How many people are known is one of the four things the list is read for,
     so the card keeps it. data_rows.css drops it at 1050px for the row layout,
     which no longer applies once the row is a card. */

  .data-row-grid.data-row-grid--prospect .prospect-stakeholder-badge,
  .data-row-grid.data-row-grid--prospect-with-lead .prospect-stakeholder-badge {
    display: inline-flex;
    grid-area: 2 / 3;
    justify-self: start;
  }

  .data-row-grid.data-row-grid--prospect .expand-button,
  .data-row-grid.data-row-grid--prospect-with-lead .expand-button {
    grid-area: 2 / 4;
    justify-self: end;
  }
}