@font-face {
  font-family: 'Baloo 2';
  src: url("/fonts/Baloo2-VariableFont_wght.woff2") format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url("/fonts/NunitoSans-VariableFont.woff2") format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url("/fonts/NunitoSans-Italic-VariableFont.woff2") format('woff2');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Coolvetica — headlines & brand wordmark (full Latin glyph set) ── */
@font-face {
  font-family: 'Coolvetica';
  src: url("/fonts/coolvetica.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coolvetica';
  src: url("/fonts/coolvetica-italic.woff2") format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Polymath — body text.
   NOTE: this is the free "Demo" cut, which only ships A–Z a–z 0–9 comma period
   and space. unicode-range is pinned to exactly those codepoints so every other
   character (apostrophes, hyphens, colons, ampersands, dashes, ·, etc.) falls
   through to the next font in the stack instead of rendering as tofu. Swap in a
   full licensed Polymath to get complete punctuation. ── */
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-regular.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-medium.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-semibold.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-bold.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-black.woff2") format('woff2');
  font-weight: 800 900; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-italic.woff2") format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
  font-family: 'Polymath';
  src: url("/fonts/polymath-bolditalic.woff2") format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
  unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Accessibility: Global focus-visible styles */
@layer base {
  :root {
    --gl-brand-green: #B8F300;
    --gl-brand-blue: #A3C2EE;
    --gl-brand-purple: #D974F1;
    --gl-brand-red: #FE434B;
    --gl-brand-yellow: #ECF200;
    --gl-brand-black: #000000;
    --gl-brand-ink: #111111;
    --gl-brand-grey-800: #3A3A3A;
    --gl-brand-grey-600: #7F7F7F;
    --gl-brand-grey-400: #CCCCCC;
    --gl-brand-grey-300: #E7E7E7;
    --gl-brand-grey-200: #F8F8F8;
    --gl-brand-yellow-50: #FEFFE5;
    --gl-brand-yellow-100: #FCFFC2;
    --gl-brand-yellow-200: #F8FF85;
    --gl-brand-yellow-300: #F2FF3D;
    --gl-brand-yellow-400: #ECF200;
    --gl-brand-yellow-500: #DCE200;
    --gl-brand-yellow-600: #ADB300;
    --gl-brand-yellow-700: #7F8500;
    --gl-brand-yellow-800: #5D6100;
    --gl-brand-yellow-900: #3E4100;
    --gl-brand-yellow-950: #222400;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-none ring-2 ring-brand-red ring-offset-2;
  }

  body {
    font-family: Polymath, Inter, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  }
}

@layer components {
  .brand-wordmark {
    font-family: Coolvetica, "Arial Black", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.86;
  }

  .gl-app-shell {
    background: var(--gl-brand-grey-200);
    color: var(--gl-brand-black);
  }

  .gl-app-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--gl-brand-grey-300);
  }

  .gl-app-card {
    background: #ffffff;
    border: 2px solid var(--gl-brand-black);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  }

  .gl-app-panel {
    background: #ffffff;
    border: 1px solid var(--gl-brand-grey-300);
    border-radius: 8px;
  }

  .gl-app-badge {
    @apply inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-black uppercase;
    background: var(--gl-brand-yellow);
    border: 2px solid var(--gl-brand-black);
    color: var(--gl-brand-black);
  }

  .gl-app-dot {
    @apply inline-block h-2 w-2 flex-none rounded-full;
    background: var(--gl-brand-red);
  }

  .gl-app-badge .gl-app-dot {
    background: var(--gl-brand-black);
  }

  .gl-app-dot--yellow {
    background: var(--gl-brand-yellow);
  }

  .gl-app-dot--green {
    background: var(--gl-brand-green);
  }

  .gl-app-dot--blue {
    background: var(--gl-brand-blue);
  }

  .gl-app-dot--purple {
    background: var(--gl-brand-purple);
  }

  .gl-app-dot--red {
    background: var(--gl-brand-red);
  }

  .gl-app-primary-button {
    @apply inline-flex items-center justify-center rounded-full px-5 py-3 text-base font-black transition-colors;
    background: var(--gl-brand-yellow);
    color: var(--gl-brand-black);
  }

  .gl-app-primary-button:hover {
    background: var(--gl-brand-yellow-300);
  }

  .gl-app-ghost-button {
    @apply inline-flex items-center justify-center rounded-full px-4 py-2 text-base font-extrabold transition-colors;
    color: var(--gl-brand-grey-800);
  }

  .gl-app-ghost-button:hover {
    color: var(--gl-brand-black);
    background: var(--gl-brand-grey-200);
  }

  .brand-pill {
    @apply inline-flex items-center justify-center rounded-full bg-brand-red text-white font-sans font-extrabold transition-colors;
  }

  .brand-pill:hover {
    background-color: #e73942;
  }

  .brand-outline-pill {
    @apply inline-flex items-center justify-center rounded-full border-2 border-black bg-transparent text-black font-sans font-extrabold transition-colors;
  }

  .brand-outline-pill:hover {
    @apply bg-black text-white;
  }
}

/* Cropper.js styles */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

/* Solid background to prevent checkerboard transparency pattern */
.cropper-wrap-box {
  background-color: var(--gl-brand-ink) !important;
}

.cropper-canvas {
  background-color: var(--gl-brand-ink) !important;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  /* Darker overlay to clearly show excluded area */
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 3px solid var(--gl-brand-yellow);
  outline-offset: -3px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: rgba(255, 255, 255, 0.5);
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: var(--gl-brand-yellow);
  height: 10px;
  opacity: 0.75;
  width: 10px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

.cropper-point.point-se::before {
  background-color: var(--gl-brand-yellow);
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  /* Solid dark background instead of checkerboard */
  background-color: var(--gl-brand-ink);
  background-image: none !important;
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* Circular avatar crop overlay */
.avatar-crop-circle .cropper-view-box,
.avatar-crop-circle .cropper-face {
  border-radius: 50%;
}

@layer components {
  /* Planning mode card selection */
  .planning-mode-card {
    @apply relative block;
  }

  .planning-mode-card-inner {
    @apply relative flex flex-row items-center gap-3 px-4 py-3 rounded-xl border-2 border-stone-200 bg-white transition-all;
  }

  .planning-mode-card:hover .planning-mode-card-inner {
    @apply border-stone-300 bg-stone-50;
  }

  .planning-mode-input:checked + .planning-mode-card-inner {
    @apply border-amber-500 bg-amber-50;
  }

  .planning-mode-check {
    @apply absolute -top-1.5 -left-1.5 w-5 h-5 rounded-full bg-amber-500 flex items-center justify-center opacity-0 transition-opacity;
  }

  .planning-mode-input:checked + .planning-mode-card-inner .planning-mode-check {
    @apply opacity-100;
  }

  .planning-mode-emoji {
    @apply text-xl flex-shrink-0;
  }

  .planning-mode-label {
    @apply text-sm text-stone-700;
  }

  /* Split-flap display animation */
  .split-flap-container {
    display: inline-block;
    vertical-align: baseline;
  }

  .split-flap-word {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 0.6em;
    gap: 0.08em;
    perspective: 1000px;
    /* Reserve space to prevent layout shift before JS renders */
    /* 10 chars × 0.6em + 9 gaps × 0.08em ≈ 6.7em width */
    min-width: 6.7em;
    min-height: 1.2em;
  }

  .split-flap-char {
    position: relative;
    display: block;
    width: 100%;
    height: 1.2em;
    transform-style: preserve-3d;
    font: inherit;
    text-transform: lowercase;
  }

  /* All four flaps share these base styles */
  .split-flap-char .top,
  .split-flap-char .bottom,
  .split-flap-char .top-next,
  .split-flap-char .bottom-next {
    border-radius: 4px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    background: linear-gradient(180deg, #1c1917 0%, #292524 100%);
    backface-visibility: hidden;
  }

  /* Top halves clipped */
  .split-flap-char .top,
  .split-flap-char .top-next {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }

  /* Bottom halves clipped */
  .split-flap-char .bottom,
  .split-flap-char .bottom-next {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  }

  /* Divider line */
  .split-flap-char .divider {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #44403c;
    z-index: 10;
    transform: translateY(-50%);
  }

  /* Split-flap sound toggle button */
  .split-flap-sound-toggle {
    @apply p-1 text-stone-300 hover:text-stone-500 transition-colors rounded;
    /* Subtle appearance, doesn't distract from the animation */
  }

  .split-flap-sound-toggle:hover {
    @apply bg-stone-100;
  }

  /* When unmuted, show a subtle indicator */
  .split-flap-sound-toggle[data-active="true"] {
    @apply text-amber-500;
  }

  /* Toast animations */
  .animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
  }

  .animate-fade-out {
    animation: fadeOut 0.2s ease-out forwards;
  }
}

@keyframes bounce-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.animate-bounce-x {
  animation: bounce-x 1.5s ease-in-out infinite;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Suggestion map custom pins */
.suggestion-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: default;
}

.suggestion-pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--gl-brand-yellow);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Private home: house emoji dot instead of plain amber circle */
.suggestion-pin--home {
  /* Shift down so the dot center (12px from top) sits on the coordinate.
     Default AdvancedMarkerElement anchor = bottom-center of content. */
  transform: translateY(calc(100% - 12px));
}

.suggestion-pin-home-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--gl-brand-yellow-50);
  border: 2px solid var(--gl-brand-yellow);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

/* Label chip — inline row with optional count pill */
.suggestion-pin-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  max-width: 150px;
  line-height: 1.3;
}

.suggestion-pin-chip--home {
  background: var(--gl-brand-yellow-50);
  border: 1px solid var(--gl-brand-yellow-200);
}

.suggestion-pin-chip-text {
  font-size: 11px;
  font-weight: 600;
  color: #1c1917; /* stone-900 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline interest count pill inside the label chip */
.suggestion-pin-chip-count {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--gl-brand-yellow);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Cluster bubble — groups nearby pins at zoomed-out levels */
.suggestion-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--gl-brand-yellow);
  color: var(--gl-brand-black);
  font-size: 14px;
  font-weight: 700;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* === Wizard dark mode (when cover image is present) === */

/* Flip stone text to light on dark blurred background */
.wizard-dark .text-stone-400 { color: rgba(255, 255, 255, 0.45) !important; }
.wizard-dark .text-stone-500 { color: rgba(255, 255, 255, 0.6) !important; }
.wizard-dark .text-stone-600 { color: rgba(255, 255, 255, 0.7) !important; }
.wizard-dark .text-stone-700 { color: rgba(255, 255, 255, 0.8) !important; }
.wizard-dark .text-stone-900 { color: rgba(255, 255, 255, 0.95) !important; }

/* Instruction boxes: dark glass instead of light gray */
.wizard-dark .bg-stone-50 {
  background-color: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(8px);
}

/* Borders: subtle white instead of stone */
.wizard-dark .border-stone-200 { border-color: rgba(255, 255, 255, 0.12) !important; }
.wizard-dark .border-stone-300 { border-color: rgba(255, 255, 255, 0.18) !important; }

/* Scroll hint gradient: dark instead of white */
.wizard-dark .bg-gradient-to-l.from-white { --tw-gradient-from: rgba(0, 0, 0, 0.3) !important; }
.wizard-dark .via-white\/90 { --tw-gradient-via: rgba(0, 0, 0, 0.2) !important; }

/* Range slider track */
.wizard-dark .bg-stone-200[type="range"] { background-color: rgba(255, 255, 255, 0.2) !important; }

/* Restore original colors inside white/light card containers and phone mockup */
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .text-stone-400 { color: #a8a29e !important; }
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .text-stone-500 { color: #78716c !important; }
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .text-stone-600 { color: #57534e !important; }
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .text-stone-700 { color: #44403c !important; }
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .text-stone-900 { color: #1c1917 !important; }
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .border-stone-200 { border-color: #e7e5e4 !important; }
.wizard-dark :is([class*="bg-white"], [class*="bg-amber-50"], .share-preview-phone) .border-stone-300 { border-color: #d6d3d1 !important; }
.wizard-dark .share-preview-phone .bg-stone-50 { background-color: #fafaf9 !important; backdrop-filter: none; }

/* Also restore text/border on elements that have both bg-white AND text-stone-* */
.wizard-dark [class*="bg-white"].text-stone-400 { color: #a8a29e !important; }
.wizard-dark [class*="bg-white"].text-stone-500 { color: #78716c !important; }
.wizard-dark [class*="bg-white"].text-stone-600 { color: #57534e !important; }
.wizard-dark [class*="bg-white"].text-stone-700 { color: #44403c !important; }
.wizard-dark [class*="bg-white"].text-stone-900 { color: #1c1917 !important; }
.wizard-dark [class*="bg-white"].border-stone-200,
.wizard-dark [class*="bg-amber-50"].border-stone-200 { border-color: #e7e5e4 !important; }
.wizard-dark [class*="bg-amber-50"].text-stone-400 { color: #a8a29e !important; }
.wizard-dark [class*="bg-amber-50"].text-stone-500 { color: #78716c !important; }
.wizard-dark [class*="bg-amber-50"].text-stone-600 { color: #57534e !important; }
.wizard-dark [class*="bg-amber-50"].text-stone-700 { color: #44403c !important; }
.wizard-dark [class*="bg-amber-50"].text-stone-900 { color: #1c1917 !important; }

/* ─── Dark mode (v2 scope) ─── */
@layer base {
  :root {
    --gl-page-bg: var(--gl-brand-black);
    --gl-surface: var(--gl-brand-ink);
    --gl-surface-elevated: var(--gl-brand-grey-800);
    --gl-border: var(--gl-brand-grey-800);
    --gl-border-emphasis: var(--gl-brand-grey-600);
    --gl-text-primary: #ffffff;
    --gl-text-secondary: var(--gl-brand-grey-400);
    --gl-text-muted: var(--gl-brand-grey-600);
  }
}

/* Slide panel: ensure base text color is light for the dark panel background.
   Tailwind classes still override via .gl-dark rules, but any element without
   an explicit color class inherits a readable light color instead of black. */
#slide-panel [data-role="panel-content"] {
  color: var(--gl-text-primary);
}

/* Light-mode island: .gl-light inside .gl-dark resets Tailwind utilities to their
   original light-mode values. Used to wrap calendar grids and other shared partials
   that need to render light inside dark panels/drawers. The gl-dark selector + gl-light
   gives 2 class specificity; we add an extra class to beat .gl-dark's 2-class rules. */
.gl-dark .gl-light.gl-light { color-scheme: light; }
.gl-dark .gl-light .bg-white { background-color: #ffffff !important; }
.gl-dark .gl-light .bg-stone-50 { background-color: #fafaf9 !important; }
.gl-dark .gl-light .bg-stone-100 { background-color: #f5f5f4 !important; }
.gl-dark .gl-light .bg-stone-200 { background-color: #e7e5e4 !important; }
.gl-dark .gl-light .text-stone-900 { color: #1c1917 !important; }
.gl-dark .gl-light .text-stone-800 { color: #292524 !important; }
.gl-dark .gl-light .text-stone-700 { color: #44403c !important; }
.gl-dark .gl-light .text-stone-600 { color: #57534e !important; }
.gl-dark .gl-light .text-stone-500 { color: #78716c !important; }
.gl-dark .gl-light .text-stone-400 { color: #a8a29e !important; }
.gl-dark .gl-light .border-stone-200 { border-color: #e7e5e4 !important; }
.gl-dark .gl-light .border-stone-300 { border-color: #d6d3d1 !important; }
.gl-dark .gl-light .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; }
.gl-dark .gl-light .bg-emerald-100 { background-color: #d1fae5 !important; }
.gl-dark .gl-light .bg-amber-100 { background-color: var(--gl-brand-yellow-100) !important; }
.gl-dark .gl-light .text-emerald-800 { color: #065f46 !important; }
.gl-dark .gl-light .text-emerald-700 { color: #047857 !important; }
.gl-dark .gl-light .text-amber-800 { color: var(--gl-brand-yellow-800) !important; }
.gl-dark .gl-light .text-amber-600 { color: var(--gl-brand-yellow-600) !important; }
.gl-dark .gl-light .text-green-600 { color: #16a34a !important; }
.gl-dark .gl-light .text-blue-800 { color: #1e40af !important; }
.gl-dark .gl-light .bg-blue-100 { background-color: #dbeafe !important; }
.gl-dark .gl-light .bg-emerald-50 { background-color: #ecfdf5 !important; }
.gl-dark .gl-light .border-amber-300 { border-color: var(--gl-brand-yellow-300) !important; }
.gl-dark .gl-light .border-amber-200 { border-color: var(--gl-brand-yellow-200) !important; }
.gl-dark .gl-light .border-green-300 { border-color: #86efac !important; }
.gl-dark .gl-light .text-red-500 { color: #ef4444 !important; }
.gl-dark .gl-light .text-amber-700 { color: var(--gl-brand-yellow-700) !important; }
.gl-dark .gl-light .text-stone-300 { color: #d6d3d1 !important; }
.gl-dark .gl-light .bg-green-300 { background-color: #86efac !important; }
.gl-dark .gl-light .border-green-500 { border-color: #22c55e !important; }
.gl-dark .gl-light .text-green-900 { color: #14532d !important; }
.gl-dark .gl-light .border-stone-100 { border-color: #f5f5f4 !important; }
.gl-dark .gl-light .bg-amber-50 { background-color: var(--gl-brand-yellow-50) !important; }
.gl-dark .gl-light .border-amber-500 { border-color: var(--gl-brand-yellow) !important; }
.gl-dark .gl-light .hover\:bg-stone-50:hover { background-color: #fafaf9 !important; }
.gl-dark .gl-light .hover\:bg-stone-200:hover { background-color: #e7e5e4 !important; }

/* Reset form inputs inside gl-light islands back to light mode */
.gl-dark .gl-light input,
.gl-dark .gl-light select,
.gl-dark .gl-light textarea {
  background-color: #ffffff;
  border-color: #e7e5e4;
  color: #1c1917;
  color-scheme: light;
}
.gl-dark .gl-light input::placeholder,
.gl-dark .gl-light textarea::placeholder {
  color: #a8a29e;
}

/* Scoped overrides: shared partials rendered inside .gl-dark get dark treatment
   automatically without modifying their Tailwind classes. */
.gl-dark .bg-white { background-color: var(--gl-surface) !important; }
.gl-dark .bg-stone-50 { background-color: var(--gl-page-bg) !important; }
.gl-dark .bg-stone-100 { background-color: var(--gl-surface) !important; }

.gl-dark .text-stone-900 { color: var(--gl-text-primary) !important; }
.gl-dark .text-stone-800 { color: var(--gl-text-primary) !important; }
.gl-dark .text-stone-700 { color: #e7e5e4 !important; }
.gl-dark .text-stone-600 { color: var(--gl-text-secondary) !important; }
.gl-dark .text-stone-500 { color: var(--gl-text-secondary) !important; }
.gl-dark .text-stone-400 { color: var(--gl-text-muted) !important; }

.gl-dark .border-stone-200 { border-color: var(--gl-border) !important; }
.gl-dark .border-stone-300 { border-color: var(--gl-border-emphasis) !important; }
.gl-dark .border-stone-100 { border-color: var(--gl-border) !important; }
.gl-dark .divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gl-border) !important; }

.gl-dark .hover\:bg-stone-50:hover { background-color: var(--gl-surface-elevated) !important; }
.gl-dark .hover\:bg-stone-100:hover { background-color: var(--gl-surface-elevated) !important; }
.gl-dark .hover\:bg-white:hover { background-color: var(--gl-surface) !important; }

.gl-dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3) !important; }

/* Form inputs inside v2 */
.gl-dark input,
.gl-dark select,
.gl-dark textarea {
  background-color: var(--gl-surface);
  border-color: var(--gl-border-emphasis);
  color: var(--gl-text-primary);
  color-scheme: dark;
}
.gl-dark select option {
  background-color: var(--gl-surface);
  color: var(--gl-text-primary);
}
.gl-dark input::placeholder,
.gl-dark textarea::placeholder {
  color: var(--gl-text-muted);
}

/* Focus ring offset for dark backgrounds */
.gl-dark a:focus-visible,
.gl-dark button:focus-visible,
.gl-dark [role="button"]:focus-visible,
.gl-dark input:focus-visible,
.gl-dark select:focus-visible,
.gl-dark textarea:focus-visible {
  --tw-ring-offset-color: #1c1917;
}

/* Status color dark variants */
.gl-dark .bg-green-50 { background-color: #022c22 !important; }
.gl-dark .bg-yellow-50 { background-color: rgba(236, 242, 0, 0.12) !important; }
.gl-dark .bg-red-50 { background-color: #450a0a !important; }
.gl-dark .bg-amber-50 { background-color: rgba(236, 242, 0, 0.12) !important; }

.gl-dark .border-green-200 { border-color: #065f46 !important; }
.gl-dark .border-yellow-200 { border-color: var(--gl-brand-yellow-800) !important; }
.gl-dark .border-red-200 { border-color: #991b1b !important; }
.gl-dark .border-amber-200 { border-color: var(--gl-brand-yellow-800) !important; }
.gl-dark .border-amber-300 { border-color: var(--gl-brand-yellow-700) !important; }

.gl-dark .text-green-700 { color: #34d399 !important; }
.gl-dark .text-green-800 { color: #34d399 !important; }
.gl-dark .text-green-600 { color: #34d399 !important; }
.gl-dark .text-yellow-700 { color: var(--gl-brand-yellow) !important; }
.gl-dark .text-yellow-600 { color: var(--gl-brand-yellow) !important; }
.gl-dark .text-yellow-800 { color: var(--gl-brand-yellow) !important; }
.gl-dark .text-red-700 { color: #f87171 !important; }
.gl-dark .text-amber-700 { color: var(--gl-brand-yellow) !important; }
.gl-dark .text-amber-800 { color: var(--gl-brand-yellow) !important; }
.gl-dark .text-amber-600 { color: var(--gl-brand-yellow) !important; }

.gl-dark .bg-green-100 { background-color: #064e3b !important; }
.gl-dark .bg-amber-100 { background-color: rgba(236, 242, 0, 0.18) !important; }
.gl-dark .bg-red-100 { background-color: #7f1d1d !important; }
.gl-dark .bg-blue-50 { background-color: rgba(30,58,138,0.3) !important; }
.gl-dark .border-blue-200 { border-color: #1e40af !important; }
.gl-dark .text-blue-800 { color: #93c5fd !important; }

.gl-dark .bg-emerald-50 { background-color: #022c22 !important; }
.gl-dark .bg-teal-50 { background-color: #042f2e !important; }
.gl-dark .border-emerald-200 { border-color: #065f46 !important; }
.gl-dark .bg-emerald-100 { background-color: #064e3b !important; }
.gl-dark .text-emerald-700 { color: #34d399 !important; }
.gl-dark .text-emerald-600 { color: #34d399 !important; }

.gl-dark .bg-indigo-100 { background-color: rgba(49,46,129,0.5) !important; }
.gl-dark .text-indigo-600 { color: #a5b4fc !important; }
.gl-dark .hover\:border-indigo-400:hover { border-color: #818cf8 !important; }
.gl-dark .hover\:bg-indigo-50:hover { background-color: rgba(49,46,129,0.3) !important; }

/* Additional status text colors */
.gl-dark .text-blue-700 { color: #93c5fd !important; }
.gl-dark .text-emerald-800 { color: #34d399 !important; }

/* Additional status backgrounds */
.gl-dark .bg-blue-100 { background-color: rgba(30,58,138,0.5) !important; }
.gl-dark .bg-stone-200 { background-color: var(--gl-surface-elevated) !important; }

/* Hover variants for channel/action buttons */
.gl-dark .hover\:bg-emerald-100:hover { background-color: #064e3b !important; }
.gl-dark .hover\:bg-green-100:hover { background-color: #064e3b !important; }
.gl-dark .hover\:bg-blue-100:hover { background-color: rgba(30,58,138,0.5) !important; }
.gl-dark .hover\:bg-amber-50:hover { background-color: rgba(236, 242, 0, 0.12) !important; }
.gl-dark .hover\:border-amber-400:hover { border-color: var(--gl-brand-yellow) !important; }
.gl-dark .hover\:bg-amber-200:hover { background-color: rgba(236, 242, 0, 0.18) !important; }
.gl-dark .hover\:text-stone-900:hover { color: var(--gl-text-primary) !important; }
.gl-dark .hover\:border-stone-300:hover { border-color: var(--gl-border-emphasis) !important; }
.gl-dark .hover\:text-amber-700:hover { color: var(--gl-brand-yellow) !important; }

/* Curation card overrides */
.gl-dark .border-green-300 { border-color: #065f46 !important; }
.gl-dark .bg-gradient-to-br.from-stone-100 { --tw-gradient-from: var(--gl-surface) !important; }
.gl-dark .bg-gradient-to-br.to-stone-200 { --tw-gradient-to: var(--gl-surface-elevated) !important; }
.gl-dark .hover\:bg-red-50:hover { background-color: #450a0a !important; }
.gl-dark .hover\:text-red-600:hover { color: #f87171 !important; }
.gl-dark .hover\:text-red-500:hover { color: #f87171 !important; }
.gl-dark .hover\:text-green-600:hover { color: #34d399 !important; }
.gl-dark .hover\:text-stone-600:hover { color: var(--gl-text-secondary) !important; }
.gl-dark .text-stone-300 { color: #d6d3d1 !important; }
.gl-dark .bg-stone-400 { background-color: var(--gl-text-muted) !important; }
.gl-dark .text-stone-400 { color: var(--gl-text-muted) !important; }

/* RSVP button hovers */
.gl-dark .hover\:border-green-300:hover { border-color: #065f46 !important; }
.gl-dark .hover\:bg-green-50:hover { background-color: #022c22 !important; }
.gl-dark .hover\:border-yellow-300:hover { border-color: var(--gl-brand-yellow-700) !important; }
.gl-dark .hover\:bg-yellow-50:hover { background-color: rgba(236, 242, 0, 0.12) !important; }
.gl-dark .hover\:border-red-300:hover { border-color: #991b1b !important; }
.gl-dark .hover\:bg-red-50:hover { background-color: #450a0a !important; }

/* ═══════════════════════════════════════════
   Lantern flicker effect — header logo
   ═══════════════════════════════════════════ */

.lantern-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flame {
  position: absolute;
  width: 14px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -3px;
  margin-left: -7px;
  background-color: #fee3ac;
  box-shadow:
    0 0 8px 4px rgba(254, 227, 172, 0.3),
    0 0 20px 10px rgba(245, 158, 11, 0.12);
  animation: flame 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.glow-ambient {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 158, 11, 0.18) 0%,
    rgba(245, 158, 11, 0.05) 45%,
    transparent 70%
  );
  animation: lantern-ambient-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

.glow-cast {
  position: absolute;
  top: -8px;
  left: -24px;
  width: 200px;
  height: 70px;
  background: radial-gradient(
    ellipse at 44px 32px,
    rgba(245, 158, 11, 0.06) 0%,
    transparent 65%
  );
  animation: lantern-ambient-pulse 4s ease-in-out infinite 0.2s;
  pointer-events: none;
}

.lantern-icon {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.45));
  animation: lantern-bob 5s ease-in-out infinite;
}

.lantern-icon img {
  display: block;
}

@keyframes flame {
  0%   { height: 6px; opacity: 0.9;  box-shadow: 0 0 6px 3px rgba(254,227,172,0.35), 0 0 16px 8px rgba(245,158,11,0.12); transform: rotate(0deg) scaleX(1); }
  5%   { height: 4px; opacity: 0.7;  box-shadow: 0 0 4px 2px rgba(254,227,172,0.25), 0 0 12px 6px rgba(245,158,11,0.08); transform: rotate(-1deg) scaleX(0.9); }
  10%  { height: 7px; opacity: 0.85; box-shadow: 0 0 7px 3.5px rgba(254,225,167,0.3), 0 0 18px 9px rgba(245,158,11,0.1); transform: rotate(0.5deg) scaleX(1.05); }
  18%  { height: 4px; opacity: 0.65; box-shadow: 0 0 3px 1.5px rgba(254,222,157,0.2), 0 0 10px 5px rgba(245,158,11,0.06); transform: rotate(-0.5deg) scaleX(0.85); }
  23%  { height: 8px; opacity: 0.95; box-shadow: 0 0 8px 4px rgba(254,227,172,0.38), 0 0 22px 11px rgba(245,158,11,0.14); transform: rotate(1deg) scaleX(1.1); }
  30%  { height: 5px; opacity: 0.75; box-shadow: 0 0 5px 2.5px rgba(254,224,162,0.28), 0 0 14px 7px rgba(245,158,11,0.09); transform: rotate(-1.5deg) scaleX(0.92); }
  38%  { height: 7px; opacity: 0.88; box-shadow: 0 0 7px 3.5px rgba(254,219,147,0.32), 0 0 19px 9.5px rgba(245,158,11,0.11); transform: rotate(0.8deg) scaleX(1.02); }
  45%  { height: 3px; opacity: 0.6;  box-shadow: 0 0 3px 1.5px rgba(254,217,142,0.18), 0 0 8px 4px rgba(245,158,11,0.05); transform: rotate(-0.3deg) scaleX(0.8); }
  50%  { height: 6px; opacity: 0.82; box-shadow: 0 0 6px 3px rgba(254,222,157,0.3), 0 0 16px 8px rgba(245,158,11,0.1); transform: rotate(1.2deg) scaleX(1); }
  58%  { height: 4px; opacity: 0.72; box-shadow: 0 0 4px 2px rgba(254,225,167,0.22), 0 0 11px 5.5px rgba(245,158,11,0.07); transform: rotate(-0.8deg) scaleX(0.88); }
  65%  { height: 8px; opacity: 0.92; box-shadow: 0 0 8px 4px rgba(254,227,172,0.36), 0 0 20px 10px rgba(245,158,11,0.13); transform: rotate(0.3deg) scaleX(1.08); }
  72%  { height: 4px; opacity: 0.62; box-shadow: 0 0 3px 1.5px rgba(254,219,147,0.2), 0 0 9px 4.5px rgba(245,158,11,0.06); transform: rotate(-1.2deg) scaleX(0.85); }
  78%  { height: 7px; opacity: 0.87; box-shadow: 0 0 7px 3.5px rgba(254,224,162,0.33), 0 0 18px 9px rgba(245,158,11,0.11); transform: rotate(0.6deg) scaleX(1.04); }
  85%  { height: 5px; opacity: 0.78; box-shadow: 0 0 5px 2.5px rgba(254,222,157,0.26), 0 0 13px 6.5px rgba(245,158,11,0.08); transform: rotate(-0.5deg) scaleX(0.95); }
  92%  { height: 6px; opacity: 0.83; box-shadow: 0 0 6px 3px rgba(254,225,167,0.3), 0 0 15px 7.5px rgba(245,158,11,0.1); transform: rotate(0.8deg) scaleX(1); }
  100% { height: 6px; opacity: 0.9;  box-shadow: 0 0 6px 3px rgba(254,227,172,0.35), 0 0 16px 8px rgba(245,158,11,0.12); transform: rotate(0deg) scaleX(1); }
}

@keyframes lantern-ambient-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  18%      { opacity: 0.6;  transform: scale(0.96); }
  23%      { opacity: 0.95; transform: scale(1.03); }
  45%      { opacity: 0.5;  transform: scale(0.94); }
  65%      { opacity: 0.92; transform: scale(1.02); }
  72%      { opacity: 0.55; transform: scale(0.95); }
  85%      { opacity: 0.88; transform: scale(1.01); }
}

@keyframes lantern-bob {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-1px); }
  70%      { transform: translateY(0.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .flame,
  .glow-ambient,
  .glow-cast,
  .lantern-icon {
    animation: none;
  }
  .flame {
    opacity: 0.85;
    height: 6px;
  }
}

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* ─────────────────────────────────────────────────────────
   Traditions (v2) — signature motion
   One restrained celebratory beat at join/RSVP (confetti);
   the "next" dot pulses; timeline rows reveal on scroll.
   ───────────────────────────────────────────────────────── */
@keyframes glNextPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}

.gl-pulse {
  animation: glNextPulse 2.4s ease-in-out infinite;
}

/* The "seed" dot on the empty dashboard — a warmer, glowing pulse */
@keyframes glSeedGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5), 0 0 24px 4px rgba(245, 158, 11, 0.25); }
  50%      { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0), 0 0 30px 8px rgba(245, 158, 11, 0.15); }
}

.gl-seed-glow {
  animation: glSeedGlow 2.8s ease-in-out infinite;
}

/* Marketing card hover lift */
.gl-lift {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.gl-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.3);
}

/* Timeline scroll-reveal: rows start hidden, fade up when revealed */
.gl-timeline-row {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.gl-timeline-row.gl-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gl-pulse { animation: none; }
  .gl-seed-glow { animation: none; }
  .gl-timeline-row { opacity: 1; transform: none; transition: none; }
}