@import url("https://api.mapbox.com/mapbox-gl-js/v3.16.0/mapbox-gl.css");

@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* Colors (semantic; source: .project/docs/DESIGN_LANGUAGE.md) */
    --color-bg: #f7f3e6;
    --color-bg-rgb: 247 243 230;
    --color-surface: #FFFFFF;
    --color-surface-2: #F0F0F0;
    --color-border: #7877b6;
    --color-border-rgb: 120 119 182;

    --color-text: #1c1c1d;
    --color-text-rgb: 28 28 29;
    --color-text-muted: #6A6966;

    --color-primary: #e2a9f1;
    --color-primary-rgb: 226 169 241;
    --color-primary-strong: #7877b6;
    --color-secondary: #90A8ED;
    --color-secondary-strong: #625BF6;

    --color-accent-coral: #F3A642;
    --color-accent-gold: #FFC900;
    --color-accent-sun: #F1F333;
    --color-accent-sky: #4087FC;
    --color-accent-leaf: #23A094;

    --color-danger: #DC341E;
    --color-warning: #F59E0B;
    --color-success: #23A094;

    /* Typography */
    --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Layout */
    --container-max: 44rem;
    --gutter: 1.25rem;

    /* Radius / shadow */
    --radius-lg: 1.25rem;
    --radius-md: 0.9rem;
    --radius-sm: 0.75rem;
    --shadow-card: 0 10px 30px rgb(var(--color-border-rgb) / 0.08);

    /* Overlay system */
    --overlay-backdrop-color: rgb(var(--color-border-rgb) / 0.45);
    --overlay-backdrop-blur: 8px;
    --overlay-drawer-max-width: min(48rem, 100%);
    --overlay-drawer-max-height: min(86dvh, 46rem);
    --overlay-drawer-radius: 1.3rem 1.3rem 0 0;
    --overlay-drawer-shadow: 0 -18px 52px rgb(var(--color-border-rgb) / 0.24);
    --overlay-drawer-bottom-padding: calc(env(safe-area-inset-bottom) + 1rem);

    /* Tap/focus */
    --focus-ring: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.35);
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
  }

  :where(button, input, textarea, select) { font: inherit; color: inherit; }
  :where(a) { color: inherit; text-decoration-color: rgb(var(--color-border-rgb) / 0.28); text-underline-offset: 0.2em; }
  :where(a:hover) { text-decoration-color: rgb(var(--color-border-rgb) / 0.5); }
  :where([hidden]) { display: none !important; }

  :where(:focus-visible) { outline: none; box-shadow: var(--focus-ring); border-radius: 0.65rem; }

  :where(.visually-hidden) {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }
}

@layer components {
  .poster-wash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 100% 0%, var(--color-primary) 0%, transparent 42%);
    opacity: 0.13;
  }

  .page {
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 1.25rem) var(--gutter) calc(env(safe-area-inset-bottom) + 1.5rem);
  }

  .page--journeys-immersive {
    --journeys-globe-safe-offset: clamp(16.5rem, 46dvh, 24rem);
    position: relative;
    isolation: isolate;
    padding-top: calc(env(safe-area-inset-top) + 0.95rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 2.25rem);
  }

  /* ── Landing page ────────────────────────────────────────────── */

  .page--landing {
    position: relative;
    isolation: isolate;
    padding: 0;
    background: #0a0e1a;
    color: white;
  }

  /* Hide the warm poster wash on the dark landing page */
  body:has(.page--landing) .poster-wash {
    display: none;
  }

  /* Globe container — fixed behind hero */
  .landing-globe {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 16% 12%, rgb(var(--color-primary-rgb) / 0.18), transparent 33%),
      radial-gradient(circle at 87% 79%, rgb(var(--color-border-rgb) / 0.16), transparent 37%),
      linear-gradient(180deg, rgb(6 10 20 / 0.95) 0%, rgb(7 12 25 / 0.94) 45%, rgb(6 11 22 / 0.97) 100%);
  }

  .landing-globe__fade {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
      /* heavy centre vignette so text reads against bright globe tiles */
      radial-gradient(ellipse 80% 70% at 50% 42%, rgb(4 8 18 / 0.62) 0%, transparent 100%),
      /* top + bottom edge darkening */
      linear-gradient(180deg, rgb(7 13 26 / 0.72) 0%, rgb(7 13 26 / 0.3) 18%, transparent 34%, transparent 54%, rgb(10 14 26 / 0.7) 82%, rgb(10 14 26 / 0.92) 100%);
  }

  /*
   * All landing content scrolls over the fixed globe.
   * Each section is transparent so the globe stays visible;
   * text legibility comes from the globe fade overlay above
   * plus per-section text-shadow / backdrop treatments.
   */

  /* Hero overlay — centered on globe, first viewport */
  .landing-hero {
    position: relative;
    z-index: 8;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + 2rem) var(--gutter) 4rem;
  }

  .landing-hero__inner {
    text-align: center;
    max-width: 36rem;
    display: grid;
    gap: 1.25rem;
    justify-items: center;
  }

  .landing-hero__badge {
    background: rgb(255 255 255 / 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 0.18);
    color: white;
    transform: none;
  }

  .landing-hero__icon {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.35rem;
    box-shadow:
      0 4px 20px rgb(0 0 0 / 0.45),
      0 0 0 1px rgb(255 255 255 / 0.12);
    object-fit: cover;
  }

  .landing-hero__headline {
    margin: 0;
    font-weight: 800;
    font-size: clamp(3.4rem, 11vw, 5.5rem);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: white;
    text-shadow:
      0 2px 8px rgb(0 0 0 / 0.7),
      0 6px 24px rgb(0 0 0 / 0.5);
  }

  .landing-hero__tagline {
    margin: 0;
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    line-height: 1.4;
    color: rgb(255 255 255 / 0.92);
    max-width: 28ch;
    text-shadow:
      0 1px 4px rgb(0 0 0 / 0.8),
      0 4px 12px rgb(0 0 0 / 0.5);
  }

  .landing-hero__actions {
    margin-top: 0.75rem;
    width: 100%;
    max-width: 22rem;
    display: grid;
    gap: 1.25rem;
  }

  .landing-hero__cta {
    width: 100%;
    font-size: 1.1rem;
    height: 3.5rem;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.4);
  }

  .landing-hero__signin {
    background: rgb(8 10 18 / 0.82);
    backdrop-filter: blur(16px) saturate(120%);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.14);
  }

  .landing-hero__signin-label {
    color: rgb(255 255 255 / 0.78);
    margin: 0 0 0.5rem;
  }

  .landing-hero__signin-form {
    display: grid;
    gap: 0.5rem;
  }

  .landing-hero__signin-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .landing-hero__signin .text-input {
    background: rgb(0 0 0 / 0.4);
    border-color: rgb(255 255 255 / 0.22);
    color: white;
  }

  .landing-hero__signin .text-input::placeholder {
    color: rgb(255 255 255 / 0.5);
  }

  .landing-hero__signin .landing-hero__signin-btn {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text);
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgb(var(--color-primary-rgb) / 0.3);
  }

  /*
   * Features + CTA — scroll over globe (transparent backgrounds).
   * Each card uses a frosted-glass treatment for legibility.
   */
  .landing-features {
    position: relative;
    z-index: 8;
    padding: 4rem var(--gutter) 2rem;
  }

  .landing-features__inner {
    max-width: 52rem;
    margin: 0 auto;
    display: grid;
    gap: 2.5rem;
  }

  @media (min-width: 48rem) {
    .landing-features__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
    }
  }

  .landing-feature {
    display: grid;
    gap: 1rem;
    justify-items: start;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(255 255 255 / 0.1);
    background: rgb(8 10 18 / 0.72);
    backdrop-filter: blur(18px) saturate(120%);
  }

  .landing-feature__icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 0.85rem;
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.12);
  }

  .landing-feature__glyph {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--color-primary);
  }

  .landing-feature__title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.4rem, 3.5vw, 1.75rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: white;
  }

  .landing-feature__body {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.64);
  }

  /* Final CTA — also transparent, globe visible behind */
  .landing-cta {
    position: relative;
    z-index: 8;
    padding: 4rem var(--gutter) calc(env(safe-area-inset-bottom) + 5rem);
  }

  .landing-cta__inner {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
    padding: 3.5rem 2rem;
    border-radius: 1.5rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    background: rgb(8 10 18 / 0.74);
    backdrop-filter: blur(18px) saturate(120%);
  }

  .landing-cta__headline {
    margin: 0 0 0.5rem;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    letter-spacing: -0.02em;
    color: white;
  }

  .landing-cta__sub {
    margin: 0 0 2rem;
    font-size: 1.05rem;
    color: rgb(255 255 255 / 0.58);
  }

  .landing-cta .landing-cta__btn {
    width: auto;
    display: inline-flex;
    font-size: 1.15rem;
    padding: 1rem 2.5rem;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 4px 18px rgb(var(--color-primary-rgb) / 0.35);
  }

  /* ── End landing page ────────────────────────────────────────── */

  .journeys-immersive__map-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 16% 12%, rgb(var(--color-primary-rgb) / 0.18), transparent 33%),
      radial-gradient(circle at 87% 79%, rgb(var(--color-border-rgb) / 0.16), transparent 37%),
      linear-gradient(180deg, rgb(6 10 20 / 0.95) 0%, rgb(7 12 25 / 0.94) 45%, rgb(6 11 22 / 0.97) 100%);
  }

  .journeys-immersive__map-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(7 13 26 / 0.58) 0%, rgb(7 13 26 / 0.22) 12%, transparent 27%),
      linear-gradient(0deg, rgb(7 13 26 / 0.62) 0%, rgb(7 13 26 / 0.18) 18%, transparent 35%);
  }

  .journeys-immersive__map-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(circle at 50% 24%, rgb(160 206 255 / 0.16) 0%, transparent 42%);
  }

  .journeys-immersive__content {
    position: relative;
    z-index: 8;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    pointer-events: none;
  }

  .journeys-immersive__header,
  .journeys-immersive__sections {
    pointer-events: auto;
  }

  .journeys-immersive__title {
    color: var(--color-surface);
    text-shadow: 0 3px 18px rgb(0 0 0 / 0.38);
  }

  .journeys-immersive__sections {
    margin-top: var(--journeys-globe-safe-offset);
    padding-bottom: 3.25rem;
  }

  .page__header {
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .page--entry {
    display: grid;
    align-content: start;
    gap: 1rem;
  }

  .entry-hero {
    text-align: left;
    display: grid;
    justify-items: start;
    gap: 0.25rem;
  }

  .page--entry .headline {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }

  .page--entry .lede {
    max-width: 32ch;
  }

  .entry-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .card--entry {
    margin: 0;
    display: grid;
    align-content: start;
    width: 100%;
  }

  .title--entry {
    margin-top: 0.5rem;
    font-size: 1.25rem;
  }

  @media (min-width: 48rem) {
    .page--entry {
      align-content: center;
      gap: 1.25rem;
    }

    .entry-hero {
      text-align: center;
      justify-items: center;
    }

    .card--entry {
      height: 100%;
    }

    .title--entry {
      font-size: 1.35rem;
    }
  }

  .headline {
    margin: 0;
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .lede {
    margin: 0.7rem 0 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  .card {
    max-width: var(--container-max);
    margin: 1.25rem auto 0;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }

  .card--hard {
    border: 2px solid var(--color-text);
    box-shadow: 4px 4px 0 0 var(--color-text);
  }

  .field { display: grid; gap: 0.4rem; }
  .field__label { font-weight: 600; font-size: 0.95rem; }
  .field__hint { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); }

  .text-input {
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    background: var(--color-surface-2);
  }

  .tags-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.6rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    background: var(--color-surface-2);
  }

  .tag-pill {
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    background: var(--color-surface);
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 650;
    box-shadow: 0 2px 0 rgb(var(--color-border-rgb) / 0.06);
  }

  .tag-pill--selected {
    border-color: rgb(var(--color-border-rgb) / 0.22);
    background: color-mix(in oklab, var(--color-primary) 22%, var(--color-surface));
    box-shadow: 0 3px 0 rgb(var(--color-border-rgb) / 0.1);
  }

  .text-input--poster {
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--color-surface-2);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.95rem 1.1rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid rgb(var(--color-border-rgb) / 0.14);
    background: var(--color-surface);
    box-shadow: 4px 4px 0 0 var(--color-text);
  }

  .btn--primary {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-surface);
  }

  .btn--option {
    justify-content: space-between;
    font-weight: 600;
    box-shadow: none;
    border: 2px solid rgb(var(--color-border-rgb) / 0.12);
    background: var(--color-surface);
  }

  .btn--option:hover { border-color: var(--color-text); }

  .btn--ghost {
    box-shadow: none;
    background: transparent;
  }

  .check { opacity: 0; transform: scale(0.75); transition: opacity 120ms ease, transform 120ms ease; }
  .btn--option.is-selected { border-color: var(--color-text); }
  .btn--option.is-selected .check { opacity: 1; transform: scale(1); }
  .btn--option:has(input:checked) { border-color: var(--color-text); }
  .btn--option:has(input:checked) .check { opacity: 1; transform: scale(1); }

  .stack { display: grid; gap: 0.75rem; margin-top: 1rem; }

  .badge {
    display: inline-block;
    width: fit-content;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    transform: rotate(-2deg);
  }

  .badge--sun { background: var(--color-accent-sun); }
  .badge--gold { background: var(--color-accent-gold); }

  .row { display: flex; gap: 1rem; }
  .row--between { justify-content: space-between; align-items: flex-start; }

  .title { margin: 0; font-weight: 800; font-size: 1.15rem; }
  .title--accent { color: var(--color-primary-strong); }
  .muted { color: var(--color-text-muted); margin: 0.2rem 0 0; }
  .micro { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

  .ink-strong { color: var(--color-primary-strong); }

  .checklist {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.08);
    padding-top: 1rem;
    display: grid;
    gap: 0.65rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
  }

  .check-dot { color: var(--color-success); font-weight: 900; }

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
  }

  /* ── Onboarding ──────────────────────────────────────────────── */

  .page--onboarding {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 0.75rem) var(--gutter) calc(env(safe-area-inset-bottom) + 1rem);
  }

  .onboarding-nav {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }

  .onboarding-nav__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 999px;
  }

  .onboarding-nav__back:hover {
    background: rgb(var(--color-border-rgb) / 0.08);
  }

  .onboarding-nav__step {
    justify-self: end;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .onboarding-progress {
    height: 0.3rem;
    border-radius: 999px;
    background: rgb(var(--color-border-rgb) / 0.12);
    overflow: hidden;
  }

  .onboarding-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-text);
    transition: width 300ms ease;
  }

  .onboarding-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 32rem;
    width: 100%;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.10);
    border-radius: var(--radius-lg);
    box-shadow:
      var(--shadow-card),
      0 0 0 1px rgb(var(--color-border-rgb) / 0.04);
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .onboarding-hero {
    margin-bottom: 1.75rem;
    text-align: center;
  }

  .onboarding-headline {
    margin: 0.6rem 0 0;
    font-weight: 800;
    font-size: clamp(2.4rem, 10vw, 3.2rem);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .onboarding-sub {
    margin: 0.65rem auto 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 26ch;
  }

  .onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
  }

  .onboarding-options {
    display: grid;
    gap: 0.65rem;
  }

  .onboarding-option-emoji {
    font-size: 1.15rem;
    margin-right: 0.15rem;
  }

  .onboarding-option-glyph {
    font-size: 1rem;
    margin-right: 0.2rem;
    color: var(--color-primary);
  }

  .onboarding-dates {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  .onboarding-action {
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }

  .onboarding-btn {
    width: 100%;
    height: 3.25rem;
    font-size: 1.05rem;
  }

  /* Desktop: centred card with visual presence */
  @media (min-width: 48rem) {
    .page--onboarding {
      align-items: center;
      justify-content: center;
      padding: 2rem var(--gutter);
    }

    .onboarding-nav {
      max-width: 32rem;
      width: 100%;
    }

    .onboarding-body {
      flex: 0 1 auto;
      padding: 2.5rem 2.5rem 2rem;
    }

    .onboarding-form {
      flex: 0 1 auto;
    }

    .onboarding-action {
      margin-top: 2rem;
    }
  }

  /* ── End onboarding ────────────────────────────────────────────── */

  /* ── Paywall ───────────────────────────────────────────────────── */

  .page--paywall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 1.5rem) var(--gutter) calc(env(safe-area-inset-bottom) + 1.5rem);
  }

  .paywall-body {
    max-width: 32rem;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.10);
    border-radius: var(--radius-lg);
    box-shadow:
      var(--shadow-card),
      0 0 0 1px rgb(var(--color-border-rgb) / 0.04);
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .paywall-hero {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .paywall-headline {
    margin: 0.6rem 0 0;
    font-weight: 800;
    font-size: clamp(2rem, 8vw, 2.6rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  .paywall-sub {
    margin: 0.6rem auto 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 28ch;
  }

  .paywall-plan {
    border: 2px solid var(--color-text);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.1rem;
  }

  .paywall-plan__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .paywall-plan__name {
    margin: 0;
    font-weight: 800;
    font-size: 1.15rem;
  }

  .paywall-plan__price {
    margin: 0.15rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
  }

  .paywall-plan__trial {
    text-align: right;
    flex-shrink: 0;
  }

  .paywall-plan__trial-label {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-primary-strong);
  }

  .paywall-plan__billing {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .paywall-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.08);
    padding-top: 0.85rem;
    display: grid;
    gap: 0.55rem;
  }

  .paywall-feature {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
  }

  .paywall-feature__check {
    color: var(--color-success);
    font-weight: 900;
    flex-shrink: 0;
  }

  .paywall-actions {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.5rem;
  }

  .paywall-btn {
    width: 100%;
    height: 3.25rem;
    font-size: 1.05rem;
  }

  .paywall-btn--secondary {
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
  }

  @media (min-width: 48rem) {
    .paywall-body {
      padding: 2.5rem 2.5rem 2rem;
    }
  }

  /* ── End paywall ───────────────────────────────────────────────── */

  /* Legacy dots (kept for back-compat; superseded by progress bar) */
  .onboarding-dots { display: inline-flex; justify-content: center; gap: 0.4rem; }

  .onboarding-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgb(var(--color-border-rgb) / 0.16);
  }

  .onboarding-dot--active { background: var(--color-text); }

  .header-row__actions { display: inline-flex; gap: 0.5rem; }

  .icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgb(var(--color-border-rgb) / 0.08);
    text-decoration: none;
  }

  .section { margin-top: 1.5rem; }
  .section__label {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .badge--primary { background: var(--color-primary); color: var(--color-text); border-color: rgb(var(--color-border-rgb) / 0.12); }

  /* ── Sticker badges (editorial, printed feel) ──────────────── */

  .badge--sticker {
    display: inline-block;
    padding: 0.2rem 0.65rem 0.18rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.35;
    border-radius: 999px;
    border: 1.5px solid var(--color-text);
  }

  .badge--sticker-primary {
    background: var(--color-primary);
    color: var(--color-text);
  }

  .badge--sticker-sky {
    background: var(--color-accent-sky);
    color: var(--color-surface);
    border-color: color-mix(in oklab, var(--color-accent-sky) 60%, var(--color-text));
  }

  /* ── Journey poster card (active + upcoming) ───────────────── */

  .journey-poster {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    text-decoration: none;
    padding: 1.4rem 1.35rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

  .journey-poster:hover,
  .journey-poster:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card), 0 6px 20px rgb(var(--color-border-rgb) / 0.12);
  }

  .journey-poster__initial {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    border: 2px solid var(--color-text);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
    flex-shrink: 0;
  }

  .journey-poster--upcoming .journey-poster__initial {
    background: color-mix(in oklab, var(--color-accent-sky) 28%, var(--color-surface));
    border-color: color-mix(in oklab, var(--color-accent-sky) 50%, var(--color-text));
  }

  .journey-poster__content {
    min-width: 0;
  }

  .journey-poster__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
  }

  .journey-poster__date {
    font-size: 0.82rem;
    color: var(--color-text-muted);
  }

  .journey-poster__title {
    margin: 0;
    font-weight: 800;
    font-size: 1.65rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .journey-poster__region {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.3;
  }

  .journey-poster__meta {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }

  /* ── Photo Fan (poker-hand thumbnail stack) ────────────── */

  .photo-fan {
    position: relative;
    width: 5.2rem;
    height: 5.2rem;
    flex-shrink: 0;
  }

  .photo-fan--sm {
    width: 3.4rem;
    height: 3.4rem;
  }

  .photo-fan__card {
    position: absolute;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-text);
    object-fit: cover;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
    transform-origin: center bottom;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  .photo-fan--sm .photo-fan__card {
    width: 2.6rem;
    height: 2.6rem;
    border-width: 1px;
  }

  /* Fan rotations — bottom card first, top card last */
  .photo-fan__card--0 { rotate: -7deg; z-index: 1; }
  .photo-fan__card--1 { rotate: 0deg;  z-index: 2; }
  .photo-fan__card--2 { rotate: 7deg;  z-index: 3; }

  /* When only 2 photos: spread them evenly */
  .photo-fan__card--0:nth-last-child(2) { rotate: -5deg; }
  .photo-fan__card--1:last-child { rotate: 5deg; }

  /* When only 1 photo: centered, no rotation */
  .photo-fan__card--0:only-child { rotate: 0deg; }

  /* ── Journey row (past journeys — compact editorial) ───────── */

  .journey-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    text-decoration: none;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    transition: transform 120ms ease;
  }

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

  .journey-row__initial {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1.5px solid rgb(var(--color-border-rgb) / 0.14);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .journey-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .journey-row__name {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .journey-row__sub {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.3;
  }

  .journey-row__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
  }

  .journey-row__meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .journeys__map {
    --map-tile-filter: saturate(0.9) contrast(1.04) brightness(1.04);
    position: relative;
    isolation: isolate;
    max-width: var(--container-max);
    margin: 1.25rem auto 0;
    height: clamp(21rem, 52vh, 28rem);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    background:
      radial-gradient(circle at 20% 10%, rgb(var(--color-primary-rgb) / 0.34), transparent 44%),
      radial-gradient(circle at 78% 84%, rgb(var(--color-border-rgb) / 0.28), transparent 43%),
      radial-gradient(
        circle at 50% 42%,
        color-mix(in oklab, var(--color-accent-sky) 30%, var(--color-text)) 0%,
        color-mix(in oklab, var(--color-text) 88%, var(--color-border)) 62%,
        var(--color-text) 100%
      );
    box-shadow: 0 16px 44px rgb(var(--color-border-rgb) / 0.28);
  }

  .journeys__map--immersive {
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
      radial-gradient(circle at 16% 12%, rgb(var(--color-primary-rgb) / 0.22), transparent 36%),
      radial-gradient(circle at 84% 78%, rgb(var(--color-border-rgb) / 0.2), transparent 39%),
      radial-gradient(
        circle at 50% 42%,
        color-mix(in oklab, var(--color-accent-sky) 38%, rgb(4 11 24)) 0%,
        color-mix(in oklab, rgb(5 12 24) 94%, var(--color-border)) 60%,
        rgb(4 10 21) 100%
      );
  }

  .journeys__map--immersive::before {
    inset: 10% 19% 28%;
    opacity: 0.92;
  }

  .journeys__map::before {
    content: "";
    position: absolute;
    inset: 14% 18%;
    border-radius: 999px;
    background: radial-gradient(circle, rgb(var(--color-primary-rgb) / 0.3), rgb(var(--color-border-rgb) / 0.04) 62%, transparent 100%);
    filter: blur(20px);
    opacity: 0.88;
    pointer-events: none;
    z-index: 0;
  }

  .journeys__map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      radial-gradient(circle at 8% 18%, rgb(255 255 255 / 0.62) 0 1px, transparent 1px),
      radial-gradient(circle at 79% 12%, rgb(255 255 255 / 0.48) 0 1px, transparent 1px),
      radial-gradient(circle at 18% 78%, rgb(255 255 255 / 0.45) 0 1px, transparent 1px),
      radial-gradient(circle at 86% 72%, rgb(255 255 255 / 0.35) 0 1px, transparent 1px),
      radial-gradient(circle at 36% 32%, rgb(255 255 255 / 0.28) 0 1px, transparent 1px);
  }

  .journeys__map > canvas,
  .journeys__map .scene-container,
  .journeys__map .mapboxgl-canvas-container,
  .journeys__map .mapboxgl-canvas {
    position: relative;
    z-index: 1;
  }

  .journeys__map--theme-airbnb-like {
    --map-tile-filter: none;
  }

  .journeys__map--globe {
    border-color: rgb(var(--color-primary-rgb) / 0.3);
  }

  .journeys__map .mapboxgl-marker {
    z-index: 3;
  }

  .journeys__map .mapboxgl-ctrl-bottom-right {
    bottom: 0.5rem;
    right: 0.5rem;
  }

  .journeys__map .mapboxgl-ctrl-attrib {
    padding: 0.2rem 0.45rem;
    border-radius: 0.5rem;
    background: rgb(var(--color-text-rgb) / 0.66);
    color: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(4px);
  }

  .journeys__map .mapboxgl-ctrl-attrib a {
    color: rgb(255 255 255 / 0.92);
  }

  .journeys__map .mapboxgl-ctrl-logo {
    filter: brightness(0) invert(1);
    opacity: 0.92;
  }

  .journeys__map--immersive .mapboxgl-ctrl-bottom-right,
  .journeys__map--immersive .mapboxgl-ctrl-bottom-left {
    bottom: calc(env(safe-area-inset-bottom) + 0.75rem);
    z-index: 25;
  }

  .journeys__map--immersive .mapboxgl-ctrl-bottom-right {
    right: 0.75rem;
  }

  .journeys__map--immersive .mapboxgl-ctrl-bottom-left {
    left: 0.75rem;
  }

  .journeys__map--immersive .mapboxgl-ctrl-attrib {
    background: rgb(4 10 22 / 0.82);
  }

  .journeys-globe-chip {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 2px solid rgb(255 255 255 / 0.94);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.42);
    display: grid;
    place-items: center;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    backdrop-filter: blur(1px);
    transition: transform 140ms ease, box-shadow 140ms ease;
  }

  .journeys-globe-chip:hover,
  .journeys-globe-chip:focus-visible {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.5);
  }

  .journeys-globe-chip:disabled {
    opacity: 0.7;
    cursor: default;
  }

  .journeys-globe-chip--current {
    background: var(--color-primary);
    border-color: rgb(255 255 255 / 0.95);
  }

  .journeys-globe-chip--future {
    background: var(--color-accent-sky);
    color: var(--color-surface);
  }

  .journeys-globe-chip--past {
    background: color-mix(in oklab, var(--color-border) 28%, var(--color-surface));
    color: var(--color-text);
  }

  .journeys-globe-plane {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.86);
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    line-height: 1;
    color: rgb(255 249 223);
    background:
      radial-gradient(circle at 40% 30%, rgb(255 255 255 / 0.42), rgb(131 171 224 / 0.34) 48%, rgb(28 55 98 / 0.82) 100%),
      rgb(28 55 98 / 0.9);
    box-shadow:
      0 0 0 1px rgb(180 214 255 / 0.22),
      0 0 16px rgb(181 218 255 / 0.42),
      0 6px 18px rgb(0 0 0 / 0.42);
    transform: rotate(calc(var(--journeys-plane-heading, 0deg) - 18deg));
    pointer-events: none;
    user-select: none;
  }


  .journeys-pin-wrap {
    background: transparent;
    border: none;
  }

  .journeys-pin {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-surface);
    box-shadow: 0 8px 18px rgb(var(--color-border-rgb) / 0.2);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
  }

  .journeys-pin--current {
    background: var(--color-primary);
    color: var(--color-text);
    border-color: rgb(255 255 255 / 0.95);
  }

  .journeys-pin--future {
    background: var(--color-accent-sky);
    color: var(--color-surface);
    border-color: rgb(255 255 255 / 0.95);
  }

  .journeys-pin--past {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border-color: rgb(var(--color-border-rgb) / 0.08);
    box-shadow: 0 8px 18px rgb(var(--color-border-rgb) / 0.14);
  }

  .journeys-chip-wrap {
    background: transparent;
    border: none;
  }

  .journeys-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgb(0 0 0 / 0.14);
    background: #fff;
    color: #222;
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.2);
    padding: 0.24rem 0.62rem;
    font-weight: 700;
    font-size: 0.77rem;
    line-height: 1;
    letter-spacing: 0.01em;
    max-width: 9.5rem;
  }

  .journeys-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .journeys-chip--current {
    background: var(--color-primary);
    border-color: rgb(var(--color-border-rgb) / 0.86);
    color: var(--color-text);
  }

  .journeys-chip--future {
    background: color-mix(in oklab, var(--color-border) 14%, var(--color-surface));
    border-color: rgb(var(--color-border-rgb) / 0.24);
    color: var(--color-text);
  }

  .journeys-chip--past {
    background: color-mix(in oklab, var(--color-border) 9%, var(--color-surface));
    border-color: rgb(var(--color-border-rgb) / 0.18);
    color: var(--color-text-muted);
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.14);
  }

  .fab {
    position: fixed;
    right: 1.25rem;
    bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.8);
    background: var(--color-text);
    color: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.8rem;
    box-shadow: var(--shadow-card);
  }

  .fab--journeys-immersive {
    z-index: 26;
    border-color: rgb(255 255 255 / 0.68);
    box-shadow: 0 16px 30px rgb(0 0 0 / 0.42);
  }

  .page--journeys-immersive .section__label {
    color: rgb(233 240 255 / 0.76);
  }

  .page--journeys-immersive .icon-btn {
    background: rgb(255 255 255 / 0.9);
    border-color: rgb(255 255 255 / 0.58);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.28);
  }

  .page--journeys-immersive .journey-poster,
  .page--journeys-immersive .journey-row,
  .journeys-immersive__empty {
    border-color: rgb(255 255 255 / 0.48);
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: blur(14px) saturate(112%);
    box-shadow: 0 16px 36px rgb(2 8 20 / 0.35);
  }

  .page--journeys-immersive .journey-poster__initial {
    background: rgb(var(--color-primary-rgb) / 0.85);
    border-color: rgb(255 255 255 / 0.6);
  }

  .page--journeys-immersive .journey-poster--upcoming .journey-poster__initial {
    background: rgb(64 135 252 / 0.25);
    border-color: rgb(255 255 255 / 0.5);
  }

  .page--journeys-immersive .journey-row__initial {
    background: rgb(255 255 255 / 0.5);
    border-color: rgb(255 255 255 / 0.3);
  }

  .page--journeys-immersive .photo-fan__card {
    border-color: rgb(255 255 255 / 0.7);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
  }

  .back-link { text-decoration: none; font-weight: 700; }

  .city {
    height: 100dvh;
    background: var(--color-bg);
    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
  }

  .city__header {
    padding: calc(env(safe-area-inset-top) + 0.75rem) var(--gutter) 0;
    display: grid;
    gap: 0.25rem;
  }

  .city__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .city__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 999px;
  }

  .city__back:hover {
    background: rgb(var(--color-border-rgb) / 0.08);
  }

  .city__action-btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1.5px solid rgb(var(--color-border-rgb) / 0.18);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .city__action-btn:hover {
    border-color: var(--color-text);
    color: var(--color-text);
  }

  .city__headline {
    padding: 0 0.25rem;
  }

  .city__title {
    margin: 0;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .city__region {
    margin: 0.15rem 0 0;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.3;
  }

  .city__status-badge {
    margin-top: 0.5rem;
  }

  .city__visit-date {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }

  .city__map-fallback {
    margin-top: 0;
  }

  .city-map-stage {
    margin: 0 var(--gutter);
    position: relative;
    flex: 4 1 0;
    min-height: 0;
  }

  .city__map {
    --map-tile-filter: saturate(0.92) contrast(1.04) brightness(1.03) sepia(0.08);
    --map-safety-pin-recent: #6f8fd7;
    --map-safety-pin-older: #dde3ef;
    --map-safety-pin-text: #1f2940;
    --map-destination-dot: #5d87f5;
    --map-destination-halo: rgb(93 135 245 / 0.24);
    height: 100%;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    background: var(--color-bg);
  }

  .city__map--theme-soft-editorial {
    --map-tile-filter: saturate(0.9) contrast(1.03) brightness(1.05) sepia(0.08);
    --map-safety-pin-recent: #6f8fd7;
    --map-safety-pin-older: #dee5f1;
    --map-safety-pin-text: #1f2a43;
    --map-destination-dot: #5780ee;
    --map-destination-halo: rgb(87 128 238 / 0.24);
  }

  .city__map--theme-monochrome-ink {
    --map-tile-filter: saturate(0.24) contrast(1.12) brightness(1.05);
    --map-safety-pin-recent: #6a7fb8;
    --map-safety-pin-older: #d6dbe6;
    --map-safety-pin-text: #212735;
    --map-destination-dot: #4f72d8;
    --map-destination-halo: rgb(79 114 216 / 0.22);
  }

  .city__map--theme-clean-daylight {
    --map-tile-filter: saturate(1.02) contrast(1.03) brightness(1.06);
    --map-safety-pin-recent: #688fdf;
    --map-safety-pin-older: #dae8f8;
    --map-safety-pin-text: #1f2f48;
    --map-destination-dot: #4f8ef2;
    --map-destination-halo: rgb(79 142 242 / 0.2);
  }

  .city__map--theme-airbnb-like {
    --map-tile-filter: none;
    --map-safety-pin-recent: #647894;
    --map-safety-pin-older: #dce1e8;
    --map-safety-pin-text: #213044;
    --map-destination-dot: #7877b6;
    --map-destination-halo: rgb(120 119 182 / 0.18);
  }

  .city-map-preview {
    position: absolute;
    inset-inline: 0.6rem;
    bottom: 0.6rem;
    z-index: 9;
    border-radius: 1.05rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    background: var(--color-surface);
    box-shadow: 0 18px 34px rgb(0 0 0 / 0.26);
    overflow: hidden;
  }

  .city-map-preview[hidden] { display: none; }

  .city-map-preview__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.15);
    background: rgb(255 255 255 / 0.94);
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
  }

  .city-map-preview__body {
    display: grid;
    grid-template-columns: 6.2rem 1fr;
    min-height: 6.4rem;
  }

  .city-map-preview__media {
    background: var(--color-surface-2);
    position: relative;
    border-right: 1px solid rgb(var(--color-border-rgb) / 0.1);
    overflow: hidden;
  }

  .city-map-preview__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .city-map-preview__media-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: linear-gradient(150deg, rgb(var(--color-primary-rgb) / 0.17), rgb(144 168 237 / 0.19));
  }

  .city-map-preview__content {
    padding: 0.62rem 0.74rem 0.72rem;
    display: grid;
    align-content: start;
    gap: 0.3rem;
  }

  .city-map-preview__title {
    margin: 0;
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.15;
  }

  .city-map-preview__meta {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .city-map-preview__snippet {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .city-map-preview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.56rem 0.62rem 0.68rem;
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.08);
  }

  .city-map-preview__action {
    width: auto;
    min-height: 2.1rem;
    padding: 0.44rem 0.68rem;
    border-radius: 999px;
    font-size: 0.76rem;
    box-shadow: none;
  }


  .map-picker {
    --map-tile-filter: saturate(0.94) contrast(1.04) brightness(1.04);
  }

  .map-picker--theme-airbnb-like {
    --map-tile-filter: none;
  }


  .city__map--theme-airbnb-like .gm-style .gm-bundled-control .gmnoprint > div,
  .journeys__map--theme-airbnb-like .gm-style .gm-bundled-control .gmnoprint > div,
  .map-picker--theme-airbnb-like .gm-style .gm-bundled-control .gmnoprint > div {
    border-radius: 999px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.16) !important;
    border: 1px solid rgb(0 0 0 / 0.1) !important;
  }

  .city__map--theme-airbnb-like .gm-style button.gm-control-active,
  .journeys__map--theme-airbnb-like .gm-style button.gm-control-active,
  .map-picker--theme-airbnb-like .gm-style button.gm-control-active {
    width: 34px !important;
    height: 34px !important;
    background: #fff !important;
    border: 0 !important;
  }

  .city__map--theme-airbnb-like .gm-style button.gm-control-active + button.gm-control-active,
  .journeys__map--theme-airbnb-like .gm-style button.gm-control-active + button.gm-control-active,
  .map-picker--theme-airbnb-like .gm-style button.gm-control-active + button.gm-control-active {
    border-top: 1px solid rgb(0 0 0 / 0.08) !important;
  }

  .city-tools {
    margin: 0.75rem var(--gutter) 0;
    display: grid;
    gap: 0.65rem;
  }

  .city-map-search {
    position: absolute;
    inset: 0.7rem 0.7rem auto;
    z-index: 10;
    pointer-events: none;
  }

  .city-map-search .field,
  .city-map-search .city-search__results {
    pointer-events: auto;
  }

  .city-search {
    display: grid;
    gap: 0.45rem;
  }

  .city-search__input {
    background: var(--color-surface);
  }

  .city-map-search .city-search__input {
    border-color: rgb(var(--color-border-rgb) / 0.2);
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 10px 22px rgb(0 0 0 / 0.16);
  }

  .city-search__results {
    margin-top: 0;
    max-height: min(16rem, 42dvh);
    overflow-y: auto;
    padding-right: 0.1rem;
  }

  .city-map-search .city-search__results {
    margin-top: 0.35rem;
    max-height: min(16rem, 35dvh);
    padding: 0.35rem;
    border-radius: calc(var(--radius-md) + 0.12rem);
    border: 1px solid rgb(var(--color-border-rgb) / 0.16);
    background: #fff;
    box-shadow: 0 14px 28px rgb(0 0 0 / 0.16);
  }

  .city-search__results .suggestions__item {
    background: var(--color-surface);
  }

  .city-map-search .city-search__results .suggestions__item {
    background: #fff;
  }

  .city-layer-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .city-layer-toggle {
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
    padding: 0.42rem 0.78rem;
    cursor: pointer;
    line-height: 1;
  }

  .city-layer-toggle--active {
    background: var(--color-text);
    color: var(--color-surface);
    border-color: var(--color-text);
  }

  .city-layer-toggle--empty:not(.city-layer-toggle--active) {
    color: var(--color-text-muted);
    border-style: dashed;
  }

  .city-legend {
    border: 1px solid rgb(var(--color-border-rgb) / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 0.65rem 0.75rem;
  }

  .city-legend__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .city-legend__grid {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.35rem;
  }

  .city-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text);
  }

  .city-legend__item--inactive,
  .city-legend__item--empty {
    color: var(--color-text-muted);
  }

  .city-legend__swatch {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.18);
    background: var(--color-surface-2);
  }

  .city-legend__swatch--recent { background: #8ea5e2; }
  .city-legend__swatch--verified { background: #AFE2FF; }

  .city-legend__swatch--danger-area {
    border-radius: 0.2rem;
    background: rgb(209 86 70 / 0.16);
    border-color: rgb(173 53 39 / 0.72);
  }

  .city-legend__note {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .risk-zone-badge-wrap {
    pointer-events: none;
    transform: translateY(-2px);
  }

  .risk-zone-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border-radius: 999px;
    padding: 0.14rem 0.4rem;
    border: 1px solid rgb(120 34 25 / 0.84);
    background: rgb(172 62 47 / 0.82);
    color: #fff;
    box-shadow: 0 3px 10px rgb(122 38 29 / 0.28);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .risk-zone-badge__icon {
    display: inline-grid;
    place-items: center;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.2);
    font-size: 0.56rem;
    line-height: 1;
  }

  .risk-zone-badge--high {
    background: rgb(141 38 32 / 0.86);
    border-color: rgb(92 18 14 / 0.86);
  }

  .risk-zone-badge--moderate {
    background: rgb(171 58 46 / 0.82);
    border-color: rgb(113 27 21 / 0.82);
  }

  .risk-zone-badge--watch {
    background: rgb(184 84 61 / 0.78);
    border-color: rgb(126 48 33 / 0.8);
  }

  .city-tools + .sheet {
    margin-top: 0.85rem;
  }

  .sheet {
    margin: 0 var(--gutter);
    padding: 1rem 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    box-shadow: var(--shadow-card);
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
  }

  .sheet__header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
  .sheet__title { margin: 0; font-weight: 800; letter-spacing: 0.02em; }
  .sheet__count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sheet__visit-selector { margin-top: 0.75rem; }
  .sheet__select {
    font-size: 0.88rem;
    font-weight: 700;
  }
  .sheet__list { margin-top: 0.9rem; display: grid; gap: 0.65rem; }
  .sheet__empty {
    margin-top: 0.75rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.45;
  }

  .pin-row {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    text-decoration: none;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    border: 1px solid rgb(var(--color-border-rgb) / 0.1);
  }

  .pin-row__initial {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    border: 1.5px solid var(--color-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
    flex-shrink: 0;
  }

  .pin-row__thumb {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-text);
    object-fit: cover;
    flex-shrink: 0;
  }

  .pin-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .pin-row__name { font-weight: 700; line-height: 1.2; }

  .pin-row__rating {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--color-accent-coral);
    line-height: 1;
  }

  .pin-row__meta { font-size: 0.82rem; white-space: nowrap; }

  .map-picker {
    margin-top: 1rem;
    height: 16rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    overflow: hidden;
    background: var(--color-bg);
  }

  .suggestions {
    margin-top: 0.65rem;
    display: grid;
    gap: 0.5rem;
  }

  .suggestions__item {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    background: var(--color-surface-2);
    box-shadow: none;
    cursor: pointer;
  }

  .suggestions__item--city {
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }

  .suggestions__content {
    display: block;
    min-width: 0;
    flex: 1;
  }

  .suggestions__thumb-wrap {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    border-radius: 0.72rem;
    overflow: hidden;
    border: 1px solid rgb(var(--color-border-rgb) / 0.16);
    background: color-mix(in oklab, var(--color-surface-2) 84%, #d7d7d5);
  }

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

  .suggestions__item--loading {
    cursor: default;
    border-color: rgb(var(--color-border-rgb) / 0.09);
    background: color-mix(in oklab, var(--color-surface-2) 78%, #d9d9d8);
  }

  .suggestions__item--empty {
    cursor: default;
    border-style: dashed;
    background: color-mix(in oklab, var(--color-surface-2) 88%, #ececeb);
  }

  .suggestions__primary { display: block; font-weight: 750; }
  .suggestions__secondary { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--color-text-muted); }
  .suggestions__status { padding: 0.7rem 0.85rem; font-size: 0.95rem; color: var(--color-text-muted); }
  .suggestions__skeleton {
    display: block;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--color-surface-2) 82%, #d4d4d2) 0%,
      color-mix(in oklab, var(--color-surface-2) 65%, #e1e1df) 50%,
      color-mix(in oklab, var(--color-surface-2) 82%, #d4d4d2) 100%
    );
    background-size: 210% 100%;
    animation: suggestions-skeleton-wave 1.1s ease-in-out infinite;
  }

  .suggestions__skeleton--primary {
    height: 0.82rem;
    width: min(55%, 14rem);
  }

  .suggestions__skeleton--secondary {
    margin-top: 0.45rem;
    height: 0.68rem;
    width: min(72%, 18rem);
  }
  .suggestions__meta {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .suggestions__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.16);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .suggestions__badge--count {
    background: color-mix(in oklab, var(--color-accent-sky) 18%, var(--color-surface));
  }

  .suggestions__badge--date {
    background: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface));
  }

  .suggestions__item:hover { border-color: rgb(var(--color-border-rgb) / 0.28); }

  @keyframes suggestions-skeleton-wave {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .safety-section {
    display: grid;
    gap: 1rem;
  }

  .safety-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .safety-section__framing {
    margin: 0.4rem 0 0;
    font-size: 0.93rem;
    color: var(--color-text-muted);
  }

  .safety-section__count {
    margin: 0;
    white-space: nowrap;
  }

  .safety-summary {
    border: 1px solid rgb(var(--color-border-rgb) / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    padding: 0.85rem;
    display: grid;
    gap: 0.65rem;
  }

  .safety-summary__line {
    margin: 0;
    font-size: 0.95rem;
  }

  .safety-summary__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.95rem;
  }

  .safety-summary__tag-list {
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
  }

  .safety-tag {
    border-width: 1px;
    border-style: solid;
    font-weight: 700;
    color: var(--color-text);
    text-transform: lowercase;
  }

  .safety-tag--amber {
    background: #ffe7ba;
    border-color: #dcb15a;
    color: #5f420f;
  }

  .safety-tag--mint {
    background: #d9f5e2;
    border-color: #7cc08f;
    color: #1f5a33;
  }

  .safety-tag--coral {
    background: #ffd8cf;
    border-color: #d08b7b;
    color: #6b2f1d;
  }

  .safety-tag--slate {
    background: #e5e8ee;
    border-color: #a0a9bc;
    color: #384457;
  }

  .safety-tag--teal {
    background: #d6f2ef;
    border-color: #72b8b0;
    color: #1e5550;
  }

  .safety-tag--sky {
    background: #d9ebff;
    border-color: #7ea8d8;
    color: #214a79;
  }

  .safety-tag--default {
    background: #edeae2;
    border-color: #beb7a8;
    color: #4b473d;
  }

  .safety-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .safety-filter {
    text-decoration: none;
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    border-radius: 999px;
    padding: 0.42rem 0.78rem;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--color-surface);
  }

  .safety-filter--active {
    background: var(--color-text);
    color: var(--color-surface);
    border-color: var(--color-text);
  }

  .safety-insight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
  }

  .safety-insight-item {
    border: 1px solid rgb(var(--color-border-rgb) / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    padding: 0.9rem;
  }

  .safety-insight-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .safety-insight-item__tags {
    margin: 0.7rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .safety-insight-item__body {
    margin: 0.7rem 0 0;
    line-height: 1.45;
    white-space: pre-wrap;
  }

  .safety-report-form {
    margin-top: 0.75rem;
  }

  .safety-report-form__button {
    min-height: auto;
    width: auto;
    padding: 0.5rem 0.75rem;
    box-shadow: none;
  }

  .safety-empty {
    margin-top: 0.1rem;
  }

  .safety-create {
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.1);
    padding-top: 1rem;
  }

  .safety-create__title {
    margin: 0;
  }

  .safety-create__row {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .safety-create__field {
    flex: 1;
  }

  .safety-context-grid {
    display: grid;
    gap: 0.75rem;
  }

  @media (min-width: 42rem) {
    .safety-context-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .date-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(var(--color-border-rgb) / 0.35);
    backdrop-filter: blur(8px);
  }

  .date-picker-sheet {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(env(safe-area-inset-bottom) + 1rem);
    z-index: 61;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    box-shadow: 0 30px 70px rgb(var(--color-border-rgb) / 0.25);
    max-width: var(--container-max);
    margin: 0 auto;
    overflow: hidden;
  }

  .date-picker__header {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    align-items: center;
    padding: 0.85rem 0.85rem 0.6rem;
    border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.08);
  }

  .date-picker__hint {
    padding: 0.55rem 0.85rem 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .date-picker__title {
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .date-picker__nav {
    width: 3rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    background: var(--color-surface-2);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
  }

  .date-picker__grid { padding: 0.85rem; }

  .date-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.45rem;
  }

  .date-picker__weekday {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
  }

  .date-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .date-picker__day {
    height: 2.6rem;
    border-radius: 0.9rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.10);
    background: var(--color-surface-2);
    cursor: pointer;
    font-weight: 700;
  }

  .date-picker__day[data-today="true"] { border-color: rgb(var(--color-border-rgb) / 0.28); }
  .date-picker__day[data-selected="true"] {
    background: var(--color-primary);
    border-color: rgb(var(--color-border-rgb) / 0.18);
  }

  .date-picker__day[data-in-range="true"] {
    background: rgb(var(--color-primary-rgb) / 0.22);
    border-color: rgb(var(--color-primary-rgb) / 0.22);
  }

  .date-picker__day[data-range-start="true"],
  .date-picker__day[data-range-end="true"] {
    background: var(--color-primary);
    border-color: rgb(var(--color-border-rgb) / 0.18);
  }

  .date-picker__day:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .date-picker__day--empty {
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  .date-picker__footer {
    padding: 0.65rem 0.85rem 0.85rem;
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.08);
  }

  .date-picker__done { width: 100%; }

  .photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  @media (min-width: 46rem) {
    .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .photo-tile {
    background: var(--color-surface-2);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    border-radius: var(--radius-md);
    padding: 0.65rem;
  }

  .photo-tile__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.8rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.10);
  }

  /* ── Memory Card (pin show drawer) ────────────────────────── */

  .memory-card {
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    overflow: hidden;
  }

  .memory-card__hero {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-surface-2);
    position: relative;
  }

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

  /* ── Photo Carousel (multi-photo hero) ─────────────────── */

  .memory-card__carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    height: 100%;
  }

  .memory-card__carousel::-webkit-scrollbar {
    display: none;               /* Chrome / Safari */
  }

  .memory-card__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    height: 100%;
  }

  .memory-card__dots {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 2;
  }

  .memory-card__dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgb(255 255 255 / 0.45);
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
  }

  .memory-card__dot--active {
    background: var(--color-surface);
    transform: scale(1.3);
  }

  .memory-card__body {
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .memory-card__place {
    margin: 0;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .memory-card__rating {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--color-accent-coral);
    line-height: 1;
    margin: 0;
  }

  .memory-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.1rem;
  }

  .memory-card__tags .badge {
    transform: none;
    font-size: 0.72rem;
  }

  .memory-card__reflection {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--color-text);
  }

  .memory-card__reflection--empty {
    color: var(--color-text-muted);
    font-style: italic;
  }

  .memory-card__inline-link {
    color: var(--color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font-style: normal;
  }

  .memory-card__date {
    font-size: 0.78rem;
    margin-top: 0.2rem;
  }

  /* ── Memory Action Pills ──────────────────────────────────── */

  .memory-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .memory-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.7rem 0.5rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    text-decoration: none;
    color: var(--color-text);
    position: relative;
    transition: background 120ms ease;
  }

  .memory-action:active {
    background: var(--color-surface-2);
  }

  .memory-action__icon {
    font-size: 1.25rem;
    line-height: 1;
  }

  .memory-action__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .memory-action__count {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--color-primary);
    border: 1.5px solid var(--color-text);
    color: var(--color-text);
    font-size: 0.62rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    line-height: 1;
    padding: 0 0.25rem;
  }

  turbo-frame#modal:empty { display: none; }
  turbo-frame#drawer:empty { display: none; }

  turbo-frame#drawer {
    position: fixed;
    inset: 0;
    z-index: 45;
  }

  turbo-frame#modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    padding: calc(env(safe-area-inset-top) + 1rem) var(--gutter) calc(env(safe-area-inset-bottom) + 1rem);
    display: grid;
    align-items: end;
    justify-items: center;
    background: var(--overlay-backdrop-color);
    backdrop-filter: blur(var(--overlay-backdrop-blur));
  }

  turbo-frame#modal:has(.overlay-shell) {
    padding: 0;
    display: block;
    background: transparent;
    backdrop-filter: none;
  }

  body:has(turbo-frame#modal:not(:empty)) { overflow: hidden; }
  body.overlay-scroll-locked { overflow: hidden; }

  .overlay-shell {
    position: fixed;
    inset: 0;
    display: grid;
    justify-items: center;
    align-items: end;
    pointer-events: none;
  }

  .overlay-shell--modal {
    padding: calc(env(safe-area-inset-top) + 1rem) var(--gutter) calc(env(safe-area-inset-bottom) + 1rem);
  }

  .overlay-shell--drawer {
    padding-top: calc(env(safe-area-inset-top) + 0.75rem);
  }

  .overlay-shell__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: var(--overlay-backdrop-color);
    backdrop-filter: blur(var(--overlay-backdrop-blur));
    pointer-events: auto;
    animation: overlay-backdrop-enter 220ms ease both;
  }

  .overlay-shell__panel {
    position: relative;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    box-shadow: 0 30px 70px rgb(var(--color-border-rgb) / 0.25);
    pointer-events: auto;
  }

  .overlay-shell__panel--modal {
    max-width: var(--container-max);
    max-height: 82dvh;
    border-radius: var(--radius-lg);
    overflow: auto;
    animation: overlay-panel-enter 220ms ease both;
  }

  .overlay-shell__panel--drawer {
    max-width: var(--overlay-drawer-max-width);
    max-height: var(--overlay-drawer-max-height);
    border-radius: var(--overlay-drawer-radius);
    overflow: auto;
    padding-bottom: var(--overlay-drawer-bottom-padding);
    box-shadow: var(--overlay-drawer-shadow);
    animation: overlay-drawer-enter 240ms ease both;
  }

  .overlay-shell__header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 1rem 1rem 0.75rem;
    background: var(--color-surface);
    border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.08);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
  }

  .overlay-shell__title {
    margin: 0;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .overlay-shell__body {
    padding: 0.75rem 1rem 1rem;
  }

  @keyframes overlay-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes overlay-panel-enter {
    from {
      opacity: 0.98;
      transform: translateY(0.8rem) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes overlay-drawer-enter {
    from {
      opacity: 0.98;
      transform: translateY(2rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .modal {
    width: 100%;
    max-width: var(--container-max);
    max-height: 82dvh;
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    box-shadow: 0 30px 70px rgb(var(--color-border-rgb) / 0.25);
  }

  .modal__header {
    position: sticky;
    top: 0;
    padding: 1rem 1rem 0.75rem;
    background: var(--color-surface);
    border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.08);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
  }

  .modal__body { padding: 0.75rem 1rem 1rem; }

  body.city-insights-drawer-open { overflow: hidden; }

  .inline-drawer-shell,
  .city-insights-drawer {
    position: fixed;
    inset: 0;
    z-index: 44;
    display: grid;
    justify-items: center;
    align-items: end;
    padding-top: calc(env(safe-area-inset-top) + 0.75rem);
    pointer-events: none;
  }

  .inline-drawer-shell__backdrop,
  .city-insights-drawer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: var(--overlay-backdrop-color);
    backdrop-filter: blur(var(--overlay-backdrop-blur));
    opacity: 0;
    transition: opacity 220ms ease;
  }

  .inline-drawer-shell__panel,
  .city-insights-drawer__sheet {
    position: relative;
    width: var(--overlay-drawer-max-width);
    max-height: var(--overlay-drawer-max-height);
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--overlay-drawer-radius);
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    box-shadow: var(--overlay-drawer-shadow);
    padding: 0.45rem 0.95rem var(--overlay-drawer-bottom-padding);
    transform: translateY(104%);
    transition: transform 240ms ease;
    overscroll-behavior: contain;
  }

  .inline-drawer-shell--open,
  .city-insights-drawer--open {
    pointer-events: auto;
  }

  .inline-drawer-shell--open .inline-drawer-shell__backdrop,
  .city-insights-drawer--open .city-insights-drawer__backdrop {
    opacity: 1;
  }

  .inline-drawer-shell--open .inline-drawer-shell__panel,
  .city-insights-drawer--open .city-insights-drawer__sheet {
    transform: translateY(0);
  }

  .inline-drawer-shell__handle,
  .city-insights-drawer__handle {
    display: block;
    width: 3.1rem;
    height: 0.32rem;
    border: 0;
    border-radius: 999px;
    margin: 0.35rem auto 0.8rem;
    background: rgb(var(--color-border-rgb) / 0.24);
  }

  .inline-drawer-shell__body {
    display: grid;
    gap: 0.65rem;
  }

  .city-insights-drawer__header {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: flex-start;
  }

  .city-insights-drawer__title {
    margin-top: 0.2rem;
    margin-bottom: 0;
  }

  .city-insights-drawer__meta {
    margin: 0.2rem 0 0;
    font-size: 0.83rem;
  }

  .city-insights-drawer__close {
    width: auto;
    min-height: auto;
    padding: 0.45rem 0.65rem;
    box-shadow: none;
  }

  .city-insights-drawer__hint {
    margin-top: 0.7rem;
    margin-bottom: 0.8rem;
  }

  .city-insights-drawer--poi .city-insights-drawer__hint {
    width: fit-content;
    max-width: min(30rem, 92%);
    margin: 0.55rem auto 0.72rem;
    padding: 0.22rem 0.62rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-surface-2) 58%, var(--color-surface));
    color: var(--color-text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
  }

  .city-insights-drawer--zone .city-insights-drawer__hint {
    color: var(--color-text-muted);
  }

  .city-insights-drawer__state {
    margin: 0.6rem 0 0.8rem;
    font-size: 0.9rem;
    color: var(--color-muted);
  }

  .city-insights-drawer__state--error {
    color: var(--color-danger);
  }

  .city-insights-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
  }

  .city-insights-item {
    border: 1px solid rgb(var(--color-border-rgb) / 0.1);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    padding: 0.72rem;
  }

  .city-insights-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

  .city-insights-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin: 0.55rem 0 0;
  }

  .city-insights-item__body {
    margin: 0.55rem 0 0;
    color: var(--color-text);
    line-height: 1.45;
  }

  .city-insights-drawer__link-wrap {
    margin-top: 0.95rem;
    margin-bottom: 0;
  }

  .city-insights-drawer__link {
    width: 100%;
    text-align: center;
  }

  .city-insights-drawer--poi .city-insights-list {
    gap: 0.55rem;
  }

  .city-poi-card {
    display: grid;
    gap: 0.62rem;
    background: var(--color-surface);
    border-color: rgb(var(--color-border-rgb) / 0.12);
    padding: 0.68rem;
  }

  .city-poi-carousel {
    display: grid;
    gap: 0.48rem;
  }

  .city-poi-carousel__viewport {
    position: relative;
    border-radius: 0.85rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.1);
    background: var(--color-surface-2);
    overflow: hidden;
  }

  .city-poi-carousel__track {
    display: flex;
    transition: transform 220ms ease;
  }

  .city-poi-carousel__slide {
    margin: 0;
    width: 100%;
    flex: 0 0 100%;
  }

  .city-poi-carousel__slide--image-error {
    min-height: 11.6rem;
    max-height: min(34vh, 14.8rem);
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--color-surface-2) 80%, #dadad8);
  }

  .city-poi-carousel__image {
    width: 100%;
    min-height: 11.6rem;
    max-height: min(34vh, 14.8rem);
    object-fit: cover;
    display: block;
  }

  .city-poi-carousel__image--failed {
    display: none;
  }

  .city-poi-carousel__fallback {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .city-poi-carousel__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.2);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.92);
    color: var(--color-text);
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
  }

  .city-poi-carousel__control:disabled {
    opacity: 0.38;
  }

  .city-poi-carousel__control--prev { left: 0.45rem; }
  .city-poi-carousel__control--next { right: 0.45rem; }

  .city-poi-carousel__counter {
    margin: 0;
    text-align: center;
    font-size: 0.79rem;
  }

  .city-poi-card__location,
  .city-poi-card__description,
  .city-poi-card__detail,
  .city-poi-card__empty {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .city-poi-card__location strong,
  .city-poi-card__detail strong {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .city-poi-card__detail a {
    color: var(--color-primary-strong);
    font-weight: 700;
  }

  .city-poi-memory-card {
    display: grid;
    gap: 0.4rem;
    padding: 0.62rem 0.68rem;
    border-radius: 0.78rem;
    border: 1px solid rgb(var(--color-border-rgb) / 0.14);
    background: color-mix(in oklab, var(--color-primary) 13%, var(--color-surface));
  }

  .city-poi-memory-card__media {
    aspect-ratio: 16 / 9;
    border-radius: 0.62rem;
    overflow: hidden;
    border: 1px solid rgb(var(--color-border-rgb) / 0.18);
    background: color-mix(in oklab, var(--color-primary) 9%, var(--color-surface));
    display: grid;
    place-items: center;
  }

  .city-poi-memory-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .city-poi-memory-card__media-fallback {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--color-text-muted) 88%, var(--color-primary-strong));
  }

  .city-poi-memory-card__label {
    margin: 0;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .city-poi-memory-card__meta,
  .city-poi-memory-card__snippet {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .city-poi-memory-card__action {
    width: fit-content;
    min-height: 2rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    box-shadow: none;
    font-size: 0.76rem;
  }

  .city-poi-card__save-error {
    margin: 0;
    font-size: 0.8rem;
  }

  .city-poi-actions {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.18rem;
  }

  .city-poi-actions__stack {
    display: grid;
    gap: 0.5rem;
  }

  .city-poi-actions__stack--utility {
    padding-top: 0.55rem;
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.1);
  }

  .city-poi-actions__button {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 700;
    justify-content: flex-start;
    text-align: left;
  }

  .city-poi-actions__button--save {
    font-weight: 800;
  }

  .city-poi-actions__button--saved {
    border-color: rgb(var(--color-border-rgb) / 0.22);
    background: color-mix(in oklab, var(--color-success) 18%, var(--color-surface));
    color: var(--color-text);
  }

  .city-poi-actions__button--external {
    color: var(--color-text-muted);
  }

  .city-poi-actions__button:disabled {
    opacity: 0.58;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .overlay-shell__backdrop,
    .overlay-shell__panel--modal,
    .overlay-shell__panel--drawer,
    .inline-drawer-shell__backdrop,
    .inline-drawer-shell__panel,
    .city-insights-drawer__backdrop,
    .city-insights-drawer__sheet,
    .city-poi-carousel__track,
    .memory-card__dot {
      animation: none;
      transition: none;
    }

    .memory-card__carousel {
      scroll-behavior: auto;
    }
  }

  .sticker-pin {
    background: transparent;
    border: none;
  }

  .map-memory-pill {
    --map-memory-pill-scale: var(--city-memory-pill-scale, 1);
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.2);
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 8px 22px rgb(0 0 0 / 0.24);
    padding: 0.34rem 0.68rem;
    max-width: 11.6rem;
    transform: scale(var(--map-memory-pill-scale));
    transform-origin: center center;
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease;
  }

  .map-memory-pill--active {
    background: var(--color-primary);
    color: var(--color-text);
    border-color: var(--color-border);
    transform: translateY(-1px) scale(calc(var(--map-memory-pill-scale, 1) * 1.04));
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.28);
  }

  .map-memory-pill__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  .map-community-pill {
    min-width: 2.05rem;
    height: 2.05rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(var(--color-border-rgb) / 0.24);
    background: color-mix(in oklab, var(--color-border) 10%, var(--color-surface));
    color: var(--color-text);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.2);
    font-size: 0.79rem;
    font-weight: 800;
    position: relative;
  }

  .map-community-pill--recent {
    background: var(--color-border);
    color: #fff;
    border-color: rgb(var(--color-border-rgb) / 0.95);
  }

  .map-community-pill--older {
    background: color-mix(in oklab, var(--color-border) 10%, var(--color-surface));
    color: var(--color-text);
  }

  .map-community-pill--verified {
    border-color: #3cae96;
    box-shadow: 0 0 0 2px rgb(60 174 150 / 0.28), 0 8px 20px rgb(0 0 0 / 0.2);
  }

  .map-community-pill--checked-in::after {
    content: "";
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 999px;
    background: var(--color-success);
    position: absolute;
    transform: translate(0.68rem, -0.68rem);
  }

  .map-community-pill__count {
    line-height: 1;
  }

  .map-memory-chip-wrap {
    background: transparent;
    border: none;
  }

  .map-memory-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgb(0 0 0 / 0.18);
    background: #fff;
    color: #222;
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.2);
    padding: 0.28rem 0.66rem;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    max-width: 10.5rem;
    transform: scale(var(--city-memory-pill-scale, 1));
    transform-origin: center center;
    transition: transform 120ms ease;
  }

  .map-memory-chip__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .map-safety-chip-wrap {
    background: transparent;
    border: none;
  }

  .map-safety-chip {
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-border-rgb) / 0.2);
    background: #fff;
    color: var(--color-text);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.18);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    position: relative;
  }

  .map-safety-chip--recent {
    background: var(--color-border);
    color: #fff;
    border-color: rgb(var(--color-border-rgb) / 0.9);
  }

  .map-safety-chip--older {
    background: color-mix(in oklab, var(--color-border) 10%, var(--color-surface));
    color: var(--color-text);
  }

  .map-safety-chip--verified {
    box-shadow: 0 0 0 2px rgb(60 174 150 / 0.26), 0 8px 18px rgb(0 0 0 / 0.18);
    border-color: rgb(44 138 118 / 0.65);
  }

  .map-safety-chip--checked-in::after {
    content: "";
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: var(--color-success);
    position: absolute;
    transform: translate(0.67rem, -0.67rem);
  }

  .map-safety-chip__count {
    line-height: 1;
  }

  .safety-pin-wrap {
    background: transparent;
    border: none;
  }

  .safety-pin {
    width: 1.85rem;
    height: 1.85rem;
    position: relative;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-surface);
    box-shadow: 0 6px 14px rgb(var(--color-border-rgb) / 0.24);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--map-safety-pin-text);
    background: var(--map-safety-pin-older);
  }

  .safety-pin--recent {
    background: var(--map-safety-pin-recent);
    color: #f7f9fe;
  }

  .safety-pin--older { background: var(--map-safety-pin-older); }

  .safety-pin--verified {
    border-color: #3cae96;
    box-shadow: 0 0 0 2px rgb(60 174 150 / 0.3), 0 6px 14px rgb(var(--color-border-rgb) / 0.24);
  }

  .safety-pin--checked-in::after {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--color-success);
    position: absolute;
    transform: translate(0.62rem, -0.62rem);
  }

  .safety-pin__count { line-height: 1; }

  .sticker-pin__dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    box-shadow: 0 6px 14px rgb(var(--color-border-rgb) / 0.22);
  }

  .destination-center-pin-wrap {
    pointer-events: none;
  }

  .destination-center-pin {
    width: 1.24rem;
    height: 1.24rem;
    border-radius: 999px;
    border: 2px solid #fff;
    background: var(--map-destination-dot);
    box-shadow: 0 0 0 7px var(--map-destination-halo), 0 6px 16px rgb(38 49 79 / 0.42);
  }

  .sticker-pin__label {
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid rgb(var(--color-border-rgb) / 0.12);
    box-shadow: 0 6px 18px rgb(var(--color-border-rgb) / 0.12);
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticker-pin {
    transform: scale(var(--city-memory-pill-scale, 1));
    transform-origin: center center;
    transition: transform 120ms ease;
  }

  .picker-pin__dot {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    box-shadow: 0 6px 16px rgb(var(--color-border-rgb) / 0.24);
  }

  .picker-chip {
    background: transparent;
    border: none;
  }

  .picker-chip__body {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    border-radius: 999px;
    border: 1px solid rgb(0 0 0 / 0.16);
    background: #fff;
    color: #252525;
    box-shadow: 0 9px 22px rgb(0 0 0 / 0.2);
    padding: 0.25rem 0.56rem 0.25rem 0.36rem;
  }

  .picker-chip__dot {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: var(--color-primary);
    border: 1px solid rgb(var(--color-border-rgb) / 0.85);
  }

  .picker-chip__label {
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
  .toggle__input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
  .toggle__text { font-weight: 700; }

  .btn--danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: transparent;
    box-shadow: none;
  }

  .form-errors {
    border: 1px solid rgb(220 52 30 / 0.35);
    background: rgb(220 52 30 / 0.06);
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
  }

  .form-notice {
    border: 1px solid rgb(35 160 148 / 0.35);
    background: rgb(35 160 148 / 0.08);
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .form-errors__title { margin: 0; font-weight: 700; }
  .form-errors__list { margin: 0.5rem 0 0; padding-left: 1.2rem; }
}