/* ── Vespira design tokens ─────────────────────────────────────────
   Intent color system: each category owns a hue that carries through
   chips, card spines, map pins and the detail sheet. */
:root {
  /* Clay styleguide: warm surfaces, mint primary (dark text on mint),
     pill controls, soft layered elevation. */
  --ink: #2f3e46;
  --ink-soft: #6a7880;
  --paper: #fbfcfb;
  --card: #ffffff;
  --line: #e8ece9;
  --acc: #5ebb7e;          /* mint primary surface */
  --acc-deep: #3d8f5f;     /* mint for text/links on light */
  --acc-ink: #122b1d;      /* ink on mint surfaces */
  --acc-soft: #e3f0e8;
  --focus: #6faede;

  --c-see: #3b6fe0;
  --c-do: #1fa06a;
  --c-eat: #d94a35;
  --c-shop: #c3900f;
  --c-night: #6e4ae0;
  --c-ess: #0d8f8a;

  --c-see-soft: #e8eefc;
  --c-do-soft: #e3f4ec;
  --c-eat-soft: #fbe9e5;
  --c-shop-soft: #f8f0da;
  --c-night-soft: #ede8fb;
  --c-ess-soft: #dff3f2;

  /* Typography.
     Fraunces (optical-size serif) for headings gives the editorial, magazine
     feel a travel guide should have — the "premium" the tester was missing.
     Plus Jakarta Sans carries the interface: refined and very legible small.
     The long fallback chains matter: the app ships in 20+ languages and
     Latin webfonts have no Arabic/CJK/Thai/Devanagari glyphs, so those
     scripts must land on the device's own high-quality system fonts rather
     than a broken fallback. */
  --display: "Fraunces", "Noto Serif", "Songti SC", "Hiragino Mincho ProN",
             "Times New Roman", Georgia, serif;
  --body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Noto Sans", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans Thai",
          "Noto Sans Devanagari", Roboto, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --radius: 24px;
  --app-w: 480px;
  --shadow: 0 2px 4px rgba(47, 62, 70, 0.05), 0 12px 28px rgba(47, 62, 70, 0.10);
  --clay: 0 1px 2px rgba(47, 62, 70, 0.06), 0 6px 16px rgba(47, 62, 70, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: #eef2f0;
  overflow: hidden;
}

/* Ambient backdrop behind the phone column on wide screens */
.backdrop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(59, 111, 224, 0.08), transparent),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(94, 187, 126, 0.10), transparent),
    repeating-radial-gradient(circle at 70% 30%, transparent 0 38px, rgba(28, 35, 32, 0.035) 38px 39px);
}

.app {
  position: relative;
  margin: 0 auto;
  max-width: var(--app-w);
  height: 100vh;   /* fallback for browsers without dvh */
  height: 100dvh;
  /* No min-height: a fixed floor taller than a landscape phone (360px) pushed
     the bottom nav off-screen entirely. The layout must always fit the
     viewport it's given. */
  background:
    radial-gradient(120% 45% at 80% -5%, rgba(94, 187, 126, 0.10), transparent),
    radial-gradient(100% 35% at 0% 100%, rgba(167, 199, 231, 0.07), transparent),
    var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Desktop "device frame" look. The height guard matters: a landscape phone
   (640×360) is wide enough to trip a width-only query, and the inset framing
   then wastes 32px of an already short screen and lifts the nav off the
   bottom edge. Only frame it when there is vertical room to spare. */
@media (min-width: 560px) and (min-height: 600px) {
  .app {
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    margin-top: 16px;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(28, 35, 32, 0.25);
  }
}

/* ── Header ──────────────────────────────────────────────── */
.topbar {
  background: transparent;
  padding: 14px 16px 0;
  z-index: 30;
  flex: none;   /* never let the header get squeezed out of the flex column */
}
.topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar-btn {
  /* 44px is Apple's HIG minimum touch target (Play has the same guidance) —
     these were 33-36px, small enough to mis-tap. */
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 16px; cursor: pointer; color: var(--ink-soft);
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(47,62,70,.08);
}
.avatar-btn.signed-in {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink); border-color: transparent;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-width: 0;   /* let children shrink rather than overflow the row */
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 7px;
}
.compass { font-size: 19px; }
.city-btn {
  font-family: var(--body); font-weight: 600; font-size: 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 11px 16px; min-height: 44px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 2px rgba(28,35,32,.05);
  /* A long city name used to push the avatar off-screen on a 280px display
     (Galaxy Fold cover screen). Shrink the label instead of the row. */
  min-width: 0; overflow: hidden;
}
.city-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.city-btn-caret { flex: none; }
.city-btn:hover { border-color: var(--ink-soft); }
.city-btn-caret { font-size: 11px; color: var(--ink-soft); }

.search-row { margin-top: 12px; display: flex; gap: 8px; position: relative; }
.locate-btn {
  flex: none; width: 50px; height: 50px; border-radius: 16px;
  border: 0; cursor: pointer; font-size: 18px;
  background: linear-gradient(160deg, #7fd29b, var(--acc));
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 143, 95, 0.3);
  display: grid; place-items: center;
  transition: transform .12s, filter .15s;
}
.locate-btn:hover { filter: brightness(1.04); }
.locate-btn:active { transform: scale(0.93); }
.locate-btn.located { border-color: var(--acc-deep); background: var(--acc-soft); }
.locate-btn.locating { opacity: .5; }

/* "You are here" pulsing dot on the map */
.you-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2f7fe0; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(47, 127, 224, 0.3);
  animation: you-pulse 2s infinite;
}
@keyframes you-pulse {
  0% { box-shadow: 0 0 0 3px rgba(47,127,224,.35); }
  70% { box-shadow: 0 0 0 12px rgba(47,127,224,0); }
  100% { box-shadow: 0 0 0 3px rgba(47,127,224,0); }
}
@media (prefers-reduced-motion: reduce) { .you-dot { animation: none; } }
.search-loading { display: flex; justify-content: center; padding: 24px; }
/* Pill field with the icon inside, paired with a circular action button —
   the modern search pattern from the reference. */
/* Soft inset field — reads as something you type into, not a raised button.
   The icon is a clean SVG-style glyph rather than a colour emoji, which looked
   noisy at this size. */
.search-field {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center;
  background: #f2f5f3;
  border: 1.5px solid transparent; border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(47, 62, 70, 0.06);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.search-field:focus-within {
  background: #fff;
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(94, 187, 126, 0.14);
}
.search-ico {
  flex: none; width: 36px; text-align: center;
  font-size: 22px; line-height: 1; color: var(--ink-soft); opacity: .65;
  pointer-events: none;
}
.search-input {
  flex: 1; min-width: 0;
  font-family: var(--body); font-size: 15.5px; font-weight: 500;
  padding: 14px 16px 14px 0;
  border: 0; background: none; color: var(--ink);
  outline: none;
}
.search-input::placeholder { color: #9aa8a0; font-weight: 400; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input::placeholder { color: #9aa39e; }

/* ── Category bar (the "compass strip" signature) ───────── */
.cat-bar {
  display: flex; gap: 8px;
  padding: 12px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-chip {
  font-family: var(--body); font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 6px;
  padding: 11px 15px; min-height: 44px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--card); color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.cat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--ink-soft));
  flex: none;
}
.cat-chip.active {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink); border-color: transparent;
  box-shadow: var(--clay);
  font-weight: 700;
}
.cat-chip.active .cat-dot { box-shadow: 0 0 0 3px rgba(18, 43, 29, 0.12); }

/* Short viewports (landscape phones, keyboard open, small devices).
   At 360px tall the header was taking 49% of the screen and pushing the nav
   off-screen entirely. Everything in the header shrinks proportionally so the
   content — and the nav — always keep their place. */
@media (max-height: 560px) {
  .topbar { padding: 8px 14px 0; }
  .wordmark { font-size: 18px; }
  .compass { font-size: 15px; }
  /* Not shrunk below 44px: that is the store-mandated minimum touch target,
     and landscape is exactly where mis-taps are most likely. */
  .avatar-btn { font-size: 14px; }
  .city-btn { padding: 5px 11px; font-size: 13px; }
  .search-row { margin-top: 8px; }
  .search-input { font-size: 14.5px; padding: 10px 14px 10px 8px; }
  .search-ico { padding-left: 14px; font-size: 13px; }
  .locate-btn { width: 42px; height: 42px; font-size: 16px; }
  .cat-bar { padding: 8px 0 9px; }
  .cat-chip { padding: 6px 11px; font-size: 12.5px; }
  .bottom-nav { margin: 0 10px calc(6px + env(safe-area-inset-bottom)); }
  .nav-btn { padding: 6px 0 5px; font-size: 10.5px; }
  .nav-btn .nav-icon { font-size: 15px; }
  .nav-ai-orb { width: 46px; height: 46px; font-size: 20px; margin-top: -16px; }
  /* Hero cards would fill the whole viewport at this height. */
  .poi-hero { min-height: 200px; }
  .hl-img { height: 84px; } .hl-card, .hl-img { width: 128px; }
}
/* Very short (keyboard open on a small phone): drop to the essentials. */
@media (max-height: 420px) {
  .cat-bar { padding: 6px 0 7px; }
  .poi-hero { min-height: 170px; }
  .hl-wrap { display: none; }
}

/* ── Splash ──────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: linear-gradient(165deg, #18232a 0%, #223038 45%, #2c4a41 100%);
  color: #fff;
  transition: opacity .45s ease, visibility .45s;
}
.splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.splash-mark {
  width: 88px; height: 88px; border-radius: 28px;
  display: grid; place-items: center; font-size: 42px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
  animation: sp-rise .55s cubic-bezier(.2,.9,.3,1) both;
}
.splash-word {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  letter-spacing: -0.02em;
  animation: sp-rise .55s .08s cubic-bezier(.2,.9,.3,1) both;
}
.splash-tag {
  font-size: 12.5px; color: rgba(255, 255, 255, 0.6);
  animation: sp-rise .55s .16s cubic-bezier(.2,.9,.3,1) both;
}
.splash-bar {
  width: 128px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.16); overflow: hidden;
}
.splash-bar span {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #7fd29b, var(--acc));
  animation: sp-slide 1.1s ease-in-out infinite;
}
@keyframes sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sp-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-word, .splash-tag { animation: none; }
  .splash-bar span { animation-duration: 2.4s; }
}

/* Type-ahead suggestions under the search field. */
.suggest-box {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: 70;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(47, 62, 70, 0.18);
  max-height: 320px; overflow-y: auto;
}
.sg-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 12px 15px; cursor: pointer; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.sg-row:last-child { border-bottom: 0; }
.sg-row:hover { background: var(--acc-soft); }
.sg-ico { flex: none; font-size: 16px; }
.sg-txt { display: flex; flex-direction: column; min-width: 0; }
.sg-txt b {
  font-family: var(--display); font-size: 14.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-txt span {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-all { background: var(--paper); }
.sg-all b { color: var(--acc-deep); }

/* Navigating out is intentionally understated — the app is the destination. */
.sheet-nav-out {
  display: block; text-align: center; margin-top: 12px;
  font-size: 12.5px; color: var(--ink-soft); text-decoration: none;
}
.sheet-nav-out:hover { color: var(--acc-deep); text-decoration: underline; }

/* "Search this area" — floats over the map after the traveller pans. */
.map-search-area {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 500;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: 13.5px;
  box-shadow: 0 4px 16px rgba(47, 62, 70, 0.18);
  animation: msa-in .18s ease-out;
}
.map-search-area:hover { border-color: var(--acc); }
.map-search-area:disabled { opacity: .6; cursor: default; }
.msa-ico { font-size: 14px; }
@keyframes msa-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .map-search-area { animation: none; } }

/* ── Destination picker (location-first, no preset city list) ─ */
.dp-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.dp-current { font-family: var(--display); font-weight: 800; font-size: 15px; }
.dp-locate {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; cursor: pointer; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.dp-locate:hover { background: var(--acc-soft); }
.dp-locate-ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(180deg, #7fd29b, var(--acc));
}
.dp-locate-txt { display: flex; flex-direction: column; }
.dp-locate-txt b { font-family: var(--display); font-size: 15px; color: var(--ink); }
.dp-locate-txt span { font-size: 12px; color: var(--ink-soft); }
.dp-search { display: flex; gap: 8px; padding: 12px 16px; }
.dp-input {
  flex: 1; min-width: 0;
  font-family: var(--body); font-size: 14.5px;
  padding: 11px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  outline: none;
}
.dp-input:focus { border-color: var(--focus); background: #fff; }
.dp-go {
  flex: none; width: 42px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  font-size: 16px; font-weight: 700;
}
.dp-label {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); padding: 6px 16px 4px;
}
.dp-recent { padding-bottom: 8px; }
.dp-recent-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 10px 16px; cursor: pointer; text-align: left;
  background: none; border: 0; font-family: var(--body); font-size: 14.5px; color: var(--ink);
}
.dp-recent-row:hover { background: var(--paper); }
.dp-country { font-size: 12px; color: var(--ink-soft); }

/* ── City menu ───────────────────────────────────────────── */
.city-menu {
  position: absolute; top: 58px; right: 16px; z-index: 60;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden; min-width: 230px;
}
.city-option {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.city-option:last-child { border-bottom: 0; }
.city-option:hover { background: var(--paper); }
.city-option .co-name { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.city-option .co-tag { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.co-beta {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  background: var(--c-shop-soft); color: var(--c-shop);
  border-radius: 4px; padding: 1px 5px;
}

/* ── Views ───────────────────────────────────────────────── */
/* z-index:1 makes .views a stacking context, so Leaflet's internal panes
   (z-index up to 700) can never paint above the sheet, scrim or nav. */
.views { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; z-index: 1; }
.view { position: absolute; inset: 0; overflow-y: auto; }
.view-feed, .view-saved { padding: 16px 16px 24px; }
.view-map { overflow: hidden; }
#map { width: 100%; height: 100%; }

/* Feed */
.greeting {
  font-family: var(--display); font-weight: 600;
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 14px;
}
.greeting strong { color: var(--ink); font-weight: 800; }

.coverage-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--c-shop-soft); border: 1px solid #ecd9a4;
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 13.5px; color: #6b5107; line-height: 1.45;
  margin-bottom: 16px;
}

.cat-section { margin-bottom: 26px; }
.cat-heading {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
}
.cat-heading h2 {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.01em;
}
.cat-heading .cat-count {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.cat-heading .cat-sub { font-size: 12.5px; color: var(--ink-soft); margin-left: auto; }

/* POI card */
.poi-card {
  position: relative;
  display: flex; gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: var(--clay);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  overflow: hidden;
}
/* A thin colour edge reads as a modern accent; the old 4px border made every
   card look like a bordered box. */
.poi-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--spine, var(--line));
}
.poi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cfe0d6; }
.poi-card:active { transform: translateY(0) scale(0.995); }
.poi-thumb { border-radius: 18px; }
.poi-name { letter-spacing: -0.01em; }

/* ── Photo-hero card (top pick per section) ──────────────── */
.poi-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  cursor: pointer;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.poi-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow), 0 18px 40px rgba(47,62,70,.16); }
.poi-hero:active { transform: translateY(0) scale(0.995); }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poi-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(20, 30, 26, 0.86) 0%, rgba(20, 30, 26, 0.45) 34%, rgba(20, 30, 26, 0.02) 62%);
}
.hero-top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--body); font-weight: 700; font-size: 12px;
  color: #fff;
  background: rgba(20, 30, 26, 0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 5px 11px;
}
.hero-top .save-btn {
  color: #fff; font-size: 22px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.hero-top .save-btn.saved { color: #ff8f7a; }
.hero-body { position: relative; z-index: 2; padding: 0 16px 16px; color: #fff; }
.hero-rating {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: #ffe08a; margin-bottom: 6px;
}
.hero-name {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.01em; line-height: 1.12; margin-bottom: 5px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.hero-sub {
  font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.88);
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 5px 12px;
  font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.82);
}
.hero-meta .meta-open { color: #9be6b0; }
.hero-meta .meta-closed { color: #ffb0a0; }
.poi-thumb {
  flex: none; width: 72px; height: 72px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 26px;
  background: var(--thumb-bg, var(--paper));
  overflow: hidden;
}
.poi-thumb.has-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.meta-rating { color: var(--c-shop); font-weight: 500; }
.live-open { font-family: var(--mono); font-size: 12px; }
.poi-body { flex: 1; min-width: 0; }
.poi-name-row { display: flex; align-items: flex-start; gap: 8px; }
.poi-name {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; line-height: 1.25;
  flex: 1;
}
.save-btn {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px;
  color: #b7bfba;
  transition: transform .12s;
}
.save-btn:hover { transform: scale(1.15); }
.save-btn.saved { color: var(--c-eat); }
.poi-blurb {
  font-size: 13px; color: var(--ink-soft); line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.poi-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 7px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
}
.meta-open { color: var(--c-do); }
.meta-closed { color: var(--c-eat); }
.meta-done { color: var(--c-do); font-weight: 500; }

/* ── Empty / search states ───────────────────────────────── */
.empty-state {
  text-align: center; padding: 56px 24px;
  color: var(--ink-soft);
}
.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state h3 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--ink); margin-bottom: 6px;
}
.empty-state p { font-size: 14px; line-height: 1.5; }

.search-city-hit {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  background: var(--ink); color: #fff;
  border: 0; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
  font-family: var(--body); font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.search-city-hit span:last-child { font-size: 13px; opacity: .75; }

/* ── Map ─────────────────────────────────────────────────── */
.pin {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--pin-bg, var(--ink));
  border: 2.5px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(0deg);
  box-shadow: 0 2px 8px rgba(28,35,32,.35);
  font-size: 15px;
  cursor: pointer;
}
.pin.pin-saved { outline: 3px solid rgba(217, 74, 53, .4); outline-offset: 1px; }
.pin.pin-g {
  width: 26px; height: 26px;
  border: 2.5px solid var(--pin-line, var(--ink));
  box-shadow: 0 2px 6px rgba(28,35,32,.25);
}

.gdisc-divider {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
.gdisc-divider .gdisc-note {
  font-family: var(--mono); font-weight: 400; font-size: 11px; color: #9aa39e;
}
.gdisc-more {
  display: block; width: 100%;
  margin: 6px 0 4px;
  padding: 12px;
  font-family: var(--body); font-weight: 700; font-size: 14px;
  color: var(--ink); background: var(--card);
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.gdisc-more:hover { border-color: var(--ink-soft); background: var(--paper); }

.search-geocode {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink);
}
.search-geocode span:last-child { opacity: .7; }
.city-menu-hint {
  padding: 11px 16px; font-size: 12px; line-height: 1.45;
  color: var(--ink-soft); background: var(--paper);
  border-top: 1px solid var(--line);
}

/* Explore prompt for searched destinations (no curated feed yet) */
.explore-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 8px;
}
.explore-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 14px;
  text-align: left; cursor: pointer;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tile, var(--line));
  border-radius: var(--radius);
  font-family: var(--body);
  transition: transform .12s, box-shadow .12s;
}
.explore-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.explore-tile .et-icon { font-size: 24px; }
.explore-tile .et-label {
  font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.explore-tile .et-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--body); }
.map-popup b { font-family: var(--display); font-size: 14px; }
.map-popup .mp-open {
  display: inline-block; margin-top: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--c-see);
  cursor: pointer;
}

/* ── Saved / Trip view ───────────────────────────────────── */
.trip-header { margin-bottom: 14px; }
.trip-header h2 {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.01em;
}
.trip-header p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.trip-progress {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  margin-top: 8px;
}
.trip-bar {
  height: 5px; border-radius: 3px; background: var(--line);
  margin-top: 6px; overflow: hidden;
}
.trip-bar-fill { height: 100%; background: var(--acc); border-radius: 3px; transition: width .3s; }

.trip-city-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  margin: 18px 0 8px;
}
.poi-card.done-card { opacity: .55; }
.poi-card.done-card .poi-name { text-decoration: line-through; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: absolute; left: 50%; bottom: 92px; transform: translate(-50%, 8px);
  z-index: 95; max-width: 84%;
  background: var(--ink); color: #fff;
  font-family: var(--body); font-size: 13.5px; font-weight: 600;
  padding: 11px 16px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(28,35,32,.3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Countdown ───────────────────────────────────────────── */
.cd-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 14px; padding: 13px;
  border: 1.5px dashed var(--line); background: var(--card); cursor: pointer;
  border-radius: 16px; font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--ink-soft);
}
.cd-add:hover { border-color: var(--acc); color: var(--acc-deep); }
.cd-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #2f3e46, #45525a); color: #fff;
  border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; cursor: pointer;
  box-shadow: var(--clay);
}
.cd-plane { font-size: 26px; }
.cd-info { flex: 1; min-width: 0; }
.cd-lbl { font-size: 12.5px; opacity: .8; }
.cd-count { display: flex; align-items: baseline; gap: 6px; }
.cd-count b { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.cd-count span { font-size: 13px; opacity: .85; }
.cd-edit { font-family: var(--mono); font-size: 11px; opacity: .7; }
.cd-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.cd-clear { align-self: center; background: none; border: 0; color: var(--c-eat); font-size: 13px; cursor: pointer; }

/* ── Memory board (kazı-kazan) ───────────────────────────── */
.mem-board { margin-bottom: 20px; }
.mem-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.mem-head h3 { font-family: var(--display); font-weight: 800; font-size: 17px; }
.mem-head p { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.mem-share {
  flex: none; font-family: var(--body); font-weight: 700; font-size: 12.5px;
  color: var(--acc-ink); background: linear-gradient(180deg, #7fd29b, var(--acc));
  border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.mem-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mem-tile {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  border: 0; padding: 0; cursor: pointer;
  border-bottom: 3px solid var(--spine, var(--acc));
  box-shadow: var(--clay);
}
.mem-tile img { width: 100%; height: 100%; object-fit: cover; }
.mem-ico { width: 100%; height: 100%; display: grid; place-items: center; font-size: 26px; }
.mem-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--body); font-weight: 600; font-size: 10.5px; color: #fff;
  padding: 12px 6px 5px; text-align: left; line-height: 1.15;
  background: linear-gradient(to top, rgba(20,30,26,.85), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mem-more {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px;
  background: var(--acc-soft); color: var(--acc-deep);
  font-family: var(--display); font-weight: 800; font-size: 20px;
}

/* ── Trip tools (split + group) ──────────────────────────── */
.trip-tools { display: flex; gap: 10px; margin: 12px 0 16px; }
.tt-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--clay);
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--ink);
}
.tt-btn span { font-size: 16px; }
.tt-btn:hover { border-color: var(--acc); }

/* Split (ortak adisyon) */
.sp-sec { margin-top: 16px; }
.sp-sec h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 8px; }
.sp-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--acc-soft); color: var(--acc-ink); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; }
.sp-chip button { background: rgba(0,0,0,.12); border: 0; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 10px; color: inherit; }
.sp-add { display: flex; gap: 8px; }
.sp-add .auth-input { flex: 1; }
.sp-expform { display: flex; flex-direction: column; gap: 8px; }
.sp-row2 { display: flex; gap: 8px; }
.sp-row2 .auth-input { flex: 1; min-width: 0; }
.sp-split-lbl { font-size: 12px; color: var(--ink-soft); }
.sp-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-check { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.sp-hint { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.sp-total { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.sp-total b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.sp-exp { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-exp-i { flex: 1; display: flex; flex-direction: column; }
.sp-exp-i b { font-size: 14px; }
.sp-exp-i span { font-size: 12px; color: var(--ink-soft); }
.sp-exp-x { background: none; border: 0; color: var(--c-eat); cursor: pointer; font-size: 13px; }
.sp-settle { display: flex; justify-content: space-between; padding: 9px 12px; background: var(--paper); border-radius: 10px; margin-bottom: 6px; font-size: 14px; }
.sp-settle span { font-family: var(--display); font-weight: 800; color: var(--acc-deep); }
.sp-settled { text-align: center; padding: 16px; color: var(--acc-deep); font-family: var(--display); font-weight: 800; }

/* Group (grup planlama) */
.gr-code { font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: .12em; text-align: center; padding: 16px; background: var(--acc-soft); color: var(--acc-ink); border-radius: 16px; margin: 12px 0; }
.gr-actions { display: flex; gap: 10px; }
.gr-or { text-align: center; color: var(--ink-soft); font-size: 12px; margin: 16px 0; }
.gr-input { text-align: center; letter-spacing: .15em; font-family: var(--mono); }
.gr-leave { display: block; width: 100%; background: none; border: 0; color: var(--c-eat); font-size: 13px; cursor: pointer; margin-top: 14px; }

/* Hand a finished day straight to Google Maps as a multi-stop route —
   the step testers said they otherwise do by hand, stop by stop. */
.day-route {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 4px; padding: 13px 15px; cursor: pointer;
  border: 1.5px solid var(--acc); border-radius: 16px;
  background: var(--acc-soft); color: var(--acc-ink);
  font-family: var(--body); font-weight: 700; font-size: 13.5px;
  text-align: left;
}
.day-route:hover { background: #d6ecdf; }
.day-route:active { transform: scale(0.99); }
.dr-ico { font-size: 16px; }
.dr-txt { flex: 1; }
.dr-count {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: rgba(255, 255, 255, 0.75); border-radius: 999px; padding: 3px 9px;
}

/* ── Trip planner ────────────────────────────────────────── */
.trip-auto { width: 100%; margin-top: 12px; }
.plan-day { margin-bottom: 18px; }
.plan-day-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 16px;
  margin: 6px 2px 10px;
}
.plan-day-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  display: grid; place-items: center; font-size: 13px;
  box-shadow: var(--clay);
}
.plan-day-count {
  margin-left: auto; font-family: var(--mono); font-weight: 400;
  font-size: 11px; color: var(--ink-soft);
}
.plan-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 8px 10px; margin-bottom: 8px;
  box-shadow: var(--clay); cursor: pointer;
}
.plan-row.done { opacity: .5; }
.plan-time {
  flex: none; width: 74px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 4px;
  background: var(--paper); color: var(--ink); text-align: center;
}
.plan-thumb {
  flex: none; width: 42px; height: 42px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 18px;
  background: var(--thumb-bg, var(--paper));
}
.plan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-info b { font-family: var(--display); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-info span { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-ctrl { flex: none; display: flex; align-items: center; gap: 2px; }
.plan-ctrl button {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font-size: 11px; color: var(--ink-soft); display: grid; place-items: center;
}
.plan-ctrl button:hover { border-color: var(--ink-soft); color: var(--ink); }
.plan-unsched-head {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  margin: 22px 0 10px;
}
.plan-add {
  font-family: var(--body); font-weight: 700; font-size: 12.5px;
  color: var(--acc-deep); background: var(--acc-soft);
  border: 0; border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.plan-add:hover { filter: brightness(0.97); }

/* Day-count chooser (auto-plan) */
.day-choices { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.day-choice {
  flex: 1; min-width: 40px;
  font-family: var(--display); font-weight: 800; font-size: 18px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 14px; padding: 12px 0; cursor: pointer;
}
.day-choice.sug { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-deep); }
.day-choice:hover { border-color: var(--ink-soft); }

/* Nearby town chips in the city menu */
.city-menu-head {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  padding: 12px 16px 6px;
}
.city-nearby { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.nearby-chip {
  font-family: var(--body); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 99px; padding: 6px 12px; cursor: pointer;
}
.nearby-chip:hover { border-color: var(--acc); color: var(--acc-deep); }

/* Sponsored slot */
.ad-slot {
  position: relative; cursor: pointer;
  background: linear-gradient(135deg, var(--acc-soft), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 14px 12px; margin: 4px 0 12px;
  box-shadow: var(--clay);
}
.ad-label {
  position: absolute; top: 8px; right: 12px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
}
.ad-body { display: flex; align-items: center; gap: 12px; }
.ad-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
}
.ad-text { flex: 1; display: flex; flex-direction: column; }
.ad-text b { font-family: var(--display); font-size: 14.5px; }
.ad-text span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.ad-cta {
  flex: none; font-family: var(--body); font-weight: 700; font-size: 12.5px;
  color: var(--acc-ink); background: linear-gradient(180deg, #7fd29b, var(--acc));
  border-radius: 999px; padding: 7px 13px;
}

.done-btn {
  flex: none; background: none; border: 1.5px solid var(--line);
  border-radius: 50%; width: 26px; height: 26px;
  cursor: pointer; font-size: 13px; line-height: 1;
  color: transparent; display: grid; place-items: center;
}
.done-btn:hover { border-color: var(--c-do); color: var(--c-do); }
.done-btn.done { background: var(--c-do); border-color: var(--c-do); color: #fff; }

/* ── Bottom nav ──────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  flex: none;   /* pinned — never shrinks or scrolls away */
  margin: 0 12px calc(10px + env(safe-area-inset-bottom));
  padding: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 30px rgba(47, 62, 70, 0.16), 0 1px 2px rgba(47, 62, 70, 0.08);
  z-index: 30;
}
/* Active tab sits in its own filled pill — the icon+label lift together so the
   current section is obvious at a glance, rather than relying on colour alone. */
.nav-btn {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 4px 8px; margin: 5px 3px;
  border-radius: 18px;
  font-family: var(--body); font-size: 11px; font-weight: 600;
  color: #9aa39e;
  transition: background .18s, color .18s, transform .12s;
}
.nav-btn .nav-icon {
  font-size: 19px; line-height: 1;
  transition: transform .18s;
}
.nav-btn:active { transform: scale(0.94); }
.nav-btn.active {
  color: var(--acc-ink);
  background: linear-gradient(180deg, #b7efd7, var(--acc));
  box-shadow: 0 3px 10px rgba(61, 143, 95, 0.28);
  font-weight: 700;
}
.nav-btn.active .nav-icon { transform: translateY(-1px) scale(1.06); }
.nav-badge {
  position: absolute; top: 4px; right: calc(50% - 22px);
  background: var(--c-eat); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ── Detail sheet ────────────────────────────────────────── */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(28, 35, 32, 0.45);
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 82;
  max-height: 86%;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  box-shadow: 0 -12px 48px rgba(28,35,32,.3);
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .poi-card, .save-btn { transition: none; }
}

.sheet-hero {
  position: relative;
  height: 148px;
  display: grid; place-items: center;
  font-size: 56px;
  background: var(--hero-bg, var(--paper));
  border-radius: 22px 22px 0 0;
}
.sheet-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--ink);
  font-size: 15px; display: grid; place-items: center;
}
.sheet-body { padding: 18px 20px 26px; }
.sheet-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 500;
  color: var(--sheet-cat, var(--ink-soft));
  margin-bottom: 6px;
}
.sheet-body h2 {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1.15;
}
.sheet-area { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.sheet-blurb { font-size: 15px; line-height: 1.55; margin-top: 12px; }

.sheet-facts {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 14px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
}

.sheet-tip {
  display: flex; gap: 10px;
  background: var(--paper); border-radius: 12px;
  padding: 12px 14px; margin-top: 14px;
  font-size: 13.5px; line-height: 1.5;
}
.sheet-tip b { font-family: var(--display); }

.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  font-family: var(--mono); font-size: 11px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; color: var(--ink-soft);
}

.sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn {
  flex: 1;
  font-family: var(--body); font-weight: 700; font-size: 14.5px;
  padding: 13px 16px; border-radius: 999px;
  cursor: pointer; text-align: center; text-decoration: none;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .1s, filter .12s, box-shadow .12s, background .12s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.btn-primary {
  background: linear-gradient(180deg, #7fd29b, var(--acc));
  color: var(--acc-ink); border-color: transparent;
  box-shadow: var(--clay), 0 8px 20px rgba(61, 143, 95, 0.18);
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-primary:active { filter: brightness(0.96); box-shadow: var(--clay); }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: var(--clay); }
.btn-ghost:hover { background: var(--paper); }
.btn-ghost.saved { border-color: var(--c-eat); color: var(--c-eat); }

/* ── Public transport near a place ───────────────────────── */
.transit-box {
  margin-top: 16px; padding: 13px 15px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
}
.tr-head {
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  margin-bottom: 9px;
}
.tr-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.tr-row:last-of-type { border-bottom: 0; }
.tr-ico { flex: none; font-size: 15px; }
.tr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dist { flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.tr-go {
  display: inline-block; margin-top: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--acc-deep); text-decoration: none;
}
.tr-go:hover { text-decoration: underline; }

/* ── Live Google data in the sheet ───────────────────────── */
.sheet-live { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.sheet-live:empty { display: none; }
.live-loading { font-family: var(--mono); font-size: 12px; color: #9aa39e; }
.live-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.live-rating { font-family: var(--display); font-weight: 800; font-size: 18px; }
.live-count { font-size: 12.5px; color: var(--ink-soft); }
.live-powered {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; color: #9aa39e;
}
.live-demo-note {
  margin-top: 10px; padding: 10px 12px;
  background: var(--paper); border: 1px dashed var(--line); border-radius: 10px;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.live-demo-note code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}
.live-photos {
  display: flex; gap: 8px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.live-photos::-webkit-scrollbar { display: none; }
.live-photos img, .live-photo-ph {
  flex: none; width: 132px; height: 96px; border-radius: 10px;
  object-fit: cover; background: var(--paper);
}
.live-photo-ph {
  display: grid; place-items: center; font-size: 24px;
  border: 1px dashed var(--line); color: #b7bfba;
}
.live-review { margin-top: 14px; }
.lr-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.lr-stars { color: var(--c-shop); font-size: 12px; letter-spacing: 1px; }
.lr-when { font-family: var(--mono); font-size: 11px; color: #9aa39e; }
.live-review p {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.live-more {
  display: inline-block; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--c-see); text-decoration: none;
}
.live-more:hover { text-decoration: underline; }

/* ── Booking / affiliate button ──────────────────────────── */
.btn-book {
  background: var(--c-do); color: #fff; border-color: var(--c-do);
  margin-top: 10px; width: 100%;
}
.btn-book:hover { background: #178a5b; }
.btn-book-tag {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; opacity: .8; margin-left: 8px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 1px 4px;
}

/* ── Overlay stacking tiers (low → high) ─────────────────────
   guide (70/72) < detail sheet (80/82) < modal (90/92) < onboarding (100).
   Keeps a drilled-into place sheet above the guide that launched it. */
.scrim {
  position: absolute; inset: 0;
  background: rgba(28, 35, 32, 0.45);
}
#guideScrim { z-index: 70; }
#modalScrim { z-index: 90; }

/* ── Concierge FAB + panel ───────────────────────────────── */
/* Centre AI button: raised out of the bar so it reads as the primary action. */
.nav-ai {
  flex: none; width: 62px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0; margin: 0 2px;
}
.nav-ai-orb {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  margin-top: -22px;
  background: linear-gradient(160deg, #7fd29b, var(--acc) 55%, #3d8f5f);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(61, 143, 95, 0.42);
  transition: transform .16s, box-shadow .16s;
}
.nav-ai:hover .nav-ai-orb { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(61, 143, 95, 0.5); }
.nav-ai:active .nav-ai-orb { transform: scale(0.92); }
.guide-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 72;
  height: 78%;
  background: var(--card); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -12px 48px rgba(28,35,32,.3);
  animation: sheet-up .22s ease-out;
}
.guide-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.guide-head h3 { font-family: var(--display); font-weight: 800; font-size: 18px; }
.guide-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.guide-msg {
  background: var(--paper); border-radius: 14px; padding: 11px 14px;
  font-size: 14px; line-height: 1.5; max-width: 88%;
}
.guide-msg.you { background: var(--ink); color: #fff; align-self: flex-end; }
.guide-typing { display: flex; gap: 4px; align-items: center; width: fit-content; }
.guide-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft);
  animation: gt-bounce 1s infinite ease-in-out;
}
.guide-typing span:nth-child(2) { animation-delay: .15s; }
.guide-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes gt-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .guide-typing span { animation: none; } }
.guide-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.guide-chip {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 99px; padding: 7px 12px; cursor: pointer;
}
.guide-chip:hover { border-color: var(--ink); }
.guide-hits { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.guide-hit {
  display: flex; flex-direction: column; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; cursor: pointer; font-family: var(--body);
}
.guide-hit:hover { border-color: var(--ink-soft); }
.guide-hit b { font-family: var(--display); font-size: 14px; }
.guide-hit span { font-size: 12px; color: var(--ink-soft); }
.guide-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.guide-input {
  flex: 1; font-family: var(--body); font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none;
}
.guide-input:focus { border-color: var(--ink); }
.guide-send {
  flex: none; width: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--ink); color: #fff; font-size: 16px;
}

/* ── Modal (premium, install, about) ─────────────────────── */
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 92; width: calc(100% - 40px); max-width: 380px; max-height: 84%;
  overflow-y: auto;
  background: var(--card); border-radius: 20px; padding: 22px;
  box-shadow: 0 24px 64px rgba(28,35,32,.35);
}
.modal h3 { font-family: var(--display); font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.modal p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 12px; }
.modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: 14px;
}
/* ── Premium / paywall ───────────────────────────────────── */
.pmx { text-align: left; }
.pmx-head { text-align: center; margin-bottom: 18px; }
.pmx-crown { font-size: 34px; display: block; margin-bottom: 6px; }
.pmx-head h3 { font-family: var(--display); font-weight: 800; font-size: 22px; margin-bottom: 4px; }
.pmx-head p { font-size: 13px; color: var(--ink-soft); margin: 0; }

.pmx-feats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.pmx-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.pmx-ico {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 16px; color: #fff;
}
.pmx-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmx-txt b { font-family: var(--display); font-size: 14.5px; }
.pmx-txt span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

.pmx-choose {
  font-family: var(--display); font-weight: 800; font-size: 16px; margin-bottom: 10px;
}
.pmx-plans { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.pmx-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 15px; cursor: pointer; text-align: left;
  border: 2px solid var(--line); border-radius: 16px; background: var(--card);
  font-family: var(--body);
  transition: border-color .15s, background .15s;
}
.pmx-plan.on { border-color: var(--acc); background: var(--acc-soft); }
.pmx-plan-l { display: flex; align-items: center; gap: 11px; }
.pmx-radio {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c3ccc7; background: #fff;
}
.pmx-plan.on .pmx-radio {
  border-color: var(--acc-deep);
  background: radial-gradient(circle, var(--acc-deep) 0 5px, #fff 6px);
}
.pmx-plan-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.pmx-save {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  background: var(--acc); color: var(--acc-ink);
  border-radius: 999px; padding: 2px 7px; letter-spacing: .03em;
}
.pmx-plan-r { text-align: right; display: flex; flex-direction: column; }
.pmx-plan-r b { font-family: var(--display); font-weight: 800; font-size: 17px; }
.pmx-plan-r span { font-size: 11px; color: var(--ink-soft); }

.pmx-cta {
  display: block; width: 100%; padding: 16px; cursor: pointer;
  border: 0; border-radius: 999px;
  background: linear-gradient(160deg, #7fd29b, var(--acc) 60%, #4fae72);
  color: var(--acc-ink);
  font-family: var(--display); font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 22px rgba(61, 143, 95, 0.35);
  transition: transform .12s, filter .15s;
}
.pmx-cta:hover { filter: brightness(1.04); }
.pmx-cta:active { transform: scale(0.98); }
.pmx-restore {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 13.5px; color: var(--acc-deep);
}
.pmx-fine {
  font-size: 11px; color: var(--ink-soft); line-height: 1.45;
  margin-top: 14px; text-align: center;
}
.pmx-demo {
  font-size: 11px; line-height: 1.45; margin-top: 10px; text-align: center;
  background: var(--c-shop-soft); color: #6b5107;
  border-radius: 10px; padding: 9px 11px;
}
.pmx-legal {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 12px; color: var(--ink-soft);
}
.pmx-legal a { color: var(--ink-soft); }

.premium-modal { text-align: center; }
.pm-badge, .pc-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
  color: var(--c-night); background: var(--c-night-soft);
  border-radius: 6px; padding: 3px 8px; display: inline-block;
}
.premium-modal h3 { margin: 12px 0; }
.pm-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pm-list li { font-size: 14.5px; }
.pm-price { font-size: 15px; margin-bottom: 14px; }
.pm-price b { font-family: var(--display); font-size: 22px; }
.pm-fine { font-size: 11.5px; color: #9aa39e; margin-top: 12px; line-height: 1.4; }

/* ── Profile view ────────────────────────────────────────── */
.profile-card {
  background: linear-gradient(135deg, var(--c-night-soft), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 18px;
}
.profile-card.is-premium { background: linear-gradient(135deg, var(--c-do-soft), var(--card)); }
.pc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pc-top h3 { font-family: var(--display); font-weight: 800; font-size: 17px; }
.pc-top p { font-size: 13px; color: var(--ink-soft); }
.profile-section { margin-bottom: 22px; }
.profile-section h4 {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 10px;
}
.lang-row { display: flex; gap: 8px; }
.lang-btn {
  flex: 1; font-family: var(--body); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 10px; padding: 10px; cursor: pointer;
}
.lang-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.profile-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.profile-list a { color: var(--c-see); text-decoration: none; }
.profile-link {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 13px 2px; font-family: var(--body); font-size: 15px; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.profile-foot { font-size: 12px; color: #9aa39e; text-align: center; margin-top: 8px; }

/* ── Onboarding (dark immersive hero) ────────────────────── */
.onboard {
  position: absolute; inset: 0; z-index: 100;
  background: linear-gradient(165deg, #18232a 0%, #223038 45%, #2c4a41 100%);
  display: grid; justify-items: center; padding: 28px;
  /* Was `overflow: hidden` + `place-items: center`: in landscape (e.g. 640×360)
     the card is taller than the viewport, so the CTA was clipped below the fold
     and unreachable — the user could never leave onboarding. `safe center`
     keeps it centred when it fits and falls back to start when it doesn't, and
     the scroll makes the button reachable either way. */
  align-content: safe center;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.onboard-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 30% at 75% 12%, rgba(94, 187, 126, 0.28), transparent),
    radial-gradient(50% 35% at 15% 85%, rgba(167, 199, 231, 0.14), transparent);
}
.onboard-card {
  text-align: center; max-width: 340px; position: relative; width: 100%;
  color: #fff;
}
.onboard-skip {
  position: absolute; top: -18px; right: -12px;
  /* Was a 26×16 hit area — too small to hit reliably on a phone.
     Padding brings it to the 44px minimum without changing how it looks. */
  min-width: 44px; min-height: 44px; padding: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; color: rgba(255, 255, 255, 0.55);
}
.onboard-skip:hover { color: rgba(255, 255, 255, 0.85); }
.onboard-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 30px; }
.ob-logo { font-size: 30px; }
.ob-word {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  letter-spacing: -0.02em;
}
.ob-tag { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; }
.onboard-icon {
  width: 96px; height: 96px; margin: 0 auto 22px;
  display: grid; place-items: center;
  font-size: 46px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.onboard-card h2 {
  font-family: var(--display); font-weight: 800; font-size: 27px;
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.onboard-card p {
  font-size: 15.5px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.72); margin-bottom: 24px;
}
.onboard-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 24px; }
.onboard-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.onboard-dots span.on { background: #fff; width: 22px; border-radius: 4px; }
.onboard-cta { width: 100%; font-size: 15.5px; padding: 15px; }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ── Profile page (clean, organized) ─────────────────────── */
.app[data-view="profile"] .cat-bar { display: none; }
.view-profile { padding-top: 6px; }

.pf-title {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  letter-spacing: -0.02em; margin: 4px 2px 14px;
}

/* GO PREMIUM prominent button */
.pf-go-premium {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; margin: 14px 0 4px; padding: 15px;
  border: 0; cursor: pointer; border-radius: 18px;
  background: linear-gradient(135deg, #7fd29b, var(--acc) 60%, #4fae72);
  color: var(--acc-ink);
  box-shadow: var(--clay), 0 10px 24px rgba(61, 143, 95, 0.28);
}
.pf-go-premium span { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.pf-go-premium small { font-size: 11.5px; opacity: .8; }
.pf-prem-on {
  text-align: center; margin: 14px 0 4px; padding: 13px;
  border-radius: 16px; background: var(--acc-soft); color: var(--acc-deep);
  font-family: var(--display); font-weight: 800; font-size: 14px;
}

.pf-group-label {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  margin: 22px 2px 8px;
}

/* Grouped settings card with coloured icon rows */
.pf-card2 {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--clay);
}
.pf-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 15px; color: var(--ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.pf-item:last-child { border-bottom: 0; }
.pf-item:not(.pf-item-static):hover { background: rgba(94, 187, 126, 0.05); }
.pf-item-static { cursor: default; }
.pf-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; color: #fff;
}
.pf-item-label { flex: 1; }
.pf-item-val { font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.pf-item .pf-chev { color: #c3c8d0; font-size: 18px; }
.pf-item .pf-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acc-soft); color: var(--acc-deep);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* Trust strip — quiet reassurance, deliberately not a tappable row. */
.pf-trust-strip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 12px 14px;
  background: var(--acc-soft); border-radius: 14px;
  font-size: 12.5px; line-height: 1.4; color: var(--acc-deep);
}
.pf-trust-badge { font-size: 15px; }

/* Danger zone — visually separated, red, hard to hit by accident. */
.pf-danger {
  margin-top: 26px;
  border: 1.5px solid #f0c9c2;
  background: linear-gradient(180deg, #fdf3f1, #fbe9e5);
  border-radius: 18px;
  overflow: hidden;
}
.pf-danger-head {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; color: #b3402c;
  padding: 11px 16px 0;
}
.pf-danger-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px 14px; background: none; border: 0; cursor: pointer;
  text-align: left; text-decoration: none; font-family: var(--body);
}
.pf-danger-btn:hover .pf-danger-body b { text-decoration: underline; }
.pf-danger-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: var(--c-eat); color: #fff;
  box-shadow: 0 2px 8px rgba(217, 74, 53, .3);
}
.pf-danger-body { display: flex; flex-direction: column; gap: 1px; }
.pf-danger-body b { font-family: var(--display); font-size: 14.5px; color: #b3402c; }
.pf-danger-body span { font-size: 11.5px; color: #9c5647; line-height: 1.35; }

/* ── Right-to-left (Arabic, Persian) ─────────────────────── */
/* Only the handful of places where direction actually matters — most of the
   layout is flex/grid and mirrors itself once dir="rtl" is set. */
[dir="rtl"] .poi-card::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
[dir="rtl"] .search-input { padding: 14px 0 14px 16px; }
[dir="rtl"] .pf-chev, [dir="rtl"] .tonight-go { transform: scaleX(-1); }
[dir="rtl"] .onboard-skip { right: auto; left: -12px; }
[dir="rtl"] .hl-strip { direction: rtl; }
[dir="rtl"] .plan-time { text-align: center; }
[dir="rtl"] .mem-name { text-align: right; }
[dir="rtl"] .toast { direction: rtl; }

/* Language picker modal */
.langpick {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  max-height: 58vh; overflow-y: auto;   /* 21 languages need to scroll */
  -webkit-overflow-scrolling: touch;
}
.langpick-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card);
  font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink);
}
.langpick-row.on { border-color: var(--acc); background: var(--acc-soft); }
.langpick-flag { font-size: 20px; }
.langpick-check { margin-left: auto; color: var(--acc-deep); font-weight: 700; }

.pf-hero {
  background: linear-gradient(160deg, #8fd8a8, var(--acc) 70%, #4fae72);
  border-radius: 26px; padding: 18px;
  color: var(--acc-ink);
  box-shadow: var(--clay), 0 14px 32px rgba(61, 143, 95, 0.22);
  margin-bottom: 10px;
}
.pf-hero-prem { background: linear-gradient(160deg, #cbe9d6, #a7dcc0 55%, #8fd8a8); }
.pf-hero-top { display: flex; align-items: center; gap: 14px; }
.pf-level { margin-top: 16px; }
.pf-level-chip {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  background: rgba(255, 255, 255, 0.5); color: var(--acc-ink);
  border-radius: 999px; padding: 4px 12px;
}
.pf-level-bar {
  height: 6px; border-radius: 3px; margin-top: 8px;
  background: rgba(255, 255, 255, 0.45); overflow: hidden;
}
.pf-level-bar span { display: block; height: 100%; background: var(--acc-ink); opacity: .75; border-radius: 3px; transition: width .4s; }

/* Quick actions (tonight + AI route) */
.quick-actions { display: flex; gap: 10px; margin: 4px 0 18px; }
.qa-btn {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; border-radius: 16px; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 13.5px;
  border: 0; text-align: left; line-height: 1.15;
  box-shadow: var(--clay);
}
.qa-ico { font-size: 18px; flex: none; }
.qa-tonight { background: linear-gradient(135deg, #2f3e46, #45525a); color: #fff; }
.qa-route { background: linear-gradient(135deg, #7fd29b, var(--acc)); color: var(--acc-ink); }

/* Tonight list */
.tonight-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tonight-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 10px; cursor: pointer; text-align: left;
}
.tonight-row:hover { border-color: var(--ink-soft); }
.tonight-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 18px; background: var(--thumb-bg, var(--paper));
}
.tonight-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tonight-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tonight-info b { font-family: var(--display); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tonight-info span { font-size: 11.5px; color: var(--ink-soft); }
.tonight-go { color: #b8bdd4; font-size: 18px; }
.tonight-empty { color: var(--ink-soft); font-size: 14px; margin-top: 10px; }

/* AI route output */
.route-badge {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--acc-soft); color: var(--acc-deep);
  border-radius: 6px; padding: 3px 8px; margin-bottom: 8px;
}
.route-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
.route-err { color: var(--c-eat); font-size: 13.5px; margin-top: 12px; }
.route-out { margin-top: 16px; }
.route-title { font-family: var(--display); font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.route-summary { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 14px; }
.route-day { margin-bottom: 14px; }
.route-day-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 14.5px; margin-bottom: 8px;
}
.route-day-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  display: grid; place-items: center; font-size: 12px;
}
.route-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--line); background: var(--card); margin-bottom: 6px;
}
.route-item:hover { border-color: var(--acc); }
.route-time { flex: none; font-family: var(--mono); font-size: 12px; color: var(--acc-deep); font-weight: 500; padding-top: 1px; }
.route-item-body { display: flex; flex-direction: column; }
.route-item-body b { font-family: var(--display); font-size: 14px; color: var(--ink); }
.route-item-body span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

/* Highlights carousel */
.hl-wrap { margin: 4px 0 22px; }
.hl-title {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  margin: 0 0 10px 2px;
}
.hl-strip {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  scrollbar-width: none;
}
.hl-strip::-webkit-scrollbar { display: none; }
.hl-card {
  flex: none; width: 150px; scroll-snap-align: start;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.hl-img {
  position: relative; width: 150px; height: 110px; border-radius: 18px; overflow: hidden;
  box-shadow: var(--clay); border: 1px solid var(--line);
}
.hl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-rate {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: #fff;
  background: rgba(20, 30, 26, 0.6); border-radius: 999px; padding: 2px 7px;
  backdrop-filter: blur(4px);
}
.hl-name {
  display: block; font-family: var(--display); font-weight: 700; font-size: 13.5px;
  margin: 8px 2px 2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-cat { font-size: 11px; color: var(--ink-soft); margin-left: 2px; }
.pf-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ffffff;
  color: var(--acc-deep);
  font-family: var(--display); font-weight: 800; font-size: 24px;
  box-shadow: 0 4px 12px rgba(20, 70, 50, 0.18);
}
.pf-id { flex: 1; min-width: 0; }
.pf-id h2 {
  font-family: var(--display); font-weight: 800; font-size: 19px;
  letter-spacing: -0.01em; line-height: 1.2;
}
.pf-id p { font-size: 12.5px; opacity: .85; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.pf-cta {
  flex: none; border: 0; cursor: pointer;
  background: #fff; color: var(--acc-deep);
  font-family: var(--body); font-weight: 700; font-size: 13px;
  border-radius: 11px; padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(50, 40, 130, 0.2);
}
.pf-cta-ghost { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.pf-signin {
  display: block; width: 100%; margin: 0 0 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--acc-deep);
}

.pf-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin: 14px 0 18px;
}
.pf-stat {
  background: var(--card); border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px; padding: 14px 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(47,62,70,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pf-stat b {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em;
}
.pf-stat span { font-size: 11.5px; color: var(--ink-soft); }

.pf-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(47,62,70,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pf-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 14.5px; color: var(--ink);
  text-decoration: none; cursor: pointer; text-align: left;
}
.pf-row:last-child { border-bottom: 0; }
.pf-row:hover { background: rgba(61, 143, 95, 0.05); }
.pf-row-icon { flex: none; width: 22px; text-align: center; }
.pf-row span:nth-child(2) { flex: 1; }
.pf-chev { color: #b8bdd4; font-size: 18px; }
.pf-row-accent span:nth-child(2) { color: var(--acc-deep); font-weight: 700; }

/* Live "right now" tiles (weather / currency / emergency) */
.pf-live { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pf-live-tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 8px; text-align: center;
  box-shadow: var(--clay);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.pf-live-tile .pfl-ico { font-size: 20px; }
/* Fixed line box so values arriving async never resize the tile (no reflow). */
.pf-live-tile b {
  font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  min-height: 21px; line-height: 21px; white-space: nowrap;
}
.pf-live-tile span:last-child { font-size: 10.5px; color: var(--ink-soft); }

/* Trust card */
.pf-trust-row { cursor: default; }
.pf-trust-row:hover { background: none; }
.pf-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acc-soft); color: var(--acc-deep);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.pf-trust-row .pf-row-icon { filter: grayscale(0.15); }

/* Feedback */
.fb-rate { display: flex; gap: 6px; justify-content: center; margin: 14px 0 6px; }
.fb-star {
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: #d9b73a;
}
.fb-star.on { transform: scale(1.05); }
.fb-text { resize: vertical; min-height: 90px; font-family: var(--body); }
.fb-done { text-align: center; }
.fb-done-ico { font-size: 44px; margin-bottom: 8px; }
.fb-done h3 { margin-bottom: 16px; }

/* ── Account & auth ──────────────────────────────────────── */
.account-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius); padding: 14px;
  box-shadow: 0 2px 10px rgba(47,62,70,.07);
  margin-bottom: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.account-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #7fd29b, var(--acc)); color: var(--acc-ink);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 18px;
}
.account-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.account-meta b { font-family: var(--display); font-size: 15.5px; }
.account-meta span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.btn-sm { flex: none; width: auto; padding: 9px 14px; font-size: 13px; border-radius: 11px; }

.auth-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.auth-input {
  font-family: var(--body); font-size: 15px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; outline: none;
}
.auth-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(111,174,222,.22); }
.auth-error {
  font-size: 13px; color: var(--c-eat);
  background: var(--c-eat-soft); border-radius: 8px; padding: 8px 10px;
}
.auth-switch {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--acc-deep);
}
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; color: var(--ink-soft); font-size: 12px;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.auth-social { display: flex; flex-direction: column; gap: 8px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: 14.5px;
}
.social-btn:hover { border-color: var(--ink-soft); }
.social-ico { font-size: 16px; font-weight: 800; }
.social-btn .social-ico { color: #4285f4; }
.social-apple { background: #000; color: #fff; border-color: #000; }
.social-apple .social-ico { color: #fff; font-size: 17px; }
.social-apple:hover { background: #1a1a1a; border-color: #1a1a1a; }

.auth-forgot {
  display: block; width: 100%; margin-top: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 12.5px; color: var(--ink-soft);
}
.auth-forgot:hover { color: var(--acc-deep); }
.pw-sent { font-size: 13.5px; color: var(--acc-deep); margin-top: 12px; }
.pw-dev {
  margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  background: var(--c-shop-soft); font-size: 12px; line-height: 1.45; color: #6b5107;
}
.pw-dev-link {
  display: block; margin-top: 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--acc-deep);
}

/* AI consent + account deletion */
.ai-consent { margin: 10px 0 16px; }
.ai-consent p { font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.ai-consent .ai-fine { font-size: 12.5px; color: var(--ink-soft); }
.ai-decline {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.btn-danger {
  width: 100%; background: var(--c-eat); color: #fff; border-color: transparent;
  box-shadow: var(--clay);
}
.btn-danger:hover { filter: brightness(1.04); }
.pf-danger-txt { color: var(--c-eat); font-weight: 600; }

/* Onboarding on a short screen (landscape phone, ~360px tall): the full-size
   card is ~470px, so the CTA fell below the fold and the user could not leave
   onboarding at all. Compacting it makes the card fit; .onboard's scroll is
   the safety net, not the plan. Placed here for the same cascade reason as
   the block below. */
@media (max-height: 560px) {
  .onboard { padding: 16px 24px; }
  .onboard-icon { width: 52px; height: 52px; font-size: 24px; margin-bottom: 12px; }
  .onboard-card h2 { font-size: 21px; margin-bottom: 6px; }
  .onboard-card p { font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
  .onboard-brand { margin-bottom: 14px; }
  .onboard-dots { margin-bottom: 14px; }
  .onboard-cta { padding: 12px; font-size: 14.5px; }
  .onboard-skip { top: -10px; right: -8px; font-size: 12.5px; }
}

/* Cover screens / very narrow phones — the Galaxy Fold outer display is 280
   CSS px. Tighter gutters keep all five nav targets at the 44px minimum;
   measured 39-43px before this. Must stay near the end of the file: the base
   .bottom-nav / .nav-btn rules come later than the other media blocks and
   would otherwise win the cascade at equal specificity. */
@media (max-width: 319px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .bottom-nav { margin-left: 6px; margin-right: 6px; padding: 0; }
  .nav-btn { margin: 4px 1px; padding: 8px 1px 7px; font-size: 9.5px; }
  .nav-btn .nav-icon { font-size: 17px; }
  .wordmark { font-size: 19px; }
  .city-btn { padding: 8px 10px; font-size: 13px; }
}

/* The avatar is a fixed 44px target — never let flex shrink it (it was being
   squeezed to 42px next to a long city name). */
.avatar-btn { flex: none; }

/* The hidden attribute must always win, even over rules that set display
   (e.g. .onboard { display: grid }, .guide-panel { display: flex }). Without
   this, "hidden" overlays keep covering the app. */
[hidden] { display: none !important; }