/* ============================================================================
   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); }
/* Disabled nav placeholder (API/MCP, owner 2026-09-13). No pointer-events:none:
   that swallowed the hover, so "Coming soon" could never show. It is a span
   with no href and no tabindex, so hovering is all it can do. The icon and
   label fade; the Coming soon pill stays full strength and appears on hover. */
.sidebar-item.is-disabled { cursor: not-allowed; }
.sidebar-item.is-disabled > svg,
.sidebar-item.is-disabled > span:not(.sidebar-soon) { opacity: 0.4; }
.sidebar-item.is-disabled:hover { background: transparent; color: var(--paper-64); }
.sidebar-item.is-disabled:hover svg { color: inherit; }
.sidebar-soon {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s;
}
.sidebar-item.is-disabled:hover .sidebar-soon { opacity: 1; }
.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; }
/* An ANCHOR styled as a button cannot be :disabled — that pseudo-class matches
   form controls only. Anything that disables a mixed row of buttons and links
   (see disableButtons in js/views/join-org.js) must reach for this class, or
   the link stays live while its siblings grey out. Same declarations as
   .btn:disabled on purpose: one appearance, two mechanisms. */
.btn.is-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; }
.btn-primary.is-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);
}

/* Cookie-banner de-conflict for the wizard (ticket 869etgen0, owner ruling
 * 2026-09-02 option B).
 *
 * The consent card is FIXED, pinned bottom-centre, and .onboarding-page centres
 * its card in the viewport — so on a tall step the wizard's own Continue button
 * lands underneath the banner. The card itself is pointer-events: none, but the
 * banner's BUTTONS are not, and they swallowed the click: CI caught it as
 * onboarding-v2.spec.js "paid flow" timing out on #ob-gesture-continue with
 * "<span class="cookie-banner__manage-word">Manage</span> ... intercepts pointer
 * events". It surfaced when the intro row went to two buttons (A11) and so grew
 * wide enough to cover the card's centre point; a 480px card cannot hold two
 * side-by-side buttons that miss a centred Continue, which is why the wizard
 * moves rather than the buttons.
 *
 * This reuses the mechanism that already lifts the chat launcher clear (PUB-13):
 * consent.js puts .og-consent-open on <body> while the banner is up and
 * publishes the live card height as --og-consent-h, recomputed when the
 * preferences panel opens. Reserving that much space at the bottom of the
 * centring container raises the whole wizard card above the banner, and because
 * box-sizing is border-box the padding comes out of the centred area rather than
 * adding a scrollbar. Both revert the moment a choice is made. */
body.og-consent-open .onboarding-page {
  padding-bottom: calc(var(--space-6) + var(--og-consent-h, 96px) + 24px);
}

/* Same de-conflict for every modal (ticket 869etgen0, second pass).
 *
 * .modal-overlay is the same shape as .onboarding-page — a fixed, centred flex
 * container — so its footer lands in the same place the banner occupies. It only
 * became a problem when the intro button row was widened to fill the card
 * (owner ruling: the left-huddled row "doesn't feel right"): a narrow row in the
 * left half missed the confirm button, a full-width one covers it. CI caught it
 * across four suites at once — the 869etgen0 V1 fence reporting "banner control
 * Accept all overlaps #modal-confirm-btn", plus superadmin payment-runs and
 * superadmin-ui timing out on "#cookie-manage ... intercepts pointer events".
 *
 * Conditional and short-lived: it applies only while the banner is open, which
 * is until the visitor answers the cookie box once, and reverts on hide(). */
body.og-consent-open .modal-overlay {
  padding-bottom: calc(var(--space-5) + var(--og-consent-h, 96px) + 24px);
}

/* Same de-conflict for the LOGIN card (D15, production code review 3-4
 * September 2026).
 *
 * .login-page is the third container of this exact shape — min-height: 100vh,
 * flex, centred, border-box — and it was the one that never got the rule. At
 * 375x667 the consent card (257px tall, pinned bottom-centre) covers the bottom
 * 42px of the 54px "Sign in with Microsoft" button and the whole terms/privacy
 * footer, and the card's own "Cookie Policy" link — pointer-events: auto, unlike
 * the card body — lands directly on top of the footer's Terms of Service link
 * and takes its taps.
 *
 * THE PAGE YIELDS, NOT THE BOX (owner ruling 2026-09-02: "when the consent box
 * collides with a page's centred control, the page yields"; and the box is never
 * shrunk or made scrollable). Reserving the live card height at the bottom of the
 * centring container lifts both sign-in buttons clear of the banner outright.
 *
 * The footer needs a scroll, and that is arithmetic rather than a shortfall: the
 * login card is 508px and the banner 257px (414px with the preferences panel
 * open), so the two cannot share a 667px screen at any layout. What the reserve
 * buys is that the page GROWS instead of clipping — .login-page has no fixed
 * height, so it becomes taller than the viewport and the document scrolls, which
 * is what makes the footer reachable at all. Reverts the moment a choice is made.
 *
 * HOW FAR IT GETS, MEASURED — the card grows as the screen narrows (the headline
 * and footer wrap harder), so the clearance is not uniform:
 *   390x844, 375x667  card 510/508px — BOTH sign-in buttons clear on the reserve
 *                     alone; the short-screen block below does not apply here.
 *   360x640           card 534px, missing by 39px on the reserve alone. The
 *                     max-height:660px block in deep-field.auth-admin.css takes
 *                     53px out of the card above the buttons and it clears by
 *                     14px (owner instruction, 4 September 2026).
 *   320x568           card 624px, 572px after that block — still does not clear
 *                     and cannot: 572 + 257 does not fit in 568. Reachable by
 *                     scrolling, which is what the floor test pins.
 * So the guarantee is "clear at 360x640 and up, reachable below", it is a strict
 * improvement at every size measured (at 320x568 it takes the available scroll
 * from 216px to 445px), and it clips at none.
 * tests/e2e-static/login-consent-collision.spec.js pins the 375 and 360
 * clearances AND the weaker 320 floor, so none of the three can regress. */
body.og-consent-open .login-page {
  padding-bottom: calc(var(--space-6) + var(--og-consent-h, 96px) + 24px);
}

/* 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; }
}