* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ── Force all form elements to inherit fonts from body ────────
   Browsers (Chrome, Safari, Firefox) use system-ui for button/input
   by default, which breaks visual consistency. This resets that. */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ── Typography scale ──────────────────────────────────────────
   .t-heading  → Clash Display, bold  (titles, labels, headings)
   .t-body     → Cabinet Grotesk      (descriptions, body copy)
   .t-label    → Clash Display, 700, small (section labels, caps)
   .t-mono     → monospace fallback   (times, counts)             */
.t-heading  { font-family: 'Clash Display', sans-serif; font-weight: 700; }
.t-body     { font-family: 'Cabinet Grotesk', sans-serif; }
.t-label    { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg2); }

/* ── Headings always use Clash Display ────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  color: var(--fg);
}

/* ── Inputs and textareas ──────────────────────────────────────
   Override browser user-agent stylesheet defaults              */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background: var(--ink3);
  border: 1.5px solid var(--border);
  border-radius: var(--rad3);
  color: var(--fg);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
  border-color: rgba(212, 133, 106, 0.55);
}

input::placeholder, textarea::placeholder {
  color: var(--fg3);
}

:root {
  --ink: #0D1117;
  --ink2: #161B22;
  --ink3: #1C2233;
  --ink4: #21293B;
  --fg: #E6EDF3;
  --fg2: #8B949E;
  --fg3: #6E7681; /* raised from #484F58 for AA contrast on dark bg */
  --v: #C2714F;
  --v2: #D4856A;
  --v3: #E6A090;
  --red: #EF4444;
  --green: #10B981;
  --amber: #F59E0B;
  --rad: 20px;
  --rad2: 14px;
  --rad3: 10px;
  /* Theme-aware hairlines — use these (not raw white-alpha) so borders
     survive light mode, including in inline styles. */
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.12);
}

body.light-mode {
  --ink: #FAF7F2;
  --ink2: #FFFFFF;
  --ink3: #F0EAE2;
  --ink4: #E5DDD4;
  --fg: #1A1714;
  --fg2: #5C5248;
  --fg3: #7A6F63; /* darkened from #9C9288 for AA contrast on light bg */
  --border: rgba(0,0,0,0.09);
  --border2: rgba(0,0,0,0.15);
}

html, body { 
  height: 100%; 
  width: 100%;
  margin: 0;
  font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--fg);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Full-screen on all sizes — no phone shell */
html, body {
  height: 100%;
  overflow: hidden;
}

.device {
  width: 100%;
  /* dvh tracks the *visible* viewport, shrinking as the mobile browser's
     bottom toolbar/URL bar appears — so the footer dock always sits just
     above the real bottom of the screen instead of behind the browser chrome
     (which left a big gap below the dock). 100% is the fallback for browsers
     without dvh. -webkit-fill-available was unreliable across iOS versions and
     was the source of the inconsistent dock placement. */
  height: 100%;
  height: 100dvh;
  background: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Clip the .device::before ambient glow (inset:-20%, blur(20px)) to the app
     bounds. Without this the glow's soft top edge rendered as a faint full-width
     horizontal line near the top of the page (over sidebar + content). */
  overflow: hidden;
}

.app-root { display: flex; flex-direction: column; height: 100%; height: 100dvh; width: 100%; overflow: hidden; }

/* Header */
header {
  padding: 14px 20px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* Match --ink so the sticky detail back bar's seal blends seamlessly with the
     header on mobile (the header was #0D0D12 vs --ink #0D1117 — a two-tone
     line). Kept opaque; the blur no longer needs the translucency. */
  background: var(--ink);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Both logos act as "home" buttons → back to the start of Discover. */
.brand, .sidebar-logo { cursor: pointer; }
.brand:focus-visible, .sidebar-logo:focus-visible {
  outline: 2px solid var(--v2);
  outline-offset: 3px;
  border-radius: 6px;
}

.brand {
  font-family: 'Clash Display', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.8px;
  background: linear-gradient(100deg, #F0EFFF 0%, var(--v2) 30%, var(--sun) 55%, var(--amber2) 80%, #F0EFFF 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.region-label {
  font-size: 11px;
  color: var(--fg2);
  margin-left: 4px;
}

.header-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--rad3);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: rgba(194,113,79,0.1);
  border-color: rgba(194,113,79,0.3);
}

.icon-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 10px;
  font-family: 'Clash Display', sans-serif;
  display: none;
  min-width: 18px;
  text-align: center;
}

.icon-btn .badge.show { display: block; }

/* ── Expanding header search ───────────────────────────────────────
   Collapsed: just the 40px magnifier icon-btn (sits inline with the theme /
   heart icons). Expanded: a bordered pill grows leftward, revealing the input
   and a clear button, with the icon still anchored on the right. Width is
   animated so it slides open. See header-search.js for the show/hide logic. */
.header-search-wrap {
  display: flex;
  align-items: center;
  border-radius: var(--rad3);
  border: 1px solid transparent;
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
}
.header-search-wrap.expanded {
  border-color: rgba(255,255,255,0.10);
  background: var(--ink3);
}
body.light-mode .header-search-wrap.expanded { border-color: rgba(0,0,0,0.1); }

/* The input is width:0 when collapsed and animates open. min-width:0 lets it
   truly collapse inside the flex row.
   NOTE: scoped under .header-search-wrap (and !important on the reset props) so
   it beats the global `input:not([type=checkbox]):not([type=radio])` rule,
   which sets width:100% + padding + border at higher specificity and would
   otherwise leave this input full-width and visible while collapsed. */
.header-search-wrap .header-search-input {
  width: 0 !important;
  min-width: 0;
  padding: 0 !important;
  border: none !important;
  outline: none;
  background: none !important;
  color: var(--fg);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  transition: width 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), padding 0.28s;
}
.header-search-wrap .header-search-input::placeholder { color: var(--fg3); }
.header-search-wrap.expanded .header-search-input {
  width: 46vw !important;
  max-width: 220px;
  padding: 0 4px 0 12px !important;
}

/* Clear (×) — only shown, via .show, once there's text (header-search.js). */
.header-search-clear {
  display: none;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--fg3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.header-search-wrap.expanded .header-search-clear.show { display: block; }
.header-search-clear:hover { color: var(--fg); }

/* The magnifier button keeps the .icon-btn look while collapsed; once expanded
   it merges into the pill (drops its own border/background). */
.header-search-btn { flex-shrink: 0; }
.header-search-wrap.expanded .header-search-btn {
  border-color: transparent;
  background: transparent;
}
.header-search-wrap.expanded .header-search-btn:hover { background: transparent; }

/* Main content area */
main {
  flex: 1;
  overflow: auto;
  padding: 16px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

main::-webkit-scrollbar { display: none; }

/* Tabs */
.tab {
  display: none;
}

.tab.active {
  display: block;
}

/* Footer / Tab Bar */
footer {
  height: 80px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: space-around;
  padding: 8px 8px 12px;
  background: rgba(13,13,18,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: var(--rad3);
  background: none;
  border: none;
  color: var(--fg2);
  cursor: pointer;
  transition: color 0.2s, transform 0.15s;
  font-family: 'Clash Display', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
}

.tab-btn.active {
  color: var(--v2);
  font-weight: 700;
}

.tab-btn.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 40px;
  border-radius: 13px;
  background: rgba(194,113,79,0.14);
  border: 1px solid rgba(194,113,79,0.22);
  box-shadow: 0 0 14px rgba(194,113,79,0.18);
  pointer-events: none;
  transition: all 0.2s;
}

.tab-btn.active svg {
  filter: drop-shadow(0 0 5px rgba(212,133,106,0.55));
  position: relative;
}

.tab-btn.active span {
  position: relative;
}

.tab-btn:active {
  transform: scale(0.92);
}

/* Icon-only footer nav — labels hidden, icons enlarged for tap targets.
   Buttons keep their aria-label so screen readers still announce them. */
.tab-btn span { display: none; }

.tab-btn svg {
  width: 25px;
  height: 25px;
}

/* Cards */
.card {
  background: var(--ink2);
  border-radius: var(--rad2);
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Feed grid — auto columns based on available width */
#feed-list,
#liked-list,
#liked-cities-list,
#cities-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* An empty-state / "no results" message is the grid's only child — let it span
   every column so its centered content sits in the middle instead of being
   dropped into the first (left) grid cell. */
#liked-list > .empty-state,
#liked-cities-list > .empty-state,
#cities-list > .empty-state {
  grid-column: 1 / -1;
}

/* "Load more" footer for the paginated city grid — spans every column and
   centres its button (auto-loads on scroll; the button is the manual fallback). */
.cities-load-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.cities-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--ink3);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cities-load-more-btn:hover {
  border-color: var(--v);
  background: var(--ink4);
}
.cities-load-more-count {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--fg3);
}

/* Discover view toggle — Places | Cities segmented control */
.discover-toggle {
  display: inline-flex;
  background: var(--ink3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 12px;
}
.discover-toggle button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: 'Clash Display', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg2);
  transition: background 0.18s, color 0.18s;
}
.discover-toggle button.active {
  background: var(--v);
  color: #fff;
}

/* City browse card — category badge over the cover image */
/* A city can carry several category badges — lay them out in a row. */
.city-cat-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.city-cat-badges .city-cat-badge { position: static; }

.city-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(13,13,18,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.city-card-country {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fg2);
  font-size: 13px;
  margin: 2px 0 6px;
}
.city-card-country svg { opacity: 0.6; flex-shrink: 0; }

/* Best-season + budget-tier row. Only rendered when the city has the data,
   so cities without it simply lose the row rather than showing a blank. */
.city-card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
}
.city-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg2);
  white-space: nowrap;
}
.city-fact svg { opacity: 0.6; flex-shrink: 0; }
/* Each fact names itself, then states the value — "Best time to visit Nov–Feb"
   rather than a bare date range the reader has to interpret. */
.city-fact-label { color: var(--fg3); font-weight: 600; }
.city-fact-value { color: var(--fg); font-weight: 700; }
/* The budget chip carries no text label (the tier word says it), so the
   accent colour is what separates it from the season beside it. */
.city-fact-budget .city-fact-value { color: var(--v); }
.city-fact-budget svg { color: var(--v); opacity: 0.75; }

/* "matched place" hint shown when a Discover search hit a place inside the city */
.city-card-match {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--v2);
  font-weight: 600;
}

/* Feed items — vertical card style */
.feed-item {
  background: var(--ink2);
  border-radius: var(--rad2);
  margin-bottom: 0;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feed-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

.feed-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* Hero image area */
.place-img-wrap {
  width: 100%;
  height: 200px;
  background: var(--ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Gradient scrim at bottom of image for readability */
.place-img-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(13,13,18,0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

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

.place-icon-fallback {
  font-size: 48px;
  line-height: 1;
}

/* shimmer while image loads */
.place-img-wrap.loading {
  background: linear-gradient(90deg, var(--ink3) 25%, var(--ink4) 50%, var(--ink3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Overlay action buttons on image */
.card-img-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.card-img-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(13,13,18,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.card-img-btn:active { transform: scale(0.9); }

.card-img-btn.wishlist.active {
  background: rgba(239,68,68,0.75);
  border-color: var(--red);
}

.card-img-btn.visited.active {
  background: rgba(16,185,129,0.75);
  border-color: var(--green);
}

/* ── Discover subtitle prompt ───────────────────────────────── */
.discover-subtitle {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0 12px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg);
  transition: opacity 0.15s;
}
.discover-subtitle:hover  { opacity: 0.8; }
.discover-subtitle:active { opacity: 0.6; }

/* City search under the prompt — constrained width, aligned to the
   content's left edge like every other heading and grid. */
.search-wrap.discover-city-search {
  max-width: 520px;
  margin-left: 0;
  margin-right: auto;
}

/* ── Social (follows / profiles) ────────────────────────────── */
.social-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.social-switch input { opacity: 0; width: 0; height: 0; }
.social-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ink4); border-radius: 26px; transition: 0.2s;
}
.social-slider::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.social-switch input:checked + .social-slider { background: var(--v); }
.social-switch input:checked + .social-slider::before { transform: translateX(18px); }

.social-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--v2), var(--sun));
  color: #fff; font-family: 'Clash Display', sans-serif; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Follow button that toggles to a red "Unfollow" on hover when already
   following/requested. Both labels occupy the same slot; hover swaps them. */
.social-unfollow-toggle .social-unfollow-label { display: none; }
.social-unfollow-toggle:hover .social-follow-label { display: none; }
.social-unfollow-toggle:hover .social-unfollow-label { display: inline; }
.social-unfollow-toggle:hover {
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.10);
}
.social-user-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px; border: none; background: none; cursor: pointer;
  border-radius: 12px; color: var(--fg); transition: background 0.15s;
}
.social-user-row:hover { background: var(--ink3); }
body.light-mode .social-user-row:hover { background: rgba(0,0,0,0.04); }

/* ── Social stories: rings row ───────────────────────────────── */
.stories-row {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: none;
}
.stories-row::-webkit-scrollbar { display: none; }
.story-ring {
  flex-shrink: 0; width: 72px;
  background: none; border: none; cursor: pointer; color: var(--fg);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0;
}
.story-ring-img {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  padding: 3px; box-sizing: border-box;
}
/* Unseen = colourful gradient ring; seen = muted grey ring. */
.story-ring.unseen .story-ring-img { background: linear-gradient(135deg, var(--sun), var(--v2)); }
.story-ring.seen   .story-ring-img { background: rgba(255,255,255,0.16); }
body.light-mode .story-ring.seen .story-ring-img { background: rgba(0,0,0,0.14); }
.story-ring-img .social-avatar {
  border: 2px solid var(--ink); border-radius: 50%; box-sizing: border-box;
}
.story-ring.add-ring .story-ring-img { background: rgba(255,255,255,0.10); }
.story-add-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--v); color: #fff; font-size: 14px; line-height: 20px;
  text-align: center; border: 2px solid var(--ink);
}
.story-ring-name {
  font-size: 11px; color: var(--fg2); max-width: 68px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Full-screen story viewer ────────────────────────────────── */
.story-viewer {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  /* On iOS Safari a fixed inset:0 element extends UNDER the address bar and
     bottom toolbar, so the story's top/bottom control rows render off-screen
     (the image is all that's visible). Dynamic viewport units account for the
     browser chrome; 100vh stays as a fallback for browsers without dvh. */
  height: 100vh;
  height: 100dvh;
}
.story-stage {
  position: relative; width: 100%; height: 100%;
  max-width: 440px; max-height: 100vh; max-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
.story-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-bars { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 4px; z-index: 3; }
.story-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.story-bar-fill { height: 100%; width: 0; background: #fff; }
.story-bar-fill.done { width: 100%; }
.story-topbar {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
}
.story-author { display: flex; align-items: center; gap: 8px; }
.story-author-name { color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.story-top-actions { display: flex; gap: 6px; }
.story-close-btn, .story-delete-btn {
  background: rgba(0,0,0,0.35); border: none; color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1;
}
/* Tap zones: left third = back, right two-thirds = forward. They start BELOW
   the top action row (delete/close) and END ABOVE the footer, so a touch on
   those controls isn't swallowed by the navigation zone. On a phone a fat
   finger near a 34px button lands partly on a full-height tap zone and the
   zone wins the touch — that's why delete was unreachable on real devices
   but fine with a precise mouse in emulation. */
.story-tap { position: absolute; top: calc(66px + env(safe-area-inset-top)); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 2; cursor: pointer; }
.story-tap-left  { left: 0; width: 30%; }
.story-tap-right { right: 0; width: 70%; }
.story-caption {
  position: absolute; left: 0; right: 0; bottom: 78px; z-index: 3;
  padding: 0 18px; color: #fff; font-size: 15px; line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.story-place {
  position: absolute; left: 18px; bottom: 112px; z-index: 3;
  color: #fff; font-size: 12px; background: rgba(0,0,0,0.4);
  padding: 4px 10px; border-radius: 20px;
}
.story-footer { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 3; padding: 0 16px; }
.story-reactions { display: flex; justify-content: space-between; gap: 6px; }
.story-react {
  background: rgba(255,255,255,0.12); border: none; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; font-size: 22px;
  transition: transform 0.12s;
}
.story-react:active { transform: scale(1.3); }
.story-react.reacted { background: rgba(255,255,255,0.3); }
.story-viewers-btn {
  background: rgba(255,255,255,0.14); border: none; color: #fff; cursor: pointer;
  padding: 10px 16px; border-radius: 22px; font-size: 14px; font-weight: 600; width: 100%;
}

/* Story composer photo drop zone (shared class) */
.post-drop {
  display: block; cursor: pointer; border-radius: 12px;
  border: 1.5px dashed rgba(255,255,255,0.18);
  background: var(--ink3); overflow: hidden;
}
body.light-mode .post-drop { border-color: rgba(0,0,0,0.15); }
.post-drop-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 36px 16px; color: var(--fg2); text-align: center;
}

/* ── Map city search ────────────────────────────────────────── */
/* Match the Discover city search: centered, same max-width. The wrap is the
   positioning context and mirrors .discover-city-search's constraint so the
   results dropdown lines up under the centered search box. */
.map-city-search-wrap {
  position: relative;
  margin: 0 auto 12px;
  max-width: 520px;
  z-index: 500;                 /* above the Leaflet map */
}
.map-city-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rad2);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 600;
  padding: 6px;
}
.map-city-result {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.map-city-result:hover { background: var(--ink3); }
.map-city-result.muted { color: var(--fg2); cursor: default; }
body.light-mode .map-city-results { background: #fff; border-color: rgba(0,0,0,0.08); }
body.light-mode .map-city-result:hover { background: rgba(0,0,0,0.04); }

/* Section heading between rails (e.g. "Explore cities") — left-aligned to
   the same axis as the greeting, chips and card grid. */
.discover-section-heading {
  text-align: left;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 22px 0 14px;
  color: var(--fg);
}

/* ── Discover curated rails ─────────────────────────────────── */
#discover-rails { display: flex; flex-direction: column; gap: 22px; }

.discover-rail-head {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}

.discover-rail-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;              /* Firefox */
}
.discover-rail-track::-webkit-scrollbar { display: none; }  /* WebKit */

.discover-rail-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
  background: var(--ink2);
  border-radius: var(--rad2);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.discover-rail-card:hover  { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.discover-rail-card:active { transform: scale(0.98); }

.discover-rail-img {
  position: relative;
  width: 100%;
  height: 120px;
  background: var(--ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.discover-rail-img .place-icon-fallback { font-size: 38px; }
.discover-rail-img.loading {
  background: linear-gradient(90deg, var(--ink3) 25%, var(--ink4) 50%, var(--ink3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.discover-rail-img .card-img-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  z-index: 2;
}

.discover-rail-title {
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discover-rail-tags {
  font-size: 11.5px;
  color: var(--fg2);
  padding: 2px 10px 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.light-mode .discover-rail-card { background: #fff; border-color: rgba(0,0,0,0.06); }

/* Card text body */
.card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.feed-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.2px;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.feed-desc {
  font-size: 12px;
  color: var(--fg2);
  line-height: 1.5;
  margin-bottom: 8px;
}

.feed-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pill {
  padding: 3px 9px;
  background: var(--ink3);
  border-radius: 20px;
  font-size: 10px;
  color: var(--fg2);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Color-coded category tag pills ─────────────────────────── */
.pill[data-tag="food"]          { background: rgba(245,158,11,0.15);  color: #FCD34D; border-color: rgba(245,158,11,0.3); }
.pill[data-tag="music"]         { background: rgba(99,102,241,0.15);  color: #A5B4FC; border-color: rgba(99,102,241,0.3); }
.pill[data-tag="outdoors"]      { background: rgba(16,185,129,0.15);  color: #6EE7B7; border-color: rgba(16,185,129,0.3); }
.pill[data-tag="art"]           { background: rgba(236,72,153,0.15);  color: #F9A8D4; border-color: rgba(236,72,153,0.3); }
.pill[data-tag="wellness"]      { background: rgba(6,182,212,0.15);   color: #67E8F9; border-color: rgba(6,182,212,0.3); }
.pill[data-tag="games"]         { background: rgba(249,115,22,0.15);  color: #FDBA74; border-color: rgba(249,115,22,0.3); }
.pill[data-tag="historic"]      { background: rgba(180,83,9,0.15);    color: #FCA368; border-color: rgba(180,83,9,0.3); }
.pill[data-tag="culture"]       { background: rgba(194,113,79,0.15);  color: #E6A090; border-color: rgba(194,113,79,0.3); }
.pill[data-tag="shopping"]      { background: rgba(244,114,182,0.15); color: #FBCFE8; border-color: rgba(244,114,182,0.3); }
.pill[data-tag="family"]        { background: rgba(234,179,8,0.15);   color: #FDE68A; border-color: rgba(234,179,8,0.3); }
.pill[data-tag="temple"]        { background: rgba(251,146,60,0.15);  color: #FED7AA; border-color: rgba(251,146,60,0.3); }
.pill[data-tag="spiritual"]     { background: rgba(251,146,60,0.15);  color: #FED7AA; border-color: rgba(251,146,60,0.3); }
.pill[data-tag="mosque"]        { background: rgba(20,184,166,0.15);  color: #99F6E4; border-color: rgba(20,184,166,0.3); }
.pill[data-tag="museum"]        { background: rgba(100,116,139,0.15); color: #CBD5E1; border-color: rgba(100,116,139,0.3); }
.pill[data-tag="park"]          { background: rgba(16,185,129,0.15);  color: #6EE7B7; border-color: rgba(16,185,129,0.3); }
.pill[data-tag="lake"]          { background: rgba(34,211,238,0.15);  color: #A5F3FC; border-color: rgba(34,211,238,0.3); }
.pill[data-tag="fort"]          { background: rgba(161,98,7,0.15);    color: #FDE68A; border-color: rgba(161,98,7,0.3); }
.pill[data-tag="zoo"]           { background: rgba(101,163,13,0.15);  color: #BEF264; border-color: rgba(101,163,13,0.3); }
.pill[data-tag="mall"]          { background: rgba(244,114,182,0.15); color: #FBCFE8; border-color: rgba(244,114,182,0.3); }
.pill[data-tag="beach"]         { background: rgba(6,182,212,0.15);   color: #67E8F9; border-color: rgba(6,182,212,0.3); }
.pill[data-tag="entertainment"] { background: rgba(168,85,247,0.15);  color: #E9D5FF; border-color: rgba(168,85,247,0.3); }

.feed-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}

.action-btn {
  flex: 1;
  height: 32px;
  padding: 0;
  border-radius: var(--rad3);
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--fg2);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Clash Display', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.action-btn:hover {
  background: rgba(255,255,255,0.03);
}

.action-btn.active {
  background: rgba(194,113,79,0.15);
  border-color: var(--v);
  color: var(--v2);
}

.action-btn.wishlist.active {
  background: rgba(239,68,68,0.15);
  border-color: var(--red);
  color: var(--red);
}

/* Map — fill the viewport below the header card + search */
#map {
  width: 100%;
  height: clamp(400px, calc(100vh - 250px), 1200px);
  height: clamp(400px, calc(100dvh - 250px), 1200px);
  border-radius: var(--rad2);
  overflow: hidden;
  margin-top: 12px;
}

/* Chrome/Safari paint hairline seams between adjacent tiles when the map
   pane sits on a fractional pixel (hiDPI / page zoom). Promoting tiles to
   their own compositing layer removes the seams. */
.leaflet-tile {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Leaflet popup override — match app dark theme */
.leaflet-popup-content-wrapper {
  background: #1E1E2A;
  color: #F0EFFF;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.leaflet-popup-content {
  margin: 14px 16px 12px;
}
.leaflet-popup-tip {
  background: #1E1E2A;
}
.leaflet-popup-close-button {
  top: 6px;
  right: 6px;
  color: #A09EC0;
}
.leaflet-container a.leaflet-popup-close-button:hover { color: #F0EFFF; }

/* Light mode — restore popup to default light appearance */
body.light-mode .leaflet-popup-content-wrapper {
  background: #FFFFFF;
  color: #18181F;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
body.light-mode .leaflet-popup-tip {
  background: #FFFFFF;
}
body.light-mode .leaflet-popup-close-button { color: #47456A; }

/* Itinerary route legend (shown when a trip is drawn on the map) */
.itin-legend {
  background: var(--ink2);
  border: 1px solid var(--border2);
  border-radius: var(--rad3);
  padding: 10px 12px;
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  min-width: 120px;
}
.itin-legend-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.itin-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  color: var(--fg2);
}
.itin-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.itin-legend-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--fg3);
  font-weight: 600;
}
.itin-legend-clear {
  margin-top: 9px;
  width: 100%;
  padding: 6px 8px;
  background: var(--ink3);
  border: 1px solid var(--border2);
  border-radius: var(--rad3);
  color: var(--fg);
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}
.itin-legend-clear:hover { border-color: var(--v); }
body.light-mode .itin-legend {
  background: #FFFFFF;
  color: #18181F;
  border-color: rgba(0,0,0,0.12);
}
body.light-mode .itin-legend-clear {
  background: #F0F0F5;
  color: #18181F;
  border-color: rgba(0,0,0,0.12);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.show {
  display: flex;
}

.modal {
  background: linear-gradient(160deg, #18182200 0%, #1E1E2A 100%), #16161E;
  background: #16161E;
  border-radius: var(--rad);
  padding: 22px;
  width: 360px;
  max-width: 92vw;
  max-height: 85vh;
  /* dvh tracks the *visible* viewport, so when the mobile keyboard opens the
     modal stays within reach and its buttons don't get pushed behind it.
     Falls back to the vh line above where dvh is unsupported. */
  max-height: 85dvh;
  overflow: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.09);
}

.modal::-webkit-scrollbar { display: none; }

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

.modal-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--fg2);
  font-size: 28px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.modal-close:hover {
  background: rgba(255,255,255,0.05);
  color: var(--fg);
}

.modal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--rad3);
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.modal-item-content h4 {
  font-family: 'Clash Display', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
}

.modal-item-content p {
  font-size: 11px;
  color: var(--fg2);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.btn {
  padding: 10px 20px;
  border-radius: var(--rad3);
  font-family: 'Clash Display', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  /* Kill the ~300ms double-tap delay iOS Safari applies to tappable elements —
     without this, the first tap on a modal button often feels like it did
     nothing and a quick second tap gets eaten as a double-tap gesture. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* A button mid-request shows it's working and refuses further taps, so a slow
   network can't read as a frozen, unresponsive button. */
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--fg2);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
}

.btn-ghost:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, #C2714F 0%, #A85C3C 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(194,113,79,0.45);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #CC7A5A 0%, #C2714F 100%);
  box-shadow: 0 6px 24px rgba(194,113,79,0.55);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(194,113,79,0.3);
}

.btn-danger {
  background: var(--red);
  color: #fff;
}

/* The Google auth button is styled inline, not via .btn — give it the same
   mobile tap handling and disabled treatment as the other auth buttons. */
.google-auth-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.google-auth-btn:disabled { opacity: 0.6; cursor: default; pointer-events: none; }

/* Shared inline spinner for auth buttons — makes "working on it" visibly
   distinct from a frozen/unresponsive button during slow popups or network. */
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.btn:disabled, .google-auth-btn:disabled { cursor: default; }

/* Profile */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.taste-chip {
  padding: 12px;
  background: var(--ink3);
  border-radius: var(--rad3);
  border: 1px solid rgba(255,255,255,0.07);
  text-align: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg2);
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.taste-chip.selected {
  background: rgba(194,113,79,0.18);
  border-color: rgba(194,113,79,0.6);
  color: var(--v2);
  box-shadow: 0 2px 12px rgba(194,113,79,0.3);
}

.taste-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.taste-chip:active { transform: scale(0.96); }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--fg3);
  font-size: 13px;
  font-family: 'Cabinet Grotesk', sans-serif;
  line-height: 1.6;
}
.empty-state-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 14px;
  opacity: 0.9;
}
.empty-state-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.empty-state-sub {
  font-size: 13px;
  color: var(--fg2);
  max-width: 280px;
  margin: 0 auto 16px;
  line-height: 1.55;
}
.empty-state .btn { max-width: 240px; margin-left: auto; margin-right: auto; }
/* Secondary contextual nudge under the primary empty-state CTA
   (e.g. "Start with Hyderabad →"). Reads as a quiet text link. */
.gtc-empty-hint {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--v2);
  font-family: 'Clash Display', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.85;
}
.gtc-empty-hint:hover { opacity: 1; text-decoration: underline; }

/* Skeleton loading cards */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.skeleton-card {
  height: 180px;
  border-radius: var(--rad2);
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: skeletonShimmer 1.3s infinite;
}
@keyframes skeletonShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-card::after { animation: none; }
}
body.light-mode .skeleton-card::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
}

/* Plan tab */
.plan-item {
  background: var(--ink2);
  border-radius: var(--rad2);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}

.plan-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}

.plan-desc {
  font-size: 12px;
  color: var(--fg2);
  line-height: 1.5;
}

.taste-badge {
  font-size: 11px;
  color: var(--fg2);
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
}

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: var(--ink3);
  color: var(--fg2);
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.filter-chip:active { transform: scale(0.93); }
.filter-chip.active {
  background: rgba(194,113,79,0.2);
  border-color: rgba(194,113,79,0.6);
  color: var(--v2);
  box-shadow: 0 2px 10px rgba(194,113,79,0.25);
}
.filter-chip.pref-chip.active {
  background: rgba(245,158,11,0.18);
  border-color: #F59E0B;
  color: #FCD34D;
}
.filter-chip.surprise-chip {
  background: var(--ink3);
  border-color: rgba(255,255,255,0.1);
  color: var(--fg2);
}
.filter-chip .chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
/* Sits beside the city name, pushed to the right of it — the bottom padding
   here dated from the sticky back bar it used to ride. */
.feed-count {
  font-size: 11px;
  color: var(--fg3);
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  margin-left: auto;
  flex: none;
}

.pill-active {
  background: rgba(194,113,79,0.25) !important;
  color: var(--v2) !important;
  border-color: var(--v) !important;
}

/* Community shortcut in the Discover header (mobile entry point) */
.discover-community-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--rad3);
  background: rgba(194,113,79,0.10);
  border: 1px solid rgba(194,113,79,0.22);
  color: var(--v2);
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.discover-community-btn:hover { background: rgba(194,113,79,0.18); }
.discover-community-btn:active { transform: scale(0.96); }

/* Utility: show only on mobile (hidden at the desktop breakpoint below) */
.mobile-only { display: flex; }

.reminder-btn { flex:1; height:34px; background:var(--ink3); border:1px solid rgba(255,255,255,0.07); cursor:pointer; color:var(--fg2); font-size:12px; font-family:'Clash Display',sans-serif; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border-radius:8px; transition:all 0.15s; white-space:nowrap; }
.reminder-btn:hover { background:var(--ink4); color:var(--fg); border-color:rgba(255,255,255,0.12); }
.reminder-btn.has-reminder { color:#38BDF8; border-color:rgba(56,189,248,0.35); background:rgba(56,189,248,0.08); }
body.light-mode .reminder-btn { background:var(--ink3); border-color:rgba(0,0,0,0.12); color:var(--fg2); }
body.light-mode .reminder-btn:hover { border-color:rgba(0,0,0,0.18); color:var(--fg); }

.reminder-banner { background:linear-gradient(135deg,rgba(56,189,248,0.12),rgba(194,113,79,0.1)); border:1.5px solid rgba(56,189,248,0.25); border-radius:var(--rad2); padding:12px 14px; margin-bottom:10px; }
.reminder-banner-title { font-family:'Clash Display',sans-serif; font-size:12px; font-weight:700; color:#38BDF8; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.reminder-item { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.reminder-item:last-child { border-bottom:none; }
.reminder-item-left { display:flex; flex-direction:column; gap:2px; }
.reminder-item-name { font-family:'Clash Display',sans-serif; font-size:12px; font-weight:700; color:var(--fg); }
.reminder-item-date { font-size:11px; color:var(--fg3); }
.reminder-item-date.overdue { color:#EF4444; font-weight:700; }
.reminder-item-date.soon { color:#F59E0B; font-weight:700; }

/* History items */
.history-entry {
  background: var(--ink2);
  border-radius: var(--rad2);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}

.history-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-date {
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--v3);
}

.history-count {
  font-size: 11px;
  color: var(--fg3);
}

.history-place-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-place-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg2);
}

.history-place-row span:first-child {
  font-size: 16px;
}

/* Profile sub-tabs */
.profile-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.profile-subtab {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--rad3);
  background: var(--ink3);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--fg2);
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.profile-subtab.active {
  background: rgba(194,113,79,0.2);
  border-color: var(--v);
  color: var(--v2);
}

.profile-subpanel { display: none; }
.profile-subpanel.active { display: block; }

/* Profile accordion */
.profile-accordion-item {
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--rad2);
  overflow: hidden;
  margin-bottom: 8px;
}

.profile-accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.profile-accordion-head:hover { background: rgba(255,255,255,0.03); }

.profile-accordion-head .acc-title {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}

.profile-accordion-head .acc-badge {
  font-size: 11px;
  color: var(--fg3);
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  background: var(--ink3);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
}
/* An empty badge must not render as a lone pill */
.acc-badge:empty { display: none; }

.profile-accordion-head .acc-chevron {
  flex-shrink: 0;
  color: var(--fg3);
  transition: transform 0.25s ease;
}

.profile-accordion-item.open .acc-chevron { transform: rotate(180deg); }

.profile-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.profile-accordion-item.open .profile-accordion-body {
  max-height: 4000px;
}

.profile-accordion-body-inner {
  padding: 0 16px 16px;
}

/* Onboarding specific styles */
#welcome-modal.show {
  display: flex !important;
}

.onboard-step {
  animation: fadeIn 0.3s ease;
}

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

#welcome-chips .taste-chip {
  cursor: pointer;
  transition: all 0.2s;
}

#welcome-chips .taste-chip:active {
  transform: scale(0.95);
}


.onboard-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.onboard-choice-card,
.onboard-city-card,
.destination-vibe-chip,
.destination-result-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--ink3);
  color: var(--fg);
  cursor: pointer;
  font-family: 'Clash Display', sans-serif;
}

.onboard-choice-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  padding: 14px;
  border-radius: var(--rad2);
}

.onboard-choice-icon {
  grid-row: span 2;
  font-size: 28px;
}

.onboard-choice-title,
.destination-result-name,
.onboard-city-name {
  font-size: 14px;
  font-weight: 700;
}

.onboard-choice-copy,
.destination-result-match,
.destination-empty {
  color: var(--fg2);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 12px;
}

.onboard-city-grid,
.destination-vibe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.destination-vibe-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboard-city-card,
.destination-vibe-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px;
  border-radius: var(--rad3);
}

.onboard-city-card.selected,
.destination-vibe-chip.selected {
  background: rgba(194,113,79,0.16);
  border-color: var(--v);
  color: var(--v2);
}

.onboard-city-emoji {
  font-size: 20px;
}

.destination-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  min-height: 44px;
}

.destination-result-card {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px;
  border-radius: var(--rad3);
}


.destination-result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.destination-result-action {
  color: var(--v2);
  font-size: 11px;
  font-weight: 700;
}

.destination-empty {
  padding: 12px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: var(--rad3);
}

.interest-pill {
  padding: 6px 12px;
  background: var(--ink4);
  border-radius: 20px;
  font-size: 11px;
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
}

/* ── SEARCH ─────────────────────────────── */
.search-wrap {
  display:flex; align-items:center; gap:8px;
  background:var(--ink3); border-radius:var(--rad3);
  border:1.5px solid rgba(255,255,255,0.07);
  padding:9px 13px; margin-bottom:10px; transition:border-color 0.2s;
}
body.light-mode .search-wrap { border-color:rgba(0,0,0,0.09); }

/* ── Light mode: fix invisible borders & unreadable text ───── */
/* Cards & feed items: white borders disappear on light bg */
body.light-mode .card,
body.light-mode .feed-item,
body.light-mode .group-shortlist-card,
body.light-mode .group-feed-panel,
body.light-mode .group-summary-card { border-color: rgba(0,0,0,0.08); }

/* Pill tags: white border invisible on light bg */
body.light-mode .pill { border-color: rgba(0,0,0,0.1); color: #3D3B5A; }

/* Action buttons (like/visited row): white border invisible */
body.light-mode .action-btn { border-color: rgba(0,0,0,0.1); }

/* Vote & note buttons */
body.light-mode .group-vote-btn,
body.light-mode .group-note-btn { border-color: rgba(0,0,0,0.1); }

/* Member chips */
body.light-mode .group-member-chip { border-color: rgba(0,0,0,0.1); }

/* Score badge: dark bg + var(--fg) = black-on-black in light mode */
body.light-mode .card-img-score { color: #fff; }

/* Header border */
body.light-mode header { border-bottom-color: rgba(0,0,0,0.07); }
.search-wrap svg { flex-shrink:0; opacity:0.4; }
#search-input,
#cities-search-input,
#cities-results-search-input,
#group-search-input,
#plan-detail-search,
#map-city-search-input,
#liked-city-search-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--fg); font-family:'Cabinet Grotesk',sans-serif; font-size:14px;
}
#search-input::placeholder,
#cities-search-input::placeholder,
#cities-results-search-input::placeholder,
#group-search-input::placeholder,
#plan-detail-search::placeholder,
#map-city-search-input::placeholder,
#liked-city-search-input::placeholder { color:var(--fg3); }
#search-clear,
#cities-search-clear,
#cities-results-search-clear,
#group-search-clear,
#plan-detail-search-clear,
#map-city-search-clear,
#liked-city-search-clear {
  background:none; border:none; color:var(--fg3); cursor:pointer;
  font-size:18px; padding:0; line-height:1; display:none;
}
#search-clear.show,
#cities-search-clear.show,
#cities-results-search-clear.show,
#group-search-clear.show,
#plan-detail-search-clear.show,
#map-city-search-clear.show,
#liked-city-search-clear.show { display:block; }

.surprise-emoji { font-size:52px; margin:4px 0 10px; text-align:center; }
.surprise-title { font-family:'Clash Display',sans-serif; font-weight:700; font-size:19px; margin-bottom:6px; text-align:center; }
.surprise-desc  { font-size:13px; color:var(--fg2); margin-bottom:12px; line-height:1.5; text-align:center; }
.surprise-tags  { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:18px; }
.surprise-actions { display:flex; gap:10px; }
.surprise-actions button { flex:1; }

/* ── THEME TOGGLE ───────────────────────── */
.theme-toggle {
  background:none; border:none; cursor:pointer; color:var(--fg2);
  padding:4px; border-radius:8px; display:flex; align-items:center; transition:color 0.2s;
}
.theme-toggle:hover { color:var(--fg); }

/* ── STAR RATINGS ───────────────────────── */
.star-row { display:flex; gap:2px; align-items:center; margin-top:6px; }
.star {
  font-size:17px; cursor:pointer; color:var(--ink4); display:inline-flex; align-items:center;
  transition:transform 0.1s,color 0.1s; line-height:1; user-select:none;
}
.star.lit { color:#FBBF24; }
.action-btn.visited.active { color: #10B981; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.12); }
.star:hover { transform:scale(1.25); }
.star-label { font-size:10px; color:var(--amber); margin-left:4px; font-weight:700; font-family:'Clash Display',sans-serif; }

/* ── NOTES ──────────────────────────────── */
.note-btn {
  flex: 1; height: 34px;
  background:var(--ink3); border:1px solid rgba(255,255,255,0.07); cursor:pointer;
  color:var(--fg2); font-size:12px; font-family:'Clash Display',sans-serif;
  font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:0 12px; border-radius:8px; transition:all 0.15s; white-space:nowrap;
}
.note-btn:hover { background:var(--ink4); color:var(--fg); border-color:rgba(255,255,255,0.12); }
body.light-mode .note-btn { background:var(--ink3); border-color:rgba(0,0,0,0.12); color:var(--fg2); }
body.light-mode .note-btn:hover { border-color:rgba(0,0,0,0.18); color:var(--fg); }
.note-btn.has-note { color:var(--amber); border-color:rgba(245,158,11,0.35); background:rgba(245,158,11,0.08); }
.note-preview {
  font-size:11px; color:var(--amber); margin-top:4px; font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;
}
#note-modal textarea {
  width:100%; min-height:100px; background:var(--ink3);
  border:1.5px solid rgba(255,255,255,0.08); border-radius:var(--rad3);
  color:var(--fg); font-family:'Cabinet Grotesk',sans-serif; font-size:14px;
  padding:10px 12px; resize:vertical; outline:none; margin-top:8px; transition:border-color 0.2s;
}
body.light-mode #note-modal textarea { border-color:rgba(0,0,0,0.1); }
#note-modal textarea:focus { border-color:var(--v2); }
.pill-active {
  background:rgba(194,113,79,0.25) !important;
  color:var(--v2) !important; border-color:var(--v) !important;
}


/* Group mode */
.group-feed-panel,
.group-summary-card {
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--rad2);
}

/* Group shortlist grid — mirrors #feed-list */
#group-shortlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

/* Group card — same vertical style as feed card */
.group-shortlist-card {
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--rad2);
  box-shadow: 0 2px 14px rgba(0,0,0,0.28);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
}
.group-shortlist-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.group-shortlist-card:active { transform: scale(0.98); }

/* Score badge overlaid on the image */
.card-img-score {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(13,13,18,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  z-index: 2;
}
.card-img-score.has-votes { color: var(--green); border-color: rgba(16,185,129,0.4); }

.group-feed-panel {
  padding: 12px;
  margin: 4px 0 12px;
}

/* Hide the (optional) group panel when empty to avoid layout gaps */
#group-feed-panel:empty {
  display: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.group-feed-header,
.group-summary-row,
.group-shortlist-head,
.group-card-top,
.group-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.group-page-head {
  margin-bottom: 14px;
}

.group-feed-title,
.group-summary-title,
.group-shortlist-title {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  color: var(--fg);
}

.group-feed-title {
  font-size: 14px;
}

.group-feed-subtitle,
.group-summary-kicker,
.group-shortlist-desc,
.group-empty-mini {
  color: var(--fg2);
  font-size: 11px;
}

.group-tab-jump,
.group-vote-btn,
.group-note-btn {
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--ink3);
  color: var(--fg2);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.group-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.group-note-btn:hover { background: var(--ink4); color: var(--fg); }
.group-note-btn.active { color: var(--amber); border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }

.group-member-picker {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0 2px;
  scrollbar-width: none;
}

.group-member-picker::-webkit-scrollbar {
  display: none;
}

.group-member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--ink3);
  color: var(--fg2);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
}

.group-member-chip.active {
  border-color: var(--v);
  color: var(--v2);
  background: rgba(194,113,79,0.16);
}

/* Cloud-group members are shown for reference only, not a "vote as" switcher —
   drop the clickable affordance so they don't invite a tap that does nothing. */
.group-member-chip.is-static { cursor: default; }

.member-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.group-mini-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.group-mini-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--fg2);
  font-size: 12px;
}

.group-mini-item strong {
  color: var(--v2);
}

.group-card-panel {
  padding: 6px 0 2px;
  margin: 4px 0 2px;
}

.group-match-label {
  color: var(--fg);
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.group-match-score {
  color: var(--fg3);
  font-size: 11px;
}

.group-vote-row,
.group-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.group-vote-dot {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink4);
  color: var(--fg3);
  font-size: 11px;
  font-weight: 800;
}

.group-vote-dot.like,
.group-vote-btn.active {
  background: rgba(16,185,129,0.16);
  border-color: rgba(16,185,129,0.45);
  color: #6EE7B7;
}

.group-vote-dot.pass,
.group-vote-btn.pass.active {
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.45);
  color: #FCA5A5;
}

.group-note-btn.active {
  color: var(--v2);
  border-color: rgba(212,133,106,0.45);
  background: rgba(194,113,79,0.16);
}

.group-note-preview {
  margin-top: 8px;
  color: var(--fg2);
  font-size: 12px;
  line-height: 1.45;
}

.group-note-preview.in-list {
  margin-top: 10px;
}

.group-summary-card,
.group-shortlist-card {
  padding: 14px;
  margin-bottom: 10px;
}

.group-summary-pill,
.group-score-badge {
  color: var(--v2);
  background: rgba(194,113,79,0.16);
  border: 1px solid rgba(194,113,79,0.35);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.group-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.group-stat-grid div {
  background: var(--ink3);
  border-radius: var(--rad3);
  padding: 10px;
}

.group-stat-grid strong,
.group-stat-grid span {
  display: block;
}

.group-stat-grid strong {
  color: var(--fg);
  font-family: 'Clash Display', sans-serif;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-stat-grid span {
  color: var(--fg3);
  font-size: 10px;
  margin-top: 2px;
}

/* Group section dividers */
.group-section-divider {
  font: 600 11px 'Clash Display';
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.group-section-divider:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* Keep group summary visually consistent */
.group-shortlist-card {
  opacity: 1;
}

.group-shortlist-card:not(.has-votes) {
  opacity: 0.85;
}

.group-score-badge {
  opacity: 1;
}

.group-score-badge.active {
  opacity: 1;
}




/* ── Itinerary Builder ──────────────────────────────────────────
   Append these to css/styles.css
──────────────────────────────────────────────────────────────── */

/* Itinerary timeline card */
.itinerary-card {
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rad2);
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.itinerary-card:hover {
  border-color: rgba(194,113,79,0.35);
  box-shadow: 0 4px 16px rgba(194,113,79,0.12);
}

/* Move up/down arrow buttons */
.itinerary-move-btn {
  transition: background 0.15s, color 0.15s;
}
.itinerary-move-btn:hover:not([style*="pointer-events:none"]) {
  background: var(--ink4) !important;
  color: var(--fg) !important;
}

/* ── Place Detail Modal ──────────────────────────────────────── */
.place-detail-modal-inner {
  width: 400px;
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
}

/* The modal uses .open instead of .show to avoid conflicts */
.modal-overlay.open {
  display: flex;
}

.place-detail-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: var(--rad2);
  overflow: hidden;
  background: var(--ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.place-detail-img-wrap.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: shimmer 1.5s infinite;
}

.place-detail-img-fallback {
  font-size: 56px;
  line-height: 1;
  z-index: 1;
}

.place-detail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Clickable feed card cursor */
.feed-item, .group-shortlist-card { cursor: pointer; }

/* Plan place cards — liked highlight */
.plan-place-card.plan-liked {
  border-left: 3px solid var(--v2);
}
.plan-place-card.plan-liked .feed-title {
  color: var(--fg);
}

/* Itinerary drag states */
.itin-slot { transition: opacity 0.15s; }
.itin-slot.drag-active { opacity: 0.35; }
.itin-slot.drag-over .itinerary-card {
  outline: 2px solid var(--v2);
  background: rgba(194,113,79,0.08);
}
.drag-handle:active { cursor: grabbing; }

/* ── ✨ Polish & Production Readiness ─────────────────────────── */

/* Thin custom scrollbar for main content */
main::-webkit-scrollbar { width: 4px; display: block; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: rgba(194,113,79,0.3); border-radius: 4px; }
main::-webkit-scrollbar-thumb:hover { background: rgba(194,113,79,0.5); }

/* Modal scroll */
.modal::-webkit-scrollbar { width: 4px; display: block; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* Focus ring — visible for keyboard users, invisible for mouse */
:focus-visible {
  outline: 2px solid rgba(194,113,79,0.7);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Plan & history entry cards */
.plan-item, .history-entry {
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  transition: box-shadow 0.18s, transform 0.18s;
}
.plan-item:hover, .history-entry:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

/* Group action buttons — subtle hover */
.group-vote-btn:hover { background: var(--ink4) !important; }
.group-note-btn:hover { background: var(--ink4); }

/* Card image score badge — sharper backdrop */
.card-img-score {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Light mode — re-skin header bg and brand */
body.light-mode header {
  background: rgba(244,244,250,0.97);
  border-bottom-color: rgba(0,0,0,0.07);
}
/* Keep the same colourful brand gradient in light mode; only swap the
   near-white (#F0EFFF) endpoints for a dark stop so the ends stay visible
   against a light background. */
body.light-mode .brand,
body.light-mode .sidebar-logo {
  background: linear-gradient(100deg, #1A1714 0%, var(--v2) 30%, var(--sun) 55%, var(--amber2) 80%, #1A1714 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light-mode footer {
  background: rgba(244,244,250,0.97);
  border-top-color: rgba(0,0,0,0.07);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
body.light-mode .card,
body.light-mode .plan-item,
body.light-mode .history-entry {
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
body.light-mode .feed-item,
body.light-mode .group-shortlist-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
body.light-mode .modal {
  background: #FDFBF8;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 32px 80px rgba(0,0,0,0.18);
}
body.light-mode .btn-primary {
  box-shadow: 0 4px 16px rgba(194,113,79,0.35);
}
body.light-mode .search-wrap {
  border-color: rgba(0,0,0,0.1);
  background: #EDE8E1;
}
body.light-mode .filter-chip {
  border-color: rgba(0,0,0,0.1);
}
body.light-mode .tab-btn { color: rgba(0,0,0,0.55); }
body.light-mode .tab-btn.active { color: var(--v); }
body.light-mode .tab-btn.active::before {
  background: rgba(194,113,79,0.09);
  border-color: rgba(194,113,79,0.18);
  box-shadow: 0 0 10px rgba(194,113,79,0.1);
}
body.light-mode .pill[data-tag] { filter: brightness(0.72) saturate(1.4); }

/* Smooth global transitions */
.card, .feed-item, .group-shortlist-card, .modal {
  will-change: transform;
}

/* Group page head spacing */
.group-page-head {
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* ── Group plan view expanded header ────────────────────────── */
.group-plan-head {
  margin-bottom: 16px;
}
/* The detail heads are display:contents so their children lay out against the
   whole tab section rather than a short wrapper. JS keeps toggling them via
   inline style.display = 'none' / '' — '' falls back to this rule. */
#plan-detail-head,
#group-plan-head { display: contents; }

/* Compact the action pills in the title row so they sit level with the name
   instead of towering over it. */
#group-plan-head .group-plan-titlerow .group-tab-jump {
  padding: 5px 10px;
}

/* Plan and group detail lead with the back arrow sitting INLINE with the trip
   name, not stacked above it. The arrow aligns to the name's first line rather
   than the centre of the name+cities stack, so it reads as belonging to the
   title. The group's row also carries the Invite/Chat/Expenses pills, pushed
   right by the stack's flex-grow. */
.group-plan-titlerow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.group-plan-titlestack { flex: 1; min-width: 0; }
/* Nudge the glyph down to sit on the 26px name's optical centre. */
.group-plan-titlerow > .group-back-crumb.is-bare { margin-top: 4px; }
.group-plan-titlerow .group-plan-action-row { flex: none; margin-top: 3px; }
@media (max-width: 620px) {
  /* The pills wrap under the title rather than squeezing the name. */
  .group-plan-titlerow { flex-wrap: wrap; }
  .group-plan-titlerow .group-plan-action-row { width: 100%; margin-top: 0; }
}
.group-back-crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg2);
  font-size: 13px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 600;
  padding: 0;
  letter-spacing: 0.1px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.group-back-crumb:hover { color: var(--fg); }
/* Icon-only variant — no label, so no gap and a square hit area. */
.group-back-crumb.is-bare {
  gap: 0;
  margin-left: -6px;   /* optically align the glyph with the title below */
  padding: 6px;
  border-radius: 50%;
}
.group-back-crumb.is-bare:hover { background: var(--ink3); }
.group-plan-action-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.group-plan-head-name {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--fg);
  line-height: 1.1;
  margin-bottom: 5px;
}
.group-plan-head-cities {
  font-size: 13px;
  color: var(--fg2);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 600;
  /* 2px + 16px: carries the spacing the display:contents head wrapper
     (.group-plan-head margin-bottom) no longer contributes. */
  margin-bottom: 18px;
}
.group-member-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ink3);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg2);
  font-family: 'Cabinet Grotesk', sans-serif;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.09);
}
.group-tab-jump-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.light-mode .group-member-count-pill { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.06); }
body.light-mode .group-back-crumb { color: rgba(0,0,0,0.5); }
body.light-mode .group-back-crumb:hover { color: rgba(0,0,0,0.8); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT — desktop ≥ 900px
   ═══════════════════════════════════════════════════════════════ */

/* Hidden on mobile by default */
.sidebar { display: none; }

@media (min-width: 900px) {

  /* Mobile-only chrome (e.g. Discover→Community shortcut) — sidebar covers it */
  .mobile-only { display: none !important; }

  /* ── Root layout: row ──────────────────────────────────────── */
  .app-root {
    flex-direction: row;
    overflow: hidden;
  }

  /* ── Sidebar ────────────────────────────────────────────────── */
  .sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    min-width: 240px;
    height: 100%;
    background: var(--ink2);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 28px 16px 20px;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Brand block */
  .sidebar-brand {
    padding: 0 8px 28px;
  }
  .sidebar-logo {
    font-family: 'Clash Display', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.8px;
    background: linear-gradient(100deg, #F0EFFF 0%, var(--v2) 30%, var(--sun) 55%, var(--amber2) 80%, #F0EFFF 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: brandShine 7s linear infinite;
    line-height: 1;
    margin-bottom: 4px;
  }
  .sidebar-tagline {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 11px;
    color: var(--fg3);
    letter-spacing: 0.03em;
  }

  /* Nav items */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }
  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--rad3);
    background: transparent;
    border: none;
    color: var(--fg2);
    font-family: 'Clash Display', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    width: 100%;
  }
  .sidebar-nav-item:hover {
    background: rgba(194,113,79,0.08);
    color: var(--fg2);
  }
  .sidebar-nav-item.active {
    background: rgba(194,113,79,0.18);
    color: var(--v2);
    border: 1px solid rgba(194,113,79,0.25);
  }
  .sidebar-nav-item.active svg {
    filter: drop-shadow(0 0 5px rgba(212,133,106,0.5));
  }
  .sidebar-nav-item svg {
    flex-shrink: 0;
    opacity: 0.75;
  }
  .sidebar-nav-item.active svg { opacity: 1; }

  /* User footer */
  .sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 12px;
  }
  .sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v), #E6A090);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
  }
  .sidebar-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .sidebar-user-name {
    font-family: 'Clash Display', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-user-handle {
    font-size: 10px;
    color: var(--fg3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }
  .sidebar-theme-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--fg2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .sidebar-theme-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--fg);
  }

  /* ── Hide mobile chrome ─────────────────────────────────────── */
  footer { display: none !important; }
  header { display: none !important; }

  /* ── Main content ───────────────────────────────────────────── */
  main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  /* ── Desktop page headings ──────────────────────────────────── */
  .desktop-page-header {
    margin-bottom: 22px;
  }
  .desktop-page-eyebrow {
    font-family: 'Clash Display', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg3);
    margin-bottom: 4px;
  }
  .desktop-page-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.5px;
  }

  /* Widen cards and modals slightly on desktop */
  .modal { width: 440px; max-width: 90vw; }

  /* ── Content column ─────────────────────────────────────────────
     Content is LEFT-aligned within main (beside the sidebar), capped
     at a generous width so cards and text don't stretch edge-to-edge
     on large monitors. Left-aligned rather than centred: centring a
     capped column inside a very wide main opens an awkward gap next to
     the sidebar. Profile uses a tighter settings-style column.
     IDs beat the base .community-tab width rule. */
  .tab       { max-width: 1500px; width: 100%; }
  #social    { max-width: 1200px; }   /* stories + trips grid */
  #profile   { max-width: 1160px; }   /* .profile-layout handles column/grid */

  /* Card grids fill the wider column */
  #feed-list,
  #liked-list,
  #cities-list,
  #liked-cities-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* Primary (full-screen) empty states sit in the vertical centre of
     the canvas instead of clinging to the top. Scoped to empty states
     that span the grid — inline "no results" rows are unaffected. */
  .empty-state[style*="grid-column"] {
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}


/* Inline city search — hidden on mobile, shown on desktop inside Feed header */
.region-btn-inline { display: none; }

@media (min-width: 900px) {
  .region-btn-inline {
    display: flex;
    align-items: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   ✦ PLAYFUL UI LAYER — colorful accents + tasteful motion
   (additive; keeps the warm terracotta identity)
   ════════════════════════════════════════════════════════════════ */

:root {
  --amber2:#FB923C;
}

/* ── Ambient animated color blobs behind the whole app ─────────── */
.device::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(194,113,79,0.15), transparent 60%),
    radial-gradient(34% 34% at 82% 18%, rgba(242,178,92,0.14), transparent 60%),
    radial-gradient(40% 40% at 75% 80%, rgba(109,127,209,0.12), transparent 60%),
    radial-gradient(34% 34% at 22% 82%, rgba(230,160,144,0.10), transparent 60%);
  filter: blur(20px);
  animation: blobDrift 26s ease-in-out infinite alternate;
}
body.light-mode .device::before { opacity: 0.5; }
.app-root { position: relative; z-index: 1; }

@keyframes blobDrift {
  0%   { transform: translate3d(0,0,0)        scale(1);    }
  50%  { transform: translate3d(2%, -2%, 0)   scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0)   scale(1.04); }
}

/* ── Animated rainbow-violet brand wordmark ────────────────────── */
.brand {
  background: linear-gradient(100deg, #F0EFFF 0%, var(--v2) 30%, var(--sun) 55%, var(--amber2) 80%, #F0EFFF 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brandShine 7s linear infinite;
}
@keyframes brandShine {
  to { background-position: 220% center; }
}

/* ── Card entrance: staggered fade-up ──────────────────────────── */
#feed-list .feed-item,
#cities-list .feed-item,
#liked-list .feed-item {
  animation: cardRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#feed-list .feed-item:nth-child(1),  #cities-list .feed-item:nth-child(1)  { animation-delay: 0.02s; }
#feed-list .feed-item:nth-child(2),  #cities-list .feed-item:nth-child(2)  { animation-delay: 0.06s; }
#feed-list .feed-item:nth-child(3),  #cities-list .feed-item:nth-child(3)  { animation-delay: 0.10s; }
#feed-list .feed-item:nth-child(4),  #cities-list .feed-item:nth-child(4)  { animation-delay: 0.14s; }
#feed-list .feed-item:nth-child(5),  #cities-list .feed-item:nth-child(5)  { animation-delay: 0.18s; }
#feed-list .feed-item:nth-child(6),  #cities-list .feed-item:nth-child(6)  { animation-delay: 0.22s; }
#feed-list .feed-item:nth-child(7),  #cities-list .feed-item:nth-child(7)  { animation-delay: 0.26s; }
#feed-list .feed-item:nth-child(8),  #cities-list .feed-item:nth-child(8)  { animation-delay: 0.30s; }
#feed-list .feed-item:nth-child(n+9),#cities-list .feed-item:nth-child(n+9){ animation-delay: 0.34s; }
@keyframes cardRise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Livelier card hover: colorful glow + image zoom ───────────── */
.feed-item { transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s, border-color 0.22s; }
.feed-item:hover {
  transform: translateY(-5px);
  border-color: rgba(212,133,106,0.45);
  box-shadow: 0 14px 38px rgba(0,0,0,0.5), 0 0 0 1px rgba(194,113,79,0.25), 0 10px 40px -8px rgba(194,113,79,0.35);
}
.place-img { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.feed-item:hover .place-img { transform: scale(1.07); }

/* ── Pills: gentle pop on hover ────────────────────────────────── */
.pill { transition: transform 0.15s ease, filter 0.15s ease; }
.feed-item:hover .pill { filter: brightness(1.12) saturate(1.15); }
.pill:hover { transform: translateY(-1px) scale(1.04); }

/* ── Filter chips: bouncy active + hover ───────────────────────── */
.filter-chip { transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s; }
.filter-chip:hover { transform: translateY(-1px); border-color: rgba(212,133,106,0.4); }
.filter-chip.active { animation: chipPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes chipPop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Primary buttons: shine sweep + springy press ──────────────── */
.btn-primary { position: relative; overflow: hidden; transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, background 0.2s; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:hover::after { left: 130%; }

/* ── Discover toggle: gradient active pill + spring ────────────── */
.discover-toggle button { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, color 0.2s, box-shadow 0.2s; }
.discover-toggle button.active {
  background: linear-gradient(135deg, var(--v) 0%, var(--sun) 110%);
  box-shadow: 0 4px 16px rgba(194,113,79,0.45);
  animation: chipPop 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.discover-toggle button:not(.active):hover { color: var(--v2); transform: translateY(-1px); }

/* ── Bottom-tab active: little bounce when selected ────────────── */
.tab-btn.active svg { animation: tabBounce 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes tabBounce {
  0% { transform: scale(0.8) translateY(2px); }
  60% { transform: scale(1.15) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* ── Wishlist heart: pop when liked ────────────────────────────── */
.card-img-btn.wishlist.active svg { animation: heartPop 0.42s cubic-bezier(0.34,1.7,0.5,1); }
@keyframes heartPop {
  0% { transform: scale(0.6); }
  45% { transform: scale(1.35); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ── Floating heart/sparkle burst particles (spawned by JS) ────── */
.vibe-burst {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 16px;
  line-height: 1;
  will-change: transform, opacity;
  animation: burstFloat 0.85s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes burstFloat {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0.4) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1.1) rotate(var(--br)); }
}

/* ── Empty-state: soft floating emoji feel ─────────────────────── */
.empty-state { animation: cardRise 0.5s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Respect reduced-motion preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .device::before,
  .brand,
  .feed-item,
  .tab-btn.active svg,
  .card-img-btn.wishlist.active svg,
  .discover-toggle button.active,
  .filter-chip.active,
  .empty-state { animation: none !important; }
  .vibe-burst { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ✦ TRENDY / DE-BOXED TRIP VIEWS + responsive split (Plan & Group)
   ════════════════════════════════════════════════════════════════ */

/* ── Slimmer, pill-shaped Discover search ──────────────────────── */
.search-wrap {
  border-radius: 999px;
  padding: 7px 16px;
  gap: 9px;
  max-width: 440px;
  margin-bottom: 14px;
}
.search-wrap svg { width: 15px; height: 15px; }
#search-input, #cities-search-input, #cities-results-search-input, #group-search-input, #plan-detail-search { font-size: 13px; }

/* ── De-boxed trip header: round back + big bold name ──────────── */
.trip-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.trip-back {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink3); border: none; color: var(--fg);
  font-size: 18px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.trip-back:hover { background: var(--ink4); }
.trip-back:active { transform: scale(0.9); }
.trip-head-name {
  font-family: 'Clash Display', sans-serif; font-weight: 700;
  font-size: 24px; letter-spacing: -0.6px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Inline meta row (replaces stat boxes) ─────────────────────── */
.trip-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 12px; color: var(--fg2); margin: 0 0 14px;
}
.trip-meta strong { color: var(--fg); font-family: 'Clash Display', sans-serif; }
.trip-meta-dot { opacity: 0.3; }

/* ── Group action toolbar (title + soft chips) ─────────────────── */
.trip-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.trip-toolbar-title { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; }
.trip-toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trip-chip-soft {
  font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 11px;
  color: var(--v2); background: rgba(194,113,79,0.14);
  border: 1px solid rgba(194,113,79,0.28); border-radius: 999px; padding: 5px 11px;
}

/* ── Slim pill search used inside trip views ───────────────────── */
.trip-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink3); border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 14px;
  max-width: 440px; transition: border-color .2s;
}
.trip-search:focus-within { border-color: rgba(194,113,79,0.5); }
.trip-search svg { width: 15px; height: 15px; opacity: 0.45; flex-shrink: 0; }
.trip-search input {
  flex: 1; background: none; border: none; outline: none; color: var(--fg);
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 13px;
}
.trip-search input::placeholder { color: var(--fg3); }

/* ── Responsive split: places (major) | itinerary (minor) ──────── */
#plan-shortlist, #group-shortlist { display: block; margin-top: 0; }
.trip-split { display: flex; flex-direction: column; gap: 16px; }
.trip-split-main {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.trip-split-side { min-width: 0; }
@media (max-width: 1023px) {
  .trip-split-side { order: -1; }   /* itinerary / CTA sits above places on phones */
}
@media (min-width: 1024px) {
  .trip-split { flex-direction: row; align-items: flex-start; gap: 22px; }
  .trip-split-main { flex: 1 1 0; }
  .trip-split-side {
    flex: 0 0 380px; position: sticky; top: 4px;
    max-height: calc(100vh - 130px); overflow-y: auto;
    scrollbar-width: thin;
  }
}
/* Roomier itinerary column on large screens */
@media (min-width: 1440px) {
  .trip-split-side { flex-basis: 430px; }
}

/* ── Itinerary side panel ──────────────────────────────────────── */
.trip-itin-panel {
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--rad2);
  padding: 16px;
}
.trip-itin-empty { text-align: center; padding: 26px 16px; }
.trip-pill-btn {
  border: 1px solid rgba(255,255,255,0.1); background: var(--ink3); color: var(--fg2);
  border-radius: 999px; font-family: 'Clash Display', sans-serif; font-weight: 700;
  font-size: 11px; padding: 6px 13px; cursor: pointer; transition: all .15s;
}
.trip-pill-btn:hover { background: var(--ink4); color: var(--fg); }
/* Icon-only pill (e.g. Share with Community) — compact, square */
.trip-pill-icon {
  padding: 6px; width: 30px; height: 30px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.trip-pill-icon:hover { border-color: rgba(194,113,79,0.45); }

/* ── Flatter, less-boxy content cards (gen-Z clean) ────────────── */
.feed-item, .group-shortlist-card {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
}
.card {
  box-shadow: none;
  border-radius: var(--rad2);
}

/* ════════════════════════════════════════════════════════════════
   ✦ LIGHT MODE — comprehensive border/background audit
   All rgba(255,255,255,…) values become invisible on light
   backgrounds; swap to rgba(0,0,0,…) equivalents here.
   ════════════════════════════════════════════════════════════════ */

/* ── Header / Footer chrome ─────────────────────────────────── */
body.light-mode #region-btn             { border-color: rgba(0,0,0,0.12) !important; }

/* ── Icon buttons (header wishlist, theme toggle wrapper) ────── */
body.light-mode .icon-btn               { border-color: rgba(0,0,0,0.1); }

/* ── Discover toggle ─────────────────────────────────────────── */
body.light-mode .discover-toggle        { border-color: rgba(0,0,0,0.1); }

/* ── Ghost buttons ───────────────────────────────────────────── */
body.light-mode .btn-ghost              { border-color: rgba(0,0,0,0.14); }
body.light-mode .btn-ghost:hover        { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.22); }

/* ── Taste / preference chips ────────────────────────────────── */
body.light-mode .taste-chip             { border-color: rgba(0,0,0,0.09); }

/* ── Plan & history cards ────────────────────────────────────── */
body.light-mode .plan-item              { border-color: rgba(0,0,0,0.08); }
body.light-mode .history-entry          { border-color: rgba(0,0,0,0.08); }

/* ── Profile sub-tabs ────────────────────────────────────────── */
body.light-mode .profile-subtab         { border-color: rgba(0,0,0,0.09); }

/* ── Onboarding cards & vibe chips ──────────────────────────── */
body.light-mode .onboard-choice-card,
body.light-mode .onboard-city-card,
body.light-mode .destination-vibe-chip,
body.light-mode .destination-result-card { border-color: rgba(0,0,0,0.1); }
body.light-mode .destination-empty      { border-color: rgba(0,0,0,0.15); }
body.light-mode #onboard-summary        { border-color: rgba(0,0,0,0.09) !important; }

/* ── Interest pills (onboarding summary) ─────────────────────── */
body.light-mode .interest-pill          { border-color: rgba(0,0,0,0.1); }

/* ── Modal internals ─────────────────────────────────────────── */
body.light-mode .modal-item             { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
body.light-mode .modal-close:hover      { background: rgba(0,0,0,0.06); }
body.light-mode .modal::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ── Auth form — OR divider lines ────────────────────────────── */
body.light-mode .auth-sep               { background: rgba(0,0,0,0.09) !important; }

/* ── Auth form — Google SSO buttons ──────────────────────────── */
body.light-mode .google-auth-btn        { border-color: rgba(0,0,0,0.14) !important; }
body.light-mode .google-auth-btn:hover  { border-color: rgba(0,0,0,0.28) !important; }

/* ── City search & suggestion dropdown ───────────────────────── */
body.light-mode #city-search-inner      { border-color: rgba(0,0,0,0.1) !important; }
body.light-mode #city-type-suggestions,
body.light-mode #liked-city-dropdown,
body.light-mode #group-city-options     { border-color: rgba(0,0,0,0.1) !important;
                                          box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }

/* ── Reminder filter buttons ─────────────────────────────────── */
body.light-mode .reminder-filter-btn    { border-color: rgba(0,0,0,0.1) !important; }

/* ── Reminder item row dividers ──────────────────────────────── */
body.light-mode .reminder-item          { border-bottom-color: rgba(0,0,0,0.07); }

/* ── Group internal panels ───────────────────────────────────── */
body.light-mode .group-tab-jump         { border-color: rgba(0,0,0,0.1); }

/* ── Place detail wiki block ─────────────────────────────────── */
body.light-mode #place-detail-wiki-block { border-color: rgba(0,0,0,0.08) !important; }

/* ── Itinerary card ──────────────────────────────────────────── */
body.light-mode .itinerary-card         { border-color: rgba(0,0,0,0.1); }

/* ── Trip split UI (plan/group views) ───────────────────────── */
body.light-mode .trip-itin-panel        { border-color: rgba(0,0,0,0.1); }
body.light-mode .trip-search            { border-color: rgba(0,0,0,0.1); background: #EDE8E1; }
body.light-mode .trip-pill-btn          { border-color: rgba(0,0,0,0.1); }

/* ── Desktop sidebar ─────────────────────────────────────────── */
body.light-mode .sidebar-nav-item      { color: rgba(0,0,0,0.6); }
body.light-mode .sidebar               { border-right-color: rgba(0,0,0,0.08);
                                         background: var(--ink2); }
body.light-mode .sidebar-footer        { border-top-color: rgba(0,0,0,0.08); }
body.light-mode .sidebar-theme-btn     { border-color: rgba(0,0,0,0.1); }
body.light-mode .sidebar-theme-btn:hover { background: rgba(0,0,0,0.05); }

/* ════════════════════════════════════════════════════════════════
   ✦ GROUP TRIPS — image-card grid
   ════════════════════════════════════════════════════════════════ */

.group-trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 4px;
}

.group-trip-card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
}
.group-trip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.group-trip-card:active { transform: scale(0.98); }

/* Cover image area */
.gtc-cover {
  position: relative;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  transition: background-image 0.3s ease;
}

/* Gradient scrim so text is always readable */
.gtc-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}

/* Card delete — revealed on card hover/focus; always visible on touch,
   where there is no hover to reveal it. */
.gtc-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(239,68,68,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(239,68,68,0.4);
  color: #EF4444;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.16s, background 0.16s;
}
.group-trip-card:hover .gtc-del,
.gtc-del:focus-visible { opacity: 1; }
.gtc-del:hover { background: rgba(239,68,68,0.45); }
@media (hover: none) { .gtc-del { opacity: 1; } }

/* Ghost "create" card that closes out the trips grid */
.gtc-ghost {
  min-height: 262px;
  border: 1.5px dashed var(--border2);
  border-radius: 20px;
  background: none;
  color: var(--fg2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Clash Display', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.gtc-ghost:hover {
  border-color: rgba(212,133,106,0.55);
  color: var(--v2);
  background: rgba(194,113,79,0.06);
}
.gtc-ghost-plus {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  background: var(--ink3);
  border: 1px solid var(--border);
}

/* Small badge at top-left */
.gtc-top-label {
  position: relative;
  z-index: 1;
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 8px);
}

/* Name + location at bottom of image */
.gtc-info {
  position: relative;
  z-index: 1;
}
.gtc-name {
  font-family: 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  margin-bottom: 4px;
}
.gtc-city {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Footer strip */
.gtc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 12px;
  gap: 10px;
}
.gtc-avatars {
  display: flex;
  gap: -4px;
}
.gtc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin-left: -6px;
  flex-shrink: 0;
}
.gtc-avatars .gtc-avatar:first-child { margin-left: 0; }

.gtc-stats { text-align: right; }
.gtc-days {
  font-family: 'Clash Display', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #C2714F;
}
.gtc-date {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 11px;
  color: var(--fg3);
  margin-top: 1px;
}

body.light-mode .group-trip-card { border-color: rgba(0,0,0,0.09); }

/* ── Group Chat ─────────────────────────────────────────────── */
.chat-modal {
  width: 460px; max-width: 96vw; max-height: 88vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.chat-modal .modal-header { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 280px; max-height: 420px;
}
.chat-empty {
  text-align: center; padding: 40px 20px;
  color: var(--fg3); font-size: 13px; line-height: 1.8; margin: auto;
}
.chat-empty span { opacity: 0.6; }
.chat-date-sep {
  text-align: center; font-size: 11px; color: var(--fg3);
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  padding: 4px 0; letter-spacing: 0.03em;
}
.chat-msg { display: flex; align-items: flex-end; gap: 8px; }
.chat-msg-own { flex-direction: row-reverse; }
.chat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
}
.chat-bubble {
  max-width: 72%; background: var(--ink3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px 16px 16px 4px; padding: 8px 12px;
}
.chat-msg-own .chat-bubble {
  background: rgba(194,113,79,0.18); border-color: rgba(194,113,79,0.28);
  border-radius: 16px 16px 4px 16px;
}
.chat-name {
  font-size: 11px; font-weight: 700; color: var(--fg2);
  margin-bottom: 3px; font-family: 'Clash Display', sans-serif;
}
.chat-text { font-size: 13px; color: var(--fg); line-height: 1.45; word-break: break-word; }
.chat-time { font-size: 10px; color: var(--fg3); margin-top: 4px; text-align: right; }
.chat-input-row {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.chat-input-row input {
  flex: 1; background: var(--ink3); border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: var(--rad3); color: var(--fg);
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 14px;
  padding: 9px 12px; outline: none; transition: border-color 0.2s;
}
.chat-input-row input:focus { border-color: rgba(194,113,79,0.5); }
body.light-mode .chat-bubble              { background: #EDE8E1; border-color: rgba(0,0,0,0.07); }
body.light-mode .chat-msg-own .chat-bubble { background: rgba(194,113,79,0.15); border-color: rgba(194,113,79,0.25); }
body.light-mode .chat-input-row input     { background: #EDE8E1; border-color: rgba(0,0,0,0.1); }

/* ── Place opening hours ─────────────────────────────────────── */
.place-hours-block {
  background: var(--ink3); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--rad3); padding: 12px 14px; margin-bottom: 14px;
}
.hours-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.hours-badge {
  font-size: 11px; font-weight: 700; font-family: 'Clash Display', sans-serif;
  border-radius: 999px; padding: 3px 10px; letter-spacing: 0.02em;
}
.hours-open  { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.hours-closed { background: rgba(239,68,68,0.12); color: #EF4444; border: 1px solid rgba(239,68,68,0.25); }
.hours-today-time { font-size: 13px; color: var(--fg2); }
.hours-week { display: flex; flex-direction: column; gap: 4px; }
.hours-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 3px 0; color: var(--fg2);
}
.hours-row-today { color: var(--fg); font-weight: 700; }
.hours-day { font-family: 'Clash Display', sans-serif; font-size: 11px; font-weight: 600; width: 32px; flex-shrink: 0; }
.hours-time { color: var(--fg2); }
.hours-time-closed { color: var(--fg3); }
.hours-row-today .hours-day,
.hours-row-today .hours-time { color: var(--v2); }
.hours-note { font-size: 10px; color: var(--fg3); margin-top: 10px; }
body.light-mode .place-hours-block { background: #EDE8E1; border-color: rgba(0,0,0,0.08); }

/* ════════════════════════════════════════════════════════════════
   ✈ TRAVEL-GRADE LAYER — golden-hour identity, hero greeting,
   floating dock nav, journey-route itinerary, richer cards.
   (additive; appended last so it wins the cascade)
   ════════════════════════════════════════════════════════════════ */

/* Golden-hour palette — sunset over water, not neon rainbow */
:root {
  --sun:    #F2B25C;  /* golden hour */
  --dusk:   #6D7FD1;  /* dusk sky */
  --lagoon: #35B8AE;  /* shallow lagoon */
  --sand:   #EAD9BC;  /* warm sand */
}

/* Ambient blobs → a sunset horizon: warm up top, cool below */
.device::before {
  background:
    radial-gradient(42% 40% at 20% 15%, rgba(194,113,79,0.20),  transparent 62%),
    radial-gradient(36% 34% at 80% 12%, rgba(242,178,92,0.16),  transparent 60%),
    radial-gradient(44% 42% at 78% 85%, rgba(109,127,209,0.14), transparent 62%),
    radial-gradient(38% 36% at 18% 88%, rgba(53,184,174,0.11),  transparent 60%);
}

/* Brand wordmark → sand → terracotta → gold → dusk sweep */
.brand {
  background: linear-gradient(100deg, var(--sand) 0%, var(--v2) 30%, var(--sun) 55%, var(--amber2) 80%, var(--sand) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Discover hero — big greeting + spotlight search ──────────── */
#discover-home-header { padding-top: 6px; }

/* Hero search pill — the "where to next?" moment */
.search-wrap.discover-city-search {
  padding: 13px 20px;
  gap: 11px;
  background: var(--ink2);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.search-wrap.discover-city-search:focus-within {
  border-color: rgba(212,133,106,0.65);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 0 4px rgba(194,113,79,0.14);
  transform: translateY(-1px);
}
.search-wrap.discover-city-search svg { opacity: 0.7; color: var(--v2); }
body.light-mode .search-wrap.discover-city-search {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 6px 22px rgba(26,23,20,0.10);
}

/* ── Discover home — centered hero ───────────────────────────── */
/* Clean home fills the scroll area and sits vertically centered (a touch
   above true center for optical balance). Results/city views scroll normally. */
#feed.discover-centered.active { padding-bottom: 5vh; }

#discover-home-header { text-align: left; }
/* The advisor prompt and starters are centred with the rest of the hero. The
   conversation itself now lives in its own sheet, outside this subtree. */

/* While searching, the hero keeps only the search box — the greeting and
   prompt collapse so results sit high on the page. */
/* While a search is running, the hero keeps only the ask — the greeting,
   the strapline, the starters, the rail and the tiles collapse so results
   sit high on the page. The ask itself stays: it holds the query. */
#discover-home-header.discover-hero-compact .discover-greeting,
#discover-home-header.discover-hero-compact .discover-ask-title,
#discover-home-header.discover-hero-compact .discover-ask-sub,
#discover-home-header.discover-hero-compact .advisor-starters,
#discover-home-header.discover-hero-compact .discover-home-rail,
#discover-home-header.discover-hero-compact #discover-cat-tiles { display: none; }
#discover-home-header.discover-hero-compact { padding-top: 0; margin-bottom: 4px; }
#discover-home-header.discover-hero-compact .discover-home-cols {
  grid-template-columns: minmax(0, 1fr);
}


/* ── Discover home — two-column shell ─────────────────────────── */
/* The ask and the tiles lead; the rail carries what's already on the go.
   Below 1100px the rail drops under the tiles rather than squeezing both. */
.discover-home-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 34px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}
.discover-home-main { min-width: 0; }
@media (max-width: 1100px) {
  .discover-home-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Rail below the tiles on narrow screens: the ask must stay first. */
  .discover-home-rail { order: 2; }
}

/* Greeting demoted to a status line — it names the next trip instead of
   restating the user's own name at headline size. */
.discover-greeting {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 14px;
  color: var(--fg2);
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  min-height: 20px;
}
.discover-greeting .dg-sep { color: var(--fg3); }
.discover-greeting .dg-trip { color: var(--fg3); }

.discover-ask-title {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(25px, 3.2vw, 34px);
  letter-spacing: -1px;
  line-height: 1.12;
  margin-bottom: 7px;
}
.discover-ask-sub {
  font-size: 14.5px;
  color: var(--fg2);
  line-height: 1.45;
  margin-bottom: 16px;
  max-width: 52ch;
}

/* The merged ask reuses .advisor-input-row for the pill; these are the
   additions for the leading search glyph. */
#discover-ask-row { padding-left: 20px; }
.discover-ask-icon { flex: none; color: var(--v2); opacity: 0.85; }

/* City matches under the ask. Their presence is the affordance: rows mean
   "this is a place", none means enter goes to the advisor. */
.discover-ask-matches {
  margin-top: 9px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad2);
  background: var(--ink2);
  overflow: hidden;
}
.discover-ask-match {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 15px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 0.13s;
}
.discover-ask-match:first-child { border-top: none; }
.discover-ask-match:hover,
.discover-ask-match:focus-visible { background: rgba(194, 113, 79, 0.10); outline: none; }
.discover-ask-match-img {
  width: 38px; height: 38px; flex: none;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink4);
}
/* A country row has no cover photo — a globe glyph on the tile ground marks
   it as a different kind of result from the city rows below it. */
.discover-ask-match-img.is-country {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(194, 113, 79, 0.16);
  color: var(--v3);
}
.discover-ask-match-name {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
}
.discover-ask-match-meta { display: block; font-size: 12.5px; color: var(--fg2); margin-top: 1px; }
.discover-ask-match-go { margin-left: auto; font-size: 12.5px; color: var(--fg3); flex: none; }

/* ── Discover home — side rail ────────────────────────────────── */
.discover-home-rail { display: flex; flex-direction: column; gap: 14px; }
.discover-side-card {
  border: 1.5px solid var(--border);
  border-radius: var(--rad2);
  background: var(--ink2);
  padding: 18px;
  text-align: left;
}
/* The next trip is the one card worth an accent edge — it's the thing with
   a deadline attached. */
.discover-side-card.is-lead { border-color: var(--border2); }
.discover-side-label {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 11px;
}
.discover-side-trip {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  cursor: pointer; text-align: left; color: inherit;
}
.discover-side-trip-name {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
}
.discover-side-trip-cities { display: block; font-size: 13px; color: var(--fg2); margin-top: 4px; }
.discover-side-trip-foot {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--fg2);
}
.discover-side-trip:hover .discover-side-trip-name { color: var(--v2); }

.discover-side-rows { display: flex; flex-direction: column; gap: 4px; }
.discover-side-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 6px; margin: -6px 0;
  background: none; border: none; border-radius: 10px;
  cursor: pointer; text-align: left; color: inherit;
  transition: background 0.13s;
}
.discover-side-row:hover { background: rgba(255, 255, 255, 0.04); }
body.light-mode .discover-side-row:hover { background: rgba(0, 0, 0, 0.04); }
.discover-side-row-img {
  width: 42px; height: 42px; flex: none;
  border-radius: 10px;
  background-size: cover; background-position: center;
  background-color: var(--ink4);
}
.discover-side-row-name {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700; font-size: 14px;
}
.discover-side-row-meta { display: block; font-size: 12px; color: var(--fg3); margin-top: 1px; }

/* ── Discover home — category photo tiles ─────────────────────── */
#discover-cat-tiles { margin-top: 30px; }
/* Bento: the plan tile fills the left half (3 of 6 columns, both rows); the
   six category tiles fill the right half in a 3x2 block — exactly six cells,
   so nothing is orphaned. Fixed row heights keep every tile the same shape;
   auto-placement with mixed spans produced ragged rows. */
.discover-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, 152px);
  gap: 12px;
}
.discover-cat-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--rad2);
  overflow: hidden;
  cursor: pointer;
  background: var(--ink2);
  font-family: 'Clash Display', sans-serif;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.discover-cat-tile:hover,
.discover-cat-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cat);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.discover-cat-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
.discover-cat-tile:hover .discover-cat-img { transform: scale(1.06); }
.discover-cat-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 17, 23, 0.82) 0%, rgba(13, 17, 23, 0.25) 55%, rgba(13, 17, 23, 0.05) 100%);
}
.discover-cat-body {
  position: absolute; left: 13px; right: 10px; bottom: 11px;
  display: flex; flex-direction: column;
}
.discover-cat-name {
  font-weight: 700; font-size: 15px; letter-spacing: -0.2px; color: #fff;
  display: inline-flex; align-items: center; gap: 5px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.discover-browse-all {
  margin-top: 14px; padding: 4px 0;
  background: none; border: none; cursor: pointer;
  color: var(--fg2); font-family: 'Cabinet Grotesk', sans-serif; font-size: 13px;
}
.discover-browse-all:hover { color: var(--v2); }
@media (prefers-reduced-motion: reduce) {
  .discover-cat-tile, .discover-cat-img { transition: none; }
}

/* "Start planning a trip" — the largest cell in the bento, filling the left
   half of the grid so it dominates without breaking out of the tile system. */
.discover-plan-tile {
  position: relative;
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 24px 26px;
  border: none;
  border-radius: var(--rad2);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(135deg, var(--v) 0%, #A6532F 55%, #6E3419 100%);
  font-family: 'Clash Display', sans-serif;
  transition: transform 0.15s, box-shadow 0.2s;
}
@media (max-width: 720px) {
  /* Narrow: 2 columns — plan tile full-width on top, then the six tiles 2x3. */
  .discover-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 176px repeat(3, 92px); }
  .discover-plan-tile { grid-column: 1 / -1; grid-row: 1; padding: 20px 22px; }
}
.discover-plan-tile:hover,
.discover-plan-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -8px rgba(110, 52, 25, 0.5);
}
.discover-plan-glow {
  position: absolute; right: -50px; top: -50px; width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 65%);
  pointer-events: none;
}
.discover-plan-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin-bottom: 2px;
}
.discover-plan-icon svg { width: 19px; height: 19px; }
.discover-plan-title {
  color: #fff; font-weight: 700; font-size: 18px; line-height: 1.2;
  text-wrap: balance;
}
.discover-plan-sub {
  color: rgba(255,255,255,0.82);
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 500;
  font-size: 12.5px; line-height: 1.45; max-width: 25ch;
  margin-bottom: 4px;
}
.discover-plan-go {
  display: inline-flex; align-items: center;
  background: #fff; color: #6E3419;
  font-weight: 700; font-size: 12.5px;
  padding: 8px 16px; border-radius: 999px;
}

/* ── Trip type chooser (solo vs group) ────────────────────────── */
.trip-type-options { display: flex; flex-direction: column; gap: 10px; }
.trip-type-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 16px;
  background: var(--ink3);
  border: 1.5px solid var(--border);
  border-radius: var(--rad3);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.trip-type-card:hover,
.trip-type-card:focus-visible {
  border-color: var(--v2);
  background: var(--ink4);
  transform: translateY(-1px);
}
.trip-type-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(194, 113, 79, 0.16);
  color: var(--v2);
  display: flex; align-items: center; justify-content: center;
}
.trip-type-icon svg { width: 19px; height: 19px; }
.trip-type-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.trip-type-name {
  font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 14.5px;
  color: var(--fg);
}
.trip-type-desc {
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 12px;
  color: var(--fg2); line-height: 1.4;
}
.trip-type-arrow { color: var(--fg3); font-size: 16px; flex-shrink: 0; }
.trip-type-card:hover .trip-type-arrow { color: var(--v2); }
@media (prefers-reduced-motion: reduce) {
  .trip-type-card { transition: none; }
}

/* Section headings — small gradient route-marker underline */
.discover-section-heading { position: relative; }
.discover-section-heading::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  margin: 9px 0 0;
  background: linear-gradient(90deg, var(--v), var(--sun));
}

/* Empty results heading (category browsing — the filter chip already says
   what's shown). Hidden outright so its gradient underline and line box
   don't leave a stray mark above the chips. */
#cities-results-heading:empty { display: none; }

/* Rails — snap scrolling so cards land cleanly, like app-store rails */
.discover-rail-card { scroll-snap-align: start; }

/* ── Cards — postcard treatment ───────────────────────────────── */
.feed-item { border-radius: 18px; }
.place-img-wrap { height: 210px; }
.place-img-wrap::after {
  height: 72%;
  background: linear-gradient(to top, rgba(10,12,18,0.72) 0%, rgba(10,12,18,0.18) 55%, transparent 100%);
}

/* Heart pop when a place is saved */
@keyframes heartPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28) rotate(-6deg); }
  100% { transform: scale(1); }
}
.card-img-btn.wishlist.active svg { animation: heartPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Floating dock tab bar (mobile) ───────────────────────────── */
footer {
  height: 72px;
  margin: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 6px 8px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(17,21,31,0.90);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 14px 34px rgba(0,0,0,0.50), 0 2px 10px rgba(0,0,0,0.35);
}
body.light-mode footer {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 14px 34px rgba(26,23,20,0.18), 0 2px 10px rgba(26,23,20,0.08);
}
/* Center the active pill inside the slimmer dock */
.tab-btn.active::before {
  top: 50%;
  transform: translate(-50%, -50%);
  height: 46px;
}
/* Breathing room so the last card isn't glued to the dock */
main { padding-bottom: 26px; }

/* ── Journey-route itinerary ──────────────────────────────────── */
/* Travel hop between stops — dashed "walking segment" chip */
.travel-hop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Clash Display', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg2);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px dashed rgba(212,133,106,0.45);
  background: rgba(194,113,79,0.07);
}

/* ── Tab switch — gentle arrival, like turning a page ─────────── */
@keyframes tabArrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.tab.active { animation: tabArrive 0.28s ease both; }

/* Empty-state icon drifts like a paper plane */
.empty-state-icon { display: inline-block; animation: floaty 3.4s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Respect reduced-motion for everything this layer animates */
@media (prefers-reduced-motion: reduce) {
  .tab.active,
  .empty-state-icon,
  .card-img-btn.wishlist.active svg { animation: none !important; }
  .search-wrap.discover-city-search,
  .search-wrap.discover-city-search:focus-within { transform: none; }
}

/* ── Inline-editable group itinerary panel ────────────────────── */
.grp-itin-row {
  display: flex;
  gap: 9px;
  padding: 4px 6px 4px 0;
  align-items: center;
  border-radius: 8px;
  transition: background 0.15s;
}
.grp-itin-row:hover { background: rgba(194,113,79,0.07); }
.grp-itin-clickable { cursor: pointer; }
.grp-itin-time {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Clash Display', sans-serif;
  color: var(--v2);
  white-space: nowrap;
  min-width: 52px;
}
.grp-itin-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.35;
}
.grp-itin-ctrl {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.grp-itin-row:hover .grp-itin-ctrl,
.grp-itin-ctrl:focus-within { opacity: 1; }
.grp-itin-mv, .grp-itin-rm {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--fg3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.grp-itin-mv:hover { background: var(--ink4); color: var(--fg); }
.grp-itin-rm { font-size: 14px; font-weight: 400; line-height: 1; border-color: rgba(239,68,68,0.30); color: var(--red); }
.grp-itin-rm:hover { background: rgba(239,68,68,0.12); }
body.light-mode .grp-itin-mv,
body.light-mode .grp-itin-rm { border-color: rgba(0,0,0,0.14); }
body.light-mode .grp-itin-rm { border-color: rgba(239,68,68,0.35); }
/* Touch devices have no hover — keep controls always visible */
@media (hover: none) { .grp-itin-ctrl { opacity: 1; } }

/* ── Group itinerary panel v2 — informative editable stop cards ── */
.grp-itin-row {
  align-items: flex-start;
  gap: 10px;
  padding: 7px 6px 7px 0;
}
.grp-itin-narrative {
  font-size: 11px;
  color: var(--fg2);
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 7px 27px;
}
/* Photo thumbnail — reuses .place-img-wrap machinery at postage-stamp size */
.grp-itin-thumb.place-img-wrap {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 2px;
}
.grp-itin-thumb.place-img-wrap::after { display: none; }  /* no scrim on thumbs */
.grp-itin-thumb .place-icon-fallback { font-size: 20px; }
.grp-itin-thumb.is-break { background: rgba(194,113,79,0.10); border: 1px dashed rgba(212,133,106,0.35); }

.grp-itin-main { flex: 1; min-width: 0; }
.grp-itin-time {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Clash Display', sans-serif;
  color: var(--v2);
  white-space: nowrap;
  min-width: 0;
}
.grp-itin-dur { color: var(--fg3); font-weight: 600; }
.grp-itin-title {
  font-size: 13px;
  color: var(--fg);
  font-weight: 700;
  font-family: 'Clash Display', sans-serif;
  line-height: 1.3;
  margin-top: 1px;
}
.grp-itin-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.grp-itin-tags .pill { font-size: 9.5px; padding: 2px 8px; }
.grp-itin-desc {
  font-size: 11px;
  color: var(--fg2);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grp-itin-ctrl { flex-direction: column; margin-top: 2px; }

/* "+ Add place" + inline shortlist picker */
.grp-itin-add {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 7px 10px;
  background: none;
  border: 1.5px dashed rgba(212,133,106,0.40);
  border-radius: 10px;
  color: var(--v2);
  font-family: 'Clash Display', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.grp-itin-add:hover { background: rgba(194,113,79,0.08); border-color: rgba(212,133,106,0.65); }

.grp-itin-picker {
  margin: 6px 0 2px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: var(--ink3);
  padding: 8px;
}
.grp-itin-picker-search { font-size: 12px !important; padding: 7px 10px !important; margin-bottom: 6px; }
.grp-itin-picker-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.grp-itin-picker-list::-webkit-scrollbar { width: 4px; }
.grp-itin-picker-list::-webkit-scrollbar-thumb { background: rgba(194,113,79,0.3); border-radius: 4px; }
.grp-itin-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s;
}
.grp-itin-pick:hover { background: rgba(194,113,79,0.10); }
.grp-itin-pick-emoji { flex-shrink: 0; }
.grp-itin-pick-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-itin-pick-votes { flex-shrink: 0; font-size: 10px; color: var(--green); font-weight: 700; }
.grp-itin-picker-empty { font-size: 11px; color: var(--fg3); padding: 8px; text-align: center; }
body.light-mode .grp-itin-picker { border-color: rgba(0,0,0,0.10); }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY TAB (merged stories + published itineraries)
   ═══════════════════════════════════════════════════════════════ */
.community-tab { max-width: 960px; }

/* Single page title */
.community-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.community-title {
  font-family: 'Clash Display', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -0.4px;
}
/* "Find people" — accent (orange) pill, secondary weight so it doesn't shout */
.community-header .btn {
  padding: 8px 15px; font-size: 13px; font-weight: 700;
  color: var(--v2); border: 1.5px solid rgba(194,113,79,0.45);
  background: rgba(194,113,79,0.10); border-radius: 999px;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.community-header .btn:hover {
  background: rgba(194,113,79,0.18); border-color: rgba(194,113,79,0.7);
  transform: translateY(-1px);
}

/* Small uppercase zone labels ("Stories" / used above trips implicitly) */
.community-section-label {
  font-family: 'Clash Display', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--fg3); margin-bottom: 8px;
}

/* Stories zone, framed as one card-like band so it reads as a unit */
.community-stories-zone { margin-bottom: 22px; }

/* Divider that separates stories from the trips feed */
.community-stories-zone::after {
  content: ''; display: block; height: 1px; margin-top: 4px;
  background: linear-gradient(90deg, rgba(194,113,79,0.28), rgba(255,255,255,0.04) 60%, transparent);
}
body.light-mode .community-stories-zone::after {
  background: linear-gradient(90deg, rgba(194,113,79,0.35), rgba(0,0,0,0.05) 60%, transparent);
}

/* Trips section head: title on top, a compact search directly below it (left-
   aligned). Keeps the search anchored to the content instead of flying to the
   far right edge on wide screens. */
.community-section-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-bottom: 16px;
}
.community-section-title {
  font-family: 'Clash Display', sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: -0.3px;
}

/* Compact search — deliberately understated so content leads */
.community-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--ink3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; padding: 8px 14px;
  width: 320px; max-width: 100%; transition: border-color 0.18s, box-shadow 0.18s;
}
.community-search:focus-within {
  border-color: rgba(194,113,79,0.55);
  box-shadow: 0 0 0 3px rgba(194,113,79,0.12);
}
.community-search svg { flex-shrink: 0; opacity: 0.45; }
/* Override the global input box (border/bg/padding/radius) so it doesn't draw a
   second box inside the pill wrapper. The #id lifts specificity above the
   global `input:not([type=checkbox]):not([type=radio])` rule (three
   pseudo-classes), which otherwise wins and repaints the border + ink3 bg. */
.community-search input#community-search {
  flex: 1; min-width: 0; width: auto;
  background: none; border: none; outline: none;
  border-radius: 0; padding: 0; box-shadow: none;
  color: var(--fg); font-family: 'Cabinet Grotesk', sans-serif; font-size: 13px;
}
.community-search input#community-search:focus { border: none; box-shadow: none; }
.community-search input::placeholder { color: var(--fg3); }
.community-search #community-search-clear {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--fg3); font-size: 17px; line-height: 1; padding: 0 2px;
}
.community-search #community-search-clear:hover { color: var(--fg); }
body.light-mode .community-search { border-color: rgba(0,0,0,0.10); }

/* Trips grid: cap card width so a single card doesn't stretch across the page,
   and left-align so a sparse feed still looks intentional. */
.community-tab .group-trips-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  justify-content: start;
  gap: 18px;
}

@media (max-width: 640px) {
  .community-search { width: 100%; }
  .community-section-head { align-items: stretch; }
  .community-tab .group-trips-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ── Profile layout ─────────────────────────────────────────────
   A settings-style page: one centered column on small/medium screens,
   identity | activity two-column split on wide desktops. */
.profile-layout {
  max-width: 720px;
  margin: 0 auto;
}
#profile-logout-slot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
@media (min-width: 1200px) {
  .profile-layout {
    max-width: 1160px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 20px;
    align-items: start;
  }
}

/* "Start over" sits above the sheet's input. */
.advisor-reset {
  flex: none;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--fg3); font-family: 'Cabinet Grotesk', sans-serif; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px;
}
.advisor-reset:hover { color: var(--v); }

.advisor-modal { display: flex; flex-direction: column; max-height: min(78vh, 680px); }
.advisor-log {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 12px;
  min-height: 200px;
  text-align: left;
}
.advisor-modal-foot { flex-shrink: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.advisor-modal-foot .advisor-reset { display: block; margin: 0 0 8px; }
.advisor-input-row-modal { box-shadow: none; }

/* Starters read as suggestions, not buttons — no borders, no boxes. */
/* ── Itinerary refine panel ──────────────────────────────────── */
/* Sits under the timeline in the plan sheet: the conversation and the plan
   stay visible together, so a change is watched rather than reported. Reuses
   the advisor's bubble + typing styles so the two chats read as one system. */
.itin-refine {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.itin-refine-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--fg2);
  margin-bottom: 10px;
}
.itin-refine-head svg { color: var(--v2); }
/* Grows with the conversation, then scrolls rather than pushing the send box
   off the bottom of the sheet. */
.itin-refine-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.itin-refine-log:empty { display: none; }
.itin-refine-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 16px;
  background: var(--ink2);
  border: 1.5px solid var(--border2);
  border-radius: 999px;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.itin-refine-row:focus-within {
  border-color: rgba(212, 133, 106, 0.65);
  box-shadow: 0 0 0 4px rgba(194, 113, 79, 0.14);
}
/* Beat the global input rule, which would otherwise draw a second box inside
   the pill and repaint its border on focus. */
.itin-refine-row input#itin-refine-input,
.itin-refine-row input#itin-refine-input:focus {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 7px 0;
  font-size: 13px;
  color: var(--fg);
  box-shadow: none;
}
.itin-refine-row .advisor-send { width: 32px; height: 32px; }
.itin-refine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 7px;
  margin-top: 10px;
}

.advisor-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  margin-top: 13px;
}
.adv-msg { display: flex; }
.adv-msg-bot { justify-content: flex-start; }
.adv-msg-me  { justify-content: flex-end; }
/* Without the old card behind it, --ink3 sits only 1.19:1 against the page —
   the bubble needs its own edge to read as a bubble at all. */
.adv-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 16px 16px 16px 4px;
  background: var(--ink3);
  border: 1px solid var(--border2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
}
.adv-msg-me .adv-bubble {
  border-radius: 16px 16px 4px 16px;
  background: rgba(194, 113, 79, 0.18);
  border-color: rgba(194, 113, 79, 0.3);
}
/* Result cards need the full width of the sheet, not a chat bubble's 86%. */
.adv-msg-bot:has(.adv-picks) { display: block; }
.adv-msg-bot:has(.adv-picks) .adv-bubble { max-width: none; }

/* Typing indicator */
.adv-typing { display: flex; gap: 4px; align-items: center; }
.adv-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg3);
  animation: advBlink 1.2s infinite ease-in-out;
}
.adv-typing span:nth-child(2) { animation-delay: 0.18s; }
.adv-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes advBlink { 0%, 60%, 100% { opacity: 0.28; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .adv-typing span { animation: none; opacity: 0.5; }
}

/* Tappable openers for someone who doesn't know how to start */
.adv-starter {
  padding: 6px 13px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.045);
  color: var(--fg2);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.adv-starter:hover { background: rgba(194, 113, 79, 0.16); color: var(--v2); }
body.light-mode .adv-starter { background: rgba(0, 0, 0, 0.05); }
body.light-mode .adv-starter:hover { background: rgba(194, 113, 79, 0.14); color: var(--v); }

/* Input row */
/* The ask box mirrors the city-search pill below it, so the two read as one
   family rather than a boxed widget sitting on top of a rounded one. */
.advisor-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 20px;
  background: var(--ink2);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.advisor-input-row:focus-within {
  border-color: rgba(212,133,106,0.65);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 0 4px rgba(194,113,79,0.14);
  transform: translateY(-1px);
}
body.light-mode .advisor-input-row {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 6px 22px rgba(26,23,20,0.10);
}

/* Bare input — the pill around it already provides the frame.
   The ID selector is deliberate: the global `input:not([type=checkbox])...`
   base rule (top of this file) has higher specificity than a plain
   `.advisor-input-row input`, so a class-only reset leaves the browser
   drawing a second rounded box inside the pill — and its :focus partner
   re-paints the border the moment you click in. Both have to be beaten. */
.advisor-input-row input#advisor-input,
.advisor-input-row input#advisor-input:focus,
.advisor-input-row input#advisor-modal-input,
.advisor-input-row input#advisor-modal-input:focus {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: var(--fg);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 15px;
  padding: 6px 0;
  width: auto;
}
.advisor-input-row input::placeholder { color: var(--fg3); }
.advisor-input-row input:disabled { opacity: 0.6; }
.advisor-send {
  flex: none;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--v);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.15s;
}
.advisor-send:hover:not(:disabled) { transform: scale(1.05); }
.advisor-send:disabled { opacity: 0.45; cursor: default; }

/* Recommendation cards inside a bot message */
.adv-picks-lead { font-size: 14px; margin-bottom: 9px; }
.adv-picks { display: flex; flex-direction: column; gap: 8px; }
.adv-picks-foot { font-size: 12.5px; color: var(--fg3); margin-top: 9px; }
.adv-pick {
  display: flex; gap: 11px; align-items: stretch;
  width: 100%; padding: 9px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad2);
  background: var(--ink2);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s;
}
.adv-pick:hover, .adv-pick:focus-visible { border-color: var(--v); }
.adv-pick-img {
  flex: none; width: 62px; height: 62px;
  border-radius: var(--rad3);
  background: var(--ink4) center/cover no-repeat;
}
.adv-pick-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adv-pick-name {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700; font-size: 14.5px; color: var(--fg);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.adv-pick-country { font-family: 'Cabinet Grotesk', sans-serif; font-size: 12px; font-weight: 600; color: var(--fg3); }
.adv-pick-why { font-size: 13px; color: var(--fg2); line-height: 1.45; }
.adv-pick-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.adv-pick-caveat { font-size: 12px; color: var(--amber); line-height: 1.4; }