/* ============================================================================
   1GESTURE — DEEP FIELD DUAL-THEME DESIGN SYSTEM
   The single stylesheet for the organiser SPA (app.html). This file
   SUPERSEDES the retired "Liquid Glass Edition" design system and the
   impact-variant sheet, both deleted in this reskin: no glass, no
   gradients, no backdrop blur, no drop shadows. Flat panels, hairline
   borders, one brand palette, two themes.

   Deep Field runs in LIGHT (white ground, Ink text) and DARK (Ink ground,
   Paper text) from ONE token set. Four brand pairs carry functional identity.
   Navigation chrome is dark in both themes. Font is Libre Franklin
   (local woff2, OFL 1.1 — see /fonts/libre-franklin/OFL.txt).

   ## Dark mode conventions  (READ THIS before writing view/page CSS)
   -------------------------------------------------------------------------
   Never hardcode a hex/rgba for anything that must change between themes.
   Route every colour decision through these tokens so both themes just work:

     SURFACES   page ground .. var(--bg)     card/control .. var(--panel)
                hover ........ var(--panel-2) subtle inset .. var(--inset)
     BORDERS    hairline ..... var(--border)  stronger ..... var(--border-14)
     TEXT       primary ...... var(--text)    secondary(AA) . var(--ink-62)
                de-emphasis .. var(--ink-40)  (both text tints auto-flip)
     ON-BRIGHT  text sitting ON a bright fill (chip, primary btn, active pill,
                badge) is ALWAYS var(--ink) — do NOT use --text there.
     CHROME     text on the dark sidebar/tab bar is var(--paper) / --paper-64 /
                --paper-40 (constant, chrome is dark in both themes).
     TRACKS     progress .. var(--track-bar)   switch .. var(--track-switch)

   NUMERAL / FILL RE-MAPPING (the crux):
     A pair's DARK colour is unreadable on a dark ground, so numerals, big
     figures, links, and rules use a pair token that FLIPS to the bright twin
     in dark mode:
       Green→Lime  var(--num-green)     Teal→Cyan   var(--num-teal)
       Burgundy→Blush var(--num-burgundy) Amber→Gold var(--num-amber)
     FILLS (progress bars, chip grounds, active pills) stay the BRIGHT colour
     in both themes: var(--lime/--cyan/--blush/--gold). Bright fills always
     take var(--ink) text. Soft status tints flip too: e.g. var(--soft-green).
     Inside an .impact-card just add the .pair-* modifier; the giant numeral
     and the icon chip flip automatically (theme-scoped rules read the pair's
     --dark/--bright — you don't wire anything per card).
   Body text is NEVER a bright colour in either theme. Verify AA both ways.

   LEGACY COMPATIBILITY TOKENS:
     The pre-reskin views (js/views/*, restyled in a later phase) reference
     the old token names in inline styles (--text-primary, --text-secondary,
     --glass-*, --primary, --error, ...). Those names are kept alive below as
     ALIASES onto Deep Field tokens so existing views theme-flip correctly.
     Do NOT use the legacy names in new code — they exist only as a bridge.

   COMPONENT INVENTORY (class → intended use)
   -------------------------------------------------------------------------
   Deep Field core (ported from the approved prototype):
   :root ............... design tokens (constants + light values); dark values
                         live in the @media/[data-theme] blocks just below
   body / .tnum ........ base reset, Libre Franklin, tabular-nums helper
   .app-layout/.app-main shell wrapper; main offsets for sidebar / tab bar
   .app-sidebar + .sidebar-* .. desktop left nav (dark chrome, Lime active pill)
   .theme-toggle ......... sun/moon theme button (sidebar footer + mobile tab)
   .bottom-nav + .bottom-nav-item .. mobile bottom tab bar (dark chrome)
   .hero + .hero-* ............ green curved brand band (.hero-curve fills
                                --bg; whole wave hand (.hero-hand))
   .content ................... page content column (padding + max-width)
   .section + .section-head/-title/-link .. titled section with optional link
   .impact-toggle ............. segmented pill toggle
   .impact-card + .pair-* ..... wallet card; .pair-* sets --dark/--bright;
                                numeral + icon flip via theme-scoped rules
   .funnel-grid + .funnel-cell + .rule-* .. stat cells; rules use --num-*
   .analytics-strip ........... bold Teal band, Lime numerals (both themes)
   .quick-actions + .qa-btn(.primary) .. action button row (Lime primary)
   .filters + .filter + .track .. labelled switch toggles
   .day-group / .event-row / .chips .. timeline rows + status chips

   App vocabulary (the classes today's views/components render — every class
   below has a flat Deep Field implementation so current views keep working):
   .btn(.btn-primary/.btn-secondary/.btn-ghost/.btn-danger/.btn-outline-primary
        /.btn-sm/.btn-lg/.btn-icon/.btn-full/.btn-link) .. buttons
   .card(.card-header/.card-title/.card-body/.card-footer/.card-flat) . panels
   .glass/.glass-subtle/.glass-minimal/.glass-interactive/.glass-tint-* ..
        LEGACY surface classes — now plain flat panels (no blur, no shine)
   .form-group/.form-label/.form-input/.form-select/.form-textarea/.form-hint
        /.form-error/.form-checkbox/.form-row/.form-actions/.field-hint . forms
   .table-wrap/.table/.table-empty/.team-table/.settings-table ...... tables
   .badge(.badge-success/-warning/-error/-info/-neutral/-purple/-coming-soon
        /-gesture-off) + .status-badge-* + .role-badge--* + .trend-badge chips
   .toast-container/.toast(-success/-error/-info)/.toast-icon/-message/-close
   .modal-overlay/.modal/.modal-header/-title/-close/-body/-footer .. dialogs
   .spinner(.spinner-sm/.spinner-inline)/.page-loading/.loading-spinner
   .skeleton(.skeleton-line/-title/-card)/.dashboard-skeleton/.events-skeleton
   .empty-state(.empty-state-icon/-title/-desc) ......... empty/error states
   .login-* / .onboarding-* / .drop-zone* / .color-picker-* .. auth + wizard
   .dashboard-* / .impact-grid / .impact-card-* / .impact-bar-* / .impact-
        numbers .. classic dashboard view (restyled in place, later re-marked)
   .funnel-* / .metric-* / .period-* / .chart-canvas-wrap / .category-* /
        .engager* / .type-* .. stats vocabulary used by dashboard/superadmin
   .quick-action-btn .......... legacy quick-action (maps to .qa-btn look)
   .event-cards/.event-card(-time/-info/-title/-meta/-actions/-attendees)
   .attendee-* / .search-bar* / .filter-pill* / .page-header/-title/-subtitle
   .gesture-toggle(-on/-off/-label) .. included/excluded text button
   .budget-bar-*(.green/.amber/.red) + .budget-bar-warning .. credit bar
   .credits-* / .plan-card* / .danger-zone* / .settings-* / .team-* .. billing,
        settings, team management
   .events-* / .saved-filter-* / .attendee-chip* .. events page (V2)
   .day-group/.day-group-label / .timeline-* .. grouped lists
   .cookie-banner* ............ consent fallback banner
   Utilities: .flex/.items-*/.justify-*/.gap-*/.grid-*/.text-*/.font-*/
        .mt-*/.mb-*/.p-*/.px-*/.py-*/.rounded*/.hidden/.sr-only/
        .visually-hidden/.truncate/.w-full/.h-full/.relative/.absolute
   @media ..... theme flips, 480/560/768/900/1200px, reduced-motion, print
   ========================================================================== */

/* ===== Libre Franklin — local woff2, no network (OFL 1.1) ===== */
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Thin.woff2') format('woff2');       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Light.woff2') format('woff2');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Regular.woff2') format('woff2');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Medium.woff2') format('woff2');     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Bold.woff2') format('woff2');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Heavy.woff2') format('woff2');      font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Black.woff2') format('woff2');      font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin/LibreFranklin-Ultra.woff2') format('woff2');      font-weight: 950; font-style: normal; font-display: swap; }

/* ===== Design tokens — constants + LIGHT values ===== */
:root {
  /* Raw brand palette — CONSTANT in both themes */
  --ink:      #232824;   /* page ground in DARK; text-on-bright in both themes */
  --paper:    #FAFAFA;   /* chrome text in both themes */
  --white:    #FFFFFF;   /* switch thumb */
  --green:    #00552B;  --lime:  #B3FF7A;
  --teal:     #004555;  --cyan:  #66EFEB;
  --burgundy: #7D0037;  --blush: #FFBCC6;
  --amber:    #A35E00;  --gold:  #FFD65C;
  /* Dark navigation chrome — CONSTANT (chrome is dark in both themes) */
  --chrome-bg:     #20251F;
  --chrome-border: rgba(250,250,250,0.08);
  --paper-64:      rgba(250,250,250,0.64);
  --paper-40:      rgba(250,250,250,0.40);
  /* Layout — CONSTANT */
  --radius:    18px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 18px;
  --radius-full: 9999px;
  --radius-pill: 9999px;
  --sidebar-w: 248px;
  --tab-h:     64px;
  --container-max: 1200px;   /* matches the marketing site (--pb-content-max) */
  /* Spacing scale — CONSTANT */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;
  /* Z-index stack — CONSTANT */
  --z-sidebar: 100; --z-dropdown: 200; --z-tab-bar: 300; --z-overlay: 400;
  --z-modal: 500;   --z-toast: 600;

  /* Theme-flipping tokens — LIGHT values */
  --bg:          #FFFFFF;
  --panel:       #FFFFFF;
  --panel-2:     #F4F5F3;
  --inset:       #FAFAFA;
  --text:        #232824;
  --ink-62:      rgba(35,40,36,0.66);   /* secondary text — AA 4.5:1 on white */
  --ink-40:      rgba(35,40,36,0.40);   /* de-emphasis / separators */
  --border:      rgba(35,40,36,0.10);
  --border-14:   rgba(35,40,36,0.14);
  --track-bar:   rgba(35,40,36,0.12);
  --track-switch:rgba(35,40,36,0.18);
  --chip-none-bg:rgba(35,40,36,0.06);
  --soft-green:  rgba(0,85,43,0.10);
  --num-green:    var(--green);
  --num-teal:     var(--teal);
  --num-burgundy: var(--burgundy);
  --num-amber:    var(--amber);

  /* ── Chart series tokens (windtunnel-charts categorical palette) ──
     Alias the flipping brand pairs so canvas charts re-theme for free;
     --accent-earth is the only extra hue (muted olive, distinct from
     lime/green in both themes — dark value in the theme blocks below). */
  --accent-blue:   var(--num-teal);
  --accent-warm:   var(--num-amber);
  --accent-purple: var(--num-burgundy);
  --accent-earth:  #6B6F3B;

  /* ── LEGACY compatibility aliases (bridge for un-restyled views only) ── */
  --text-primary:   var(--text);
  --text-secondary: var(--ink-62);
  --text-muted:     var(--ink-62);
  --primary:        var(--num-green);
  --primary-dark:   var(--num-green);
  --primary-light:  var(--lime);
  --success:        var(--num-green);
  --warning:        var(--num-amber);
  --error:          var(--num-burgundy);
  --info:           var(--num-teal);
  --surface:        var(--panel);
  --surface-muted:  var(--inset);
  --glass-bg-primary:    var(--panel);
  --glass-bg-secondary:  var(--panel);
  --glass-bg-tertiary:   var(--inset);
  --glass-bg-hover:      var(--panel-2);
  --glass-bg-active:     var(--panel-2);
  --glass-border:        var(--border);
  --glass-border-subtle: var(--border);
  --glass-border-strong: var(--border-14);
}

/* DARK values — follow the OS unless the user picked light (data-theme guard) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #232824;
    --panel:       #2B322C;
    --panel-2:     #323A33;
    --inset:       #2F352F;
    --text:        #FAFAFA;
    --ink-62:      rgba(250,250,250,0.66);
    --ink-40:      rgba(250,250,250,0.42);
    --border:      rgba(250,250,250,0.08);
    --border-14:   rgba(250,250,250,0.12);
    --track-bar:   rgba(250,250,250,0.14);
    --track-switch:rgba(250,250,250,0.18);
    --chip-none-bg:rgba(250,250,250,0.08);
    --soft-green:  rgba(179,255,122,0.16);
    --num-green:    var(--lime);
    --num-teal:     var(--cyan);
    --num-burgundy: var(--blush);
    --num-amber:    var(--gold);
    --accent-earth: #C9CF8A;
  }
}
/* Manual choice beats the OS preference in BOTH directions.
   [data-theme] attribute selectors outrank the bare :root above. */
:root[data-theme="dark"] {
  --bg:          #232824;
  --panel:       #2B322C;
  --panel-2:     #323A33;
  --inset:       #2F352F;
  --text:        #FAFAFA;
  --ink-62:      rgba(250,250,250,0.66);
  --ink-40:      rgba(250,250,250,0.42);
  --border:      rgba(250,250,250,0.08);
  --border-14:   rgba(250,250,250,0.12);
  --track-bar:   rgba(250,250,250,0.14);
  --track-switch:rgba(250,250,250,0.18);
  --chip-none-bg:rgba(250,250,250,0.08);
  --soft-green:  rgba(179,255,122,0.16);
  --num-green:    var(--lime);
  --num-teal:     var(--cyan);
  --num-burgundy: var(--blush);
  --num-amber:    var(--gold);
  --accent-earth: #C9CF8A;
}
:root[data-theme="light"] {
  --bg:          #FFFFFF;
  --panel:       #FFFFFF;
  --panel-2:     #F4F5F3;
  --inset:       #FAFAFA;
  --text:        #232824;
  --ink-62:      rgba(35,40,36,0.66);
  --ink-40:      rgba(35,40,36,0.40);
  --border:      rgba(35,40,36,0.10);
  --border-14:   rgba(35,40,36,0.14);
  --track-bar:   rgba(35,40,36,0.12);
  --track-switch:rgba(35,40,36,0.18);
  --chip-none-bg:rgba(35,40,36,0.06);
  --soft-green:  rgba(0,85,43,0.10);
  --num-green:    var(--green);
  --num-teal:     var(--teal);
  --num-burgundy: var(--burgundy);
  --num-amber:    var(--amber);
  --accent-earth: #6B6F3B;
}

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Libre Franklin', Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--num-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; border-radius: 6px; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--num-teal);
  outline-offset: 2px;
}
input, select, textarea { font-family: inherit; font-size: inherit; }
.tnum { font-variant-numeric: tabular-nums; }

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 700; }
h5 { font-size: 1rem; font-weight: 700; }
h6 { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-62); }
p { margin-bottom: var(--space-4); }

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 2rem; }
.text-muted { color: var(--ink-62); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-heading { font-family: inherit; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.glass-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-62);
}

/* ===== Layout shell ===== */
.container {
  max-width: var(--container-max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--space-6); padding-right: var(--space-6);
  width: 100%;
}
.app-layout { min-height: 100vh; }
.app-main {
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  padding-bottom: calc(var(--tab-h) + 32px);
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.flex-1 { flex: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* ===== Sidebar (desktop) — dark chrome ===== */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--chrome-bg);
  border-right: 1px solid var(--chrome-border);
  padding: 26px 16px 24px;
  display: none;
  flex-direction: column;
  z-index: var(--z-sidebar);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 30px; text-decoration: none; }
.sidebar-brand:hover { text-decoration: none; }
/* Lockup image (lime wordmark + gold hand). Chrome is dark in both themes,
   so the lime-on-dark artwork never needs a theme variant. 29px tall renders
   the lockup ~96px wide — the same width as the retired 22px text wordmark —
   without growing the 34px brand row. */
/* 29px was the height that matched the retired text wordmark; +15% (owner,
   2026-08-05) now that the icon no longer sits beside it. */
.sidebar-wordmark { height: 33.35px; width: auto; flex: none; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 12px;
  color: var(--paper-64); font-weight: 500; font-size: 15px;
  text-decoration: none; text-align: left; width: 100%;
}
.sidebar-item:hover { background: var(--chrome-border); color: var(--paper); text-decoration: none; }
.sidebar-item svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color 0.15s;
}
/* subtle per-section identity: icon tints to the section's bright colour on hover only */
.sidebar-item:hover svg { color: var(--nav-accent, var(--lime)); }
.sidebar-item.active { background: var(--lime); color: var(--ink); font-weight: 700; }
.sidebar-item.active:hover svg { color: var(--ink); }
.sidebar-item.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.sidebar-user {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 12px 6px 4px; border-top: 1px solid var(--chrome-border);
}
.sidebar-avatar,
.sidebar-user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--green); color: var(--lime);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  overflow: hidden;
}
.sidebar-avatar img,
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-org,
.sidebar-user-email { color: var(--paper-64); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bottom action row — cookie choice / theme / sign out as three matching
   circles under the user block. `margin-top: auto` on .sidebar-user pins the
   pair to the foot of the rail, so these stay on the bottom whatever the nav
   length. The cookie circle replaces the floating overlay on this surface. */
.sidebar-actions { display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; }
.sidebar-circle {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--chrome-border); color: var(--paper-64);
  background: transparent; text-decoration: none;
}
.sidebar-circle svg { width: 17px; height: 17px; }
.sidebar-circle:hover { background: var(--chrome-border); color: var(--paper); }
.sidebar-cookie:hover { color: var(--lime); text-decoration: none; }
.sidebar-cookie:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Sign-out keeps its warning tint — declared after .sidebar-circle:hover so it
   wins the equal-specificity tie. */
.sidebar-logout:hover { color: var(--blush); }

/* ===== Theme toggle (sun/moon) ===== */
/* Base rule handles only the icon swap + focus ring; each placement
   (sidebar footer circle, mobile tab item) supplies its own box styling. */
.theme-toggle svg {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.is-dark .theme-toggle .icon-sun { display: block; }
html.is-dark .theme-toggle .icon-moon { display: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
/* In the dark sidebar footer the toggle is one of the .sidebar-circle trio, so
   its box styling comes from that rule — nothing placement-specific needed. */
/* On-page row variant (kept for future view use) */
.theme-toggle-row { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.theme-toggle-row .theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding: 0;
  background: var(--panel); border: 1px solid var(--border-14); color: var(--text);
}
.theme-toggle-row .theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle-row .theme-toggle:hover { background: var(--panel-2); }

/* ===== Bottom tab bar (mobile) — dark chrome ===== */
.bottom-nav {
  position: fixed; inset: auto 0 0 0; height: var(--tab-h);
  background: var(--chrome-bg); border-top: 1px solid var(--chrome-border);
  display: flex; z-index: var(--z-tab-bar);
}
.bottom-nav-items { display: flex; flex: 1; align-items: stretch; }
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  /* chrome is dark in both themes; --paper-64 keeps 10px labels AA on chrome
     (never a hardcoded hex; --paper-40 failed 4.5:1 for text) */
  color: var(--paper-64); background: transparent; border: 0;
  font-weight: 600; font-size: 10px;
  text-decoration: none; min-width: 48px;
}
.bottom-nav-item:hover { color: var(--paper); text-decoration: none; }
.bottom-nav-item.active { color: var(--lime); }
.bottom-nav-item.bottom-nav-item-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.bottom-nav-item-icon svg,
.bottom-nav-item > svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* CRO-6 (UX-8): on small phones (<=480px) many labelled items overflow the
   bar. Go icon-only — the accessible name lives in each item's aria-label
   (see nav.js renderBottomNav) — keep tap targets at 44px minimum, and add a
   horizontal-scroll backstop so the bar can never break its layout even with
   every flag-gated item present. Colours stay on the chrome --paper-* tokens
   (constant dark chrome, both themes). */
@media (max-width: 480px) {
  .bottom-nav-items {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bottom-nav-item {
    min-width: 48px;
    min-height: 48px;
    justify-content: center;
    padding: var(--space-2);
  }
  .bottom-nav-item span:not(.bottom-nav-item-icon) {
    display: none;
  }
}

/* ===== Hero band (curved) — the brand moment (same green in both themes) ===== */
.hero {
  position: relative;
  background: var(--green);
  padding: 16px 20px 42px;
  /* overflow stays visible so the hand can burst past the wave edge */
}
.hero-inner { position: relative; z-index: 2; max-width: 960px; }
.hero-eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700; font-size: 11px; color: var(--lime);
  margin: 0 0 5px;
}
.hero-greeting {
  font-weight: 900; font-size: 28px; line-height: 1.02;
  letter-spacing: -0.02em; margin: 0; color: var(--paper);
}
.hero-truth { margin: 6px 0 0; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--paper); max-width: 46ch; padding-right: 84px; }
.hero-sub { margin: 3px 0 0; font-weight: 500; font-size: 14px; line-height: 1.35; color: rgba(250,250,250,0.82); max-width: 46ch; padding-right: 84px; }
/* Wave hand (brand hand-07-wave) — the FULL two-colour source asset: gold
   fill + Ink outline + Ink motion lines. Shown whole, never cropped. Colours
   are the asset's own (gold #ffd871, --hand-ink defaults #232824); do not
   recolour to a single flat shape. It BURSTS out of the band: z-index above
   the curve overlay, bottom extends past the wave edge onto the page. */
.hero-hand {
  position: absolute; z-index: 3;
  right: 12px; bottom: -12px;
  height: 92%; max-height: 120px; width: auto;
  pointer-events: none;
  /* Mobile mirrors the desktop treatment: the hand is nearly band height and
     bursts past the wave edge — sized smaller it reads as floating debris.
     The greeting reserves a right gutter for it (reset at >=900px). */
}
.hero-greeting { padding-right: 108px; }
/* Compact heroes keep their smaller 40%-height hand, so no gutter needed */
.hero.hero-compact .hero-greeting { padding-right: 0; }
.hero.hero-compact .hero-hand { bottom: -8px; height: 40%; }
.hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 32px; display: block; z-index: 2; }
/* the curve reveals the page ground, so it must track the theme */
.hero-curve path { fill: var(--bg); }
/* Full-bleed page hero for views that render straight into #app-root (guests,
   settings): negative margins must track .app-main's padding per breakpoint,
   like .events-page > .hero does in deep-field.events.css. */
.page-hero { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) 22px; }
@media (min-width: 900px) { .page-hero { margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 26px; } }
@media (max-width: 480px) { .page-hero { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 18px; } }
/* Mobile auto-roll (App.deepFieldHero.autoRoll): .hero-rolling arms the
   transition after JS pins a measured max-height; .hero-rolled collapses the
   band to nothing. JS only adds these under the 900px breakpoint. !important
   beats the inline measured max-height and the per-view margin-bottoms in the
   later-loading deep-field.*.css sheets. */
.hero.hero-rolling { overflow: hidden; transition: max-height 600ms cubic-bezier(0.4, 0, 0.2, 1), padding 600ms cubic-bezier(0.4, 0, 0.2, 1), margin 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 450ms ease; }
/* The rolled band keeps a 16px bottom margin: its negative top margin eats
   .app-main's top padding, so this is what leaves breathing room above the
   content once the band is gone. */
.hero.hero-rolled { max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 16px !important; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero.hero-rolling { transition: none; } }
/* .hero.hero-compact — shorter band for non-dashboard pages. Bottom padding
   must clear the 32px (40px desktop) .hero-curve overlay. */
.hero.hero-compact { padding-bottom: 74px; }
.hero.hero-compact .hero-greeting { font-size: 34px; }

/* ===== Content wrap ===== */
.content { padding: 22px 20px 0; max-width: var(--container-max); }
.section { margin-top: 34px; }
.section:first-child { margin-top: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.section-link { color: var(--num-teal); font-weight: 700; font-size: 14px; }
.section-link:hover { text-decoration: underline; }

/* ===== Segmented pill toggle ===== */
.impact-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--inset); border: 1px solid var(--border);
  border-radius: 999px; margin-bottom: 16px;
}
.impact-toggle button {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-62); font-weight: 600; font-size: 13px;
  padding: 8px 16px; border-radius: 999px;
}
.impact-toggle button.active { background: var(--lime); color: var(--ink); font-weight: 700; }

/* ===== Impact wallet (Deep Field card + legacy dashboard internals) =====
   Count-adaptive columns: auto-fit collapses empty tracks, so any number of
   cards (1, 2, 3, 4, 5+) shares the full row width evenly — the layout must
   never assume a fixed card count. min(100%, 230px) guards against overflow
   in containers narrower than the track minimum (e.g. 360px viewports). */
.impact-grid, .impact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 14px;
}
.impact-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 20px;
  /* per-card pair; overridden by the .pair-* modifiers below */
  --dark: var(--green); --bright: var(--lime);
}
.impact-card.pair-amber    { --dark: var(--amber);    --bright: var(--gold);  }
.impact-card.pair-teal     { --dark: var(--teal);     --bright: var(--cyan);  }
.impact-card.pair-burgundy { --dark: var(--burgundy); --bright: var(--blush); }
.impact-card.pair-green    { --dark: var(--green);    --bright: var(--lime);  }
.impact-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.impact-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--dark); color: var(--bright);
}
.impact-icon svg { width: 19px; height: 19px; }
.impact-partner { font-weight: 700; font-size: 15px; color: var(--text); }
.impact-unit { color: var(--ink-62); font-size: 13px; font-weight: 500; }
.impact-number {
  font-weight: 900; font-size: 46px; line-height: 0.98;
  letter-spacing: -0.02em; color: var(--dark);
}
.impact-bar { height: 8px; border-radius: 6px; background: var(--track-bar); overflow: hidden; margin: 14px 0 10px; }
.impact-bar-fill { height: 100%; border-radius: 6px; background: var(--bright); }
.impact-net { color: var(--ink-62); font-size: 13px; font-weight: 500; }
.impact-net b { color: var(--text); font-weight: 700; }
/* Impact-card numeral + icon flip: pair DARK on light, pair BRIGHT on dark.
   Written as theme-scoped component rules because --dark/--bright are per-card
   and cannot be re-mapped from :root (an :root var() to an undefined per-card
   token computes invalid and would silently inherit body text). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .impact-number { color: var(--bright); }
  :root:not([data-theme="light"]) .impact-icon { background: var(--bright); color: var(--ink); }
}
:root[data-theme="dark"] .impact-number { color: var(--bright); }
:root[data-theme="dark"] .impact-icon { background: var(--bright); color: var(--ink); }
:root[data-theme="light"] .impact-number { color: var(--dark); }
:root[data-theme="light"] .impact-icon { background: var(--dark); color: var(--bright); }

/* Legacy dashboard impact-card internals (classic view, restyled flat) */
.impact-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.impact-card-title { font-size: 13px; font-weight: 600; color: var(--ink-62); }
.impact-card-accent { display: block; height: 3px; border-radius: 3px; margin: -18px -18px 14px; }
.impact-card-icon { font-size: 1.6rem; line-height: 1; margin-bottom: var(--space-2); }
.impact-card-count {
  font-size: 2rem; font-weight: 900; line-height: 1;
  margin-bottom: var(--space-1); letter-spacing: -0.02em;
  color: var(--num-green);
}
.impact-card-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-62); }
.impact-bar-container {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--track-bar); overflow: hidden; margin-bottom: 10px;
}
.impact-bar-direct { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; z-index: 2; }
.impact-bar-total { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; z-index: 1; }
.impact-bar-green .impact-bar-direct  { background: var(--lime); }
.impact-bar-green .impact-bar-total   { background: var(--soft-green); }
.impact-bar-orange .impact-bar-direct { background: var(--gold); }
.impact-bar-orange .impact-bar-total  { background: var(--track-bar); }
.impact-bar-blue .impact-bar-direct   { background: var(--cyan); }
.impact-bar-blue .impact-bar-total    { background: var(--track-bar); }
.impact-bar-purple .impact-bar-direct { background: var(--blush); }
.impact-bar-purple .impact-bar-total  { background: var(--track-bar); }
.impact-numbers { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.impact-direct { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.impact-total-label { font-size: 13px; font-weight: 500; color: var(--ink-62); }
.impact-subtitle { font-size: 12px; color: var(--ink-62); }

/* ===== Stat cells (funnel) ===== */
.funnel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.funnel-cell {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px; text-align: left;
}
/* 3px top rule carries per-stat pair identity; uses the flipping --num-* tokens */
.funnel-cell.rule-sent    { border-top: 3px solid var(--num-green);    }
.funnel-cell.rule-claimed { border-top: 3px solid var(--num-teal);     }
.funnel-cell.rule-rate    { border-top: 3px solid var(--num-burgundy); }
.funnel-cell.rule-pending { border-top: 3px solid var(--num-amber);    }
.funnel-value { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--num-green); display: flex; align-items: center; gap: 8px; }
.funnel-label { margin-top: 8px; color: var(--ink-62); font-weight: 500; font-size: 13px; }
.funnel-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--gold); color: var(--ink);
  font-weight: 800; font-size: 12px; line-height: 1;
}

/* ===== Analytics strip — bold Teal band (works in both themes) ===== */
.analytics-strip {
  background: var(--teal); border: 1px solid var(--teal);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-wrap: wrap; gap: 22px;
}
.analytics-stat { flex: 1 1 130px; min-width: 120px; }
.analytics-value { font-weight: 900; font-size: 26px; letter-spacing: -0.01em; color: var(--lime); }
.analytics-label { margin-top: 5px; color: rgba(250,250,250,0.82); font-size: 13px; font-weight: 500; }

/* ===== Buttons — Deep Field flat ===== */
.quick-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.qa-btn,
.quick-action-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: 13px; font-weight: 700; font-size: 15px;
  border: 1px solid var(--border-14); background: var(--panel); color: var(--text);
  text-decoration: none; cursor: pointer;
}
.qa-btn svg, .quick-action-btn svg { width: 18px; height: 18px; }
.qa-btn:hover, .quick-action-btn:hover { background: var(--panel-2); text-decoration: none; }
.qa-btn.primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.qa-btn.primary:hover { background: #a2f062; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
  border-radius: 12px;
  white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border-14);
  background: var(--panel); color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--panel-2); text-decoration: none; }
.btn:disabled { cursor: not-allowed; pointer-events: none; opacity: 0.5; }
/* Primary = Lime fill, Ink text (bright fills always take Ink) */
.btn-primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn-primary:hover { background: #a2f062; border-color: #a2f062; }
.btn-primary:disabled { background: var(--lime); opacity: 0.45; }
/* Secondary = solid Green band colour with Paper text (constant, AA) */
.btn-secondary { background: var(--green); color: var(--paper); border-color: var(--green); }
.btn-secondary:hover { background: #00693a; border-color: #00693a; }
/* Ghost = quiet panel button */
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-14); }
.btn-ghost:hover { background: var(--panel-2); }
/* Danger = Blush fill, Ink text (bright fill rule) */
.btn-danger { background: var(--blush); color: var(--ink); border-color: var(--blush); }
.btn-danger:hover { background: #ffa9b7; border-color: #ffa9b7; }
.btn-outline-primary { background: transparent; color: var(--num-green); border-color: var(--num-green); }
.btn-outline-primary:hover { background: var(--soft-green); }
.btn-link { background: none; border: none; color: var(--num-teal); font-weight: 700; padding: 0; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { padding: 6px 14px; font-size: 0.8125rem; border-radius: 10px; }
.btn-lg { padding: 14px 28px; font-size: 1.0625rem; border-radius: 14px; }
.btn-icon { padding: 8px; border-radius: 10px; }
.btn-full { width: 100%; }
.btn .spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--track-switch);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

/* ===== Cards / panels (legacy glass classes → flat panels) ===== */
.card,
.glass,
.glass-subtle {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card { padding: var(--space-6); }
.glass-minimal {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.glass-interactive:hover { background: var(--panel-2); }
.glass-interactive:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.glass-tint-success { background: var(--soft-green); border-color: var(--border); }
.glass-tint-warning { background: var(--chip-none-bg); border-color: var(--num-amber); }
.glass-tint-danger  { background: var(--chip-none-bg); border-color: var(--num-burgundy); }
.glass-tint-info    { background: var(--chip-none-bg); border-color: var(--num-teal); }
.card-flat { background: var(--panel); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.card-body { padding: 0; }
.card-footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* ===== Forms ===== */
.form-group { margin-bottom: var(--space-5); }
.form-label {
  display: block; font-size: 0.875rem; font-weight: 700;
  color: var(--text); margin-bottom: var(--space-2);
}
.form-hint, .form-help, .field-hint {
  font-size: 0.8125rem; color: var(--ink-62); margin-top: var(--space-1);
}
.form-input, .form-select, .form-textarea {
  display: block; width: 100%;
  padding: 10px 14px;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--text);
  background: var(--inset);
  border: 1px solid var(--border-14);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--ink-40); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  background: var(--panel);
  border-color: var(--num-teal);
  outline: 2px solid var(--num-teal);
  outline-offset: 0;
}
.form-input::placeholder { color: var(--ink-40); }
/* Disabled/readonly inputs: Chromium dims text below AA by default; pin the
   colour explicitly (ink-62 is the documented AA secondary tier). */
.form-input:disabled, .form-input[readonly], .form-select:disabled, .form-textarea:disabled {
  color: var(--ink-62); -webkit-text-fill-color: var(--ink-62); opacity: 1; background: var(--inset);
}
/* App-scoped contrast fix for the shared cookie-consent module: its green
   #15803d is 4.31:1 on our panel tints. deep-field.css only loads in the app
   shell, so marketing pages keep consent.css untouched. */
body .og-consent-settings, body .og-consent-settings--footer, body .og-consent-settings--fixed {
  color: #00552B;
}
.form-input.is-error, .form-select.is-error, .form-textarea.is-error { border-color: var(--num-burgundy); }
.form-input.is-error:focus { outline-color: var(--num-burgundy); }
.form-error { font-size: 0.8125rem; color: var(--num-burgundy); font-weight: 600; margin-top: var(--space-1); }
.form-textarea { min-height: 100px; resize: vertical; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23768079' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-checkbox { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.form-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.form-row { display: flex; gap: var(--space-4); }
.form-row .form-group { flex: 1; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; }

/* ===== Tables ===== */
.table-wrap {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.table, .team-table, .settings-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .team-table th, .settings-table th {
  text-align: left; padding: 12px 16px;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-62);
  background: var(--inset);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td, .team-table td, .settings-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td, .team-table tr:last-child td, .settings-table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--inset); }
.table-empty { padding: var(--space-10); text-align: center; color: var(--ink-62); }

/* ===== Badges & chips ===== */
/* Bright fills with Ink text: Ink passes AA on every bright ground, both themes */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 0.75rem; font-weight: 700;
  border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
.badge-success { background: var(--lime); color: var(--ink); }
.badge-warning { background: var(--gold); color: var(--ink); }
.badge-error   { background: var(--blush); color: var(--ink); }
.badge-info    { background: var(--cyan); color: var(--ink); }
.badge-neutral { background: var(--chip-none-bg); color: var(--ink-62); }
.badge-purple  { background: var(--blush); color: var(--ink); }
.badge-coming-soon { background: var(--chip-none-bg); color: var(--ink-62); font-size: 0.6875rem; }
.badge-gesture-off { background: var(--chip-none-bg); color: var(--ink-62); border: 1px solid var(--border-14); }

.status-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.status-badge-claimed  { background: var(--cyan); color: var(--ink); }
.status-badge-pending  { background: var(--gold); color: var(--ink); }
.status-badge-declined { background: var(--blush); color: var(--ink); }

.role-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; text-transform: capitalize;
}
.role-badge--admin  { background: var(--lime); color: var(--ink); }
.role-badge--member { background: var(--chip-none-bg); color: var(--ink-62); }

.trend-badge { font-size: 0.8125rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.trend-up   { color: var(--ink); background: var(--lime); }
.trend-down { color: var(--ink); background: var(--gold); }

/* ===== Status chips (Deep Field timeline vocabulary) ===== */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12px;
}
.chip.funded  { background: var(--lime); color: var(--ink); }
.chip.funded .dot  { background: var(--green); }
.chip.claimed { background: var(--cyan); color: var(--ink); }
.chip.claimed .dot { background: var(--teal); }
.chip.pending { background: var(--gold); color: var(--ink); }
.chip.pending .dot { background: var(--amber); }
.chip.none { background: var(--chip-none-bg); color: var(--ink-62); }
.chip.none .dot { background: var(--ink-40); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ===== Switch toggles (Deep Field .filter + legacy .ng-switch) ===== */
.filters { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-bottom: 18px; }
.filter {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink-62); font-weight: 500; font-size: 14px;
}
.filter input { position: absolute; opacity: 0; width: 0; height: 0; }
.track {
  width: 46px; height: 27px; border-radius: 999px; flex: none;
  background: var(--track-switch); position: relative; transition: background 0.2s;
}
.track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 2px rgba(35,40,36,0.28);
  transition: transform 0.2s;
}
.filter input:checked + .track { background: var(--lime); }
.filter input:checked + .track::after { transform: translateX(19px); }
.filter input:focus-visible + .track { outline: 2px solid var(--num-teal); outline-offset: 2px; }
/* Legacy dashboard switch (settings/dashboard toggles render .ng-switch) */
.ng-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-62); font-weight: 500; font-size: 14px; }
.ng-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ng-switch__slider {
  width: 46px; height: 27px; border-radius: 999px; flex: none; display: inline-block;
  background: var(--track-switch); position: relative; transition: background 0.2s;
}
.ng-switch__dot,
.ng-switch__slider::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 2px rgba(35,40,36,0.28);
  transition: transform 0.2s;
}
.ng-switch input:checked + .ng-switch__slider { background: var(--lime); }
.ng-switch input:checked + .ng-switch__slider::after,
.ng-switch input:checked + .ng-switch__slider .ng-switch__dot { transform: translateX(19px); }
.ng-switch input:focus-visible + .ng-switch__slider { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.dashboard-toggles { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-bottom: 18px; }

/* ===== Timeline / event rows (Deep Field vocabulary) ===== */
.day-group { margin-top: 22px; }
.day-group:first-of-type { margin-top: 0; }
.day-label,
.day-group-label {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 12px; color: var(--ink-62);
}
.day-date { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-62); }
.event-row {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 16px; margin-bottom: 10px;
}
.event-time { flex: none; width: 62px; font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.35; }
.event-time span { display: block; color: var(--ink-62); font-weight: 500; font-size: 12px; }
.event-body { flex: 1; min-width: 0; }
.event-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--text); }
.event-meta { color: var(--ink-62); font-size: 13px; font-weight: 500; margin: 0 0 9px; }

/* Quiet scope clarifier under a section head (e.g. "Showing your team's
   meetings across the org"). Muted, sits just below the title. */
.section-sub { margin: -4px 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-62); }

/* ===== Same-time grouping (meetings sharing one start instant) ===== */
/* A group is a normal stack of individual cards/rows with a quiet cue label on
   top. Every meeting stays fully visible and reachable — no collapsing. The
   accent rail marks the cluster without hiding anything. Tokens only, so both
   themes adapt from the same rule. */
.same-time-group { display: flex; flex-direction: column; gap: var(--space-3); }
.day-group .same-time-group { margin-bottom: 10px; }
.same-time-cue {
  font-size: 12px; font-weight: 700; color: var(--ink-62);
  letter-spacing: 0.04em; margin: 2px 0 2px;
}
/* Secondary organiser attribution on a card/row. Muted, never competes with
   the title. Absent entirely when organizer_name is not in the payload. */
.event-card-organizer {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch;
}
.event-card-organizer::before { content: "\00b7"; margin: 0 6px 0 0; color: var(--ink-40, var(--ink-62)); }

/* ===== Event cards (current component markup, Deep Field skin) ===== */
.event-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.event-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.event-card:hover { background: var(--panel-2); border-color: var(--border-14); }
.event-card:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.event-card-time { font-size: 0.8125rem; font-weight: 700; color: var(--text); min-width: 60px; flex-shrink: 0; }
.event-card-info { flex: 1; min-width: 0; }
.event-card-title { font-weight: 700; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card-meta { font-size: 0.8125rem; color: var(--ink-62); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.event-card-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.event-card.is-disabled { opacity: 0.6; background: var(--inset); }
.event-card.is-disabled .event-card-title { color: var(--ink-62); }
/* Title anchor carries keyboard/AT access for the card (container is not an
   interactive role). Inherits title styling; focus ring per house pattern. */
.event-card-title-link { color: inherit; text-decoration: none; }
.event-card-title-link:hover { text-decoration: underline; }
.event-card-title-link:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; border-radius: 4px; }

/* ===== Gesture toggle (Included / Excluded text button) ===== */
.gesture-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-14);
  background: var(--panel);
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Included = gesture on: Lime fill, Ink text (bright fill rule) */
.gesture-toggle-on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.gesture-toggle-on:hover { background: #a2f062; }
/* Excluded = gesture off: quiet neutral */
.gesture-toggle-off { background: var(--chip-none-bg); border-color: var(--border-14); color: var(--ink-62); }
.gesture-toggle-off:hover { background: var(--panel-2); color: var(--text); }
.gesture-toggle:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.gesture-toggle.loading { opacity: 0.6; cursor: progress; }

/* ===== Budget / credit bar ===== */
.budget-bar-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.budget-bar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.budget-bar-label { font-size: 0.875rem; font-weight: 700; color: var(--text); }
.budget-bar-amount { font-size: 0.875rem; font-weight: 700; color: var(--num-green); }
.budget-bar-amount.is-warning { color: var(--num-amber); }
.budget-bar-amount.is-empty { color: var(--num-burgundy); }
.budget-bar-track {
  height: 10px; background: var(--track-bar);
  border-radius: 999px; overflow: hidden;
}
.budget-bar-fill { height: 100%; border-radius: 999px; transition: width 800ms ease-out; min-width: 0; }
/* Fills stay the BRIGHT twin in both themes (bright fill rule) */
.budget-bar-fill.green { background: var(--lime); }
.budget-bar-fill.amber { background: var(--gold); }
.budget-bar-fill.red   { background: var(--blush); }
.budget-bar-warning { font-size: 13px; margin-top: 6px; font-weight: 600; color: var(--num-amber); }
.budget-bar-warning.is-empty { color: var(--num-burgundy); }
.budget-bar-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-2); font-size: 0.75rem; color: var(--ink-62);
}

/* ===== Credits bar (dashboard) ===== */
.credits-bar { padding: 16px 20px; margin-bottom: 20px; }
.credits-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.credits-label { font-size: 14px; font-weight: 700; color: var(--text); }
.credits-badge {
  font-size: 11px; font-weight: 700; color: var(--ink);
  background: var(--gold); padding: 2px 8px; border-radius: 999px;
}
.credits-count { font-size: 13px; font-weight: 500; color: var(--ink-62); margin-left: auto; }
.credits-progress-track { height: 6px; border-radius: 999px; background: var(--track-bar); overflow: hidden; margin-bottom: 10px; }
.credits-progress-fill { height: 100%; border-radius: 999px; background: var(--lime); transition: width 0.5s ease; }
.credits-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-62); }

/* ===== Toasts ===== */
.toast-container {
  position: fixed; top: var(--space-5); right: var(--space-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-3);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--panel);
  border: 1px solid var(--border-14);
  border-radius: var(--radius-md);
  font-size: 0.9375rem; font-weight: 500;
  color: var(--text);
  max-width: 380px; pointer-events: auto;
  animation: slideIn 300ms ease;
}
.toast-success { border-left: 4px solid var(--num-green); }
.toast-error   { border-left: 4px solid var(--num-burgundy); }
.toast-info    { border-left: 4px solid var(--num-teal); }
.toast-icon { flex-shrink: 0; line-height: 1; display: grid; place-items: center; }
.toast-success .toast-icon { color: var(--num-green); }
.toast-error .toast-icon   { color: var(--num-burgundy); }
.toast-info .toast-icon    { color: var(--num-teal); }
.toast-message { flex: 1; min-width: 0; }
.toast-close { padding: 4px; color: var(--ink-62); cursor: pointer; border: none; background: none; font-size: 1rem; line-height: 1; }
.toast-close:hover { color: var(--text); }
.toast-exit { animation: slideOut 200ms ease forwards; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(35, 40, 36, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-5);
  animation: overlayIn 0.2s ease both;
}
.modal {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-14);
  border-radius: var(--radius);
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  animation: slideUp 0.25s ease both;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6); padding-bottom: 0; }
.modal-title { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink-62); cursor: pointer; border: 1px solid var(--border);
  background: var(--inset); font-size: 1.25rem;
}
.modal-close:hover { background: var(--panel-2); color: var(--text); }
.modal-body { padding: var(--space-6); color: var(--ink-62); font-size: 0.9375rem; line-height: 1.6; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); }

/* ===== Login ===== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--bg); }
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-10);
  max-width: 440px; width: 100%;
  text-align: center;
}
.login-logo { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.login-logo-icon {
  width: 48px; height: 48px;
  background: var(--lime);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: 1.5rem; font-weight: 900;
}
.login-logo-text { font-size: 1.75rem; font-weight: 900; color: var(--text); letter-spacing: -0.02em; }
.login-logo-text span { color: var(--num-green); }
.login-headline { font-size: 1.5rem; font-weight: 900; color: var(--text); margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.login-subtitle { color: var(--ink-62); font-size: 0.9375rem; margin-bottom: var(--space-8); }
.login-btn-google {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%; padding: 14px 20px;
  font-size: 1rem; font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border-14);
  background: var(--panel); color: var(--text);
  cursor: pointer; text-decoration: none;
}
.login-btn-google:hover { background: var(--panel-2); text-decoration: none; }
.login-btn-google svg { width: 20px; height: 20px; flex-shrink: 0; }
.login-btn-microsoft {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%; padding: 14px 20px;
  font-size: 1rem; font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--inset); color: var(--ink-62);
  cursor: not-allowed; margin-top: var(--space-3); position: relative;
}
.login-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--ink-40); font-size: 0.8125rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-footer { margin-top: var(--space-8); font-size: 0.8125rem; color: var(--ink-62); line-height: 1.6; }
.login-footer a { color: var(--num-teal); font-weight: 600; }
.login-proof { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--ink-62); }
.login-proof strong { color: var(--num-green); font-weight: 800; }
/* WCAG 1.4.1 (link-in-text-block): a link inside running text must be
   distinguishable without relying on colour alone. */
.login-proof a { text-decoration: underline; text-underline-offset: 2px; }

/* ===== Onboarding ===== */
.onboarding-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
/* Focus mode: fixed overlay covering the whole viewport so nav bars behind
   it are unclickable. z-index above sidebar (100) and tab bar (300), below
   toasts/consent (600) and the chat launcher. Flat scrim, no blur. */
.onboarding-page.ob-focus {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  margin: 0; overflow-y: auto;
  background: rgba(35, 40, 36, 0.55);
}
.onboarding-page.ob-focus .onboarding-card { margin: auto; }
.onboarding-card {
  background: var(--panel);
  border: 1px solid var(--border-14);
  border-radius: var(--radius);
  padding: var(--space-8);
  max-width: 600px; width: 100%;
}
.onboarding-progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.onboarding-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--track-switch); transition: background 0.2s ease; }
.onboarding-step-dot.active { background: var(--num-green); width: 12px; height: 12px; }
.onboarding-step-dot.completed { background: var(--num-green); }
.onboarding-step-line { flex: 1; height: 2px; background: var(--track-bar); transition: background 0.2s ease; }
.onboarding-step-line.completed { background: var(--num-green); }
.onboarding-step-title { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--space-2); }
.onboarding-step-desc { color: var(--ink-62); margin-bottom: var(--space-6); }
.onboarding-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* File drop zone */
.drop-zone {
  border: 2px dashed var(--border-14);
  border-radius: var(--radius);
  padding: var(--space-8);
  text-align: center; cursor: pointer;
  background: var(--inset);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--num-green); background: var(--soft-green); }
.drop-zone-icon { font-size: 2rem; margin-bottom: var(--space-3); color: var(--ink-40); }
.drop-zone-text { font-size: 0.875rem; color: var(--ink-62); }
.drop-zone-text strong { color: var(--num-green); }
.drop-zone-preview { max-width: 120px; max-height: 120px; margin: var(--space-4) auto 0; border-radius: var(--radius-md); object-fit: contain; }

/* Color picker */
.color-picker-wrap { display: flex; align-items: center; gap: var(--space-3); }
.color-picker-input { width: 48px; height: 48px; border: 2px solid var(--border-14); border-radius: var(--radius-md); cursor: pointer; padding: 2px; background: var(--panel); }
.color-picker-preview { width: 48px; height: 48px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.color-picker-hex { font-family: monospace; font-size: 0.875rem; color: var(--ink-62); }

/* ===== Dashboard view (classic markup, Deep Field skin) ===== */
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.dashboard-date {
  font-size: 12px; font-weight: 700; color: var(--ink-62);
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 4px;
}
.dashboard-greeting { font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; }
.dashboard-subtitle { font-size: 15px; color: var(--ink-62); margin-top: 4px; }
.dashboard-section { margin-bottom: var(--space-8); }
.dashboard-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.dashboard-section-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.impact-card-legacy-badge { color: var(--ink-62); }

/* ===== Event detail ===== */
.event-detail-header {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.event-detail-title { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--space-3); }
.event-detail-meta { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; color: var(--ink-62); font-size: 0.875rem; }
.event-detail-meta-item { display: flex; align-items: center; gap: var(--space-2); }
.event-detail-actions {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.timeline-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; position: relative; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--track-switch); margin-top: 6px; flex-shrink: 0; position: relative; z-index: 1; }
.timeline-dot.sent { background: var(--num-green); }
.timeline-dot.pending { background: var(--num-amber); }
.timeline-dot.scheduled { background: var(--track-switch); }
.timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 20px; bottom: -4px;
  width: 2px; background: var(--border);
}
.timeline-content { flex: 1; }
.timeline-title { font-weight: 700; font-size: 0.875rem; color: var(--text); }
.timeline-time { font-size: 0.8125rem; color: var(--ink-62); }

/* ===== Attendees ===== */
.search-bar { position: relative; margin-bottom: var(--space-6); }
.search-bar-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-40); pointer-events: none; }
.search-bar-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--inset);
  border: 1px solid var(--border-14);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.search-bar-input:focus { background: var(--panel); border-color: var(--num-teal); outline: 2px solid var(--num-teal); outline-offset: 0; }
.search-bar-input::placeholder { color: var(--ink-40); }

.page-header { margin-bottom: 20px; }
.page-title { font-size: 28px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; line-height: 1.15; }
.page-subtitle { font-size: 15px; color: var(--ink-62); margin-top: 4px; }
@media (max-width: 480px) { .page-title { font-size: 24px; } }

.glass-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--lime); font-weight: 800; font-size: 13px;
  background: var(--green);
  flex-shrink: 0;
}
.glass-avatar-lg { width: 56px; height: 56px; font-size: 18px; }

.attendee-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.attendee-stat-card { padding: 16px 20px; text-align: center; }
.attendee-stat-value { font-size: 24px; font-weight: 900; color: var(--num-green); letter-spacing: -0.02em; margin-bottom: 2px; }
.attendee-stat-value-sub { font-size: 13px; font-weight: 600; color: var(--num-teal); }
.attendee-stat-label { font-size: 12px; font-weight: 500; color: var(--ink-62); }
@media (max-width: 480px) { .attendee-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.filter-pills { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-pill {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-62);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-pill:hover { background: var(--panel-2); color: var(--text); }
.filter-pill:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.filter-pill.active { background: var(--lime); color: var(--ink); font-weight: 700; border-color: var(--lime); }

.attendee-list-container { padding: 0; margin-bottom: 20px; }
.attendee-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.attendee-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-radius: 12px; transition: background 0.15s ease; }
.attendee-row:hover { background: var(--inset); }
.attendee-row:focus-visible { outline: 2px solid var(--num-teal); outline-offset: -2px; }
.attendee-identity { flex: 1; min-width: 0; }
.attendee-name { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.attendee-meetings-line { font-size: 12px; color: var(--ink-62); margin-top: 2px; }
.attendee-flag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.attendee-flag-off { background: var(--chip-none-bg); border: 1px solid var(--border); color: var(--ink-62); }
.attendee-flag-team { background: var(--cyan); color: var(--ink); }
.attendee-row.is-flagged .glass-avatar,
.attendee-row.is-flagged .attendee-meetings-line { opacity: 0.55; }
.attendee-incl-control {
  display: inline-flex; flex-shrink: 0;
  border: 1px solid var(--border-14);
  border-radius: 999px; overflow: hidden;
  background: var(--inset);
}
.attendee-incl-btn {
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 7px 10px; border: none;
  border-left: 1px solid var(--border);
  background: transparent; color: var(--ink-62);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.attendee-incl-btn:first-child { border-left: none; }
.attendee-incl-btn:hover:not(:disabled):not(.active) { background: var(--panel-2); color: var(--text); }
.attendee-incl-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: -2px; }
.attendee-incl-btn.active { background: var(--lime); color: var(--ink); }
.attendee-incl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.attendee-email { font-size: 12px; color: var(--ink-62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attendee-company { font-size: 13px; font-weight: 500; color: var(--ink-62); flex-shrink: 0; display: none; }
@media (min-width: 768px) { .attendee-company { display: block; min-width: 120px; } }
.attendee-meetings { font-size: 13px; font-weight: 700; color: var(--text); flex-shrink: 0; min-width: 32px; text-align: center; display: none; }
@media (min-width: 640px) { .attendee-meetings { display: block; } }
.attendee-last-seen { font-size: 11px; font-weight: 500; color: var(--ink-62); flex-shrink: 0; white-space: nowrap; min-width: 60px; text-align: right; display: none; }
@media (min-width: 640px) { .attendee-last-seen { display: block; } }
.attendee-chevron { color: var(--ink-40); flex-shrink: 0; }
.attendee-chevron svg { width: 16px; height: 16px; }
.attendee-network-tick { color: var(--num-green); }

.attendee-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.attendee-pagination-info { font-size: 13px; font-weight: 500; color: var(--ink-62); }
.attendee-pagination-controls { display: flex; gap: 8px; }
.attendee-pagination-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--panel);
  border: 1px solid var(--border-14);
  border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-62);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.attendee-pagination-btn:hover { background: var(--panel-2); color: var(--text); }
.attendee-pagination-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.attendee-pagination-btn:disabled { cursor: not-allowed; color: var(--ink-40); background: var(--inset); }
.attendee-pagination-btn svg { width: 14px; height: 14px; }
.attendee-stats { display: flex; gap: var(--space-2); }
.attendee-stat { font-size: 0.8125rem; color: var(--ink-62); }

/* ===== Stats vocabulary (dashboard summary / superadmin panels) ===== */
.period-selector {
  display: inline-flex;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px; gap: 2px;
}
.period-btn {
  padding: 6px 16px; font-size: 0.8125rem; font-weight: 600;
  border-radius: 999px; color: var(--ink-62);
  border: none; background: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.period-btn:hover { color: var(--text); background: var(--panel-2); }
.period-btn.active { background: var(--lime); color: var(--ink); font-weight: 700; }

.funnel-bar-wrap { margin-bottom: var(--space-4); }
.funnel-bar-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: 0.875rem; }
.funnel-bar-name { font-weight: 600; color: var(--text); }
.funnel-bar-value { font-weight: 700; color: var(--ink-62); }
.funnel-bar-track { height: 28px; background: var(--track-bar); border-radius: var(--radius-sm); overflow: hidden; }
.funnel-bar-fill {
  height: 100%; border-radius: var(--radius-sm);
  transition: width 800ms ease-out;
  display: flex; align-items: center; padding-left: var(--space-3);
  font-size: 0.75rem; font-weight: 700; color: var(--ink);
  background: var(--lime);
}
.chart-canvas-wrap { position: relative; width: 100%; height: 260px; }
.chart-canvas-wrap canvas { width: 100%; height: 100%; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.category-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}
.category-item:hover { background: var(--panel-2); }
.category-icon { font-size: 1.5rem; }
.category-info { flex: 1; }
.category-name { font-size: 0.875rem; font-weight: 700; color: var(--text); }
.category-count { font-size: 0.8125rem; color: var(--ink-62); }

.analytics-subtitle { font-size: 0.9375rem; color: var(--ink-62); margin-top: var(--space-1); }
.analytics-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.analytics-summary-stat { flex: 1 1 130px; min-width: 120px; }
.metric-card { padding: 20px; }
.metric-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-62); margin-bottom: 8px; }
.metric-value-row { display: flex; align-items: baseline; gap: 8px; }
.metric-value { font-size: 1.75rem; font-weight: 900; color: var(--num-green); letter-spacing: -0.02em; line-height: 1.1; }

.analytics-columns { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
@media (min-width: 1024px) {
  .analytics-columns { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
}
.analytics-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.funnel-card { padding: 24px; }
.funnel-card-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.funnel-rows { display: flex; flex-direction: column; gap: 14px; }
.funnel-row { display: flex; flex-direction: column; gap: 6px; }
.funnel-row-header { display: flex; justify-content: space-between; align-items: baseline; }
.funnel-row-label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.funnel-row-value { font-size: 0.875rem; font-weight: 800; color: var(--text); }
.funnel-row-pct { font-size: 0.75rem; font-weight: 600; color: var(--ink-62); margin-left: 6px; }
.funnel-bar-track-slim { height: 10px; border-radius: 999px; background: var(--track-bar); overflow: hidden; }
.funnel-bar-fill-slim { height: 100%; border-radius: 999px; background: var(--lime); transition: width 0.5s ease; }

.engagers-panel { padding: 24px; }
@media (min-width: 1024px) { .engagers-panel { position: sticky; top: 24px; } }
.engagers-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.engager-list { display: flex; flex-direction: column; gap: 16px; }
.engager-row { display: flex; align-items: center; gap: 12px; }
.engager-rank {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 800; color: var(--ink-62);
  background: var(--inset); flex-shrink: 0;
}
.engager-rank-first { background: var(--gold); color: var(--ink); }
.engager-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--lime); font-weight: 800; font-size: 0.8125rem;
  background: var(--green); flex-shrink: 0;
}
.engager-info { flex: 1; min-width: 0; }
.engager-name { font-size: 0.875rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.engager-count { font-size: 0.75rem; color: var(--ink-62); margin-top: 1px; }
.engager-badge { font-size: 1rem; flex-shrink: 0; }

.type-card { padding: 24px; }
.type-card-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.type-rows { display: flex; flex-direction: column; gap: 16px; }
.type-row { display: flex; flex-direction: column; gap: 6px; }
.type-row-header { display: flex; justify-content: space-between; align-items: center; }
.type-row-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: var(--text); }
.type-row-emoji { font-size: 1.125rem; line-height: 1; }
.type-row-stats { font-size: 0.8125rem; font-weight: 600; color: var(--ink-62); }
.type-bar-track { height: 10px; border-radius: 999px; background: var(--track-bar); overflow: hidden; }
.type-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
/* Fills stay the bright twin in both themes */
.type-bar-green  { background: var(--lime); }
.type-bar-orange { background: var(--gold); }
.type-bar-blue   { background: var(--cyan); }
.type-bar-purple { background: var(--blush); }
@media (min-width: 768px) and (max-width: 1023px) { .analytics-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .analytics-metrics { grid-template-columns: 1fr; }
  .metric-value { font-size: 1.5rem; }
}

/* ===== Settings ===== */
.settings-tabs {
  display: flex;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: var(--space-6);
  overflow-x: auto;
  gap: 2px;
}
.settings-tab {
  padding: var(--space-2) var(--space-5);
  font-size: 0.875rem; font-weight: 600; color: var(--ink-62);
  border: none; background: none; cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.settings-tab:hover { color: var(--text); background: var(--panel-2); }
.settings-tab.active { background: var(--lime); color: var(--ink); font-weight: 700; }
/* DEF-047: the settings content used only ~50% of the available width. Widen
   the section so fields and cards use the space (form controls stay readable
   via their own grids). */
.settings-section { max-width: 960px; }
/* DEF-047: Display Name / Email / Timezone on ONE row on wide screens. */
@media (min-width: 760px) {
  #settings-profile-row-name-email { grid-template-columns: 1fr 1fr 1fr; }
}
/* DEF-047: Disconnect + Delete side by side (Delete to the right of Disconnect). */
.danger-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .danger-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.danger-grid .danger-card + .danger-card { margin-top: 0; }
.settings-subsection { margin-top: var(--space-6); }
.settings-section-title { font-size: 1.1rem; font-weight: 800; margin-bottom: var(--space-2); }
.settings-section-desc { color: var(--ink-62); font-size: 0.875rem; margin-bottom: var(--space-6); }
.settings-subtitle { font-size: 0.9375rem; color: var(--ink-62); margin-top: var(--space-1); }
.settings-profile-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.settings-profile-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
  color: var(--lime); font-weight: 800; font-size: 1.375rem;
  flex-shrink: 0; overflow: hidden;
}
.settings-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-profile-actions { display: flex; flex-direction: column; gap: var(--space-1); }
.settings-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 768px) { .settings-form-grid { grid-template-columns: 1fr; } }
.settings-reminder-slot { display: flex; align-items: center; gap: var(--space-3); }

.danger-zone {
  border: 2px solid var(--num-burgundy);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: var(--panel);
}
.danger-zone-title { color: var(--num-burgundy); font-weight: 800; margin-bottom: var(--space-2); }
.danger-zone-desc { color: var(--ink-62); font-size: 0.875rem; margin-bottom: var(--space-5); }

.plan-card {
  background: var(--soft-green);
  border: 1px solid var(--num-green);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.plan-card-name { font-size: 1.25rem; font-weight: 800; color: var(--num-green); margin-bottom: var(--space-2); }
.plan-card-price { font-size: 2rem; font-weight: 900; color: var(--text); }
.plan-card-price span { font-size: 0.875rem; font-weight: 500; color: var(--ink-62); }
.plan-card-features { margin-top: var(--space-4); }
.plan-card-feature { display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; padding: var(--space-1) 0; color: var(--ink-62); }
.plan-card-feature::before {
  content: '';
  width: 16px; height: 16px;
  background: var(--num-green);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  flex-shrink: 0;
}

/* ===== Team management ===== */
.team-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.team-stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px; text-align: center;
  transition: background 0.15s ease;
}
.team-stat-card:hover { background: var(--panel-2); }
.team-stat-value { font-size: 1.75rem; font-weight: 900; color: var(--num-green); }
.team-stat-label { font-size: 0.875rem; color: var(--ink-62); margin-top: 4px; }
.team-invite-form { display: flex; gap: 12px; align-items: flex-end; margin: 24px 0; }
.team-invite-form .form-group { flex: 1; margin-bottom: 0; }
.team-exc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.team-exc-row:last-child { border-bottom: none; }
.team-exc-value { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--text); word-break: break-all; }
/* "Internal" chip marks the org's own-domain rule — same Cyan family as the
   attendees-view "Team setting" flag so the two surfaces read as one feature. */
.team-exc-internal-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  background: var(--cyan); color: var(--ink);
}

/* ===== Cookie consent fallback banner ===== */
.cookie-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: min(600px, calc(100vw - 40px));
  background: var(--panel);
  border: 1px solid var(--border-14);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  z-index: var(--z-toast);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-text { font-size: 0.875rem; color: var(--ink-62); flex: 1; }
.cookie-banner-text a { color: var(--num-teal); font-weight: 600; }
.cookie-banner-actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

/* ===== Loading states ===== */
.loading-spinner { display: flex; align-items: center; justify-content: center; padding: var(--space-10); }
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--track-bar);
  border-top-color: var(--num-green);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-inline {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
.skeleton {
  background: linear-gradient(90deg, var(--inset) 25%, var(--panel-2) 50%, var(--inset) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.skeleton-line { height: 14px; margin-bottom: var(--space-2); }
.skeleton-title { height: 24px; width: 60%; margin-bottom: var(--space-3); }
.skeleton-card { height: 80px; margin-bottom: var(--space-3); }
.dashboard-skeleton { padding: var(--space-2) 0; }
.events-skeleton { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; gap: var(--space-4);
  color: var(--ink-62);
}

/* ===== Empty states ===== */
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); }
.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-4); }
.empty-state-title { font-size: 1.25rem; font-weight: 800; margin-bottom: var(--space-2); }
.empty-state-desc {
  color: var(--ink-62); font-size: 0.9375rem;
  margin-bottom: var(--space-6); max-width: 360px;
  margin-left: auto; margin-right: auto;
}

/* ===== Events page (FLAG_EVENTS_PAGE_V2) ===== */
.events-page { padding-bottom: 32px; }
.events-header-controls { gap: 12px; }
.events-date-select { width: auto; min-width: 160px; }
.events-hide-disabled-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink-62);
  cursor: pointer; user-select: none;
}
.events-hide-disabled-toggle input { margin: 0; accent-color: var(--green); }
.events-filter-row { display: flex; flex-direction: column; gap: 8px; }
.events-filter-input-wrap { display: flex; align-items: center; gap: 8px; }
.events-filter-input { flex: 1 1 auto; min-width: 200px; }
/* No min-height: an empty chips row must not leave a phantom gap between the
   search row and the scope row beneath it. */
.events-saved-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.events-saved-chips:empty { display: none; }
.saved-filter-chip {
  display: inline-flex; align-items: center;
  background: var(--inset);
  border: 1px solid var(--border-14);
  border-radius: 999px;
  padding: 0 2px 0 10px;
  font-size: 13px; line-height: 24px; color: var(--text);
}
.saved-filter-apply { background: none; border: 0; padding: 0 6px 0 0; font: inherit; color: inherit; cursor: pointer; }
.saved-filter-apply:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; border-radius: 4px; }
.saved-filter-delete {
  background: none; border: 0; padding: 0 6px;
  font-size: 16px; line-height: 22px;
  color: var(--ink-62); cursor: pointer; border-radius: 999px;
}
.saved-filter-delete:hover { color: var(--num-burgundy); background: var(--panel-2); }
.saved-filter-delete:focus-visible { outline: 2px solid var(--num-burgundy); outline-offset: 1px; }
.saved-filter-chip-auto { background: var(--soft-green); border-color: var(--num-green); color: var(--text); }
.saved-filter-auto { margin-right: 4px; color: var(--num-green); font-size: 12px; }
.events-save-form {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.events-save-form[hidden] { display: none; }
.events-save-form-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.events-save-form-row > span { min-width: 48px; color: var(--ink-62); }
.events-save-form-row input[type="text"] { flex: 1 1 auto; }
.events-save-form-auto { align-items: flex-start; font-size: 13px; color: var(--ink-62); cursor: pointer; display: flex; gap: 8px; }
.events-save-form-auto input { margin-top: 3px; accent-color: var(--green); }
.events-save-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* Sticky bulk-action bar — Gold accent (Ink text on soft ground stays AA) */
.events-action-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  background: var(--inset);
  border: 1px solid var(--num-amber);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.events-action-bar[hidden] { display: none; }
.events-action-summary { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.events-action-sample {
  font-size: 13px; color: var(--ink-62);
  max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.events-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.event-card-attendees { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.event-card-attendees-empty { font-size: 13px; color: var(--ink-40); font-style: italic; }
.attendee-chip {
  display: inline-flex; align-items: center;
  background: var(--inset);
  border: 1px solid var(--border-14);
  color: var(--text);
  font-size: 12px; line-height: 22px;
  border-radius: 999px;
  padding: 0 4px 0 10px;
  max-width: 200px;
}
.attendee-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.attendee-chip-more { background: var(--chip-none-bg); border-color: var(--border); color: var(--ink-62); padding: 0 10px; }
.attendee-chip-x {
  background: none; border: 0; padding: 0 6px; margin-left: 2px;
  font-size: 14px; line-height: 22px;
  color: var(--ink-62); cursor: pointer; border-radius: 999px;
}
.attendee-chip-x:hover { color: var(--num-burgundy); background: var(--panel-2); }
.attendee-chip-x:focus-visible { outline: 2px solid var(--num-burgundy); outline-offset: 1px; }
.events-load-more { min-height: 32px; padding: 16px 0; display: flex; align-items: center; justify-content: center; }
.events-load-more[hidden] { display: none; }
.events-load-spinner { display: flex; align-items: center; gap: 8px; color: var(--ink-62); font-size: 13px; }
.events-load-marker { width: 100%; height: 1px; }
.events-undo-toast { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.events-undo-btn {
  background: var(--lime); color: var(--ink);
  border: 0; border-radius: 8px;
  padding: 6px 12px; font-weight: 700; cursor: pointer;
}
.events-undo-btn:focus-visible { outline: 2px solid var(--num-green); outline-offset: 2px; }
.events-undo-link { color: var(--num-teal); font-size: 13px; text-decoration: underline; white-space: nowrap; }

/* ===== Utilities ===== */
.hidden { display: none !important; }
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border-width: 0;
}
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius); }
.rounded-full { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

/* ===== Animations (functional only — no entrance choreography) ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Responsive ===== */
@media (min-width: 560px) {
  .funnel-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-greeting { font-size: 32px; }
}
@media (min-width: 900px) {
  /* The sidebar travels WITH the capped content column: both offset by the same
     centring expression, so the pair stays connected (sidebar right edge ==
     content left edge) and centres as one block on wide screens. Below the
     threshold both max() terms collapse to 0 and the classic pinned layout holds. */
  .app-sidebar {
    display: flex;
    left: max(0px, calc((100% - var(--sidebar-w) - var(--container-max) - 2 * var(--space-8)) / 2));
  }
  .app-main {
    /* Content column capped at the marketing site's inner width (--container-max,
       matching --pb-content-max) and centred in the space beside the sidebar.
       The max() collapses to a plain sidebar offset until the viewport is wide
       enough (sidebar + cap + side padding) for centring to engage. */
    margin-left: calc(var(--sidebar-w) + max(0px, (100% - var(--sidebar-w) - var(--container-max) - 2 * var(--space-8)) / 2));
    padding: var(--space-8) var(--space-8) 40px;
    max-width: calc(var(--container-max) + 2 * var(--space-8));
  }
  /* Out-of-bounds gutters (owner directive 2026-07-14): once the connected
     sidebar+content block centres, the slices either side of it take the
     marketing site's gold ground (--gold == the homepage hero #FFD65C) in BOTH
     themes, while the content column keeps the theme ground (--bg). The
     column fills the viewport height so gold never leaks below short content.
     body.with-chrome is toggled by nav toggleNav — chrome-less routes
     (login/onboarding) keep the plain theme ground edge to edge. */
  body.with-chrome { background: var(--gold); }
  body.with-chrome .app-main { background: var(--bg); min-height: 100vh; }
  .bottom-nav { display: none; }
  .theme-toggle-row { display: none; }   /* mobile-only; desktop uses the sidebar toggle */
  .hero { padding: 18px 44px 46px; }
  .hero.hero-compact { padding-bottom: 88px; }
  .hero-greeting { font-size: 34px; padding-right: 0; }
  .hero.hero-compact .hero-greeting { font-size: 40px; }
  /* Subtitles reserve a right gutter for the hand (right-anchored, capped at
     ~165px wide) through the 900-1199px range; 1200px+ has room to spare and
     relaxes them to single full-width lines. */
  .hero-truth { max-width: none; font-size: 14px; padding-right: 210px; }
  .hero-sub { max-width: none; font-size: 14px; padding-right: 210px; }
  .hero-hand { right: 56px; height: 94%; max-height: 158px; bottom: -16px; }
  .hero.hero-compact .hero-hand { height: 80%; bottom: -14px; }
  .content { padding: 26px 44px 0; }
  .hero-curve { height: 38px; }
}
@media (min-width: 1200px) {
  .content { margin: 0 auto; }
  .hero-truth, .hero-sub { max-width: 100ch; padding-right: 0; }
}
@media (max-width: 899px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .form-row { flex-direction: column; }
  .event-card { flex-wrap: wrap; }
  .event-detail-meta { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .dashboard-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .cookie-banner {
    bottom: calc(var(--tab-h) + 20px);
    flex-direction: column; text-align: center;
    padding: var(--space-4) var(--space-5);
    max-width: calc(100vw - 32px);
  }
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.25rem; }
}
@media (max-width: 640px) {
  .events-action-bar { flex-direction: column; align-items: stretch; }
  .events-action-summary { min-width: 0; }
  .events-action-sample { max-width: 100%; white-space: normal; }
  .events-filter-input-wrap { flex-wrap: wrap; }
  .attendee-chip { max-width: 140px; }
  .attendee-chip-name { max-width: 110px; }
}
@media (max-width: 480px) {
  .app-main { padding: var(--space-4) var(--space-3); padding-bottom: calc(var(--tab-h) + var(--space-8)); }
  .impact-grid, .impact-cards { grid-template-columns: 1fr; }
  .impact-card { padding: 16px 16px 18px; }
  .impact-card-accent { margin: -16px -16px 14px; }
  .impact-card-count { font-size: 1.5rem; }
  .funnel-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-greeting { font-size: 26px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .login-card { padding: var(--space-6); }
  .onboarding-card { padding: var(--space-5); }
  .modal { margin: var(--space-3); max-height: calc(100vh - var(--space-6)); }
  .card { padding: var(--space-4); }
  .toast { max-width: calc(100vw - 40px); }
  .toast-container { right: var(--space-3); }
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.125rem; }
  h3 { font-size: 1.0625rem; }
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .table th, .table td { padding: 8px 12px; font-size: 0.8125rem; }
  .team-stats { grid-template-columns: 1fr; }
  .team-invite-form { flex-direction: column; }
  .team-invite-form .form-group { flex: auto; }
  .team-table th, .team-table td { padding: 8px 10px; font-size: 0.8125rem; }
  /* MOB-01: stacked event-card layout so status badges align at the card's
     content-left edge and controls never collide on narrow phones. */
  .event-card { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .event-card-time { min-width: 0; }
  .event-card-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .event-card-actions { justify-content: flex-start; }
}

/* ===== Accessibility & print ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-contrast: high) {
  .card, .impact-card, .event-card, .modal, .toast, .funnel-cell, .event-row {
    border-width: 2px;
    border-color: var(--border-14);
  }
}
@media print {
  body { background: #fff !important; }
  .app-sidebar, .bottom-nav, .toast-container, .cookie-banner { display: none !important; }
  .app-main { margin-left: 0; padding: 0; max-width: none; }
  .card, .impact-card, .event-card, .modal, .toast {
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
  }
  * { color: #000 !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}