/* DayHop V2 — main.css
   Design concept: a trail map for your day. Dusk-park palette (deep teal sky,
   warm sand ground, coral sunset/World Cup energy). Cards read like trail
   placards stamped with a stop number; a dotted path runs behind the feed.
*/

:root {
  --ink: #102A2E;
  --ink-soft: #2C4A4E;
  --paper: #FBF7EE;
  --paper-dim: #F2ECDC;
  --coral: #FF6B4A;
  --coral-dark: #E1502F;
  --marigold: #FFB627;
  --moss: #3F6F5C;
  --line: rgba(16, 42, 46, 0.14);
  --line-strong: rgba(16, 42, 46, 0.28);
  --shadow: 0 12px 28px rgba(16, 42, 46, 0.14);
  --shadow-soft: 0 4px 14px rgba(16, 42, 46, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 42, 46, 0.22);
  --radius: 18px;     /* cards, panels, prompt box */
  --radius-md: 12px;  /* buttons, inputs, rows */
  --radius-sm: 10px;  /* small controls */
  --radius-pill: 999px;
  /* Glass pass: squared-off buttons + frosted surfaces. Buttons share one
     radius so the whole control language reads as a family. */
  --radius-btn: 8px;
  --glass: rgba(253, 250, 243, 0.6);
  --glass-strong: rgba(253, 250, 243, 0.84);
  --glass-ink: rgba(16, 42, 46, 0.78);
  --glass-border: rgba(255, 255, 255, 0.65);
  --blur: saturate(1.5) blur(16px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle settle for transitions */
  /* DayHop V2 type system: Satoshi (headings/brand, via Fontshare),
     Inter (body/UI), Space Grotesk (badges, stamps, accent labels). */
  --display: 'Satoshi', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'Space Grotesk', 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over rules that set display
   (e.g. .modal { display: flex }) — otherwise closed overlays still render
   and swallow every click on the page. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
button, .filter-chip {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
}
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- Hero — "Calm Intelligence" ---------- */
/* Light, spacious, low-overwhelm: a soft warm-to-cool gradient with the
   skyline as a faint whisper behind it, ink text, and lots of air. */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  padding: 0 0 72px;
  overflow: hidden;
  background: linear-gradient(180deg, #FDFAF3 0%, var(--paper) 40%, #EBF1F1 100%);
}

/* Bright golden-hour Toronto skyline over the lake — warm and optimistic,
   with a light overlay that keeps the ink text highly readable (strongest
   where the headline and subtitle sit). */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(253,250,243,0.9) 0%, rgba(251,247,238,0.68) 48%, rgba(251,247,238,0.9) 100%),
    url("https://images.unsplash.com/photo-1517935706615-2717063c2225?auto=format&fit=crop&w=2100&q=80")
      center 22% / cover no-repeat;
  /* Pinned to the viewport, not the hero box: the skyline holds still while
     hero-content scrolls over it. .hero's own overflow:hidden clips this to
     the hero's bounds, so once that box scrolls past — right around where
     "Exploring ___" takes over — the fixed photo is simply covered by the
     opaque results feed and normal scrolling resumes. */
  background-attachment: fixed;
}

.hero-trail {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(16,42,46,0.1) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.4) 40%, transparent 90%);
  pointer-events: none;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 0;
  max-width: 1040px;
  margin: 0 auto;
}

.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.pro-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--coral);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: super;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  padding: 5px 10px;
  border-radius: var(--radius-btn);
}

.auth-btn {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease, transform 0.15s var(--ease);
}
.auth-btn:hover { background: var(--glass-strong); }
.auth-btn:active { transform: scale(0.96); }

/* Topbar admin entry — an <a> wearing the auth-btn look. */
.admin-link { text-decoration: none; display: inline-flex; align-items: center; }

/* The Z-scan terminal: eyes sweep logo → top-right, so the money button
   sits there and breathes just enough to register without shouting. */
.go-pro-btn {
  background: var(--coral);
  border: 1px solid var(--coral);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-btn);
  transition: filter 0.15s ease, transform 0.15s var(--ease);
  animation: goProGlow 5s ease-in-out infinite;
}
.go-pro-btn:hover { filter: brightness(1.08); animation: none; }
.go-pro-btn:active { transform: scale(0.96); }

@keyframes goProGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0); }
  50% { box-shadow: 0 4px 18px 2px rgba(255, 107, 74, 0.38); }
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-email {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signout-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease;
}
.signout-btn:hover { background: rgba(255,255,255,0.7); }

.hero-content {
  position: relative;
  max-width: 720px;
  margin: 76px auto 0;
  padding: 0 24px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line-strong);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* "in one sentence." — quieter, lighter, spaced out: the calm counterpoint
   to the confident first line. */
.hero h1 span {
  display: block;
  margin-top: 12px;
  font-size: clamp(19px, 2.6vw, 28px);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.14em;
  color: var(--coral-dark);
}

.subtitle {
  margin: 22px auto 0;
  max-width: 480px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Frosted glass over the skyline photo — the hero's single fixation point.
   Solid-ish fallback color keeps it readable where blur is unsupported. */
.prompt-box {
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* The Where field is step one — framed in coral so nobody searches
   location-less, and pulsing until a location is explicitly chosen. */
.prompt-location {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 2px solid var(--coral);
  border-radius: var(--radius-md);
  background: rgba(255,107,74,0.07);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.prompt-location-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-dark);
  white-space: nowrap;
}

.prompt-location--unset { animation: wherePulse 2.4s ease-in-out infinite; }
@keyframes wherePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,74,0.35); }
  55% { box-shadow: 0 0 0 7px rgba(255,107,74,0); }
}

.prompt-location--error {
  border-color: var(--coral-dark);
  background: rgba(255,107,74,0.16);
  animation: whereShake 0.3s ease;
}
@keyframes whereShake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* "Date aware" picker — optional, so it stays a quiet collapsed chip until
   tapped. Opening it defaults the date to today; the user can then pick a
   different day or switch to a range. Closing it back down (or Clear) drops
   the filter entirely, back to "any day" — today's implicit default. */
.prompt-date { margin-bottom: 4px; }

.prompt-date-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.prompt-date-toggle:hover { background: var(--line); }
.prompt-date-toggle[aria-expanded="true"] {
  background: rgba(255, 182, 39, 0.18);
  border-color: var(--marigold);
  color: var(--ink);
}
.prompt-date-icon { font-size: 13px; }
.prompt-date-chevron {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.prompt-date-toggle[aria-expanded="true"] .prompt-date-chevron { transform: rotate(180deg); }

.date-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.5);
}

.date-kind-toggle { display: flex; gap: 14px; }
.date-kind-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}
.date-kind-option input { accent-color: var(--coral); cursor: pointer; }

.date-inputs { display: flex; align-items: center; gap: 8px; }
.date-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
}
.date-input:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.date-range-sep { color: var(--ink-soft); font-weight: 600; }

.date-clear-btn { font-size: 12.5px; margin-left: auto; }

@media (max-width: 480px) {
  .date-fields { flex-direction: column; align-items: flex-start; }
  .date-clear-btn { margin-left: 0; }
}

/* Location autocomplete (combobox) */
.location-combo { position: relative; flex: 1; }

.location-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  padding: 2px 22px 2px 0;
  /* chevron affordance so it still reads as a picker */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232C4A4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.location-input::placeholder { color: #8A9594; font-weight: 600; }
.location-input:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.location-listbox {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  right: -8px;
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transform-origin: top;
  animation: popIn 0.16s var(--ease);
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.location-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease;
}

.location-option:hover,
.location-option.is-active {
  background: var(--paper-dim);
}

.location-option[aria-selected="true"] { color: var(--coral-dark); }

.location-option .opt-region {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.8;
}

.location-option mark {
  background: rgba(255,182,39,0.4);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.location-option--empty {
  padding: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: default;
}

.prompt-box textarea {
  border: none;
  resize: none;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  outline: none;
  min-height: 56px;
  line-height: 1.5;
}

.prompt-box textarea::placeholder { color: #8A9594; }

/* Primary CTA: bottom-right of the prompt box — the terminal fixation of the
   hero's Z-scan (read headline → read placeholder → land here). A resting
   glow marks it as "the" action; a sheen sweep rewards arrival on hover. */
.primary-btn {
  position: relative;
  align-self: flex-end;
  overflow: hidden;
  background: var(--coral);
  color: var(--paper);
  border: none;
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(255, 107, 74, 0.28);
  transition: transform 0.18s var(--ease), background 0.15s ease, box-shadow 0.18s var(--ease);
}

.primary-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}
.primary-btn:hover::after { left: 130%; }

.primary-btn:hover { background: var(--coral-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(225,80,47,0.4); }
.primary-btn:active { transform: translateY(1px) scale(0.985); box-shadow: none; }
.primary-btn:disabled { opacity: 0.7; cursor: default; transform: none; box-shadow: none; }
.primary-btn:disabled::after { display: none; }

.btn-spinner { display: none; }
.primary-btn.is-loading .btn-label { visibility: hidden; }
.primary-btn.is-loading .btn-spinner {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(251,247,238,0.4);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
}

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

.prompt-hint {
  min-height: 18px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--coral-dark);
}

.weather-strip {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* ---------- Advisories & closures ---------- */
/* One banner, highest severity first; extras collapse behind "+N more".
   Severity is the visual language: amber = adjust plans, red = do not go. */
.advisory-strip {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  border: 1px solid transparent;
}
.advisory-strip--caution {
  background: rgba(255, 182, 39, 0.12);
  border-color: rgba(255, 182, 39, 0.35);
  color: var(--ink);
}
.advisory-strip--warning {
  background: rgba(217, 119, 6, 0.14);
  border-color: rgba(217, 119, 6, 0.45);
  color: var(--ink);
}
.advisory-strip--danger {
  background: rgba(190, 42, 30, 0.14);
  border-color: rgba(190, 42, 30, 0.55);
  color: var(--ink);
}
.advisory-strip--unavailable {
  background: rgba(120, 120, 120, 0.08);
  border-color: rgba(120, 120, 120, 0.2);
  color: var(--ink-soft);
  font-size: 12px;
}
.advisory-source {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  opacity: 0.75;
}
.advisory-more {
  margin-top: 6px;
  margin-left: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  opacity: 0.85;
}
.advisory-details { margin-top: 8px; }
.advisory-details p { margin: 6px 0 0; }

/* ---------- Filters ---------- */
.app { max-width: 1040px; margin: 0 auto; padding: 0 24px 100px; }

.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 22px 0 4px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

/* The negative tuck above only fits the zero state (nothing rendered above the
   chips). Once the results header or collections are showing, the tuck drags
   the chips over their text — cancel it. Wins over the mobile override too. */
#results-header:not([hidden]) ~ .filters,
#collections:not([hidden]) ~ .filters {
  margin-top: 0;
}

.filter-chip {
  flex: 0 0 auto;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  padding: 9px 16px;
  border-radius: var(--radius-btn);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  transition: all 0.15s ease;
}

.filter-chip:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.filter-chip:active { transform: translateY(0) scale(0.97); }

.filter-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- Results header + curated collections ---------- */
.results-header { margin-top: 30px; }
.results-header h2 { font-size: 26px; }
.results-sub {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.collections {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-top: 16px;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.collections::-webkit-scrollbar { display: none; }

.collection-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 10px 16px 10px 10px;
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform 0.15s var(--ease), box-shadow 0.15s ease, border-color 0.15s ease;
}
.collection-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--coral); }
.collection-card:active { transform: translateY(0) scale(0.98); }

.collection-thumbs {
  display: flex;
  flex-shrink: 0;
}
.collection-thumbs img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid white;
  margin-left: -12px;
}
.collection-thumbs img:first-child { margin-left: 0; }

.collection-text { display: flex; flex-direction: column; gap: 2px; }
.collection-text strong { font-size: 14px; color: var(--ink); }
.collection-text span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Discovery feed ---------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 28px 0 4px;
}

.section-header h2 { font-size: 24px; }

.count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-feed {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 20px;
  padding-left: 28px;
}

.card-feed::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 0;
  border-left: 2px dotted var(--line-strong);
}

.idea-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 14px;
  touch-action: pan-y;
  user-select: none;
  display: grid;
  gap: 12px;
}

.idea-card::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--coral);
}

.idea-card.swipe-keep { box-shadow: 0 0 0 2px var(--moss), var(--shadow); }
.idea-card.swipe-skip { box-shadow: 0 0 0 2px var(--coral-dark), var(--shadow); }

/* Hover lift via shadow only — the entrance animation's fill state owns transform. */
.idea-card { transition: box-shadow 0.2s var(--ease); }
.idea-card:hover { box-shadow: var(--shadow); }

/* Staggered entrance — each card eases up in feed order (--stop-index).
   Applied as a class and removed on animationend so the animation's fill state
   never holds `transform` and block the swipe/dismiss gestures. */
.idea-card.is-entering {
  animation: cardIn 0.45s var(--ease) both;
  animation-delay: calc(var(--stop-index, 0) * 55ms);
}

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

/* ---------- Loading skeletons ---------- */
.idea-card--skeleton { pointer-events: none; gap: 12px; }
.idea-card--skeleton::before { border-color: var(--line-strong); }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--paper-dim);
  border-radius: 6px;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.3s infinite;
}

@keyframes shimmer { to { transform: translateX(100%); } }

.skeleton-photo {
  margin: -18px -18px 0;
  height: 140px;
  border-radius: 17px 17px 0 0;
}

.skeleton-body { display: grid; gap: 10px; }
.skeleton-line { height: 12px; }
.skeleton-chip { height: 18px; width: 92px; border-radius: var(--radius-pill); }
.skeleton-title { height: 18px; width: 70%; }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ---------- Progressive loader ---------- */
/* Progress bar + staged status line shown above the skeletons (and inside
   the plan/replan panels as the --compact variant) while a request runs. */
.progress-loader {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-soft);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.progress-loader--done { opacity: 0; transform: translateY(-4px); }
.progress-loader--compact { padding: 10px 12px; margin: 0 0 10px; box-shadow: none; }

.progress-loader-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.progress-loader-stage {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.progress-loader--compact .progress-loader-stage { font-size: 0.88rem; }
.progress-loader-pct {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.progress-loader-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--paper-dim);
  overflow: hidden;
}
.progress-loader-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--marigold), var(--coral));
  transition: width 0.24s var(--ease);
}
.progress-loader-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Inspiring category photo banner at the top of each card */
.card-photo {
  position: relative;
  margin: -18px -18px 0;
  height: 210px;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
  background: var(--paper-dim);
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.idea-card:hover .card-photo img { transform: scale(1.05); }

.card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,42,46,0.35) 0%, transparent 28%, transparent 52%, rgba(16,42,46,0.5) 100%);
  pointer-events: none;
}

.card-stamp {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(16,42,46,0.5);
  padding: 3px 8px;
  border-radius: 999px;
}

.card-category {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-dark);
  background: rgba(255,107,74,0.1);
  padding: 4px 9px;
  border-radius: 999px;
  width: fit-content;
}

/* Category chip overlaid on the card photo */
.card-photo .card-category {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  color: var(--paper);
  background: var(--coral);
  box-shadow: 0 2px 8px rgba(16,42,46,0.3);
}

/* Badge overlaid on the photo for the "stretch pick" wow cards. */
.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
}

.card-badge--wow {
  color: var(--ink);
  background: var(--marigold);
  box-shadow: 0 2px 8px rgba(16,42,46,0.3);
}

/* Top 1-2 direct answers to the prompt — the "start here" crown. */
.card-badge--best {
  color: var(--paper);
  background: var(--coral-dark);
  box-shadow: 0 2px 8px rgba(16,42,46,0.3);
}

/* One-line "you asked for X — did you know…" hook under the why. */
.wow-line {
  font-size: 13.5px;
  font-style: italic;
  color: var(--coral-dark);
  background: rgba(255,182,39,0.14);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 8px;
  line-height: 1.45;
}

/* Section headers inside the feed grid ("Right on target", "Beyond…"). */
.feed-section-header {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink);
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 2px dotted var(--line-strong);
}

.feed-section-header:first-child { margin-top: 0; }

.idea-card h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
}

.why {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  /* One strong line, two max — faster scanning (full text in Details). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Grouped "Location · Time · Cost" reading with dot separators. */
.card-meta span + span::before {
  content: '·';
  margin: 0 7px;
  color: var(--line-strong);
}

.card-chips {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.card-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border-radius: 999px;
  padding: 3px 9px;
}

.card-chip--free { background: rgba(63,111,92,0.14); color: var(--moss); font-weight: 600; }
.card-chip--date { background: rgba(255,182,39,0.16); color: var(--ink); }
.card-chip--advisory { background: rgba(217,119,6,0.14); color: #8a4b04; font-weight: 600; }
.card-chip--near { background: rgba(255,107,74,0.12); color: var(--coral-dark); font-weight: 600; }

/* Location dropdown action rows (use-my-location / free-text search). */
.location-option--geo .opt-city { color: var(--coral-dark); font-weight: 500; }
.location-option--search .opt-city { color: var(--ink); font-weight: 500; }

.card-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 2px;
}

/* Card actions read left → right as a gradient of intent: Skip is barely
   there, Details neutral, Build/Add saturated in the bottom-right corner —
   the card's own terminal fixation point, and thumb territory on mobile. */
.card-actions button {
  border: none;
  border-radius: var(--radius-btn);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.15s var(--ease), color 0.15s ease, box-shadow 0.15s ease;
}

.card-actions button:active { transform: scale(0.95); }

.btn-dismiss { background: transparent; color: var(--ink-soft); opacity: 0.75; }
.btn-dismiss:hover { background: var(--paper-dim); color: var(--coral-dark); opacity: 1; }
.btn-detail { background: var(--paper-dim); color: var(--ink-soft); }
.btn-detail:hover { background: #E7DFC9; color: var(--ink); }
.btn-add { background: var(--moss); color: var(--paper); flex: 1; }
.btn-add:hover { background: #335c4c; box-shadow: 0 6px 16px rgba(63, 111, 92, 0.35); transform: translateY(-1px); }
/* Browse-feed cards only: shortlist this and jump straight into building */
.btn-build-around { background: var(--marigold); color: var(--ink); white-space: nowrap; }
.btn-build-around:hover { filter: brightness(1.06); }

/* Booking / map link surfaced on grounded (real-venue) cards */
.card-booking-link {
  display: block;
  text-align: center;
  background: var(--marigold);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 10px;
  border-radius: 10px;
}
/* In the feed card the link sits directly under the meta/chip rows — give it
   the same breathing room they have (detail sheet & plan stops space their
   links with their own flex gap instead). */
.card-body > .card-booking-link {
  margin-top: 10px;
}
.card-booking-link--secondary {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

/* ---------- Empty / no-results states ---------- */
.empty-state {
  text-align: center;
  padding: 48px 20px 56px;
  color: var(--ink-soft);
}

.empty-mark {
  font-family: var(--mono);
  letter-spacing: 0.2em;
  color: var(--line-strong);
  margin-bottom: 14px;
  font-size: 13px;
}

.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { max-width: 380px; margin: 0 auto; line-height: 1.55; font-size: 14.5px; }

/* Onboarding — tappable example prompts */
.example-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.example-prompts-label {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.example-chip {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-btn);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s ease;
}

.example-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--coral); }
.example-chip:active { transform: translateY(0) scale(0.97); }

/* Shared ghost button (no-results reset, etc.) */
.ghost-btn {
  margin-top: 20px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.15s ease, transform 0.15s var(--ease);
}
.ghost-btn:hover { background: var(--paper-dim); }
.ghost-btn:active { transform: scale(0.97); }

/* ---------- Floating shortlist button ---------- */
/* Bottom-right = the thumb's home on mobile and the natural end of every
   scroll gesture: the bridge from browsing to building lives exactly there.
   Frosted ink so the feed glows through as you scroll under it. */
.floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--glass-ink);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 15px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
  z-index: 30;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.floating-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.floating-btn:active { transform: translateY(0) scale(0.97); }

.shortlist-count {
  background: var(--coral);
  color: white;
  font-family: var(--mono);
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ---------- Panels (shortlist / day plan / detail) ---------- */
.panel {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,42,46,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.panel-sheet {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(1.5) blur(24px);
  backdrop-filter: saturate(1.5) blur(24px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -16px 0 40px rgba(16,42,46,0.18);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 22px;
  overflow-y: auto;
}

.panel--open .panel-backdrop { opacity: 1; }
.panel--open .panel-sheet { transform: translateX(0); }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-header h2 { font-size: 21px; }

.panel-close {
  background: var(--paper-dim);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--ink-soft);
}

.shortlist-items { display: grid; gap: 10px; flex: 1; }

.shortlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.shortlist-row strong { display: block; font-size: 14.5px; }
.shortlist-row-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.shortlist-row-text { flex: 1; min-width: 0; }

.shortlist-summary {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: -6px 0 12px;
}

.shortlist-order { display: flex; flex-direction: column; gap: 2px; margin-right: 10px; }
.btn-move {
  background: var(--paper-dim);
  border: none;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1;
  padding: 4px 7px;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-move:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.btn-move:disabled { opacity: 0.35; cursor: default; }

.btn-remove {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 4px 8px;
}

.shortlist-empty { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; padding: 20px 0; }

.panel-footer { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.panel-footer .primary-btn { width: 100%; }
.surprise-btn { width: 100%; margin-top: 0; }

/* Day plan */
.plan-start { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
.plan-stops { display: grid; gap: 0; position: relative; padding-left: 30px; }
.plan-stops::before {
  content: '';
  position: absolute;
  left: 11px; top: 6px; bottom: 6px;
  border-left: 2px dotted var(--line-strong);
}

.plan-stop { position: relative; padding-bottom: 24px; }
.plan-stop-marker {
  position: absolute;
  left: -30px; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

.plan-stop-time {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--coral-dark);
}

.plan-stop h3 { font-size: 16.5px; margin-top: 4px; }
.plan-transition { font-size: 13px; color: var(--ink-soft); margin-top: 6px; font-style: italic; }

.plan-notes {
  margin-top: 6px;
  background: rgba(255,182,39,0.14);
  border: 1px solid rgba(255,182,39,0.4);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink);
}

/* Advisory trust line at the top of a plan: what was checked, what was
   found. The "all clear" state is a feature, not filler. */
.plan-advisory {
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink);
}
.plan-advisory--warning {
  background: rgba(217,119,6,0.14);
  border: 1px solid rgba(217,119,6,0.45);
}
.plan-advisory--danger {
  background: rgba(190,42,30,0.14);
  border: 1px solid rgba(190,42,30,0.55);
}
.plan-advisory--clear {
  background: rgba(63,111,92,0.1);
  border: 1px solid rgba(63,111,92,0.3);
  color: var(--moss, #3f6f5c);
  font-size: 12.5px;
}

/* Full-guide enrichments inside each plan stop */
.plan-stop-photo {
  margin: 8px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.plan-stop-photo img { width: 100%; max-height: 150px; object-fit: cover; display: block; }
.plan-stop-why { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
.plan-stop-facts { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.plan-stop-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- "Been there" quest layer ---------- */
.plan-done-btn {
  float: right;
  margin: 0 0 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s var(--ease);
}
.plan-done-btn:hover { border-color: var(--moss); color: var(--moss); }
.plan-done-btn:active { transform: scale(0.94); }
.plan-done-btn .plan-done-tick { font-weight: 700; }
.plan-done-btn.is-done {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--paper);
}

/* Done stop: photo folds away, the card shrinks and settles into moss —
   the visual "stamp in the passport". */
.plan-stop--done .plan-stop-body {
  background: rgba(63, 111, 92, 0.10);
  border: 1px solid rgba(63, 111, 92, 0.28);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.plan-stop--done .plan-stop-photo {
  max-height: 0;
  margin: 0;
  opacity: 0;
}
.plan-stop-photo {
  max-height: 160px;
  transition: max-height 0.35s var(--ease), opacity 0.3s ease, margin 0.35s var(--ease);
}
.plan-stop--done .plan-stop-why,
.plan-stop--done .plan-stop-links,
.plan-stop--done .plan-transition { display: none; }
.plan-stop--done h3 { color: var(--moss); }
.plan-stop--done .plan-stop-time { color: var(--moss); }
.plan-stop--done .plan-stop-marker { background: var(--moss); }

/* Quest progress: X of N explored + a thin trail-progress bar. */
.plan-quest { margin: 2px 0 16px; }
.plan-quest-line {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.plan-quest--complete .plan-quest-line { color: var(--moss); font-weight: 600; }
.plan-quest-bar {
  margin-top: 6px;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-dim);
  overflow: hidden;
}
.plan-quest-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--moss);
  transition: width 0.4s var(--ease);
}

/* "Still on your list" shelf in My Plans: unvisited places across all
   saved plans. */
.stilltovisit { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.stilltovisit-header { display: flex; align-items: baseline; gap: 10px; }
.stilltovisit-header h3 { font-size: 17px; }
.stilltovisit-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.stilltovisit-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.stilltovisit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line);
}
.stilltovisit-row:last-child { border-bottom: none; }
.stilltovisit-check {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  color: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.stilltovisit-check:hover { border-color: var(--moss); color: var(--moss); }
.stilltovisit-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stilltovisit-text strong { font-size: 14px; color: var(--ink); }
.stilltovisit-text span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stilltovisit-map {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--coral-dark);
  text-decoration: none;
}
.stilltovisit-map:hover { text-decoration: underline; }

/* Export bar at the bottom of the guide panel */
.guide-export {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.guide-export-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.guide-export-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.export-btn {
  background: white;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease, transform 0.15s var(--ease);
}
.export-btn:hover { background: var(--paper-dim); }
.export-btn:active { transform: scale(0.96); }
.export-btn--primary { background: var(--coral); border-color: var(--coral); color: white; }
.export-btn--primary:hover { background: var(--coral-dark); }

/* "Start a new shortlist" (Pro) inside the shortlist panel */
.new-shortlist-btn {
  background: none;
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--radius-btn);
  width: 100%;
  margin-top: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.new-shortlist-btn:hover { background: var(--paper-dim); color: var(--ink); }

/* Detail panel */
.detail-why { font-size: 15px; line-height: 1.6; margin: 14px 0 18px; color: var(--ink-soft); }
.detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.detail-grid dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ink-soft); align-self: center; }
.detail-grid dd { margin: 0; font-weight: 500; }

/* Detail enrichment: photos strip, live status, facts, hours */
.detail-more { margin-top: 18px; }
.detail-more-loading {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  animation: factsPulse 1.6s ease-in-out infinite;
}
@keyframes factsPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.detail-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scroll-snap-type: x mandatory;
}
.detail-gallery img {
  flex: 0 0 auto;
  width: 150px;
  height: 104px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  scroll-snap-align: start;
}

.detail-now { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.detail-open {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.detail-open--yes { color: var(--moss); }
.detail-open--no { color: var(--coral-dark); }
.detail-busy { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

.detail-summary { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 14px; }

.detail-more-title {
  font-family: var(--display);
  font-size: 16px;
  margin: 16px 0 8px;
}
.detail-history { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 8px; }
.detail-facts {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.detail-facts li {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 6px 0 6px 22px;
  position: relative;
  border-bottom: 1px dashed var(--line);
}
.detail-facts li:last-child { border-bottom: none; }
.detail-facts li::before { content: '✨'; position: absolute; left: 0; top: 7px; font-size: 11px; }

.detail-tip {
  font-size: 13.5px;
  line-height: 1.55;
  background: rgba(255, 182, 39, 0.14);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 12px;
}

.detail-hours { margin-bottom: 12px; }
.detail-hours summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.detail-hours ul { list-style: none; margin: 8px 0 0; padding: 0; }
.detail-hours li { font-size: 12.5px; color: var(--ink-soft); padding: 2px 0; }

.detail-rating-depth {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 0;
}

.detail-photo {
  margin: 0 0 14px;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-dim);
}

.detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 12px);
  background: var(--glass-ink);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
  max-width: 90vw;
}

.toast--visible { opacity: 1; transform: translate(-50%, 0); }

.toast-action {
  background: none;
  border: none;
  color: var(--marigold);
  font-weight: 700;
  font-size: 13.5px;
  margin-left: 12px;
  padding: 0;
  text-decoration: underline;
}

/* Shortlist count badge pop when an idea is added/removed. */
@keyframes countPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.count-pulse { animation: countPulse 0.4s var(--ease); }

/* ---------- Auth modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,42,46,0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(1.5) blur(24px);
  backdrop-filter: saturate(1.5) blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 30px 26px 24px;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.modal--open .modal-backdrop { opacity: 1; }
.modal--open .modal-card { opacity: 1; transform: translateY(0) scale(1); }

.modal-close { position: absolute; top: 16px; right: 16px; }

.modal-card h2 { font-size: 24px; margin-bottom: 6px; }
.auth-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 22px; }

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.15s ease, transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.google-btn:hover { background: var(--paper-dim); box-shadow: var(--shadow-soft); }
.google-btn:active { transform: scale(0.98); }
.google-btn .g-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0 100%);
  color: white;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--display);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink-soft);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-field { display: block; margin-bottom: 14px; }
.auth-field span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-family: var(--body);
  font-size: 16px; /* >=16px avoids iOS zoom on focus */
  color: var(--ink);
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,107,74,0.15);
}

.auth-error { min-height: 18px; font-size: 13px; color: var(--coral-dark); margin: 2px 0 10px; }

.auth-submit { width: 100%; align-self: stretch; }

.auth-toggle { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.linklike {
  background: none;
  border: none;
  color: var(--coral-dark);
  font-weight: 500;
  font-size: 13.5px;
  padding: 0 0 0 4px;
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .card-feed { grid-template-columns: 1fr 1fr; }
  .card-feed::before { display: none; }
  .idea-card::before { display: none; }
}

@media (max-width: 480px) {
  .panel-sheet { width: 100%; padding: 20px 18px; }
  .floating-btn span:first-child { display: none; }
}

/* Mobile-first refinements — verified against a 375px viewport. */
@media (max-width: 420px) {
  .app { padding: 0 16px 96px; }
  .topbar { padding: 18px 16px 0; }
  /* Free up the cramped topbar: the location also lives in the hero picker. */
  .topbar-tag { display: none; }
  .user-email { max-width: 110px; }
  .hero-content { padding: 0 16px; margin-top: 40px; }
  .hero { padding-bottom: 56px; }
  .eyebrow { margin-bottom: 18px; font-size: 10px; }
  /* Satoshi runs wider than the old serif — size the headline to fit 375px. */
  .hero h1 { font-size: 31px; }
  .hero h1 span { font-size: 16.5px; letter-spacing: 0.12em; margin-top: 8px; }
  .subtitle { font-size: 15.5px; margin-top: 16px; }

  .prompt-box { margin-top: 26px; padding: 12px; }
  .prompt-box textarea { font-size: 16px; } /* keep >=16px so iOS doesn't zoom on focus */

  .filters { margin-top: -30px; padding-left: 16px; margin-left: -16px; margin-right: -16px; }
  .filters::after { content: ''; flex: 0 0 8px; } /* trailing scroll gutter */

  .section-header { margin-top: 24px; }
  .section-header h2 { font-size: 21px; }

  /* On a single column the trail rail + stop dots read well; keep them tight. */
  .card-feed { padding-left: 24px; }
  .idea-card { padding: 16px 16px 12px; }
  .idea-card::before { left: -24px; }
  .card-photo { margin: -16px -16px 0; height: 180px; }

  .card-actions { flex-wrap: wrap; }
  .btn-add { flex: 1 0 100%; order: -1; } /* primary action full-width on top */
  .btn-build-around { flex: 1; }

  .example-chip { font-size: 13px; padding: 9px 14px; }
  .floating-btn { bottom: 16px; right: 16px; padding: 13px 16px; }
}

/* =====================================================
   Freemium surfaces: My Plans, plan editing, smart
   re-planning, trip-length selector, upgrade modal
   ===================================================== */

/* ---------- PRO chip (gated-control hint) ---------- */
.pro-chip {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--coral);
  color: white;
  border-radius: var(--radius-pill);
  padding: 2px 6px;
  vertical-align: super;
  margin-left: 2px;
}

/* ---------- Trip length selector (shortlist panel) ---------- */
.day-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 2px;
  border-top: 1px dashed var(--line);
  margin-top: 12px;
}
.day-selector-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 2px;
}
.day-choice {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 6px 13px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.day-choice:hover { border-color: var(--coral); }
.day-choice.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- Plan panel toolbar ---------- */
.plan-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.plan-tool-btn { font-size: 13px; padding: 8px 14px; }
.plan-tool-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- Re-plan change summary ---------- */
.change-summary {
  background: rgba(255, 182, 39, 0.14);
  border: 1px solid rgba(255, 182, 39, 0.45);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.change-summary-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.change-summary ul { margin: 0; padding-left: 18px; }
.change-summary li { margin: 3px 0; }

/* ---------- Multi-day + edited plan stops ---------- */
.plan-day-header {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.plan-day-header:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.plan-stop--changed { outline: 1.5px solid rgba(255, 107, 74, 0.5); outline-offset: 2px; border-radius: var(--radius-md); }
.plan-changed-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--coral-dark);
  margin-bottom: 2px;
}
.plan-stop-note {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}

/* ---------- Edit mode controls ---------- */
.plan-edit-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
}
.plan-time-input,
.plan-note-input {
  display: block;
  width: 100%;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin: 4px 0;
}
.plan-time-input { max-width: 220px; font-family: var(--mono); font-size: 12.5px; }
.plan-note-input { resize: vertical; min-height: 34px; }
.plan-time-input:focus,
.plan-note-input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }

/* ---------- Smart re-planning bar ---------- */
.replan-bar {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper-dim);
  border-radius: var(--radius);
}
.replan-bar--busy { opacity: 0.7; pointer-events: none; }
.replan-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.replan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.replan-chip {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 7px 13px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.replan-chip:hover { border-color: var(--coral); color: var(--coral-dark); }
.replan-form { display: flex; gap: 8px; }
.replan-form input {
  flex: 1;
  font-family: var(--body);
  font-size: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 9px 15px;
  background: white;
  color: var(--ink);
}
.replan-form input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }
.replan-go { padding: 9px 18px; font-size: 14px; }

/* ---------- My Plans ---------- */
.my-plans-btn { white-space: nowrap; }
.myplans-list { display: flex; flex-direction: column; gap: 10px; }
.myplans-loading { color: var(--ink-soft); font-size: 14px; padding: 12px 0; }
.myplans-footnote {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.myplans-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.myplans-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  color: var(--ink);
  padding: 0;
}
.myplans-open strong { font-size: 14.5px; }
.myplans-open:hover strong { color: var(--coral-dark); }
.myplans-meta { font-size: 12.5px; color: var(--ink-soft); }
.myplans-actions { display: flex; gap: 6px; }

/* ---------- Upgrade modal ---------- */
.upgrade-card { text-align: center; }
.upgrade-badge { margin-bottom: 10px; display: inline-block; }
.upgrade-card h2 { margin-bottom: 6px; }
.upgrade-context {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.upgrade-compare {
  margin: 0 0 18px;
  text-align: left;
  font-size: 14px;
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.compare-row:last-child { border-bottom: none; }
.compare-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
}
.compare-free {
  color: var(--ink-soft);
  min-width: 52px;
  text-align: right;
}
.compare-pro {
  color: var(--moss);
  font-weight: 600;
  min-width: 72px;
  text-align: right;
}
/* The row matching the gate that opened the modal */
.compare-row.compare-hit {
  background: rgba(255, 182, 39, 0.16); /* marigold wash */
  border-bottom-style: solid;
}
.upgrade-cta { width: 100%; }
.upgrade-reassure {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.upgrade-later {
  display: block;
  margin: 10px auto 0;
  color: var(--ink-soft);
  font-size: 13px;
}

@media (max-width: 640px) {
  .day-selector { flex-wrap: wrap; }
  .replan-form { flex-direction: column; }
  .replan-go { width: 100%; }
  .plan-toolbar { flex-wrap: wrap; }
}

/* ---------- Mode toggle: R&R vs Adventure ---------- */
/* Two equal product personalities. The active mode drives an accent variable
   that tints the hero, the toggle thumb, and the active filter chip — a
   subtle whole-page shift, not a reskin. R&R (default) keeps the calm
   dusk-park teal/moss; Adventure warms everything toward ember. */
body {
  --mode-accent: var(--moss);
  --mode-accent-deep: #2F5646;
  --mode-tint: rgba(63, 111, 92, 0.10);
}
body[data-mode="adventure"] {
  --mode-accent: var(--coral-dark);
  --mode-accent-deep: #B93E22;
  --mode-tint: rgba(225, 80, 47, 0.10);
}

/* The whole page shifts with the mode — background temperature and the hero
   photo itself. R&R keeps the calm golden-hour skyline over cool paper;
   Adventure goes bold: sun-baked apricot page, ember gradient, and a rock
   climber hanging off an overhang above turquoise water (photo verified). */
body { transition: background-color 0.45s ease; }
body[data-mode="adventure"] { background: #F9E0BD; }
body[data-mode="adventure"] .hero {
  background: linear-gradient(180deg, #FDEBD0 0%, #F9E0BD 42%, #F0C793 100%);
}
body[data-mode="adventure"] .hero::before {
  background:
    linear-gradient(180deg, rgba(253,235,208,0.84) 0%, rgba(250,224,189,0.52) 48%, rgba(249,224,189,0.88) 100%),
    url("https://images.unsplash.com/photo-1522163182402-834f871fd851?auto=format&fit=crop&w=2100&q=80")
      center 30% / cover no-repeat;
  background-attachment: fixed;
}

.mode-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(440px, 100%);
  margin: 0 auto 14px;
  padding: 6px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  touch-action: pan-y; /* horizontal swipes belong to the mode gesture */
}

.mode-thumb {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  background: var(--mode-accent);
  border-radius: 11px;
  box-shadow: 0 6px 16px var(--mode-tint), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.35s var(--ease), background 0.35s ease;
}
body[data-mode="adventure"] .mode-thumb { transform: translateX(100%); }

.mode-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 11px;
  color: var(--ink-soft);
  transition: color 0.25s ease;
}
.mode-option[aria-checked="true"] { color: var(--paper); }
.mode-option:focus-visible { outline: 2px solid var(--mode-accent); outline-offset: 2px; }

.mode-icon { font-size: 22px; line-height: 1; }
.mode-text { text-align: left; }
.mode-text strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.mode-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.78;
  margin-top: 1px;
}

.mode-hint {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0 0 26px;
  min-height: 15px;
}

/* Active filter chip picks up the mode accent (was flat ink). */
.filter-chip.active {
  background: var(--mode-accent);
  border-color: var(--mode-accent);
  color: var(--paper);
}

/* Feed dips while the mode switch refetches, so the swap reads as one
   smooth transition instead of a hard repaint. */
.card-feed { transition: opacity 0.25s ease; }
.card-feed.mode-fading { opacity: 0.3; }

@media (max-width: 560px) {
  .mode-option { padding: 11px 8px; gap: 8px; }
  .mode-icon { font-size: 19px; }
  .mode-text strong { font-size: 14px; }
}

/* =====================================================
   Zero-state sample plan teaser, site footer, and the
   upgrade table's "not included" mark
   ===================================================== */

/* "Or see the payoff first" — a finished-plan preview in the empty state */
.sample-plan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
}

.sample-plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: min(420px, 100%);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.sample-plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--coral); }
.sample-plan-card:active { transform: translateY(0) scale(0.99); }

.sample-plan-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.sample-plan-stops {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.sample-plan-stops em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  margin-right: 6px;
}

.sample-plan-cta {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--coral-dark);
}

/* Upgrade table: muted "not included" mark on the Free column */
.compare-no { opacity: 0.45; }

/* Site footer — the trust layer under the app */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-dim);
  text-align: center;
  padding: 32px 20px 96px; /* bottom clears the floating shortlist button */
  color: var(--ink-soft);
}

.footer-about {
  max-width: 480px;
  margin: 0 auto 14px;
  font-size: 13.5px;
  line-height: 1.55;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 13.5px;
  margin-bottom: 12px;
}

.footer-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--coral-dark); text-decoration: underline; }

.footer-fineprint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0;
}

/* =====================================================================
   ELEVATION LAYER — breathtaking pass
   Scroll-driven reveals (native CSS), View Transition mode switching,
   the Best Match hero, the booking return sheet, the plans-left meter,
   weather-tinted chrome, and soft confirmation moments.
   Everything motion-related respects prefers-reduced-motion.
   ===================================================================== */

/* ---------- Registered custom properties (typed CSS) ----------
   @property lets the conic ring angle interpolate as a real animatable
   value instead of snapping. */
@property --bm-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Fluid, balanced type ---------- */
.hero h1, .results-header h2, .empty-state h3 { text-wrap: balance; }
.subtitle, .results-sub, .empty-state p { text-wrap: pretty; }

/* ---------- First impression: the page settles into place ----------
   One soft, sequenced arrival — eyebrow, toggle, headline, prompt box —
   so the first paint feels composed instead of dumped. Runs once. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero .mode-toggle,
  .hero .mode-hint,
  .hero h1,
  .hero .subtitle,
  .hero .prompt-box,
  .hero .prompt-hint {
    animation: heroSettle 0.7s var(--ease) both;
  }
  .hero .mode-toggle { animation-delay: 0.06s; }
  .hero .mode-hint { animation-delay: 0.1s; }
  .hero h1 { animation-delay: 0.14s; }
  .hero .subtitle { animation-delay: 0.2s; }
  .hero .prompt-box { animation-delay: 0.26s; }
  .hero .prompt-hint { animation-delay: 0.3s; }
}
@keyframes heroSettle {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Native scroll-driven animations ----------
   Cards below the fold reveal as they enter the viewport — the animation
   runs on the compositor, costs no JS, and is driven by the card's own
   position (animation-timeline: view()). Cards above the fold keep the
   staggered .is-entering arrival. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .idea-card.scroll-in {
      animation: scrollReveal linear both;
      animation-timeline: view();
      /* Start as the card's top clears the bottom edge; done by ~2/3 in. */
      animation-range: entry 0% entry 68%;
    }

    .feed-section-header {
      animation: scrollReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* The trail line's stop-dots breathe in with their cards. */
    .idea-card.scroll-in::before {
      animation: dotPop linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 80%;
    }

    /* Collections shelf drifts up as it arrives. */
    .collection-card {
      animation: scrollReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }

    /* The hero recedes as you scroll into the feed — content sinks and
       softens slightly, giving the page depth without a single scroll
       listener. */
    .hero-content {
      animation: heroRecede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 480px;
    }
  }
}

/* Independent transform properties (translate/scale), NOT transform: the
   reveal keeps running on the compositor while leaving `transform` free
   for the card's swipe gesture (inline styles) — the two never fight. */
@keyframes scrollReveal {
  from { opacity: 0; translate: 0 26px; scale: 0.985; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes dotPop {
  from { scale: 0; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}

@keyframes heroRecede {
  to { opacity: 0.45; transform: translateY(28px) scale(0.985); }
}

/* ---------- View Transition: mode switching ----------
   document.startViewTransition wraps setMode's repaint; the whole page
   cross-fades while the hero does a gentle vertical pass — R&R and
   Adventure feel like two rooms in one house, not two websites. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero { view-transition-name: dayhop-hero; }
  ::view-transition-old(dayhop-hero) {
    animation: vtHeroOut 0.4s cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(dayhop-hero) {
    animation: vtHeroIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes vtHeroOut {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes vtHeroIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Best Match hero ----------
   The one card that answers "where do I start?" — full-width, photo-led,
   wrapped in a slowly turning conic ring in the mode's accent. Entrance
   is handled by GSAP when available (motion.js), CSS otherwise. */
.best-match {
  position: relative;
  grid-column: 1 / -1;
  margin: 6px 0 10px;
  border-radius: calc(var(--radius) + 4px);
  padding: 3px; /* the ring's visible thickness */
  background:
    conic-gradient(from var(--bm-angle),
      var(--mode-accent) 0%,
      var(--marigold) 28%,
      var(--mode-accent) 55%,
      transparent 75%,
      var(--mode-accent) 100%);
  box-shadow: 0 24px 60px -18px var(--mode-tint), var(--shadow);
}

@media (prefers-reduced-motion: no-preference) {
  .best-match { animation: ringTurn 9s linear infinite; }
  /* CSS-only entrance (used when GSAP isn't available) keeps the ring turning. */
  .best-match.is-entering {
    animation: cardIn 0.55s var(--ease) both, ringTurn 9s linear infinite;
  }
}
@keyframes ringTurn { to { --bm-angle: 360deg; } }

.best-match-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
  gap: 0;
  background: white;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
}

.best-match-photo {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.best-match-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%; /* headroom for the GSAP parallax drift */
  object-fit: cover;
}

.best-match-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(16,42,46,0.05) 40%, rgba(16,42,46,0.42) 100%);
  pointer-events: none;
}

.best-match-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: color-mix(in srgb, var(--mode-accent) 88%, black);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(16,42,46,0.35);
}

.best-match-body {
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.best-match-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mode-accent);
}

.best-match-body h3 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.best-match-body .why {
  display: block;              /* undo the 2-line clamp — this card earns its words */
  -webkit-line-clamp: unset;
  font-size: 15.5px;
  line-height: 1.6;
  overflow: visible;
}

/* The hero body is a flex column with its own gap — the feed cards' stacking
   margins would double up here. */
.best-match-body .why,
.best-match-body .card-meta { margin-top: 0; }

/* Why THIS one: evidence chips — distance, rating, exact words matched. */
.match-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.match-reason {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--mode-accent-deep);
  background: var(--mode-tint);
  border: 1px solid color-mix(in srgb, var(--mode-accent) 30%, transparent);
  padding: 5px 11px;
  border-radius: 999px;
}

.best-match-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.best-match-actions .btn-add { flex: 1; }

.best-match .card-booking-link { margin-top: 0; }

@media (max-width: 720px) {
  .best-match-inner { grid-template-columns: 1fr; }
  .best-match-photo { min-height: 0; height: 220px; }
  .best-match-photo img { height: 118%; }
  .best-match-body { padding: 20px 18px 18px; }
}

/* Match the feed cards' thumb-territory pattern: primary action full-width
   on top once the row gets cramped. */
@media (max-width: 420px) {
  .best-match-actions { flex-wrap: wrap; }
  .best-match-actions .btn-add { flex: 1 0 100%; }
}

/* ---------- Booking return sheet ----------
   A Book click opens a new tab — this tab becomes the "your plan is safe"
   moment: a soft sheet rises with the saved idea and one clear way back
   into planning. A hairline timer shows it will excuse itself. */
.return-sheet {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 24px);
  z-index: 65;
  width: min(520px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 16px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(1.6) blur(24px);
  backdrop-filter: saturate(1.6) blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.return-sheet--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.return-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--paper-dim);
  box-shadow: var(--shadow-soft);
}

.return-text { display: grid; gap: 3px; min-width: 0; }

.return-text strong {
  font-family: var(--display);
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.return-text span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.return-actions { display: flex; align-items: center; gap: 6px; }

.return-continue {
  border: none;
  border-radius: var(--radius-btn);
  background: var(--mode-accent);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s var(--ease);
}
.return-continue:hover { filter: brightness(1.08); }
.return-continue:active { transform: scale(0.96); }

.return-dismiss {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 8px;
  border-radius: 50%;
  line-height: 1;
}
.return-dismiss:hover { background: var(--paper-dim); }

/* Auto-dismiss hairline: runs while the sheet is visible. */
.return-timer {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2.5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.return-timer::after {
  content: '';
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mode-accent);
  transform-origin: left;
  transform: scaleX(0);
}
.return-sheet--visible .return-timer::after {
  animation: returnTimer var(--return-ms, 9000ms) linear forwards;
}
@keyframes returnTimer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 480px) {
  .return-sheet { grid-template-columns: 48px 1fr; }
  .return-thumb { width: 48px; height: 48px; }
  .return-actions { grid-column: 1 / -1; justify-content: stretch; }
  .return-continue { flex: 1; }
}

/* ---------- Plans-left meter ----------
   Honest scarcity, gently: three dots under the prompt box, lit while a
   free plan remains today. Appears only when billing is live and the
   caller is on the free tier. */
.plans-left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plans-left-dots { display: inline-flex; gap: 5px; }

.plans-left-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mode-accent);
  transition: background 0.4s ease, transform 0.4s var(--ease);
}
.plans-left-dot--spent {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transform: scale(0.85);
}

.plans-left .linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--coral-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Environmental feedback: weather on the chrome ----------
   The day's actual sky tints the hero — barely, but you feel it. Set as
   body[data-weather] whenever a search returns conditions. */
body[data-weather] .hero::before { transition: filter 1.2s ease; }
body[data-weather="rain"] .hero::before { filter: saturate(0.72) brightness(0.94) hue-rotate(-8deg); }
body[data-weather="snow"] .hero::before { filter: saturate(0.6) brightness(1.06); }
body[data-weather="clouds"] .hero::before { filter: saturate(0.85); }
body[data-weather="clear"] .hero::before { filter: saturate(1.12) brightness(1.03); }

/* ---------- Soft confirmation: the save bloom ----------
   Saving a plan blooms a quiet ring out of the button — a breath of
   "that's safe now", not a firework. */
@keyframes saveBloom {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mode-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 26px transparent; }
}
.save-bloom { animation: saveBloom 0.8s var(--ease); }

/* Replan "what changed" panel gets a settle-in shimmer via GSAP; this is
   the reduced-motion-safe resting style. */
.change-summary { transform-origin: top center; }

/* ---------- Small refinements ---------- */
/* Booking links get a quiet lift so the affiliate action feels premium. */
.card-booking-link {
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s ease;
}
.card-booking-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 182, 39, 0.4);
  filter: brightness(1.04);
}
.card-booking-link--secondary:hover { box-shadow: var(--shadow-soft); }

/* Weather strip reads as part of the prompt box family. */
.weather-strip { transition: opacity 0.4s ease; }

/* Lenis html hooks (https://lenis.darkroom.engineering) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }