/* ═══════════════════════════════════════════════════════════════
   LINEAR DESIGN SYSTEM - Dark Cinematic Theme
   Replaces DaisyUI + old "Trailhead" theme.
   All DaisyUI class names are preserved for template compatibility.
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────
   0. VIEW TRANSITIONS
   Full-page navigation rebuilds authenticated header chrome. Do not opt into
   cross-document transitions because early navigation frames can briefly differ
   by role-specific links, notification controls, or avatar state.
   ──────────────────────────────────── */
@view-transition { navigation: none; }

header.sticky { view-transition-name: none; }

/* ────────────────────────────────────
   1. DESIGN TOKENS (CSS Custom Properties)
   RGB channels for Tailwind opacity modifier support
   ──────────────────────────────────── */
:root {
  /* Surface hierarchy - deep navy (#0D3B66 family) */
  --color-base-100: 9 40 67;       /* #092843 - primary surface */
  --color-base-200: 6 27 48;       /* #061B30 - page background */
  --color-base-300: 16 72 115;     /* #104873 - elevated surface / borders */
  --color-base-content: 250 240 202; /* #FAF0CA - primary text (cream) */

  /* Brand - warm flame/orange/yellow on navy */
  --color-primary: 249 87 56;      /* #F95738 - flame */
  --color-primary-content: 6 27 48;  /* deep navy on flame: 5.3:1, beats white (3.3:1) */
  --color-secondary: 238 150 75;   /* #EE964B - orange */
  --color-secondary-content: 6 27 48;
  --color-accent: 244 211 94;      /* #F4D35E - yellow */
  --color-accent-content: 6 27 48;

  /* Neutral */
  --color-neutral: 4 19 35;        /* #041323 - deepest navy */
  --color-neutral-content: 203 194 164; /* #CBC2A4 - muted cream */

  /* Semantic */
  --color-success: 34 197 94;      /* #22C55E - green-500 */
  --color-success-content: 255 255 255;
  --color-warning: 244 211 94;     /* #F4D35E - palette yellow */
  --color-warning-content: 6 27 48;
  --color-error: 239 68 68;        /* #EF4444 - red-500 */
  --color-error-content: 255 255 255;
  --color-info: 59 130 246;        /* #3B82F6 - blue-500 */
  --color-info-content: 255 255 255;

  /* Shadows - cool-toned for dark theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 12px 20px -4px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(249, 87, 56, 0.15);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-hover: rgba(255, 255, 255, 0.05);

  /* Ambient */
  --ambient-primary: rgba(249, 87, 56, 0.08);
  --ambient-secondary: rgba(238, 150, 75, 0.06);
  --ambient-accent: rgba(244, 211, 94, 0.05);

  /* App shell */
  --app-shell-user-max-width: 72rem;
  --app-shell-nav-max-width: 90rem;
  --app-reading-measure: 66ch;
  --app-form-measure: 42rem;
}

/* ========== LIGHT MODE (Warm Cream) ========== */
html.light {
  /* --- Color tokens (cream surfaces, navy text) --- */
  --color-base-100: 255 253 244;        /* #FFFDF4 - cards/canvas */
  --color-base-200: 250 240 202;        /* #FAF0CA - page background (cream) */
  --color-base-300: 240 227 178;        /* #F0E3B2 - borders/dividers */
  --color-base-content: 13 59 102;      /* #0D3B66 - body text (navy) */
  --color-primary: 199 58 30;           /* #C73A1E - flame, darkened for AA on cream */
  --color-primary-content: 255 255 255; /* white on primary: 5.2:1 */
  --color-secondary: 13 59 102;         /* #0D3B66 - navy */
  --color-secondary-content: 250 240 202;
  --color-accent: 138 91 11;            /* #8A5B0B - yellow darkened for AA text on cream */
  --color-accent-content: 255 255 255;
  --color-neutral: 13 59 102;           /* #0D3B66 - navy (footer) */
  --color-neutral-content: 250 240 202;
  --color-success: 37 127 72;           /* #257F48 */
  --color-success-content: 255 255 255;
  --color-warning: 146 102 14;          /* #92660E */
  --color-warning-content: 255 255 255;
  --color-error: 206 49 64;             /* #CE3140 */
  --color-error-content: 255 255 255;
  --color-info: 21 80 132;              /* #155084 */
  --color-info-content: 255 255 255;

  /* --- Surfaces & effects (soft navy-tinted depth) --- */
  --shadow-sm: 0 1px 2px rgba(13, 59, 102, 0.06);
  --shadow-md: 0 4px 12px rgba(13, 59, 102, 0.08);
  --shadow-lg: 0 10px 25px -5px rgba(13, 59, 102, 0.10);
  --shadow-xl: 0 20px 40px -10px rgba(13, 59, 102, 0.12);
  --shadow-glow: 0 0 20px rgba(199, 58, 30, 0.12);
  --glass-bg: transparent;
  --glass-border: rgba(13, 59, 102, 0.08);
  --glass-shadow: none;

  /* --- Ambient warmth (blobs stay on, grid/spotlight stay off) --- */
  --ambient-primary: rgba(249, 87, 56, 0.07);
  --ambient-secondary: rgba(244, 211, 94, 0.18);
  --ambient-accent: rgba(238, 150, 75, 0.08);

  color-scheme: light;
}

/* Light mode component overrides */
html.light body {
  background: rgb(var(--color-base-200));
  color: rgb(var(--color-base-content));
}

html.light .card,
html.light .card-trail {
  background: rgb(var(--color-base-100));
  border: 1px solid rgb(var(--color-base-300));
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  transition: background 150ms var(--ease-snap), box-shadow 150ms var(--ease-snap), transform 150ms var(--ease-snap);
}
html.light .card:hover,
html.light .card-trail:hover {
  background: rgb(var(--color-base-100));
  box-shadow: var(--shadow-md);
}
html.light .event-card:hover {
  border-color: rgb(var(--color-primary) / 0.55);
  box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.35), var(--shadow-md);
}

html.light .event-card {
  --event-card-accent-rgb: 100 116 139;
  --event-card-accent-strong-rgb: 51 65 85;
}
html.light .event-card--velocity {
  --event-card-accent-rgb: 2 132 199;
  --event-card-accent-strong-rgb: 3 105 161;
}
html.light .event-card--stride {
  --event-card-accent-rgb: 22 163 74;
  --event-card-accent-strong-rgb: 21 128 61;
}
html.light .event-card--trail {
  --event-card-accent-rgb: 5 150 105;
  --event-card-accent-strong-rgb: 4 120 87;
}
html.light .event-card--terrain {
  --event-card-accent-rgb: 217 119 6;
  --event-card-accent-strong-rgb: 180 83 9;
}
html.light .event-card--family {
  --event-card-accent-rgb: 202 138 4;
  --event-card-accent-strong-rgb: 161 98 7;
}
html.light .event-card--climb {
  --event-card-accent-rgb: 124 58 237;
  --event-card-accent-strong-rgb: 109 40 217;
}
html.light .event-card--walk {
  --event-card-accent-rgb: 219 39 119;
  --event-card-accent-strong-rgb: 190 24 93;
}

html.light .btn {
  box-shadow: none;
}
html.light .btn-primary {
  background: rgb(var(--color-primary));
  color: white;
  border: none;
  box-shadow: none;
}
html.light .btn-primary:hover {
  /* Darken (not brighten): white content needs >=4.5:1, which lighter flames fail */
  background: rgb(184 53 24);
}
html.light .btn-secondary:hover {
  /* Stay in the navy ramp; the shared orange hover drops cream text to 2.4:1 */
  background: rgb(9 40 67);
}
html.light .btn-ghost {
  color: rgb(var(--color-base-content));
  background: transparent;
}
html.light .btn-ghost:hover {
  background: rgb(var(--color-base-300));
}

html.light .input,
html.light .select,
html.light .textarea {
  background: rgb(var(--color-base-100));
  border-color: rgb(var(--color-base-content) / 0.2);
  color: rgb(var(--color-base-content));
}
html.light .input:focus,
html.light .select:focus,
html.light .textarea:focus {
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 2px rgba(199, 58, 30, 0.15);
}

html.light .navbar {
  background: rgba(255, 253, 244, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--color-base-300));
  box-shadow: none;
}

html.light .badge {
  box-shadow: none;
}

html.light .modal-box {
  background: rgb(var(--color-base-100));
  border: 1px solid rgb(var(--color-base-300));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

html.light .drawer-side {
  background: rgb(var(--color-base-100));
  border-right: 1px solid rgb(var(--color-base-300));
}

html.light .table th {
  background: rgb(var(--color-base-200));
  color: rgb(var(--color-base-content) / 0.6);
}

html.light .divider::before,
html.light .divider::after {
  background: rgb(var(--color-base-300));
}

html.light .alert {
  border: 1px solid currentColor;
  box-shadow: none;
}

/* Light mode keeps the warm ambient blobs; grid + spotlight stay dark-only */
html.light .grid-overlay,
html.light .spotlight {
  display: none;
}

/* Light mode gradients - decorative warm versions; use text-safe variants for direct text */
html.light .gradient-warm {
  background: linear-gradient(135deg, #C73A1E, #EE964B);
}
html.light .gradient-cool {
  background: linear-gradient(135deg, #0D3B66, #155084);
}
html.light .gradient-cta {
  background: rgb(var(--color-base-100));
}

/* Light mode gradient text - higher contrast */
html.light .text-gradient-trail {
  background: linear-gradient(135deg, #C73A1E 0%, #8A5B0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Light heading font */
html.light h1, html.light h2, html.light h3,
html.light h4, html.light h5, html.light h6,
html.light .card-title {
  font-family: "Outfit", system-ui, sans-serif;
}

/* Light menu active states */
html.light .menu li > a:hover,
html.light .menu li > a.active {
  background: rgb(var(--color-base-200));
  color: rgb(var(--color-primary));
}

/* Light dropdown */
html.light .dropdown-content {
  background: rgb(var(--color-base-100));
  border: 1px solid rgb(var(--color-base-300));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Light tabs */
html.light .tab {
  color: rgb(var(--color-base-content) / 0.5);
  border-bottom-color: transparent;
}
html.light .tab-active, html.light .tab:hover {
  color: rgb(var(--color-primary));
}

/* Light mode readability guardrails.
   Keep low-emphasis text on white surfaces above WCAG AA contrast. */
html.light .text-base-content\/30,
html.light .text-base-content\/35,
html.light .text-base-content\/40 {
  color: rgb(var(--color-base-content) / 0.64);
}

html.light .text-base-content\/45,
html.light .text-base-content\/50,
html.light .text-base-content\/55 {
  color: rgb(var(--color-base-content) / 0.68);
}

html.light .label-text-alt {
  color: rgb(var(--color-base-content) / 0.68);
}

/* Light toggle/checkbox */
html.light .toggle:checked {
  background: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
}

/* Light collapse */
html.light .collapse {
  background: rgb(var(--color-base-100));
  border: 1px solid rgb(var(--color-base-300));
}

/* Light steps */
html.light .step-primary + .step-primary::before,
html.light .step-primary::after {
  background: rgb(var(--color-primary));
  color: white;
}

/* Film grain off in light mode */
html.light .grain { display: none; }


/* ────────────────────────────────────
   2. APP SHELLS
   Semantic page-width contracts for authenticated app surfaces.
   ──────────────────────────────────── */
.app-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 1024px) {
  .app-shell {
    padding-inline: 1.5rem;
  }
}

.app-shell--user {
  max-width: var(--app-shell-user-max-width);
  padding-block: 2rem;
}

.app-shell--nav {
  max-width: var(--app-shell-nav-max-width);
}

.app-shell--footer {
  max-width: var(--app-shell-user-max-width);
  padding-block: 3rem;
}

.app-measure--reading {
  max-width: var(--app-reading-measure);
}

.app-measure--form {
  max-width: var(--app-form-measure);
}


/* ────────────────────────────────────
   3. BASE STYLES
   Unlayered so they interact correctly with Tailwind's unlayered output.
   ──────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable both-edges;
    overflow-y: scroll;
    color-scheme: dark;
  }

  body {
    background-color: rgb(var(--color-base-200));
    color: rgb(var(--color-base-content));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: rgb(var(--color-base-content));
  }
  h1 { letter-spacing: -0.03em; }
  h2 { letter-spacing: -0.02em; }
  h3 { letter-spacing: -0.015em; }

  a { color: inherit; }
  a:not(.btn):hover { color: rgb(var(--color-primary)); }
  a.bg-primary.text-primary-content:hover {
    color: rgb(var(--color-primary-content));
  }

  ::selection {
    background: rgb(var(--color-primary) / 0.3);
    color: rgb(var(--color-base-content));
  }

  /* Scrollbar - dark themed */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-base-300));
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }


/* ────────────────────────────────────
   3. COMPONENT STYLES
   All DaisyUI replacement classes.
   Unlayered so they interact correctly with Tailwind's unlayered output.
   ──────────────────────────────────── */

  /* ===== BUTTONS ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo), transform 110ms var(--ease-snap);
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    background: rgb(var(--color-base-300));
    color: rgb(var(--color-base-content));
  }
  .btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .btn:active {
    transform: scale(0.94);
  }
  .btn:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
  }
  .btn:disabled, .btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
  }

  .btn-primary {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-primary-content));
    border-color: transparent;
    box-shadow: 0 0 20px rgba(249, 87, 56, 0.2);
  }
  .btn-primary:hover {
    /* Lighter flame keeps the deep-navy content above AA (6.0:1); darkening drops it to 4.1:1 */
    background: rgb(250 107 79);
    box-shadow: 0 0 30px rgba(249, 87, 56, 0.35);
  }

  .btn-secondary {
    background: rgb(var(--color-secondary));
    color: rgb(var(--color-secondary-content));
  }
  .btn-secondary:hover {
    background: rgb(229 130 47);
  }

  .btn-success {
    background: rgb(var(--color-success));
    color: rgb(var(--color-success-content));
  }
  .btn-success:hover { background: rgb(22 163 74); }

  .btn-warning {
    background: rgb(var(--color-warning));
    color: rgb(var(--color-warning-content));
  }
  .btn-warning:hover { background: rgb(202 138 4); }

  .btn-error {
    background: rgb(var(--color-error));
    color: rgb(var(--color-error-content));
  }
  .btn-error:hover { background: rgb(220 38 38); }

  .btn-info {
    background: rgb(var(--color-info));
    color: rgb(var(--color-info-content));
  }
  .btn-info:hover { background: rgb(37 99 235); }

  .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: rgb(var(--color-base-content) / 0.7);
  }
  .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(var(--color-base-content));
  }

  .btn-outline {
    background: transparent;
    border: 1px solid rgb(var(--color-base-300));
    color: rgb(var(--color-base-content) / 0.8);
  }
  .btn-outline:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgb(var(--color-primary) / 0.5);
    color: rgb(var(--color-base-content));
  }

  .btn-block { width: 100%; }
  .btn-circle {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-full);
  }
  .btn-square {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
  }
  .btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    gap: 0.25rem;
  }
  .btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    gap: 0.375rem;
  }
  .btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    gap: 0.625rem;
  }
  .btn-circle.btn-xs,
  .btn-circle.btn-sm,
  .btn-circle.btn-lg {
    padding: 0;
  }
  .btn-lg.btn-circle {
    width: 3.5rem;
    height: 3.5rem;
  }


  /* ===== CARDS ===== */
  .card {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 2px 20px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(0, 0, 0, 0.2);
    transition: background 150ms var(--ease-snap);
  }
  .card:hover {
    background: rgba(255, 255, 255, 0.03);
  }
  .card-body {
    padding: 1.5rem;
  }
  .card-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: rgb(var(--color-base-content));
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .card-compact .card-body {
    padding: 1rem;
  }

  /* Custom card variants - modern-dark style */
  .card-trail {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: none;
    border-radius: var(--radius-xl);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 2px 20px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(0, 0, 0, 0.2);
    transition: background 150ms var(--ease-snap);
  }
  .card-trail:hover {
    background: rgba(255, 255, 255, 0.03);
  }
  /* card-accent-top kept as no-op for template compatibility */
  .card-accent-top {
    /* Removed - modern-dark cards use gradient + ring shadow instead */
  }

  .event-card {
    --event-card-accent-rgb: 148 163 184;
    --event-card-accent-strong-rgb: 203 213 225;
    position: relative;
    overflow: hidden;
    transition: background 150ms var(--ease-snap), transform 150ms var(--ease-snap), box-shadow 150ms var(--ease-snap);
  }
  .event-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 2px rgb(var(--color-primary) / 0.6),
      0 0 24px rgb(var(--color-primary) / 0.12),
      0 6px 24px rgba(0, 0, 0, 0.45),
      0 0 40px rgba(0, 0, 0, 0.2);
  }
  .event-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.25rem;
    background: linear-gradient(
      180deg,
      rgb(var(--event-card-accent-strong-rgb) / 0.95),
      rgb(var(--event-card-accent-rgb) / 0.38)
    );
  }
  .event-card .card-body {
    position: relative;
  }
  .event-card__identity {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    color: rgb(var(--event-card-accent-strong-rgb));
  }
  .event-card__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(
      135deg,
      rgb(var(--event-card-accent-rgb) / 0.2),
      rgb(var(--event-card-accent-rgb) / 0.08)
    );
    box-shadow: inset 0 0 0 1px rgb(var(--event-card-accent-rgb) / 0.28);
  }
  .event-card__icon svg {
    display: block;
  }
  .event-card__activity-label {
    min-width: 0;
    color: rgb(var(--event-card-accent-strong-rgb));
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .event-card--velocity {
    --event-card-accent-rgb: 56 189 248;
    --event-card-accent-strong-rgb: 125 211 252;
  }
  .event-card--stride {
    --event-card-accent-rgb: 74 222 128;
    --event-card-accent-strong-rgb: 134 239 172;
  }
  .event-card--trail {
    --event-card-accent-rgb: 52 211 153;
    --event-card-accent-strong-rgb: 110 231 183;
  }
  .event-card--terrain {
    --event-card-accent-rgb: 251 146 60;
    --event-card-accent-strong-rgb: 253 186 116;
  }
  .event-card--family {
    --event-card-accent-rgb: 250 204 21;
    --event-card-accent-strong-rgb: 254 240 138;
  }
  .event-card--climb {
    --event-card-accent-rgb: 167 139 250;
    --event-card-accent-strong-rgb: 196 181 253;
  }
  .event-card--walk {
    --event-card-accent-rgb: 244 114 182;
    --event-card-accent-strong-rgb: 249 168 212;
  }


  /* ===== FORM CONTROLS ===== */
  .form-control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  /* Ensure Tailwind .hidden can override .form-control display:flex.
     Without this, .form-control wins due to CSS cascade order
     (linear.css loads after tailwind.css, same specificity). */
  .form-control.hidden {
    display: none;
  }

  .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.125rem 0;
  }
  .label.hidden {
    display: none;
  }
  .label-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-base-content) / 0.78);
  }
  .label-text-alt {
    font-size: 0.75rem;
    color: rgb(var(--color-base-content) / 0.5);
  }

  .input {
    display: block;
    width: 100%;
    padding: 0.875rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--color-base-content));
    background: rgb(var(--color-neutral));
    border: 1px solid rgb(var(--color-base-content) / 0.15);
    border-radius: var(--radius-lg);
    transition: border-color 150ms var(--ease-snap), box-shadow 150ms var(--ease-snap);
  }
  .input::placeholder {
    color: rgb(var(--color-base-content) / 0.35);
  }
  .input:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
  }
  .input-bordered {
    border-color: rgb(var(--color-base-content) / 0.15);
  }
  .input-sm {
    padding: 0.625rem;
    font-size: 0.8125rem;
  }
  .input-xs {
    padding: 0.5rem;
    font-size: 0.75rem;
  }

  .select {
    display: block;
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--color-base-content));
    background: rgb(var(--color-neutral));
    border: 1px solid rgb(var(--color-base-content) / 0.15);
    border-radius: var(--radius-lg);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    transition: border-color 150ms var(--ease-snap), box-shadow 150ms var(--ease-snap);
    cursor: pointer;
  }
  .select:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
  }
  .select-bordered {
    border-color: rgb(var(--color-base-content) / 0.15);
  }
  .select-sm {
    padding: 0.625rem 2rem 0.625rem 0.625rem;
    font-size: 0.8125rem;
  }
  .select-xs {
    padding: 0.5rem 1.75rem 0.5rem 0.5rem;
    font-size: 0.75rem;
  }

  .schema-select-root {
    position: relative;
    isolation: isolate;
    z-index: 1;
  }

  .schema-native-select-shim {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
  }

  .schema-select-root--open {
    z-index: 2147483000;
  }

  .schema-select-listbox {
    z-index: 2147483001;
    background: rgb(var(--color-base-100));
    color: rgb(var(--color-base-content));
  }

  .textarea {
    display: block;
    width: 100%;
    padding: 0.875rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--color-base-content));
    background: rgb(var(--color-neutral));
    border: 1px solid rgb(var(--color-base-content) / 0.15);
    border-radius: var(--radius-lg);
    resize: vertical;
    min-height: 5rem;
    transition: border-color 150ms var(--ease-snap), box-shadow 150ms var(--ease-snap);
  }
  .textarea::placeholder {
    color: rgb(var(--color-base-content) / 0.35);
  }
  .textarea:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
  }
  .textarea-bordered {
    border-color: rgb(var(--color-base-content) / 0.15);
  }
  .textarea-sm {
    padding: 0.625rem;
    font-size: 0.8125rem;
    min-height: 3rem;
  }

  /* ===== FIELD LAYOUTS ===== */
  .field-stack {
    display: grid;
    gap: 1rem;
  }
  .field-stack--tight {
    gap: 0.75rem;
  }
  .field-floating {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .field-floating__hint {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(var(--color-base-content) / 0.55);
  }
  .field-floating__frame {
    position: relative;
  }
  .field-floating__label {
    position: absolute;
    top: 0.625rem;
    left: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(var(--color-base-content) / 0.55);
    pointer-events: none;
    transition: color 0.2s ease;
  }
  #signup-form .field-floating__label {
    left: auto;
    inset-inline-start: 1rem;
  }
  .field-floating__label-muted {
    color: rgb(var(--color-base-content) / 0.42);
    font-weight: 500;
  }
  .field-floating__frame:focus-within .field-floating__label {
    color: rgb(var(--color-primary));
  }
  .field-floating__control {
    min-height: 4rem;
    padding: 1.5rem 1rem 0.625rem;
    font-size: 1rem;
    line-height: 1.375rem;
  }
  .field-floating__control--textarea {
    min-height: 9rem;
    padding-top: 1.625rem;
    padding-bottom: 1rem;
    resize: vertical;
  }
  .field-floating__control--select {
    padding-right: 2.75rem;
    background-position: right 1rem center;
  }
  html[lang="he"] #signup-form .field-floating__control--select {
    padding-right: 1rem;
    padding-left: 2.75rem;
    background-position: left 1rem center;
  }
  .dob-fieldset {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }
  .dob-input-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(7rem, 1.25fr);
    gap: 0.75rem;
  }
  .dob-input {
    direction: ltr;
    font-variant-numeric: tabular-nums;
    text-align: left;
  }
  .dob-input--year {
    min-width: 0;
  }
  @media (max-width: 420px) {
    .dob-input-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem;
    }
  }

  .toggle {
    appearance: none;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: rgb(var(--color-base-300));
    position: relative;
    cursor: pointer;
    transition: background 150ms var(--ease-snap);
    border: none;
    flex-shrink: 0;
  }
  .toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: rgb(var(--color-base-content) / 0.6);
    transition: transform 150ms var(--ease-snap), background 150ms var(--ease-snap);
  }
  .toggle:checked {
    background: rgb(var(--color-primary));
  }
  .toggle:checked::before {
    transform: translateX(1.25rem);
    background: white;
  }
  .toggle-primary:checked {
    background: rgb(var(--color-primary));
  }
  .toggle-sm {
    width: 2rem;
    height: 1.125rem;
  }
  .toggle-sm::before {
    width: 0.875rem;
    height: 0.875rem;
  }
  .toggle-sm:checked::before {
    transform: translateX(0.875rem);
  }

  .checkbox {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgb(var(--color-base-content) / 0.35);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 150ms var(--ease-snap);
    position: relative;
    flex-shrink: 0;
    background: transparent;
  }
  .checkbox:active {
    transform: scale(0.9);
  }
  .checkbox:checked {
    background: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
  }
  .checkbox:checked::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .checkbox-primary:checked { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); }
  .checkbox-secondary:checked { background: rgb(var(--color-secondary)); border-color: rgb(var(--color-secondary)); }
  .checkbox-success:checked { background: rgb(var(--color-success)); border-color: rgb(var(--color-success)); }
  .checkbox-warning:checked { background: rgb(var(--color-warning)); border-color: rgb(var(--color-warning)); }
  .checkbox-sm { width: 1rem; height: 1rem; }
  .checkbox-sm:checked::after { width: 4px; height: 7px; }
  .checkbox-xs { width: 0.75rem; height: 0.75rem; }
  .checkbox-xs:checked::after { width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }
  .consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(var(--color-base-content) / 0.12);
    border-radius: var(--radius-lg);
    background: rgb(var(--color-base-200) / 0.32);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .consent-row:hover {
    border-color: rgb(var(--color-primary) / 0.22);
    background: rgb(var(--color-base-200) / 0.48);
  }
  .consent-row:has(input:checked) {
    border-color: rgb(var(--color-success) / 0.45);
    background: rgb(var(--color-success) / 0.1);
  }
  .consent-row:has(input:checked) .consent-row__copy {
    color: rgb(var(--color-success));
  }
  .consent-row .toggle:checked {
    background: rgb(var(--color-success));
    border-color: rgb(var(--color-success));
  }
  html.light .consent-row .toggle:checked {
    background: rgb(var(--color-success));
    border-color: rgb(var(--color-success));
  }
  .consent-row .checkbox:checked {
    background: rgb(var(--color-success));
    border-color: rgb(var(--color-success));
  }
  html.light .consent-row .checkbox:checked {
    background: rgb(var(--color-success));
    border-color: rgb(var(--color-success));
  }
  .consent-row__control {
    margin-top: 0.25rem;
  }
  .consent-row__copy {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: rgb(var(--color-base-content) / 0.72);
  }

  .range {
    appearance: none;
    width: 100%;
    height: 0.5rem;
    background: rgb(var(--color-base-300));
    border-radius: var(--radius-full);
    outline: none;
    cursor: pointer;
  }
  .range::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: rgb(var(--color-primary));
    cursor: pointer;
    border: 2px solid rgb(var(--color-base-100));
  }


  /* ===== BADGES ===== */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: rgb(var(--color-base-300));
    color: rgb(var(--color-base-content) / 0.8);
    white-space: nowrap;
  }
  .badge-primary { background: rgb(var(--color-primary) / 0.15); color: rgb(var(--color-primary)); border-color: rgb(var(--color-primary) / 0.2); }
  .badge-secondary { background: rgb(var(--color-secondary) / 0.15); color: rgb(var(--color-secondary)); border-color: rgb(var(--color-secondary) / 0.2); }
  .badge-success { background: rgb(var(--color-success) / 0.15); color: rgb(var(--color-success)); border-color: rgb(var(--color-success) / 0.2); }
  .badge-warning { background: rgb(var(--color-warning) / 0.15); color: rgb(var(--color-warning)); border-color: rgb(var(--color-warning) / 0.2); }
  .badge-error { background: rgb(var(--color-error) / 0.15); color: rgb(var(--color-error)); border-color: rgb(var(--color-error) / 0.2); }
  .badge-info { background: rgb(var(--color-info) / 0.15); color: rgb(var(--color-info)); border-color: rgb(var(--color-info) / 0.2); }
  .badge-ghost { background: transparent; color: rgb(var(--color-base-content) / 0.6); }
  .badge-outline {
    background: transparent;
    border: 1px solid rgb(var(--color-base-300));
    color: rgb(var(--color-base-content) / 0.7);
  }
  .badge-xs { padding: 0.125rem 0.375rem; font-size: 0.625rem; }
  .badge-sm { padding: 0.1875rem 0.5rem; font-size: 0.6875rem; }
  .badge-lg { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
  .badge.preference-pill--selected,
  .badge.availability-pill--selected {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-primary-content));
    border-color: rgb(var(--color-primary));
  }


  /* ===== ALERTS ===== */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: rgb(var(--color-base-100));
    color: rgb(var(--color-base-content));
    font-size: 0.875rem;
  }
  .alert.hidden { display: none; }
  .alert-success {
    background: rgb(var(--color-success) / 0.1);
    border-color: rgb(var(--color-success) / 0.2);
    color: rgb(var(--color-success));
  }
  .alert-warning {
    background: rgb(var(--color-warning) / 0.1);
    border-color: rgb(var(--color-warning) / 0.2);
    color: rgb(var(--color-warning));
  }
  .alert-error {
    background: rgb(var(--color-error) / 0.1);
    border-color: rgb(var(--color-error) / 0.2);
    color: rgb(var(--color-error));
  }
  .alert-info {
    background: rgb(var(--color-info) / 0.1);
    border-color: rgb(var(--color-info) / 0.2);
    color: rgb(var(--color-info));
  }


  /* ===== MODALS ===== */
  .modal {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: transparent;
    padding: 1rem;
    border: none;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    /* Hidden by default - <dialog> uses display:none natively */
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
  }
  dialog.modal:not([open]) {
    display: none;
  }
  dialog.modal {
    background: transparent;
  }
  .modal::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
  }
  .modal[open],
  .modal-toggle:checked + .modal {
    display: flex;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }
  .modal-box {
    background: rgb(var(--color-base-100));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    max-width: 32rem;
    width: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    position: relative;
  }
  /* Override overflow for modals containing dropdowns/autocompletes.
     The default overflow-y:auto clips absolutely-positioned children. */
  #group-locations-modal .modal-box {
    overflow-y: visible;
  }
  .modal-action {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    cursor: pointer;
    z-index: -1;
  }
  .modal-backdrop button {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .modal-toggle {
    display: none;
  }


  /* ===== NAVBAR ===== */
  .navbar {
    display: flex;
    align-items: center;
    min-height: 4rem;
    height: 4rem;
    width: 100%;
  }
  .navbar-start {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .navbar-center {
    display: none;
    align-items: center;
    justify-content: center;
  }
  .navbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
  }
  @media (min-width: 1280px) {
    .navbar-center {
      display: flex;
    }
  }


  /* ===== MENU ===== */
  .menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    list-style: none;
  }
  .menu li { list-style: none; }
  .menu li > a,
  .menu li > button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    color: rgb(var(--color-base-content) / 0.7);
    transition: all 150ms var(--ease-snap);
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    background: transparent;
    border: none;
  }
  .menu li > a:hover,
  .menu li > button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(var(--color-base-content));
  }
  .menu li > a:active,
  .menu li > button:active {
    transform: scale(0.95);
  }
  .menu li > a.active,
  .menu li > a[aria-current="page"] {
    background: rgb(var(--color-secondary));
    color: rgb(var(--color-secondary-content));
  }
  .menu-sm li > a,
  .menu-sm li > button {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
  }
  .menu-md li > a,
  .menu-md li > button {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  .menu-horizontal {
    flex-direction: row;
  }
  .navbar-center .menu-horizontal {
    flex-wrap: nowrap;
  }
  .navbar-center .menu-horizontal > li {
    flex: 0 0 auto;
  }
  .navbar-center .menu-horizontal > li > a,
  .navbar-center .menu-horizontal > li > button {
    width: auto;
    white-space: nowrap;
  }
  .navbar-center .menu-horizontal > li > a svg,
  .navbar-center .menu-horizontal > li > button svg {
    flex-shrink: 0;
  }

  @media (min-width: 1280px) {
    header.sticky[data-authenticated-navbar]:not(:has([data-navbar-render-complete])) {
      visibility: hidden;
    }
    header.sticky[data-authenticated-navbar] [data-primary-nav-menu-trigger] {
      display: none;
    }
    header.sticky[data-authenticated-navbar] .navbar {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr) max-content;
      align-items: center;
      column-gap: 1rem;
      justify-content: stretch;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    header.sticky[data-authenticated-navbar] .navbar-start {
      grid-column: 1;
      flex: none;
      min-width: 7.25rem;
      width: auto;
      max-width: none;
    }
    header.sticky[data-authenticated-navbar] .navbar-center {
      grid-column: 2;
      display: flex;
      flex: initial;
      min-width: 0;
      width: auto;
      max-width: 100%;
      justify-content: center;
      justify-self: stretch;
      overflow: visible;
    }
    header.sticky[data-authenticated-navbar] .navbar-center .menu-horizontal {
      display: flex;
      width: auto;
      min-width: 0;
      max-width: 100%;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }
    header.sticky[data-authenticated-navbar] .navbar-center .menu-horizontal > li {
      flex: 0 0 auto;
    }
    header.sticky[data-authenticated-navbar] .navbar-center .menu-horizontal > li > a,
    header.sticky[data-authenticated-navbar] .navbar-center .menu-horizontal > li > button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex: 0 0 auto;
      width: auto;
      min-width: max-content;
      max-width: none;
      white-space: nowrap;
      overflow: visible;
    }
    header.sticky[data-authenticated-navbar] .navbar-center .menu-horizontal > li > a svg,
    header.sticky[data-authenticated-navbar] .navbar-center .menu-horizontal > li > button svg {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }
    header.sticky[data-authenticated-navbar] .navbar-end {
      grid-column: 3;
      display: flex;
      justify-self: end;
      justify-content: flex-end;
      align-items: center;
      gap: 0.25rem;
      flex: none;
      width: auto;
      min-width: 84px;
      max-width: none;
    }
    header.sticky[data-authenticated-navbar] .navbar,
    header.sticky[data-authenticated-navbar] .navbar *,
    header.sticky[data-authenticated-navbar] .menu,
    header.sticky[data-authenticated-navbar] .menu * {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
    }
  }
  .menu-title {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-base-content) / 0.4);
  }


  /* ===== DROPDOWN ===== */
  .dropdown {
    position: relative;
    display: inline-flex;
  }
  .dropdown-hover-gap-2 {
    --dropdown-hover-gap: 0.5rem;
  }
  .dropdown-hover-gap-3 {
    --dropdown-hover-gap: 0.75rem;
  }
  .dropdown-hover-panel-w-56 {
    --dropdown-hover-panel-width: 14rem;
  }
  .dropdown-hover-gap-2::after,
  .dropdown-hover-gap-3::after {
    content: "";
    position: absolute;
    top: 100%;
    width: max(100%, var(--dropdown-hover-panel-width, 100%));
    height: var(--dropdown-hover-gap);
    pointer-events: none;
  }
  .dropdown-hover-gap-2:hover::after,
  .dropdown-hover-gap-2:focus-within::after,
  .dropdown-hover-gap-3:hover::after,
  .dropdown-hover-gap-3:focus-within::after {
    pointer-events: auto;
  }
  .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 12rem;
    background: rgb(var(--color-base-100));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.15s var(--ease-out-expo);
  }
  .dropdown-end .dropdown-content {
    left: auto;
    right: 0;
  }
  .dropdown-hover-panel-w-56::after,
  .dropdown-hover-panel-w-56 > .dropdown-content {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
  .dropdown-end.dropdown-hover-panel-w-56::after,
  .dropdown-end.dropdown-hover-panel-w-56 > .dropdown-content {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .dropdown-top .dropdown-content {
    top: auto;
    bottom: 100%;
    transform: translateY(-4px);
  }
  .dropdown:focus-within > .dropdown-content,
  .dropdown:hover > .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Touch devices: use tabindex focus pattern */
  .dropdown > [tabindex]:focus ~ .dropdown-content,
  .dropdown > [tabindex]:focus + .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .dropdown[data-primary-nav-closed="true"] > .dropdown-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
  }


  /* ===== DRAWER ===== */
  .drawer {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    overflow: hidden;
  }
  .drawer-toggle {
    display: none;
  }
  .drawer-content {
    grid-column: 1;
    grid-row: 1;
  }
  .drawer-side {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.2s;
  }
  .drawer-toggle:checked ~ .drawer-side {
    pointer-events: auto;
    visibility: visible;
  }
  .drawer-side.is-open {
    pointer-events: auto;
    visibility: visible;
  }
  .drawer-side > .drawer-overlay {
    grid-column: 1 / -1;
    grid-row: 1;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
  }
  .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
    opacity: 1;
  }
  .drawer-side.is-open > .drawer-overlay {
    opacity: 1;
  }
  .drawer-side > *:not(.drawer-overlay) {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    background: rgb(var(--color-base-100));
    border-right: 1px solid var(--glass-border);
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease-out-expo);
    overflow-y: auto;
  }
  .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
    transform: translateX(0);
  }
  .drawer-side.is-open > *:not(.drawer-overlay) {
    transform: translateX(0);
  }
  /* Responsive: always open on large screens */
  @media (min-width: 1024px) {
    .drawer-open {
      grid-template-columns: auto 1fr;
    }
    .drawer-open > .drawer-side {
      position: static;
      grid-column: 1;
      grid-row: 1;
      pointer-events: auto;
      visibility: visible;
      display: block;
      overflow-y: auto;
      transition: none;
    }
    .drawer-open > .drawer-side > .drawer-overlay {
      display: none;
    }
    .drawer-open > .drawer-side > *:not(.drawer-overlay) {
      transform: none;
      border-right: 1px solid var(--glass-border);
      transition: none;
    }
    .drawer-open > .drawer-content {
      grid-column: 2;
      grid-row: 1;
      min-height: 100vh;
    }
    /* Tailwind responsive variant: lg:drawer-open (literal class name) */
    .lg\:drawer-open {
      grid-template-columns: auto 1fr;
    }
    .lg\:drawer-open > .drawer-side {
      position: static;
      grid-column: 1;
      grid-row: 1;
      pointer-events: auto;
      visibility: visible;
      display: block;
      overflow-y: auto;
      transition: none;
    }
    .lg\:drawer-open > .drawer-side > .drawer-overlay {
      display: none;
    }
    .lg\:drawer-open > .drawer-side > *:not(.drawer-overlay) {
      transform: none;
      border-right: 1px solid var(--glass-border);
      transition: none;
    }
    .lg\:drawer-open > .drawer-content {
      grid-column: 2;
      grid-row: 1;
      min-height: 100vh;
    }
  }


  /* ===== TABLES ===== */
  .table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
  }
  .table th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-base-content) / 0.5);
    border-bottom: 1px solid var(--glass-border);
    background: rgb(var(--color-base-200));
  }
  .table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    color: rgb(var(--color-base-content) / 0.85);
  }
  .table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
  }
  .table-sm th, .table-sm td { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  .table-sm th { font-size: 0.6875rem; }
  .table-zebra tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
  }


  /* ===== COLLAPSE / ACCORDION ===== */
  .collapse {
    visibility: visible;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: rgb(var(--color-base-100));
    border: 1px solid var(--glass-border);
  }
  .collapse > input[type="checkbox"],
  .collapse > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    top: 0;
    left: 0;
  }
  .collapse-title {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 0;
    position: relative;
  }
  summary.collapse-title {
    list-style: none;
  }
  summary.collapse-title::-webkit-details-marker {
    display: none;
  }
  .collapse-title:hover { background: rgba(255, 255, 255, 0.03); }
  .collapse-content {
    padding: 0 1.25rem;
    max-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: max-height 0.3s var(--ease-out-expo), padding 0.3s ease;
  }
  .collapse > input[type="checkbox"]:checked ~ .collapse-content,
  .collapse > input[type="radio"]:checked ~ .collapse-content,
  .collapse[open] > .collapse-content {
    max-height: 100vh;
    padding: 0 1.25rem 1rem;
  }
  .feedback-participant-collapse[open] {
    overflow: visible;
  }
  .feedback-participant-collapse[open] > .collapse-content {
    max-height: none;
    overflow: visible;
  }

  .participant-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem;
  }
  .participant-action-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 4.5rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: 0.85rem 1rem;
    background: rgb(var(--color-base-200) / 0.42);
    color: rgb(var(--color-base-content));
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .participant-action-card:hover {
    transform: translateY(-1px);
    border-color: rgb(var(--color-primary) / 0.36);
    background: rgb(var(--color-base-200) / 0.68);
    box-shadow: var(--shadow-sm);
  }
  .participant-action-card:focus-visible {
    outline: 2px solid rgb(var(--color-primary) / 0.65);
    outline-offset: 2px;
  }
  .participant-action-card--compact {
    min-height: 3.85rem;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
  }
  .participant-action-modal .modal-box {
    max-width: 42rem;
  }
  .collapse-arrow .collapse-title::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid rgb(var(--color-base-content) / 0.4);
    border-bottom: 2px solid rgb(var(--color-base-content) / 0.4);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .collapse-arrow > input[type="checkbox"]:checked ~ .collapse-title::after,
  .collapse-arrow > input[type="radio"]:checked ~ .collapse-title::after,
  .collapse-arrow[open] > .collapse-title::after {
    transform: rotate(-135deg);
  }

  .match-block-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 0.75rem 0.875rem;
    background: rgb(var(--color-base-100) / 0.58);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .match-block-choice:hover {
    border-color: rgb(var(--color-secondary) / 0.4);
    background: rgb(var(--color-base-200) / 0.7);
  }
  .match-block-choice:has(input:checked) {
    border-color: rgb(var(--color-secondary) / 0.65);
    background: rgb(var(--color-secondary) / 0.12);
    box-shadow: 0 0 0 1px rgb(var(--color-secondary) / 0.18);
  }
  .match-block-choice:has(input:focus-visible) {
    outline: 2px solid rgb(var(--color-secondary) / 0.65);
    outline-offset: 2px;
  }
  .match-block-choice--compact {
    align-items: center;
    min-height: 2.75rem;
  }


  /* ===== STEPS ===== */
  .steps {
    display: flex;
    overflow-x: auto;
    counter-reset: step;
  }
  .steps-horizontal { flex-direction: row; }
  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    /* Equal cells: without this, a long label's min-content floor widens its
       cell, and the connector's ±50% offsets — which resolve against the
       current cell — miss the neighbouring circle by half the width delta. */
    min-width: 0;
    position: relative;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    counter-increment: step;
    color: rgb(var(--color-base-content) / 0.5);
  }
  .step::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: rgb(var(--color-base-300));
    color: rgb(var(--color-base-content) / 0.5);
    font-weight: 700;
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
  }
  .step:not(:first-child)::after {
    content: '';
    position: absolute;
    top: calc(0.5rem + 1rem);
    /* Logical offsets: the connector must point at the *previous* step in
       both directions. Physical left/right do not flip under dir="rtl", which
       shifted every connector one segment sideways in Hebrew. */
    inset-inline-end: 50%;
    inset-inline-start: calc(-50% + 1rem);
    height: 2px;
    background: rgb(var(--color-base-300));
    z-index: 0;
  }
  .step-primary::before {
    background: rgb(var(--color-primary));
    color: white;
  }
  .step-primary:not(:first-child)::after,
  .step-primary + .step:not(:first-child)::after {
    background: rgb(var(--color-primary));
  }
  .step-indicator { font-size: 0.75rem; }
  .step-content { text-align: center; }

  .onboarding-page-shell {
    width: 100%;
    max-width: 42rem;
  }

  .onboarding-page-shell--wide {
    max-width: min(100%, 92rem);
  }

  .onboarding-page-shell--wide .onboarding-page-header,
  .onboarding-page-shell--wide #step-indicator {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  .onboarding-page-shell--wide #location-section {
    padding: 1.25rem;
  }

  .onboarding-location-card {
    margin-bottom: 6rem;
  }

  .onboarding-location-step {
    display: grid;
    gap: 1.25rem;
  }

  .onboarding-location-top {
    display: grid;
    gap: 1rem;
  }

  .onboarding-location-title-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .onboarding-location-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
  }

  .onboarding-location-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
  }

  .onboarding-location-helper,
  .onboarding-location-context {
    margin: 0.35rem 0 0;
    color: rgb(var(--color-base-content) / 0.58);
    font-size: 1rem;
    line-height: 1.45;
  }

  .onboarding-location-hint {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.7rem 0 0;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgb(var(--color-success) / 0.55);
    border-radius: 0.85rem;
    background: rgb(var(--color-success) / 0.14);
    color: rgb(var(--color-base-content) / 0.88);
    font-size: 0.94rem;
    line-height: 1.45;
    animation: onboarding-location-hint-pulse 1.6s ease-in-out 0.6s 3;
  }

  .onboarding-location-picker-instruction {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: rgb(var(--color-base-content) / 0.76);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .onboarding-location-picker-instruction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgb(var(--color-primary));
    filter: drop-shadow(0 2px 3px rgb(var(--color-primary) / 0.22));
  }

  .onboarding-location-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgb(var(--color-success));
    color: rgb(var(--color-success-content));
    box-shadow: 0 4px 10px rgb(var(--color-success) / 0.35);
  }

  .onboarding-location-hint strong {
    color: rgb(var(--color-base-content));
    font-weight: 750;
  }

  @keyframes onboarding-location-hint-pulse {
    0%, 100% {
      border-color: rgb(var(--color-success) / 0.55);
      background: rgb(var(--color-success) / 0.14);
      box-shadow: 0 0 0 0 rgb(var(--color-success) / 0);
      transform: scale(1);
    }
    50% {
      border-color: rgb(var(--color-success));
      background: rgb(var(--color-success) / 0.3);
      box-shadow: 0 0 0 12px rgb(var(--color-success) / 0.28);
      transform: scale(1.015);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .onboarding-location-hint {
      animation: none;
    }
  }

  .onboarding-location-search {
    position: relative;
  }

  .onboarding-location-search-input {
    width: 100%;
    min-height: 3.5rem;
    border: 1px solid rgb(var(--color-base-300) / 0.8);
    border-radius: 1rem;
    background: rgb(var(--color-base-100) / 0.88);
    color: rgb(var(--color-base-content));
    font-size: 1.05rem;
    outline: none;
    padding: 0 3rem 0 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }

  .onboarding-location-search-input:focus {
    border-color: rgb(var(--color-primary) / 0.75);
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14);
  }

  .onboarding-location-search-input::placeholder {
    color: rgb(var(--color-base-content) / 0.38);
  }

  .onboarding-location-search-spinner {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
  }

  .onboarding-location-main {
    display: grid;
    grid-template-columns: minmax(17rem, 26rem) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: stretch;
  }

  .onboarding-location-panel,
  .onboarding-location-map {
    min-width: 0;
  }

  .onboarding-location-panel {
    display: grid;
    align-content: start;
    gap: 1rem;
  }

  .onboarding-location-results {
    display: grid;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid rgb(var(--color-base-300) / 0.55);
    border-radius: 1rem;
    background: rgb(var(--color-base-100) / 0.72);
  }

  .onboarding-location-result,
  .onboarding-location-no-results {
    list-style: none;
  }

  .onboarding-location-result + .onboarding-location-result {
    border-top: 1px solid rgb(var(--color-base-300) / 0.42);
  }

  .onboarding-location-result-button {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.9rem 1rem;
    text-align: left;
  }

  .onboarding-location-result-button:hover,
  .onboarding-location-result-button:focus-visible {
    background: rgb(var(--color-primary) / 0.08);
    outline: none;
  }

  .onboarding-location-result-copy {
    min-width: 0;
  }

  .onboarding-location-result-copy strong,
  .onboarding-location-selected-item > span,
  .onboarding-location-suggest-head p,
  .onboarding-location-map-popover p {
    display: block;
    color: rgb(var(--color-base-content));
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .onboarding-location-result-copy small {
    display: block;
    margin-top: 0.2rem;
    color: rgb(var(--color-base-content) / 0.48);
    font-size: 0.82rem;
    line-height: 1.3;
  }

  .onboarding-location-result-type,
  .onboarding-location-result-action,
  .onboarding-location-selected-header span {
    border-radius: 999px;
    color: rgb(var(--color-base-content) / 0.62);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .onboarding-location-result-type {
    background: rgb(var(--color-base-200) / 0.85);
    padding: 0.38rem 0.55rem;
  }

  .onboarding-location-result-action {
    color: rgb(var(--color-primary));
  }

  .onboarding-location-no-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    color: rgb(var(--color-base-content) / 0.68);
  }

  .onboarding-location-no-results-cta {
    border: 0;
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.12);
    color: rgb(var(--color-primary));
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
  }

  .onboarding-location-no-results-cta:hover,
  .onboarding-location-no-results-cta:focus-visible {
    background: rgb(var(--color-primary) / 0.2);
    outline: none;
  }

  .onboarding-location-selected {
    display: grid;
    gap: 0.7rem;
  }

  .onboarding-location-selected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 0.95rem;
  }

  .onboarding-location-selected-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  .onboarding-location-selected-header span {
    background: rgb(var(--color-secondary) / 0.12);
    color: rgb(var(--color-secondary));
    padding: 0.38rem 0.58rem;
  }

  .onboarding-location-selected-list,
  .onboarding-location-inherited {
    display: grid;
    gap: 0.6rem;
  }

  .onboarding-location-selected-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid rgb(var(--color-base-300) / 0.55);
    border-radius: 1rem;
    background: rgb(var(--color-base-100) / 0.72);
    padding: 0.85rem 0.95rem;
  }

  .onboarding-location-selected-item small,
  .onboarding-location-empty {
    margin: 0;
    color: rgb(var(--color-base-content) / 0.48);
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .onboarding-location-persistence-status {
    margin: 0;
    color: rgb(var(--color-base-content) / 0.6);
    font-size: 0.82rem;
    font-weight: 700;
  }

  .onboarding-location-persistence-status[data-status="error"] {
    color: rgb(var(--color-error));
  }

  .onboarding-location-selected-item--inherited {
    opacity: 0.78;
  }

  .onboarding-location-suggest {
    display: grid;
    gap: 0.75rem;
    border: 1px solid rgb(var(--color-primary) / 0.22);
    border-radius: 1rem;
    background: rgb(var(--color-primary) / 0.07);
    padding: 1rem;
  }

  .onboarding-location-suggest-head,
  .onboarding-location-suggest-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .onboarding-location-suggest-fields {
    display: grid;
    gap: 0.65rem;
  }

  .onboarding-location-suggest-fields label span {
    display: block;
    margin-bottom: 0.25rem;
    color: rgb(var(--color-base-content) / 0.58);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .onboarding-location-suggest-status {
    margin: 0;
    min-height: 1.1rem;
    color: rgb(var(--color-base-content) / 0.58);
    font-size: 0.82rem;
  }

  .onboarding-location-suggest-status[data-status="success"] {
    color: rgb(var(--color-success));
  }

  .onboarding-location-suggest-status[data-status="error"] {
    min-height: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgb(var(--color-error) / 0.35);
    border-radius: var(--radius-lg);
    background: rgb(var(--color-error) / 0.12);
    color: rgb(var(--color-error));
    font-weight: 700;
    line-height: 1.35;
  }

  .onboarding-location-suggest-fields textarea[aria-invalid="true"],
  .onboarding-location-suggest-field-error {
    border-color: rgb(var(--color-error)) !important;
    box-shadow: 0 0 0 2px rgb(var(--color-error) / 0.22) !important;
  }

  .onboarding-location-map {
    position: relative;
    overflow: hidden;
    min-height: 38rem;
    border: 1px solid rgb(var(--color-base-300) / 0.55);
    border-radius: 1.25rem;
    background: rgb(var(--color-base-200) / 0.52);
  }

  .onboarding-location-map--settings {
    min-height: clamp(38rem, 62vh, 48rem);
  }

  .onboarding-location-map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
  }

  .onboarding-location-map-canvas .gm-stub-marker {
    pointer-events: auto !important;
  }

  .onboarding-location-map-canvas .gm-stub-marker {
    z-index: 20 !important;
  }

  .onboarding-location-map-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(var(--color-base-100) / 0.72);
    color: rgb(var(--color-base-content) / 0.58);
    z-index: 2;
  }

  .onboarding-location-map-popover {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 4;
    display: grid;
    width: min(18rem, calc(100% - 2rem));
    overflow: visible;
    gap: 0.8rem;
    border: 1px solid rgb(var(--color-base-300) / 0.55);
    border-radius: 1rem;
    background: rgb(var(--color-base-100) / 0.98);
    box-shadow: 0 16px 36px rgb(0 0 0 / 0.2);
    padding: 0.9rem;
    pointer-events: auto;
  }

  .onboarding-location-map-popover p {
    margin: 0;
  }

  .onboarding-location-map-detail {
    top: 1.25rem;
    right: 1.25rem;
    bottom: auto;
    width: clamp(24rem, 36%, 30rem);
    max-width: calc(100% - 2.5rem);
    gap: 0.95rem;
    border-color: rgb(var(--color-base-300) / 0.45);
    background: rgb(var(--color-base-100) / 0.94);
    padding: 1.05rem;
  }

  .onboarding-location-detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
  }

  .onboarding-location-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgb(var(--color-base-300) / 0.65);
    border-radius: 999px;
    background: rgb(var(--color-base-200) / 0.74);
    color: rgb(var(--color-base-content) / 0.72);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  }

  .onboarding-location-detail-close:hover,
  .onboarding-location-detail-close:focus-visible {
    border-color: rgb(var(--color-primary) / 0.5);
    background: rgb(var(--color-primary) / 0.14);
    color: rgb(var(--color-base-content));
    outline: none;
  }

  .onboarding-location-detail-eyebrow {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgb(var(--color-base-200) / 0.78);
    color: rgb(var(--color-base-content) / 0.78) !important;
    font-size: 0.75rem;
    font-weight: 800 !important;
    letter-spacing: 0;
    margin-bottom: 0.38rem !important;
    padding: 0.3rem 0.56rem;
  }

  .onboarding-location-detail-title {
    color: rgb(var(--color-base-content));
    font-size: clamp(1.28rem, 1.8vw, 1.65rem);
    font-weight: 850 !important;
    line-height: 1.12;
  }

  .onboarding-location-detail-meta,
  .onboarding-location-detail-usage {
    color: rgb(var(--color-base-content) / 0.58) !important;
    font-size: 0.88rem;
    font-weight: 600 !important;
  }

  .onboarding-location-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .onboarding-location-detail-metric {
    display: grid;
    grid-template-rows: auto minmax(1.4rem, auto);
    align-content: space-between;
    gap: 0.5rem;
    min-height: 4.4rem;
    border: 1px solid rgb(var(--color-base-300) / 0.44);
    border-radius: 0.78rem;
    background: rgb(var(--color-base-100) / 0.56);
    padding: 0.64rem 0.68rem;
  }

  .onboarding-location-detail-metric:last-child {
    border-bottom: 1px solid rgb(var(--color-base-300) / 0.44);
  }

  .onboarding-location-detail-metric span {
    color: rgb(var(--color-base-content) / 0.6);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.15;
    min-width: 0;
    text-transform: uppercase;
  }

  .onboarding-location-detail-metric strong {
    color: rgb(var(--color-base-content));
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
  }

  .onboarding-location-stars {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.08rem;
    color: rgb(var(--color-base-content) / 0.24);
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
  }

  .onboarding-location-stars .is-filled {
    color: #F4D35E;
  }

  .onboarding-location-detail-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    width: 100%;
    border: 1px solid rgb(var(--color-primary) / 0.72);
    border-radius: 0.85rem;
    background: rgb(var(--color-primary));
    color: rgb(var(--color-primary-content));
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1;
    padding: 0.74rem 1rem;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  }

  .onboarding-location-detail-primary:hover,
  .onboarding-location-detail-primary:focus-visible {
    border-color: rgb(var(--color-primary) / 0.95);
    background: rgb(var(--color-primary) / 0.88);
    outline: none;
    transform: translateY(-1px);
  }

  .onboarding-location-detail-activities {
    display: grid;
    gap: 0.62rem;
    border-top: 1px solid rgb(var(--color-base-300) / 0.55);
    padding-top: 0.82rem;
  }

  .onboarding-location-detail-other-toggle {
    cursor: pointer;
    color: rgb(var(--color-base-content));
    font-size: 0.94rem;
    font-weight: 850;
    list-style-position: outside;
  }

  .onboarding-location-detail-other-toggle:focus-visible {
    border-radius: 0.38rem;
    outline: 2px solid rgb(var(--color-primary) / 0.65);
    outline-offset: 0.18rem;
  }

  .onboarding-location-detail-other-copy {
    color: rgb(var(--color-base-content) / 0.56);
    font-size: 0.82rem;
    font-weight: 650;
    margin: 0 !important;
  }

  .onboarding-location-detail-activities:not([open]) .onboarding-location-detail-other-copy,
  .onboarding-location-detail-activities:not([open]) .onboarding-location-activity-list {
    display: none;
  }

  .onboarding-location-activity-list {
    display: grid;
    gap: 0.5rem;
  }

  .onboarding-location-activity-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    min-height: 3.15rem;
    border: 1px solid rgb(var(--color-base-300) / 0.52);
    border-radius: 0.85rem;
    background: rgb(var(--color-base-100) / 0.58);
    color: rgb(var(--color-base-content) / 0.82);
    cursor: pointer;
    padding: 0.56rem 0.68rem;
    transition: border-color 0.16s ease, background 0.16s ease;
  }

  .onboarding-location-activity-option:hover,
  .onboarding-location-activity-option:focus-within {
    border-color: rgb(var(--color-primary) / 0.48);
    background: rgb(var(--color-primary) / 0.08);
  }

  .onboarding-location-activity-option input {
    width: 1.22rem;
    height: 1.22rem;
    accent-color: rgb(var(--color-primary));
  }

  .onboarding-location-activity-copy {
    display: grid;
    gap: 0.06rem;
    min-width: 0;
  }

  .onboarding-location-activity-copy strong {
    color: rgb(var(--color-base-content));
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.18;
  }

  .onboarding-location-activity-copy small {
    color: rgb(var(--color-base-content) / 0.52);
    font-size: 0.76rem;
    font-weight: 650;
  }

  #location-validation-msg {
    color: rgb(var(--color-error));
    font-size: 0.85rem;
    font-weight: 700;
  }

  #location-validation-msg p {
    margin: 0;
  }

  .onboarding-location-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .onboarding-location-primary-action {
    display: grid;
    gap: 0.45rem;
  }

  .onboarding-location-primary-action > .btn {
    width: 100%;
  }

  .onboarding-location-results.hidden,
  .onboarding-location-suggest.hidden,
  .onboarding-location-map-state.hidden,
  .onboarding-location-map-popover.hidden,
  .onboarding-location-search-spinner.hidden {
    display: none;
  }

  @media (max-width: 767px) {
    .onboarding-page-shell,
    .onboarding-page-shell--wide {
      max-width: 100%;
    }

    .onboarding-page-shell--wide #location-section {
      padding: 1rem;
    }

    .onboarding-location-card {
      margin-bottom: 7rem;
    }

    .onboarding-location-title-row {
      gap: 0.75rem;
    }

    .onboarding-location-icon {
      width: 2.65rem;
      height: 2.65rem;
      border-radius: 0.85rem;
    }

    .onboarding-location-main {
      grid-template-columns: minmax(0, 1fr);
    }

    .onboarding-location-map {
      min-height: 18rem;
      order: 2;
    }

    .onboarding-location-panel {
      order: 1;
    }

    .onboarding-location-results {
      max-height: 16rem;
    }

    .onboarding-location-result-button,
    .onboarding-location-selected-item {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .onboarding-location-result-type {
      display: none;
    }

    .onboarding-location-map-popover,
    .onboarding-location-map-detail {
      left: 0.75rem;
      right: 0.75rem;
      bottom: 0.75rem;
      width: auto;
      top: 0.75rem;
      align-content: start;
      max-height: calc(100% - 1.5rem);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .onboarding-location-map-detail .onboarding-location-detail-head {
      order: 0;
    }

    .onboarding-location-map-detail .onboarding-location-detail-primary {
      order: 1;
    }

    .onboarding-location-map-detail .onboarding-location-detail-usage {
      order: 2;
    }

    .onboarding-location-map-detail .onboarding-location-detail-metrics {
      order: 3;
    }

    .onboarding-location-map-detail .onboarding-location-detail-activities {
      order: 4;
    }

    .onboarding-location-no-results {
      align-items: flex-start;
      flex-direction: column;
    }

    .onboarding-location-actions {
      grid-template-columns: minmax(0, 1fr);
    }
  }


  /* ===== TABS ===== */
  .tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
  }
  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-base-content) / 0.5);
    cursor: pointer;
    transition: all 150ms var(--ease-snap);
    border: none;
    background: transparent;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--radius-md);
  }
  .tab:hover {
    color: rgb(var(--color-base-content) / 0.8);
    background: rgba(255, 255, 255, 0.04);
  }
  .tab-active, .tab[aria-selected="true"] {
    color: rgb(var(--color-primary));
    background: rgb(var(--color-primary) / 0.1);
    font-weight: 600;
  }
  .tab-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
  .tabs-boxed {
    background: rgb(var(--color-base-300) / 0.5);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    gap: 0.125rem;
  }


  /* ===== LOADING / PROGRESS ===== */
  .loading {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    pointer-events: none;
  }
  .loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgb(var(--color-base-300));
    border-top-color: rgb(var(--color-primary));
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
  }
  .loading-ring {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgb(var(--color-base-300));
    border-top-color: rgb(var(--color-primary));
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
  }
  .loading-xs, .loading-xs .loading-spinner, .loading-xs .loading-ring { width: 1rem; height: 1rem; }
  .loading-sm, .loading-sm .loading-spinner, .loading-sm .loading-ring { width: 1.25rem; height: 1.25rem; }
  .loading-lg, .loading-lg .loading-spinner, .loading-lg .loading-ring { width: 2.5rem; height: 2.5rem; }

  .progress {
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: rgb(var(--color-base-300));
    overflow: hidden;
  }
  .progress::-webkit-progress-bar {
    background: rgb(var(--color-base-300));
    border-radius: var(--radius-full);
  }
  .progress::-webkit-progress-value {
    background: rgb(var(--color-primary));
    border-radius: var(--radius-full);
    transition: width 0.3s var(--ease-out-expo);
  }
  .progress::-moz-progress-bar {
    background: rgb(var(--color-primary));
    border-radius: var(--radius-full);
  }

  .radial-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    background:
      radial-gradient(farthest-side, rgb(var(--color-primary)) 98%, transparent) top/var(--thickness, 5px) var(--thickness, 5px) no-repeat,
      conic-gradient(rgb(var(--color-primary)) calc(var(--value, 0) * 1%), rgb(var(--color-base-300)) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness, 5px) - 1px), black calc(100% - var(--thickness, 5px)));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness, 5px) - 1px), black calc(100% - var(--thickness, 5px)));
  }
  .radial-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
  }
  .radial-progress-profile { --size: 5rem; --thickness: 5px; color: rgb(var(--color-primary)); }


  /* ===== DIVIDER ===== */
  .divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    font-size: 0.75rem;
    color: rgb(var(--color-base-content) / 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--glass-border);
  }


  /* ===== AVATAR / PLACEHOLDER ===== */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .avatar > div {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* ===== STATS ===== */
  .stats {
    display: grid;
    grid-auto-flow: column;
    background: rgb(var(--color-base-100));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    border-right: 1px solid var(--glass-border);
  }
  .stat:last-child { border-right: none; }
  .stat-title {
    font-size: 0.75rem;
    color: rgb(var(--color-base-content) / 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: rgb(var(--color-base-content));
  }


  /* ===== LINKS ===== */
  .link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: rgb(var(--color-primary));
  }
  .link:hover {
    opacity: 0.8;
  }
  .link-primary { color: rgb(var(--color-primary)); }
  .link-secondary { color: rgb(var(--color-secondary)); }
  .link-hover {
    text-decoration: none;
  }
  .link-hover:hover {
    text-decoration: underline;
  }
  .link-active {
    color: rgb(var(--color-primary));
    font-weight: 600;
  }


  /* ===== RATING / MASK ===== */
  .rating {
    display: inline-flex;
    gap: 0.125rem;
  }
  .rating input {
    appearance: none;
    cursor: pointer;
  }
  .rating-hidden {
    width: 0.5rem;
    padding: 0;
    background-color: transparent;
  }
  .rating-md input:not(.rating-hidden) { width: 1.5rem; height: 1.5rem; }
  .rating-lg input:not(.rating-hidden) { width: 2rem; height: 2rem; }
  .mask { mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
  .mask-star-2 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    background-color: rgb(var(--color-base-300));
  }
  .rating input:checked ~ input .mask-star-2,
  .rating input.mask-star-2:checked {
    background-color: rgb(var(--color-warning));
  }
  /* Stars up to and including :checked */
  .rating input.mask-star-2 { background-color: rgb(var(--color-base-300)); }
  .rating input.mask-star-2:checked,
  .rating input.mask-star-2:checked ~ input.mask-star-2 {
    /* We rely on sibling order; DaisyUI uses nth logic.
       In practice, each star input tracks the value natively. */
  }

  .star-rating {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .star-rating .label-text {
    padding: 0.125rem 0;
  }
  .star-rating__control {
    --star-rating-empty: rgb(var(--color-base-content) / 0.28);
    --star-rating-active: rgb(var(--color-warning));
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.125rem;
    width: max-content;
  }
  .star-rating--primary .star-rating__control {
    --star-rating-active: rgb(var(--color-primary));
  }
  .star-rating--secondary .star-rating__control {
    --star-rating-active: rgb(var(--color-secondary));
  }
  .star-rating__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
  }
  .star-rating__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--star-rating-empty);
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  }
  .star-rating--sm .star-rating__label,
  .star-rating-display--sm .star-rating-display__star {
    font-size: 1.125rem;
  }
  .star-rating--md .star-rating__label,
  .star-rating-display--md .star-rating-display__star {
    font-size: 1.5rem;
  }
  .star-rating--lg .star-rating__label,
  .star-rating-display--lg .star-rating-display__star {
    font-size: 2rem;
  }
  .star-rating__input:checked + .star-rating__label,
  .star-rating__input:checked + .star-rating__label ~ .star-rating__label {
    color: var(--star-rating-active);
  }
  .star-rating__control[data-preview-value] .star-rating__input + .star-rating__label {
    color: var(--star-rating-empty);
  }
  .star-rating__control[data-preview-value] .star-rating__label.is-active {
    color: var(--star-rating-active);
  }
  @media (hover: hover) and (pointer: fine) {
    .star-rating__label:hover {
      transform: translateY(-1px);
    }
  }
  .star-rating__input:focus-visible + .star-rating__label {
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.22);
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 3px;
  }

  .star-rating-display {
    --star-rating-display-empty: rgb(var(--color-base-content) / 0.28);
    --star-rating-display-active: rgb(var(--color-warning));
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    line-height: 1;
  }
  .star-rating-display--primary {
    --star-rating-display-active: rgb(var(--color-primary));
  }
  .star-rating-display--secondary {
    --star-rating-display-active: rgb(var(--color-secondary));
  }
  .star-rating-display__star {
    color: var(--star-rating-display-empty);
  }
  .star-rating-display__star.is-active {
    color: var(--star-rating-display-active);
  }

  @media (prefers-reduced-motion: reduce) {
    .star-rating__label {
      transition: none;
    }
    .star-rating__label:hover {
      transform: none;
    }
  }


  /* ===== TOOLTIP ===== */
  .tooltip {
    position: relative;
    display: inline-flex;
  }
  .tooltip::before {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-md);
    background: rgb(var(--color-base-content));
    color: rgb(var(--color-base-200));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 50;
  }
  .tooltip:hover::before {
    opacity: 1;
  }


  /* ===== INDICATOR ===== */
  .indicator {
    position: relative;
    display: inline-flex;
  }
  .indicator > .badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 1;
  }


  /* ===== HERO ===== */
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem;
  }


  /* ===== SWAP ===== */
  .swap {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
  }


  /* ===== KBD ===== */
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-family: 'Inter', monospace;
    border: 1px solid rgb(var(--color-base-300));
    border-radius: var(--radius-sm);
    background: rgb(var(--color-base-200));
    color: rgb(var(--color-base-content) / 0.7);
    min-width: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 0 rgb(var(--color-base-300));
  }


  /* ===== JOIN ===== */
  .join {
    display: inline-flex;
    align-items: stretch;
  }
  .join > *:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .join > *:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }


  /* ===== PROSE ===== */
  .prose {
    max-width: 65ch;
    color: rgb(var(--color-base-content) / 0.85);
    line-height: 1.75;
  }
  .prose h1, .prose h2, .prose h3, .prose h4 {
    color: rgb(var(--color-base-content));
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }
  .prose h1 { font-size: 2em; }
  .prose h2 { font-size: 1.5em; }
  .prose h3 { font-size: 1.25em; }
  .prose p { margin: 1em 0; }
  .prose a { color: rgb(var(--color-primary)); text-decoration: underline; text-underline-offset: 2px; }
  .prose strong { color: rgb(var(--color-base-content)); font-weight: 600; }
  .prose ul, .prose ol { padding-left: 1.5em; margin: 1em 0; }
  .prose li { margin: 0.25em 0; }
  .prose blockquote {
    border-left: 3px solid rgb(var(--color-primary) / 0.3);
    padding-left: 1rem;
    color: rgb(var(--color-base-content) / 0.7);
    font-style: italic;
  }
  .prose code {
    background: rgb(var(--color-base-300));
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
  }
  .prose pre {
    background: rgb(var(--color-neutral));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow-x: auto;
  }
  .prose pre code { background: transparent; padding: 0; }
  .prose-sm { font-size: 0.875rem; line-height: 1.6; }

/* end component styles */


/* ────────────────────────────────────
   4. CUSTOM UTILITIES (from old theme.css)
   ──────────────────────────────────── */

/* Gradient accents - dark theme versions */
.gradient-warm { background: linear-gradient(135deg, #F95738 0%, #EE964B 100%); }
.gradient-cool { background: linear-gradient(135deg, #155084 0%, #1A7AC2 100%); }
.gradient-sunset { background: linear-gradient(135deg, #F95738 0%, #EE964B 50%, #F4D35E 100%); }
.gradient-warm-reverse { background: linear-gradient(135deg, #EE964B, #F95738); }
.gradient-warm-text-safe { background: linear-gradient(135deg, #B83518 0%, #8A5B0B 100%); }
.gradient-warm-text-safe-reverse { background: linear-gradient(135deg, #8A5B0B 0%, #B83518 100%); }
.gradient-sunset-text-safe { background: linear-gradient(135deg, #B83518 0%, #9A4F0D 50%, #8A5B0B 100%); }
.gradient-cta {
  background: linear-gradient(135deg, rgb(var(--color-neutral)) 0%, #061B30 40%, #0D3B66 100%);
}

.text-gradient-warm {
  background: linear-gradient(135deg, #F95738 0%, #EE964B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-trail {
  background: linear-gradient(135deg, #F95738 0%, #F4D35E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Blobs - dark-theme ambient glow */
.blob-warm { background: radial-gradient(circle, rgba(249, 87, 56, 0.06) 0%, transparent 70%); }
.blob-cool { background: radial-gradient(circle, rgba(244, 211, 94, 0.05) 0%, transparent 70%); }

/* Warm shadows - now cool-toned for dark theme */
/* shadow-trail variants - now redundant since card-trail has built-in shadows,
   but kept for template compat. They add slightly more depth. */
.shadow-trail-sm { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 8px rgba(0,0,0,0.3); }
.shadow-trail { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 20px rgba(0,0,0,0.4), 0 0 40px rgba(0,0,0,0.2); }
.shadow-trail-md { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.45), 0 0 48px rgba(0,0,0,0.2); }
.shadow-trail-lg { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.5), 0 0 60px rgba(0,0,0,0.25); }
.shadow-trail-xl { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.55), 0 0 80px rgba(0,0,0,0.3); }

/* Card treatments */
.transition-warm { transition: all 0.3s var(--ease-out-expo); }

/* Topographic pattern - subtle on dark */
.topo-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80c30-15 60-5 100 10s70 20 100 5' fill='none' stroke='%23F95738' stroke-width='0.6' opacity='0.06'/%3E%3Cpath d='M0 60c40-10 80 10 120 15s60-5 80-15' fill='none' stroke='%23F4D35E' stroke-width='0.5' opacity='0.04'/%3E%3Cpath d='M0 120c25 10 50 20 100 5s75-25 100-10' fill='none' stroke='%23F95738' stroke-width='0.6' opacity='0.05'/%3E%3Cpath d='M0 160c35-10 70 5 110 15s65 5 90-10' fill='none' stroke='%23F4D35E' stroke-width='0.5' opacity='0.03'/%3E%3Cpath d='M0 40c50 5 90-10 130 0s50 15 70 5' fill='none' stroke='%23EE964B' stroke-width='0.4' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Grain overlay - reduced for dark theme */
.grain::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.25;
}

/* Wave divider */
.wave-divider {
  height: 48px;
  overflow: hidden;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ────────────────────────────────────
   5. AMBIENT EFFECTS
   ──────────────────────────────────── */

.ambient-blob {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.ambient-blob--primary {
  background: var(--ambient-primary);
  top: -200px;
  right: -100px;
  animation: blob-drift 12s ease-in-out infinite alternate;
}
.ambient-blob--secondary {
  background: var(--ambient-secondary);
  bottom: -200px;
  left: -100px;
  animation: blob-drift 10s ease-in-out infinite alternate-reverse;
}

.grid-overlay {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

.spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(249, 87, 56, 0.04),
    transparent 60%
  );
}


/* ────────────────────────────────────
   6. HTMX LOADING STATES
   ──────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: 0; transition: opacity 0.15s ease-out; }
.htmx-settling { opacity: 0; }
.htmx-settling > * { animation: fade-up 0.3s ease-out forwards; }

#notification-bell.htmx-request,
#notification-bell.htmx-swapping,
#notification-bell.htmx-settling,
#notification-bell .htmx-swapping,
#notification-bell .htmx-settling {
  opacity: 1 !important;
  transition: none !important;
}

#notification-bell.htmx-settling > *,
#notification-bell .htmx-settling > *,
#notification-bell.htmx-swapping *,
#notification-bell.htmx-settling * {
  animation: none !important;
}

/* The nearby-events nav dot is 8px status chrome pinned to the label edge;
   the generic 16px fade-up slide reads as a glitch there (the dot crosses
   the label text mid-flight) — exempt it like the notification bell. */
.nearby-events-nav-indicator.htmx-settling,
.nearby-events-nav-indicator .htmx-settling {
  opacity: 1 !important;
  transition: none !important;
}
.nearby-events-nav-indicator.htmx-settling > *,
.nearby-events-nav-indicator.htmx-settling * {
  animation: none !important;
}


/* ────────────────────────────────────
   7. ANIMATIONS
   ──────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes bounce-soft {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rsvp-success-pop {
  0% { transform: scale(0.96); box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
  55% { transform: scale(1.025); box-shadow: 0 20px 45px rgba(34, 197, 94, 0.16); }
  100% { transform: scale(1); box-shadow: 0 12px 30px rgba(34, 197, 94, 0.08); }
}
@keyframes rsvp-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  }
  15% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--rsvp-confetti-x)), calc(-50% + var(--rsvp-confetti-y))) scale(1) rotate(var(--rsvp-confetti-rotate));
  }
}
@keyframes blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 10px) scale(0.95); }
  100% { transform: translate(10px, -15px) scale(1.02); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes reaction-pop {
  0% { transform: scale(0.82) rotate(-8deg); }
  58% { transform: scale(1.22) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.reaction-picker {
  z-index: 2;
}

.reaction-picker__trigger {
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid rgba(var(--color-base-content), 0.08);
  background: rgba(var(--color-base-content), 0.04);
  color: rgb(var(--color-base-content));
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 220ms var(--ease-spring);
}

.reaction-picker__trigger:hover,
.reaction-picker__trigger:focus-visible,
.reaction-picker__trigger--selected {
  background: rgba(var(--color-primary), 0.14);
  border-color: rgba(var(--color-primary), 0.28);
  color: rgb(var(--color-primary));
}

.reaction-picker__trigger:hover,
.reaction-picker__trigger:focus-visible {
  transform: translateY(-1px);
}

.reaction-picker__trigger--selected .reaction-picker__trigger-emoji {
  display: inline-block;
  animation: reaction-pop 420ms var(--ease-spring) both;
}

.reaction-picker__menu {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--color-base-content), 0.10);
  background: rgb(var(--color-base-100));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.35rem) scale(0.96);
  transform-origin: bottom left;
  transition:
    opacity 140ms ease,
    transform 220ms var(--ease-spring);
  z-index: 30;
}

.reaction-picker:hover .reaction-picker__menu,
.reaction-picker:focus-within .reaction-picker__menu,
.reaction-picker--open .reaction-picker__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.reaction-picker__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition:
    background-color 160ms ease,
    transform 220ms var(--ease-spring);
}

.reaction-picker__option:hover,
.reaction-picker__option:focus-visible,
.reaction-picker__option--selected {
  background: rgba(var(--color-primary), 0.14);
  transform: translateY(-2px) scale(1.08);
}

.reaction-breakdown__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-height: 1.55rem;
  padding: 0.1rem 0.42rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--color-base-content), 0.08);
  background: rgba(var(--color-base-content), 0.04);
  color: rgba(var(--color-base-content), 0.72);
  font-size: 0.72rem;
  font-weight: 700;
}

.reaction-breakdown__pill--mine {
  border-color: rgba(var(--color-primary), 0.28);
  background: rgba(var(--color-primary), 0.13);
  color: rgb(var(--color-primary));
}

@media (prefers-reduced-motion: reduce) {
  .reaction-picker__trigger,
  .reaction-picker__menu,
  .reaction-picker__option {
    transition: none;
  }

  .reaction-picker__trigger--selected .reaction-picker__trigger-emoji {
    animation: none;
  }
}

/* Page entrance */
main > div,
main > section { animation: fade-up 0.5s var(--ease-out-expo) both; }

/* Stagger children */
[data-stagger] > *:nth-child(1) { animation-delay: 0s; }
[data-stagger] > *:nth-child(2) { animation-delay: 0.06s; }
[data-stagger] > *:nth-child(3) { animation-delay: 0.12s; }
[data-stagger] > *:nth-child(4) { animation-delay: 0.18s; }
[data-stagger] > *:nth-child(5) { animation-delay: 0.24s; }
[data-stagger] > *:nth-child(6) { animation-delay: 0.30s; }

/* Scroll-triggered animations */
[data-animate] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
[data-animate].visible { opacity: 1; transform: translateY(0); }
[data-animate]:nth-child(2) { transition-delay: 0.08s; }
[data-animate]:nth-child(3) { transition-delay: 0.16s; }
[data-animate]:nth-child(4) { transition-delay: 0.24s; }

/* Badge pulse for proposed status */
.badge-pulse { animation: pulse-subtle 2s ease-in-out infinite; }

/* Alert entrance */
.alert { animation: slide-down 0.3s ease-out; }

/* Participant chips stagger */
.participant-chip { animation: chip-spring 0.45s var(--ease-spring) both; }
.participant-chip:nth-child(2) { animation-delay: 0.05s; }
.participant-chip:nth-child(3) { animation-delay: 0.1s; }
.participant-chip:nth-child(4) { animation-delay: 0.15s; }
.participant-chip:nth-child(5) { animation-delay: 0.2s; }
.participant-chip:nth-child(n+6) { animation-delay: 0.25s; }
@keyframes chip-spring {
  from { opacity: 0; transform: translateY(12px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* Celebration check draw-in: templates ship the complete SVG (no-JS users see
   the finished check); celebrate.js adds .celebrate-check to play the draw. */
@keyframes celebrate-dash { to { stroke-dashoffset: 0; } }
.celebrate-check .celebrate-check-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: celebrate-dash 0.45s var(--ease-out-expo) 0.1s forwards;
}
.celebrate-check .celebrate-check-tick {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: celebrate-dash 0.3s var(--ease-out-expo) 0.5s forwards;
}

/* RSVP accept celebration */
.rsvp-success-card {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.rsvp-success-card--celebrate {
  animation: rsvp-success-pop 900ms var(--ease-spring) both;
}

.rsvp-success-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 211, 94, 0.16), transparent 32%),
    radial-gradient(circle at 82% 28%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(249, 87, 56, 0.04));
}

.rsvp-celebration-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.rsvp-celebration-burst span {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: rgb(var(--color-accent));
  animation: rsvp-confetti-burst 1100ms var(--ease-out-expo) both;
}

.rsvp-celebration-burst span:nth-child(1) {
  --rsvp-confetti-x: -17rem;
  --rsvp-confetti-y: -7rem;
  --rsvp-confetti-rotate: -120deg;
}
.rsvp-celebration-burst span:nth-child(2) {
  --rsvp-confetti-x: -11rem;
  --rsvp-confetti-y: 6rem;
  --rsvp-confetti-rotate: 90deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-primary));
  animation-delay: 60ms;
}
.rsvp-celebration-burst span:nth-child(3) {
  --rsvp-confetti-x: -3.6rem;
  --rsvp-confetti-y: -10rem;
  --rsvp-confetti-rotate: 150deg;
  background: rgb(var(--color-success));
  animation-delay: 30ms;
}
.rsvp-celebration-burst span:nth-child(4) {
  --rsvp-confetti-x: 4.5rem;
  --rsvp-confetti-y: 8rem;
  --rsvp-confetti-rotate: -80deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-secondary));
  animation-delay: 95ms;
}
.rsvp-celebration-burst span:nth-child(5) {
  --rsvp-confetti-x: 10.5rem;
  --rsvp-confetti-y: -8.5rem;
  --rsvp-confetti-rotate: 130deg;
  background: rgb(var(--color-accent));
  animation-delay: 45ms;
}
.rsvp-celebration-burst span:nth-child(6) {
  --rsvp-confetti-x: 15rem;
  --rsvp-confetti-y: 4.8rem;
  --rsvp-confetti-rotate: -160deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-success));
  animation-delay: 75ms;
}
.rsvp-celebration-burst span:nth-child(7) {
  --rsvp-confetti-x: 1.6rem;
  --rsvp-confetti-y: -12.4rem;
  --rsvp-confetti-rotate: 110deg;
  background: rgb(var(--color-primary));
  animation-delay: 110ms;
}
.rsvp-celebration-burst span:nth-child(8) {
  --rsvp-confetti-x: 17.5rem;
  --rsvp-confetti-y: -2rem;
  --rsvp-confetti-rotate: 210deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-secondary));
  animation-delay: 15ms;
}
.rsvp-celebration-burst span:nth-child(9) {
  --rsvp-confetti-x: -16.5rem;
  --rsvp-confetti-y: 1.2rem;
  --rsvp-confetti-rotate: 170deg;
  background: rgb(var(--color-success));
  animation-delay: 130ms;
}
.rsvp-celebration-burst span:nth-child(10) {
  --rsvp-confetti-x: -9rem;
  --rsvp-confetti-y: -9rem;
  --rsvp-confetti-rotate: -220deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-secondary));
  animation-delay: 155ms;
}
.rsvp-celebration-burst span:nth-child(11) {
  --rsvp-confetti-x: -4.5rem;
  --rsvp-confetti-y: 8.5rem;
  --rsvp-confetti-rotate: 135deg;
  background: rgb(var(--color-primary));
  animation-delay: 90ms;
}
.rsvp-celebration-burst span:nth-child(12) {
  --rsvp-confetti-x: 0.3rem;
  --rsvp-confetti-y: 10.8rem;
  --rsvp-confetti-rotate: -130deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-accent));
  animation-delay: 180ms;
}
.rsvp-celebration-burst span:nth-child(13) {
  --rsvp-confetti-x: 6.5rem;
  --rsvp-confetti-y: -11.5rem;
  --rsvp-confetti-rotate: 250deg;
  background: rgb(var(--color-secondary));
  animation-delay: 120ms;
}
.rsvp-celebration-burst span:nth-child(14) {
  --rsvp-confetti-x: 11.8rem;
  --rsvp-confetti-y: 7.4rem;
  --rsvp-confetti-rotate: -95deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-primary));
  animation-delay: 145ms;
}
.rsvp-celebration-burst span:nth-child(15) {
  --rsvp-confetti-x: 14.5rem;
  --rsvp-confetti-y: -6.4rem;
  --rsvp-confetti-rotate: 190deg;
  background: rgb(var(--color-success));
  animation-delay: 105ms;
}
.rsvp-celebration-burst span:nth-child(16) {
  --rsvp-confetti-x: -1.5rem;
  --rsvp-confetti-y: -14.5rem;
  --rsvp-confetti-rotate: -175deg;
  width: 0.84rem;
  height: 1.44rem;
  border-radius: 0.28rem;
  background: rgb(var(--color-accent));
  animation-delay: 165ms;
}

.rsvp-confetti-canvas-enabled .rsvp-celebration-burst {
  display: none;
}

.rsvp-confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

/* Chip exit animation for location tags */
@keyframes chip-exit {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.7); opacity: 0; }
}
.location-chip-removing {
  animation: chip-exit 0.15s ease-in forwards;
}

/* Navbar active link indicator */
.nav-link-active {
  position: relative;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
  border-radius: var(--radius-full);
}

/* Floating feedback button */
.feedback-float { animation: bounce-soft 0.4s ease-out 0.5s both; color: #fff; }
.feedback-float svg { stroke: #fff; }
.float-animation { animation: float-gentle 3s ease-in-out infinite; }

@media (max-width: 767px) {
  body:has([data-availability-calendar-editor]) [data-floating-feedback] {
    display: none;
  }

  [data-availability-calendar-editor] [data-availability-date] {
    scroll-margin-top: 7rem;
    scroll-margin-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Focus states - consistent with form inputs.
   Focus-visible indicators are never animated: keyboard users need the ring
   the moment focus lands, so these rules override the controls' hover/press
   transitions. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
  transition: none;
}
.btn:focus-visible,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.checkbox:focus-visible, .toggle:focus-visible,
.tab:focus-visible,
.menu li > a:focus-visible, .menu li > button:focus-visible {
  transition: none;
}


/* ────────────────────────────────────
   8. 404/500 ANIMATIONS (from animations.css)
   ──────────────────────────────────── */
@keyframes caveman-jump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  8% { transform: translateY(-10px) rotate(0deg); }
  20% { transform: translateY(-90px) rotate(-10deg); }
  35% { transform: translateY(-110px) rotate(15deg) scaleY(1.05); }
  48% { transform: translateY(-40px) rotate(25deg) scaleX(1.1); }
  52% { transform: translateY(0) rotate(0deg) scaleY(0.85) scaleX(1.15); }
  56% { transform: translateY(-12px) scaleY(1.05) scaleX(0.95); }
  62% { transform: translateY(0) scaleY(0.95) scaleX(1.05); }
  68% { transform: translateY(-4px); }
  72% { transform: translateY(0); }
}
@keyframes club-spin {
  0%, 100% { transform: rotate(-20deg); }
  20% { transform: rotate(-60deg); }
  35% { transform: rotate(40deg); }
  52% { transform: rotate(-10deg); }
  72% { transform: rotate(-20deg); }
}
@keyframes hair-bounce {
  0%, 100% { transform: scaleY(1) translateY(0); }
  20% { transform: scaleY(0.8) translateY(2px); }
  35% { transform: scaleY(1.3) translateY(-3px); }
  52% { transform: scaleY(0.7) translateY(4px); }
  62% { transform: scaleY(1.1) translateY(-1px); }
}
@keyframes big-splash-l {
  0%, 48% { transform: scale(0) translate(0, 0); opacity: 0; }
  53% { transform: scale(1.3) translate(-22px, -35px); opacity: 1; }
  65% { transform: scale(0.8) translate(-35px, -15px); opacity: 0.7; }
  80% { transform: scale(0.3) translate(-42px, 15px); opacity: 0; }
  100% { transform: scale(0) translate(-42px, 15px); opacity: 0; }
}
@keyframes big-splash-r {
  0%, 48% { transform: scale(0) translate(0, 0); opacity: 0; }
  53% { transform: scale(1.3) translate(22px, -35px); opacity: 1; }
  65% { transform: scale(0.8) translate(35px, -15px); opacity: 0.7; }
  80% { transform: scale(0.3) translate(42px, 15px); opacity: 0; }
  100% { transform: scale(0) translate(42px, 15px); opacity: 0; }
}
@keyframes big-splash-c {
  0%, 48% { transform: scale(0) translateY(0); opacity: 0; }
  52% { transform: scale(1.5) translateY(-45px); opacity: 1; }
  62% { transform: scale(1) translateY(-30px); opacity: 0.6; }
  78% { transform: scale(0.2) translateY(-5px); opacity: 0; }
  100% { transform: scale(0) translateY(0); opacity: 0; }
}
@keyframes big-splash-far-l {
  0%, 50% { transform: scale(0) translate(0, 0); opacity: 0; }
  56% { transform: scale(1) translate(-38px, -25px); opacity: 0.8; }
  72% { transform: scale(0.4) translate(-55px, 8px); opacity: 0; }
  100% { transform: scale(0) translate(-55px, 8px); opacity: 0; }
}
@keyframes big-splash-far-r {
  0%, 50% { transform: scale(0) translate(0, 0); opacity: 0; }
  56% { transform: scale(1) translate(38px, -25px); opacity: 0.8; }
  72% { transform: scale(0.4) translate(55px, 8px); opacity: 0; }
  100% { transform: scale(0) translate(55px, 8px); opacity: 0; }
}
@keyframes puddle-splash {
  0%, 48% { transform: scaleX(1) scaleY(1); opacity: 0.5; }
  52% { transform: scaleX(1.8) scaleY(0.6); opacity: 0.9; }
  60% { transform: scaleX(2.4) scaleY(0.8); opacity: 0.6; }
  75% { transform: scaleX(1.4) scaleY(1.1); opacity: 0.4; }
  100% { transform: scaleX(1) scaleY(1); opacity: 0.5; }
}
@keyframes bone-float {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
  50% { transform: translate(3px, -4px) rotate(10deg); opacity: 0.35; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
}
@keyframes bird-fly {
  0% { transform: translate(-40px, 10px) scaleX(1); }
  49% { scaleX: 1; }
  50% { transform: translate(50px, -5px) scaleX(-1); }
  100% { transform: translate(-40px, 10px) scaleX(1); }
}
@keyframes stars {
  0%, 48%, 72%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  54% { opacity: 1; transform: scale(1) rotate(0deg); }
  66% { opacity: 0.6; transform: scale(0.8) rotate(180deg); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.caveman { animation: caveman-jump 3s ease-in-out infinite; transform-origin: center bottom; }
.club-swing { animation: club-spin 3s ease-in-out infinite; transform-origin: 8px 52px; }
.wild-hair { animation: hair-bounce 3s ease-in-out infinite; transform-origin: center bottom; }
.splash-l { animation: big-splash-l 3s ease-out infinite; }
.splash-r { animation: big-splash-r 3s ease-out infinite; }
.splash-c { animation: big-splash-c 3s ease-out infinite; }
.splash-fl { animation: big-splash-far-l 3s ease-out infinite; }
.splash-fr { animation: big-splash-far-r 3s ease-out infinite; }
.puddle-fx { animation: puddle-splash 3s ease-in-out infinite; }
.bone-bob { animation: bone-float 4s ease-in-out infinite; }
.birdy { animation: bird-fly 7s ease-in-out infinite; }
.impact-stars { animation: stars 3s ease-out infinite; }
.fade-in-card { animation: fadeIn 0.5s ease-out; }

/* ────────────────────────────────────
   9. DASHBOARD SCHEDULE BOARD
   ──────────────────────────────────── */

.dashboard-schedule-scroll {
  max-width: 100%;
  overflow-x: visible;
  padding-bottom: 0;
}

.dashboard-schedule-board {
  --dashboard-schedule-border: rgb(var(--color-base-content) / 0.2);
  --dashboard-schedule-border-accent: rgb(var(--color-primary) / 0.38);
  --dashboard-schedule-border-hover: rgb(var(--color-primary) / 0.5);
  --dashboard-calendar-my-event-dot: rgb(var(--color-success));
  --dashboard-calendar-nearby-suggestion-dot: rgb(var(--color-secondary));
  --dashboard-calendar-feedback-due-dot: rgb(var(--color-warning));
}

html.light .dashboard-schedule-board {
  --dashboard-schedule-border: rgb(var(--color-base-content) / 0.28);
}

.dashboard-schedule-desktop {
  display: block;
}

.dashboard-schedule-copy--mobile {
  display: none;
}

.dashboard-schedule-mobile-month {
  display: none;
}

.dashboard-schedule-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 10.5rem) repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
  align-items: stretch;
}

.dashboard-schedule-grid > * {
  box-sizing: border-box;
  min-width: 0;
}

.dashboard-schedule-header-cell {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--dashboard-schedule-border);
  border-radius: 0.8rem;
  background: rgb(var(--color-base-100) / 0.6);
  min-height: 3.8rem;
  padding: 0.65rem 0.55rem;
  overflow-wrap: anywhere;
}

.dashboard-schedule-header-cell--corner {
  display: flex;
  align-items: flex-end;
  background: transparent;
  border-style: dashed;
}

.dashboard-schedule-header-cell--today {
  border-color: var(--dashboard-schedule-border-accent);
  background: rgb(var(--color-primary) / 0.08);
}

.dashboard-schedule-header-cell__weekday {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-base-content) / 0.5);
}

.dashboard-schedule-header-cell__date {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 0.18rem;
  line-height: 1.15;
  overflow-wrap: normal;
  white-space: nowrap;
}

.dashboard-schedule-header-cell__badge {
  display: inline-flex;
  max-width: 100%;
  margin-top: 0.35rem;
  padding: 0.15rem 0.42rem;
  border-radius: 9999px;
  font-size: 0.64rem;
  font-weight: 700;
  background: rgb(var(--color-base-100) / 0.85);
  color: rgb(var(--color-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-schedule-activity {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--dashboard-schedule-border);
  border-radius: 0.8rem;
  background: rgb(var(--color-base-100) / 0.72);
  min-height: 4.6rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-wrap: anywhere;
}

.dashboard-schedule-activity__name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-schedule-activity__meta {
  min-width: 0;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  line-height: 1.3;
  color: rgb(var(--color-base-content) / 0.56);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-schedule-cell-shell {
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  align-self: stretch;
  display: flex;
}

.dashboard-schedule-cell-shell > .cal-hovercard {
  display: none;
}

.dashboard-schedule-cell {
  box-sizing: border-box;
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  min-height: 4.6rem;
  border-radius: 0.8rem;
  border: 1px solid var(--dashboard-schedule-border);
  background: rgb(var(--color-base-100) / 0.72);
  padding: 0.7rem 0.55rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-schedule-cell:hover,
.dashboard-schedule-cell:focus-visible {
  border-color: var(--dashboard-schedule-border-hover);
  transform: translateY(-1px);
}

.dashboard-schedule-cell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14);
}

.dashboard-schedule-cell__state {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.18;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dashboard-schedule-cell__meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.66rem;
  line-height: 1.2;
  color: rgb(var(--color-base-content) / 0.5);
  overflow: hidden;
}

.dashboard-schedule-cell__source {
  min-width: 0;
  display: -webkit-box;
  align-items: center;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-schedule-cell__marker {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.35rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--color-primary) / 0.2);
  background: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-base-content) / 0.8);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-schedule-cell__events {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  overflow: hidden;
  flex-shrink: 0;
}

.dashboard-schedule-event-summary {
  width: 100%;
  min-width: 0;
  min-height: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-secondary) / 0.24);
  padding: 0.22rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  color: rgb(var(--color-base-content) / 0.76);
  background: rgb(var(--color-secondary) / 0.09);
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-schedule-event-summary::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 9999px;
  flex: 0 0 auto;
  background: rgb(var(--color-secondary));
}

.dashboard-schedule-dialog-card {
  border: 1px solid rgb(var(--color-base-300) / 0.4);
  border-radius: 1rem;
  background: rgb(var(--color-base-100) / 0.62);
  padding: 0.95rem 1rem;
}

.dashboard-schedule-dialog-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--color-base-content) / 0.42);
}

.dashboard-schedule-dialog-card__value {
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}

.dashboard-schedule-dialog-card__detail {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(var(--color-base-content) / 0.64);
}

.dashboard-schedule-dialog-events {
  display: grid;
  gap: 0.65rem;
}

.dashboard-schedule-dialog-event {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid rgb(var(--color-base-300) / 0.36);
  background: rgb(var(--color-base-100) / 0.72);
  padding: 0.8rem;
}

.dashboard-schedule-dialog-event__kind {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--color-base-content) / 0.42);
}

.dashboard-schedule-dialog-event__title {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.18rem;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.24;
  color: rgb(var(--color-base-content));
  overflow-wrap: anywhere;
}

.dashboard-schedule-dialog-event__title:hover {
  text-decoration: underline;
}

.dashboard-schedule-dialog-event__meta,
.dashboard-schedule-dialog-event__detail {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgb(var(--color-base-content) / 0.58);
  overflow-wrap: anywhere;
}

.dashboard-schedule-dialog-event__actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .dashboard-schedule-desktop {
    display: none;
  }

  .dashboard-schedule-copy--desktop {
    display: none;
  }

  .dashboard-schedule-copy--mobile {
    display: block;
  }

  .dashboard-schedule-mobile-month {
    display: block;
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .dashboard-schedule-mobile-month__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
  }

  .dashboard-schedule-mobile-month__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
  }

  .dashboard-schedule-mobile-legend {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem 0.8rem;
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgb(var(--color-base-300) / 0.42);
    border-radius: 0.75rem;
    background: rgb(var(--color-base-100) / 0.62);
    color: rgb(var(--color-base-content) / 0.68);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.25;
    list-style: none;
  }

  .dashboard-schedule-mobile-legend__item {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
  }

  .dashboard-schedule-mobile-legend__dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 9999px;
    flex: 0 0 auto;
    background: rgb(var(--color-base-content) / 0.35);
  }

  .dashboard-schedule-mobile-day__indicators {
    min-height: 0.72rem;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    overflow: hidden;
  }

  .dashboard-schedule-mobile-day__indicator {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 9999px;
    flex: 0 0 auto;
    background: rgb(var(--color-base-content) / 0.35);
  }

  .dashboard-schedule-mobile-day__indicator--my_event,
  .dashboard-schedule-mobile-legend__dot--my_event {
    background: var(--dashboard-calendar-my-event-dot);
  }

  .dashboard-schedule-mobile-day__indicator--nearby_suggestion,
  .dashboard-schedule-mobile-legend__dot--nearby_suggestion {
    background: var(--dashboard-calendar-nearby-suggestion-dot);
  }

  .dashboard-schedule-mobile-day__indicator--feedback_due,
  .dashboard-schedule-mobile-legend__dot--feedback_due {
    background: var(--dashboard-calendar-feedback-due-dot);
  }

  .dashboard-schedule-mobile-day__indicator-overflow {
    min-width: 0;
    max-width: 1.25rem;
    border-radius: 9999px;
    padding: 0.02rem 0.18rem;
    background: rgb(var(--color-base-300) / 0.6);
    color: rgb(var(--color-base-content) / 0.68);
    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-schedule-mobile-empty {
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgb(var(--color-base-content) / 0.56);
  }

  .dashboard-schedule-dialog-event {
    flex-direction: column;
  }

  .dashboard-schedule-dialog-event__actions {
    justify-content: flex-start;
    width: 100%;
  }
}


/* ────────────────────────────────────
   10. ACCESSIBILITY
   ──────────────────────────────────── */

/* Enforce HTML hidden attribute */
[hidden] { display: none !important; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced motion */
/* Search match highlight */
mark.search-match {
  background: transparent;
  color: rgb(var(--color-primary));
  font-weight: 600;
  font-style: normal;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  main > div, main > section { animation: none; }
  .htmx-swapping, .htmx-settling { transition: none; }
  .btn:active, .checkbox:active, .menu li > a:active, .menu li > button:active { transform: none; }
  .event-card:hover { transform: none; }
  .htmx-settling > * { animation: none; opacity: 1; }
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .badge-pulse { animation: none; }
  .alert { animation: none; }
  .participant-chip { animation: none; }
  .rsvp-success-card--celebrate { animation: none; }
  .celebrate-check .celebrate-check-circle,
  .celebrate-check .celebrate-check-tick { animation: none; stroke-dashoffset: 0; }
  .rsvp-celebration-burst { display: none; }
  .feedback-float { animation: none; }
  .float-animation { animation: none; }
  .ambient-blob { animation: none; }
  .spotlight { display: none; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { transition: none; }
}

/* ============================================================
   Calendar design system (cal-*)
   Single source of truth for calendar chrome. Consumers:
   - month grids (macros/calendar.html + calendar-core.js):
     availability overview, availability editor, dashboard mobile month
   - week matrix (dashboard desktop board): composes cal-cell--* state
     modifiers and the cal-hovercard onto its own grid.
   State modifiers are standalone classes (no .cal-cell prefix) so both
   grid types can use them.
   ============================================================ */

:root {
  --cal-border: rgb(var(--color-base-content) / 0.2);
  --cal-border-accent: rgb(var(--color-primary) / 0.38);
  --cal-border-hover: rgb(var(--color-primary) / 0.5);
}

html.light {
  --cal-border: rgb(var(--color-base-content) / 0.28);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.cal-grid--compact {
  gap: 0.25rem;
}

.cal-grid > * {
  box-sizing: border-box;
  min-width: 0;
}

.cal-weekday {
  padding-bottom: 0.3rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgb(var(--color-base-content) / 0.45);
}

.cal-cell-shell {
  position: relative;
  display: flex;
  min-width: 0;
  align-self: stretch;
}

.cal-cell-shell:hover,
.cal-cell-shell:focus-within {
  z-index: 80;
}

.cal-cell {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 3.75rem;
  border: 1px solid var(--cal-border);
  border-radius: 0.8rem;
  background: rgb(var(--color-base-100) / 0.72);
  color: rgb(var(--color-base-content));
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.cal-cell:hover:not(:disabled) {
  border-color: var(--cal-border-hover);
}

.cal-cell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14);
}

.cal-cell:disabled {
  cursor: not-allowed;
}

/* Size variants */
.cal-cell--square {
  aspect-ratio: 1 / 1;
  min-height: 2.75rem;
  padding: 0.25rem;
  scroll-margin-top: 7rem;
}

@media (min-width: 640px) {
  .cal-cell--square {
    min-height: 5.75rem;
    padding: 0.625rem;
  }
}

.cal-cell--compact {
  aspect-ratio: 1 / 1;
  min-height: 2.85rem;
  border-radius: 0.55rem;
  padding: 0.34rem 0.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
}

/* State modifiers (standalone; canonical visual vocabulary) */
.cal-cell--available {
  background: linear-gradient(180deg, rgb(var(--color-primary) / 0.08), rgb(var(--color-base-100) / 0.82));
}

.cal-cell--off {
  color: rgb(var(--color-base-content) / 0.74);
}

.cal-cell--blocked {
  border-color: rgb(var(--color-error) / 0.35);
  background: rgb(var(--color-error) / 0.1);
}

.cal-cell--recurring {
  border-color: rgb(var(--color-secondary) / 0.35);
  background: rgb(var(--color-secondary) / 0.1);
}

.cal-cell--active {
  border-color: rgb(var(--color-primary));
  background: rgb(var(--color-primary) / 0.1);
  box-shadow: 0 4px 14px rgb(var(--color-primary) / 0.14);
}

.cal-cell--today {
  border-color: var(--cal-border-accent);
}

.cal-cell--override {
  border-style: dashed;
}

.cal-cell--outside {
  opacity: 0.45;
}

.cal-cell--past {
  cursor: not-allowed;
  border-color: rgb(var(--color-base-content) / 0.12);
  background: rgb(var(--color-base-200) / 0.25);
}

.cal-cell--has-events {
  border-color: rgb(var(--color-secondary) / 0.3);
  background: rgb(var(--color-base-100) / 0.82);
}

/* Cell content */
.cal-cell__day-number {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
}

.cal-cell__meta {
  min-width: 0;
  font-size: 0.66rem;
  line-height: 1.2;
  color: rgb(var(--color-base-content) / 0.5);
}

.cal-cell__indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgb(var(--color-primary) / 0.7);
  flex: 0 0 auto;
}

/* Hovercard (shared box; two positioning modes) */
.cal-hovercard {
  width: min(18rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: 0.875rem;
  border: 1px solid rgb(var(--color-base-content) / 0.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgb(var(--color-base-100) / 0.98), rgb(var(--color-base-300) / 0.96));
  box-shadow: var(--shadow-xl), 0 0 0 1px rgb(var(--color-primary) / 0.08);
  color: rgb(var(--color-base-content));
  opacity: 0;
  visibility: hidden;
  text-align: left;
}

.cal-hovercard--anchored {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.625rem);
  z-index: 70;
  transform: translateX(-50%) translateY(-0.25rem) scale(0.98);
  transform-origin: top center;
  pointer-events: auto;
  transition:
    opacity 140ms ease,
    visibility 140ms ease,
    transform 180ms var(--ease-out-expo);
  transition-delay: 0ms;
}

.cal-cell-shell.is-hovercard-active > .cal-hovercard--anchored,
.cal-cell-shell:hover > .cal-hovercard--anchored,
.cal-cell-shell:focus-within > .cal-hovercard--anchored {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 700ms;
}

.cal-cell-shell.is-hovercard-suppressed > .cal-hovercard--anchored {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-0.25rem) scale(0.98);
  transition-delay: 0ms;
}

.cal-cell-shell.is-hovercard-disabled > .cal-hovercard--anchored {
  display: none;
}

@media (hover: none) {
  .cal-hovercard--anchored {
    display: none;
  }
}

.cal-hovercard--anchored::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid rgb(var(--color-base-content) / 0.12);
  border-top: 1px solid rgb(var(--color-base-content) / 0.12);
  background: rgb(var(--color-base-100) / 0.98);
}

.cal-hovercard--floating {
  position: fixed;
  left: var(--cal-hovercard-left, 50vw);
  top: var(--cal-hovercard-top, 50vh);
  transform: translate(-50%, 0);
  transform-origin: top center;
  pointer-events: none;
  z-index: 80;
  transition: none;
}

.cal-hovercard--floating.is-preview-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 140ms ease;
}

/* Hovercard content */
.cal-hovercard__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--color-base-content) / 0.42);
}

.cal-hovercard__date {
  margin-top: 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}

.cal-hovercard__source {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgb(var(--color-primary));
}

.cal-hovercard__times {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.cal-hovercard__detail {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgb(var(--color-base-content) / 0.62);
}

.cal-hovercard__badge {
  margin-top: 0.6rem;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 9999px;
  padding: 0.18rem 0.48rem;
  background: rgb(var(--color-secondary) / 0.1);
  color: rgb(var(--color-base-content) / 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-hovercard__hint {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: rgb(var(--color-base-content) / 0.45);
}

/* =====================================================================
   Hebrew locale: selective RTL inside a stable global shell.
   The global document shell remains LTR (the root is not flipped), while
   Hebrew main content is RTL. Authenticated navigation follows the resolved
   locale direction: English is LTR; Hebrew is RTL and physically mirrors the
   navbar start/end regions. Its dropdown panels use logical inline anchoring
   so they follow that direction. Unrelated fixed-orientation chrome — the
   public/guest header layout, pagination, maps, and neutral icons — remains
   non-mirrored unless a scoped rule below opts in; the Hebrew footer and
   directional .rtl-mirror icons are explicit exceptions. Text blocks use
   unicode-bidi: plaintext so each block follows its own first strong
   character (untranslated English fallbacks stay readable LTR).
   ===================================================================== */

/* Profile floating fields preserve their established in-control labels while
   anchoring those labels and the select affordance to the correct RTL edges. */
html[lang="he"] [data-testid="settings-basic-info-card"] .field-floating__label {
  left: auto;
  inset-inline-start: 1rem;
}

html[lang="he"] [data-testid="settings-basic-info-card"] .field-floating__control--select {
  padding-right: 1rem;
  padding-left: 2.75rem;
  background-position: left 1rem center;
}

html[lang="he"] body {
  font-family: "Rubik", "Inter", system-ui, sans-serif;
  line-height: 1.6; /* Hebrew reads better with extra leading */
}

html[lang="he"] :is(h1, h2, h3, h4, h5, h6, .card-title, .font-heading, .font-light-heading) {
  font-family: "Rubik", "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0; /* Latin tracking tweaks look broken on Hebrew glyphs */
}

/* The content area (<main dir="rtl">) supplies layout direction; text blocks
   additionally use plaintext bidi so untranslated English fallbacks keep
   reading left-to-right. No text-align here: intentional alignment utilities
   (.text-center on hero compositions, etc.) must keep working. */
html[lang="he"] main :is(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd, blockquote, figcaption):not([dir="ltr"] *),
html[lang="he"] .he-content :is(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd, blockquote, figcaption):not([dir="ltr"] *),
html[lang="he"] main .prose li:not([dir="ltr"] *) {
  unicode-bidi: plaintext;
}

html[lang="he"] .rtl-text {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Escape hatch for mixed-name rows (feed author lines): keep the block RTL
   even when the content starts with a Latin name, so names and timestamps
   stay anchored to the same edge instead of scattering. */
html[lang="he"] main .bidi-isolate :is(p, span, h3, h4) {
  unicode-bidi: isolate;
  text-align: start;
}

/* Per-element auto direction: Latin content renders LTR/left, Hebrew RTL/right
   (used for user-generated names/notes inside RTL table cells and lists). */
html[lang="he"] main .bidi-auto {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Hebrew landing hero: the gradient line must stay on one line (owner QA).
   Slightly tighter sizing keeps it inside the column on all breakpoints. */
html[lang="he"] .landing-hero-title {
  font-size: clamp(2.1rem, 6.5vw, 4rem);
}
html[lang="he"] .landing-hero-line2 {
  white-space: nowrap;
}

/* Landing hero photo overlay (#754): navy fade tuned so the cream headline
   holds >=4.5:1 over the darkest composite in the text zone; heaviest at the
   top (headline), lighter mid-frame so the photo reads. The final stop is
   fully opaque page navy (#061B30 = the body background) so the photo
   dissolves into the next section instead of ending in a hard crop line
   (owner QA 2026-07-15). Do not bind stops to DaisyUI vars: --b2 is not
   defined on this page and an unresolvable var() kills the whole gradient. */
.landing-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(6, 27, 48, 0.88) 0%,
    rgba(6, 27, 48, 0.62) 45%,
    rgba(6, 27, 48, 0.85) 80%,
    rgb(6, 27, 48) 100%
  );
}

/* Hero headline line 2 gradient (#754): a hero-local, contrast-audited
   variant of the brand gradient. The global .text-gradient-trail starts at
   flame #F95738, whose mid luminance cannot hold WCAG contrast over the
   dusk-sky photos; this cream-to-trail-yellow ramp is audited against every
   shipped hero asset by scripts/hero_contrast_audit.py (large-text 3:1
   gate). Keep these stops in sync with GRADIENT_STOPS_RGB there — the
   contrast unit test parses this block. The landing page serves anonymous
   visitors only (authenticated users are redirected), so dark theme is the
   only rendered theme. */
.landing-hero-gradient {
  background: linear-gradient(135deg, #FAF0CA 0%, #F4D35E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Error-page spot images (#756): the joke lives in the picture, so it sits
   above the numeral at a fixed 16:9 display size and never grows past the
   card. Real alt text (not decorative) is set per template. */
.error-spot {
  display: block;
  width: 100%;
  max-width: 384px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1rem;
  margin: 0 auto 1.5rem auto;
}

/* Onboarding domain tiles (#758): 96px photo thumbnails on picker rows.
   Decorative (aria-hidden, empty alt); rows keep the domain-cb toggle. */
.domain-tile {
  width: 96px;
  height: 96px;
  border-radius: 1rem;
  object-fit: cover;
}

/* Event-detail banner band (#757): per-domain photo strip atop the header
   card. Right side fades to card navy so status badges/RSVP stay readable
   (literal rgba per the public-page gradient rule), and the bottom fades
   into the card background. Variant chosen server-side: hash(event.id)%2. */
.event-banner-band {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.event-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-banner-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(9, 40, 67, 0.9) 0%, rgba(9, 40, 67, 0) 40%),
    linear-gradient(180deg, rgba(9, 40, 67, 0) 55%, rgba(9, 40, 67, 0.85) 100%);
}
@media (max-width: 767px) {
  .event-banner-band {
    height: 140px;
  }
}

/* Auth split-panel photo (#755): decorative portrait behind the panel copy.
   The photo fills the panel with a slight top bias (subjects sit in the
   upper two-thirds of the 900x1300 masters and must survive the panel's
   in-browser vertical cover-crop, 498-640px tall at 427px wide). The tint
   layer re-applies the page's own gradient class at reduced opacity so each
   page keeps its hue over the photo, and the fade deepens page-navy toward
   the vertical center-bottom where the white title/subtitle sit. Fade stops
   are literal rgba (same rule as .landing-hero-overlay: never bind gradient
   stops to DaisyUI vars on public pages). The composite is gated at >=4.5:1
   true-minimum for the copy by tests/e2e/test_auth_split_panel.py. */
.auth-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.auth-hero-tint {
  opacity: 0.45;
}
.auth-hero-fade {
  background: linear-gradient(
    180deg,
    rgba(6, 27, 48, 0.55) 0%,
    rgba(6, 27, 48, 0.38) 30%,
    rgba(6, 27, 48, 0.62) 55%,
    rgba(6, 27, 48, 0.80) 100%
  );
}

/* Mirrored Hebrew footer: keep the edge language picker on-screen. */
html[lang="he"] footer[dir="rtl"] .language-toggle.dropdown-end > .dropdown-content {
  right: auto;
  left: 0;
}

html[lang="he"] main table :is(th, td):not([dir="ltr"] *) {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* Free-text entry is RTL; machine formats (email, password, URL, phone,
   numbers, dates) always stay LTR. */
html[lang="he"] :is(main, .he-content) :is(textarea, select, input:not([type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="checkbox"], [type="radio"], [type="range"], [type="file"])):not([dir="ltr"] *) {
  direction: rtl;
  text-align: right;
}

html[lang="he"] :is(main, .he-content) :is(input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"]) {
  direction: ltr;
  text-align: left;
}

/* Opt-out/opt-in helpers for template use. .ltr-data pins identifiers,
   coordinates, URLs, and code-like values regardless of locale. */
.ltr-data {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Language toggle (footer / auth pages) */
.language-toggle__option {
  background: none;
  border: 0;
  padding: 0.125rem 0.25rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  font-size: 0.875rem;
}

.language-toggle__option:hover {
  opacity: 1;
}

.language-toggle__option.is-active {
  opacity: 1;
  font-weight: 700;
}

/* Hebrew activities cards: ghost-button text lines up with the card text edge */
html[lang="he"] .activity-card-actions > .btn:first-child {
  margin-inline-start: -0.75rem;
}

/* Hebrew: directional icons mirror (arrows/chevrons imply progression, which
   runs right-to-left in Hebrew). Checkmarks, clocks, refresh and other
   neutral icons intentionally keep their orientation. */
html[lang="he"] .rtl-mirror {
  transform: scaleX(-1);
}

/* Hebrew: action buttons keep their leading icon on the LEFT of the label
   (product decision), while the label text itself stays proper RTL. */
html[lang="he"] :is(main, footer, .modal-box) .btn:not([dir="ltr"] *) {
  flex-direction: row-reverse;
}

/* Circular progress stays clockwise in RTL (time is not mirrored). */
html[lang="he"] .radial-progress {
  direction: ltr;
}

/* Language picker: JS owns the effective pointer/click/keyboard state so
   aria-expanded stays truthful. Override DaisyUI's generic hover and
   focus-within opening for this component; .dropdown-open (set by app.js) is
   the only visual open trigger. */
.language-toggle.dropdown > .dropdown-content,
.language-toggle.dropdown > .dropdown-content * {
    /* JS owns open/close atomically; a lingering transition would let the
       transition origin (which outranks even inline !important) report stale
       visibility mid-flight and block focusing the options. */
    transition: none;
}
.language-toggle.dropdown:not(.dropdown-open) > .dropdown-content {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.language-toggle.dropdown.dropdown-hover-suppressed:hover > .dropdown-content {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.language-toggle.dropdown.dropdown-open > .dropdown-content {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* Hover bridge: the menu sits a small gap from the trigger (the `mt-2` offset
   when it opens downward, a few px when it opens up). That gap is a dead zone
   for :hover, so moving the cursor from the trigger down onto an option
   dropped the hover and the menu vanished before it could be clicked.
   Transparent strips above and below the menu span the gap (with a little
   overlap onto the trigger) so hovering stays continuous from the trigger to
   the options. The strips are only hit-testable while the menu is visible, so
   they never open it on their own. The panel and its bridge stay below the
   explicitly stacked trigger, so bridge overlap can never steal a click from
   the button in either dropdown direction. */
.language-toggle.dropdown > [data-language-picker-trigger] {
    position: relative;
    z-index: 101;
}
.language-toggle.dropdown > .dropdown-content {
    z-index: 100;
}
.language-toggle.dropdown > .dropdown-content::before,
.language-toggle.dropdown > .dropdown-content::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 0.75rem;
}
.language-toggle.dropdown > .dropdown-content::before { top: -0.75rem; }
.language-toggle.dropdown > .dropdown-content::after { bottom: -0.75rem; }

/* ────────────────────────────────────
   SPOT ILLUSTRATIONS (issue #760)
   Empty-state + dashboard match-status vector art. The SVGs are inlined
   as Jinja partials (app/templates/components/spots/) precisely so these
   classes and the theme tokens cascade into the artwork: currentColor
   carries the contextual ink tint, and the rgb(var(--color-*)) accents
   re-resolve automatically in dark and light themes. SVGs referenced via
   <img> can do neither, so keep these inline.
   ──────────────────────────────────── */
.spot-art {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}
.spot-ink {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spot-fill {
  fill: currentColor;
}
.spot-flame { fill: rgb(var(--color-primary)); }
.spot-ember { fill: rgb(var(--color-secondary)); }
.spot-sun { fill: rgb(var(--color-accent)); }
.spot-line-flame,
.spot-line-ember,
.spot-line-sun {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spot-line-flame { stroke: rgb(var(--color-primary)); }
.spot-line-ember { stroke: rgb(var(--color-secondary)); }
.spot-line-sun { stroke: rgb(var(--color-accent)); }
/* Shared frame for empty-state placements: centers the art, sets its
   footprint, and provides the muted ink tint the strokes inherit. */
.spot-empty-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  color: rgb(var(--color-base-content) / 0.62);
}