/* ============================================================================
   MERIDIAN — Rota Stüdyosu (route builder) styles
   Scoped under .mrd so nothing here can collide with the 7k-line app.css.
   Colors are the ORIGINAL MERIDIAN concept palette (design/meridian/journey.js),
   not the brand-harmonized/muted tokens (a prior pass swapped these onto
   --c-turquoise/--c-cta/--c-sunset-pink, which read noticeably duller than the
   original vivid mint/pink/orange — restored verbatim here).
   ========================================================================== */

.mrd {
  --mrd-ink: #05101B;
  --mrd-ocean: #0B1B2B;
  --mrd-ocean-700: #10273B;
  --mrd-ocean-600: #16344E;
  --mrd-aurora: #57E9C0;
  --mrd-aurora-bright: #8CF5D8;
  --mrd-sun-1: #FF8A4C;
  --mrd-sun-2: #FF5C8A;
  --mrd-violet: #8B5CF6;
  --mrd-ivory: #F7F1E6;
  --mrd-text-hi: #F4EEE3;
  --mrd-text-mid: rgba(244, 238, 227, 0.72);
  --mrd-text-lo: rgba(244, 238, 227, 0.48);
  --mrd-hair: rgba(247, 241, 230, 0.12);
  --mrd-hair-soft: rgba(247, 241, 230, 0.07);
  --mrd-glow: color-mix(in oklch, var(--mrd-aurora) 55%, transparent);
  --mrd-trail: linear-gradient(120deg, var(--mrd-aurora), var(--mrd-sun-2) 55%, var(--mrd-violet));
  --mrd-glass: saturate(150%) blur(20px);
  --mrd-e-out: cubic-bezier(.22, 1, .36, 1);
  --mrd-e-expo: cubic-bezier(.16, 1, .30, 1);

  color: var(--mrd-text-hi);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* mood accent per element */
.mrd [data-mood="calm"]      { --m: #7FC8E8; }
.mrd [data-mood="freedom"]   { --m: var(--mrd-aurora); }
.mrd [data-mood="adventure"] { --m: var(--mrd-sun-1); }
.mrd [data-mood="romance"]   { --m: var(--mrd-sun-2); }
.mrd [data-mood="discovery"] { --m: var(--mrd-violet); }
.mrd [data-mood] { --m: var(--mrd-aurora); }

/* ── STUDIO SHELL ─────────────────────────────────────────────────────── */
.mrd-studio {
  display: grid;
  grid-template-columns: 1fr 420px;
  height: clamp(560px, 88vh, 940px);   /* FIXED height → adding stops scrolls the list, not the page */
  background: var(--grad-hero-standard, radial-gradient(120% 120% at 50% 40%, var(--mrd-ocean), var(--mrd-ink)));
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}

/* ── MAP STAGE ────────────────────────────────────────────────────────── */
.mrd-stage { position: relative; overflow: hidden; }
.mrd-stage-head {
  position: absolute; top: clamp(18px, 3vw, 34px); left: clamp(18px, 3vw, 40px);
  z-index: 4; max-width: 30ch; pointer-events: none;
}
/* The map is now a light, real-world basemap (see .mrd-map.leaflet-container) — this
   scrim keeps the white/aurora title legible over whatever terrain sits underneath it,
   the same way a photo hero's dark fade protects its overlaid text. */
.mrd-stage-head::before {
  content: ""; position: absolute; inset: -20px -28px -36px -28px; z-index: -1;
  border-radius: 22px; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(5, 16, 27, .70), rgba(5, 16, 27, .38) 65%, transparent 100%);
}
.mrd-eyebrow {
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mrd-aurora);
  display: inline-flex; align-items: center; gap: .7em; margin-bottom: .7rem;
}
.mrd-eyebrow::before { content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--mrd-aurora), transparent); }
.mrd-stage-head h1 {
  font-family: var(--font-display, 'Fraunces', serif); font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 .5rem; color: var(--mrd-text-hi);
}
.mrd-stage-head p { color: var(--mrd-text-mid); font-size: .95rem; line-height: 1.5; margin: 0; }
.mrd-stage-head b { color: var(--mrd-aurora); font-weight: 500; }

/* region switch */
.mrd-regions { position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 40px);
  z-index: 5; display: flex; gap: .5rem; }
.mrd-region {
  display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.05em;
  border-radius: 999px; font-family: var(--font-sans); font-weight: 600; font-size: .86rem;
  color: var(--mrd-text-mid); cursor: pointer; border: 0;
  background: rgba(11, 27, 43, .55); -webkit-backdrop-filter: var(--mrd-glass); backdrop-filter: var(--mrd-glass);
  box-shadow: inset 0 0 0 1px var(--mrd-hair);
  transition: color .3s var(--mrd-e-out), background .3s var(--mrd-e-out), transform .3s var(--mrd-e-out);
}
.mrd-region i { font-size: 1.05em; }
.mrd-region:hover { color: var(--mrd-text-hi); transform: translateY(-1px); }
.mrd-region.is-active { color: var(--mrd-ink); background: var(--mrd-aurora); box-shadow: 0 0 26px var(--mrd-glow); }

.mrd-map-wrap { position: absolute; inset: 0; }
.mrd-map { width: 100%; height: 100%; display: block; }

/* SVG map elements */
.mrd-map .mrd-land { fill: url(#mrdLand); stroke: color-mix(in oklch, var(--mrd-aurora) 26%, transparent);
  stroke-width: 1.1; filter: drop-shadow(0 0 26px color-mix(in oklch, var(--mrd-aurora) 18%, transparent)); }
.mrd-map .mrd-region-name { fill: color-mix(in oklch, var(--mrd-aurora) 15%, transparent);
  font-family: var(--font-display, 'Fraunces', serif); font-weight: 600; text-anchor: middle;
  dominant-baseline: middle; letter-spacing: .06em; pointer-events: none; }
.mrd-node .hit { fill: transparent; }        /* large invisible tap target for clustered pins */
.mrd-map .mrd-graticule { stroke: color-mix(in oklch, var(--mrd-aurora) 12%, transparent); stroke-width: .6; }
.mrd-map .mrd-route { fill: none; stroke: url(#mrdTrail); stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 5 9; animation: mrd-flow 2.4s linear infinite;
  filter: drop-shadow(0 0 6px var(--mrd-glow)); }
.mrd-map .mrd-route-glow { fill: none; stroke: url(#mrdTrail); stroke-width: 7; stroke-linecap: round;
  opacity: .35; filter: blur(3px); }
@keyframes mrd-flow { to { stroke-dashoffset: -140; } }
.mrd-map .mrd-spark { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--mrd-aurora)); }

.mrd-node { cursor: pointer; }
.mrd-node .halo { fill: var(--m, var(--mrd-aurora)); opacity: .18;
  transform-box: fill-box; transform-origin: center; animation: mrd-halo 3.4s ease-in-out infinite; }
@keyframes mrd-halo { 0%, 100% { opacity: .12; transform: scale(1); } 50% { opacity: .3; transform: scale(1.35); } }
.mrd-node .core { fill: var(--m, var(--mrd-aurora)); transition: r .25s var(--mrd-e-out); }
.mrd-node .ring { fill: none; stroke: rgba(247, 241, 230, .55); stroke-width: .8; opacity: 0; transition: opacity .25s; }
.mrd-node .lbl { fill: var(--mrd-text-mid); font-family: var(--font-sans); font-size: 11px;
  text-anchor: middle; opacity: 0; transition: opacity .25s; paint-order: stroke;
  stroke: rgba(5, 16, 27, .85); stroke-width: 3px; }
.mrd-node:hover .lbl, .mrd-node.is-added .lbl { opacity: 1; fill: var(--mrd-text-hi); }
.mrd-node:hover .ring { opacity: 1; }
.mrd-node:hover .core { r: 6; }
.mrd-node.is-added .core { fill: #fff; }
.mrd-node.is-added .halo { opacity: .5; animation: none; }
.mrd-node .seq { fill: var(--mrd-ink); font-family: var(--font-sans); font-weight: 700; font-size: 8px;
  text-anchor: middle; opacity: 0; }
.mrd-node.is-added .seq { opacity: 1; }

.mrd-legend { position: absolute; left: clamp(18px, 3vw, 40px); bottom: 18px; z-index: 4;
  display: flex; gap: 1.4rem; font-family: var(--font-sans); font-size: .74rem; color: var(--mrd-text-lo);
  padding: .5rem .9rem; border-radius: 999px; background: rgba(11, 27, 43, .55);
  -webkit-backdrop-filter: var(--mrd-glass); backdrop-filter: var(--mrd-glass); box-shadow: inset 0 0 0 1px var(--mrd-hair); }
.mrd-legend i { display: inline-block; vertical-align: middle; margin-right: .5em; }
.mrd-legend .d { width: 9px; height: 9px; border-radius: 50%; background: var(--mrd-aurora); box-shadow: 0 0 10px var(--mrd-glow); }
.mrd-legend .l { width: 22px; height: 2px; border-radius: 2px; background: var(--mrd-trail); }

/* ── ITINERARY PANEL ──────────────────────────────────────────────────── */
.mrd-panel {
  position: relative; z-index: 6; display: flex; flex-direction: column;
  background: rgba(8, 24, 38, .74); -webkit-backdrop-filter: var(--mrd-glass); backdrop-filter: var(--mrd-glass);
  box-shadow: -1px 0 0 var(--mrd-hair-soft), -40px 0 80px -40px rgba(3, 10, 18, .9);
  padding: clamp(20px, 2.4vw, 30px);
}
.mrd-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mrd-panel-head .t { font-family: var(--font-display, serif); font-size: 1.55rem; font-weight: 400; margin: .2rem 0 0; color: var(--mrd-text-hi); }
.mrd-panel-head .k { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mrd-text-lo); }
.mrd-clear { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0;
  color: var(--mrd-text-lo); background: transparent; box-shadow: inset 0 0 0 1px var(--mrd-hair); cursor: pointer;
  transition: color .2s, background .2s; }
.mrd-clear:hover { color: var(--mrd-ivory); background: color-mix(in oklch, var(--mrd-sun-2) 24%, transparent); }

/* signature */
.mrd-sig { margin: 1.2rem 0; }
.mrd-sig-spectrum { height: 10px; border-radius: 999px; overflow: hidden; display: flex;
  background: var(--mrd-ocean-700); box-shadow: inset 0 0 0 1px var(--mrd-hair-soft); }
.mrd-sig-spectrum .seg { height: 100%; transition: flex .8s var(--mrd-e-expo); background: var(--m, var(--mrd-aurora)); }
.mrd-sig-empty { font-family: var(--font-sans); font-size: .72rem; color: var(--mrd-text-lo); padding: 0 8px; line-height: 10px; }
.mrd-sig-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.1rem; }
.mrd-sig-stat i { display: block; font-style: normal; font-family: var(--font-sans); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mrd-text-lo); margin-bottom: 2px; }
.mrd-sig-stat b { font-family: var(--font-display, serif); font-size: 1.3rem; font-weight: 400; color: var(--mrd-text-hi); }

/* memory cards */
/* natural height — the whole panel scrolls (see .mrd-panel), the list is never a tiny box */
.mrd-list { flex: 0 0 auto; margin: 1rem -.4rem 0; padding: .3rem .4rem; display: flex; flex-direction: column; gap: .6rem; }
.mrd-placeholder { margin: auto; text-align: center; color: var(--mrd-text-lo); display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 0; }
.mrd-placeholder .g { width: 64px; height: 64px; border-radius: 30%; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(247,241,230,.14), rgba(247,241,230,.02)), var(--mrd-trail);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 12px 26px -12px rgba(5,16,27,.6), 0 0 26px -6px var(--mrd-glow); }
.mrd-placeholder .g i { font-size: 1.7rem; color: var(--mrd-ink); }
.mrd-placeholder p { font-family: var(--font-sans); font-size: .86rem; line-height: 1.5; }

.mrd-mem { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem;
  padding: .7rem; border-radius: 14px; background: var(--mrd-ocean-700);
  box-shadow: 0 20px 44px -26px rgba(3,10,18,.8), inset 0 0 0 1px var(--mrd-hair-soft);
  animation: mrd-mem-in .42s var(--mrd-e-expo) both; }
@keyframes mrd-mem-in { from { opacity: 0; transform: translateX(20px) scale(.97); } to { opacity: 1; transform: none; } }
.mrd-mem .seq { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 700; font-size: .78rem; color: var(--mrd-ink);
  background: var(--m, var(--mrd-aurora)); box-shadow: 0 0 14px var(--m, var(--mrd-glow)); }
.mrd-mem .info h4 { font-family: var(--font-display, serif); font-size: 1.02rem; font-weight: 500; line-height: 1.1; margin: 0; color: var(--mrd-text-hi); }
.mrd-mem .info .meta { display: flex; align-items: center; gap: .45em; font-family: var(--font-sans); font-size: .72rem; color: var(--mrd-text-mid); margin-top: 2px; }
.mrd-mem .info .meta .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--m, var(--mrd-aurora)); }
.mrd-mem-actions { display: flex; align-items: center; gap: .15rem; }
/* 40px — these reorder/remove every stop and are the primary touch interaction. */
.mrd-ico-btn { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; border: 0; background: transparent;
  color: var(--mrd-text-lo); cursor: pointer; transition: color .2s, background .2s; }
.mrd-ico-btn:hover { color: var(--mrd-text-hi); background: var(--mrd-hair); }
.mrd-ico-btn.rm:hover { color: var(--mrd-sun-2); }
.mrd-ico-btn:disabled { opacity: .25; cursor: default; }

/* form */
.mrd-foot { padding-top: 1rem; margin-top: .8rem; border-top: 1px solid var(--mrd-hair-soft); }
.mrd-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mrd-form .full { grid-column: 1 / -1; }
.mrd-field label { display: block; font-family: var(--font-sans); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mrd-text-lo); margin-bottom: .3rem; }
/* font-size stays at 16px: iOS zooms the viewport on focus below that. */
.mrd-input {
  width: 100%; padding: .6em .8em; border-radius: 10px; font-family: var(--font-sans); font-size: 1rem;
  color: var(--mrd-text-hi); background: var(--mrd-ocean); border: 1px solid var(--mrd-hair);
  transition: border-color .2s, box-shadow .2s;
}
.mrd-input::placeholder { color: var(--mrd-text-lo); }
.mrd-input:focus { outline: 0; border-color: var(--mrd-aurora); box-shadow: 0 0 0 3px color-mix(in oklch, var(--mrd-aurora) 22%, transparent); }
select.mrd-input { appearance: none; cursor: pointer; }

.mrd-btn {
  --bg: var(--mrd-aurora); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; padding: .95em 1.4em; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem; color: var(--mrd-ink); background: var(--bg);
  transition: transform .4s var(--mrd-e-expo), box-shadow .4s var(--mrd-e-expo), opacity .2s;
}
.mrd-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 30px var(--mrd-glow); }
.mrd-btn:disabled { opacity: .45; cursor: default; }
.mrd-btn.ghost { background: transparent; color: var(--mrd-text-hi); box-shadow: inset 0 0 0 1px var(--mrd-hair); }
.mrd-btn.ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--mrd-aurora), 0 0 24px var(--mrd-glow); }

.mrd-hint { font-family: var(--font-sans); font-size: .72rem; color: var(--mrd-text-lo); margin: .3rem 0 0; text-align: center; }
.mrd-error { color: var(--mrd-sun-2); font-size: .8rem; font-family: var(--font-sans); margin-top: .5rem; }

/* success */
.mrd-success { text-align: center; padding: 2rem 1rem; }
.mrd-success .g { width: 76px; height: 76px; margin: 0 auto 1.2rem; border-radius: 30%; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(247,241,230,.14), rgba(247,241,230,.02)), var(--mrd-trail);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 0 40px -6px var(--mrd-glow); }
.mrd-success .g i { font-size: 2rem; color: var(--mrd-ink); }
.mrd-success h3 { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 0 0 .5rem; color: var(--mrd-text-hi); }
.mrd-success p { color: var(--mrd-text-mid); font-size: .92rem; }
.mrd-success .ref { display: inline-block; margin: .8rem 0; font-family: var(--font-sans); font-weight: 700; letter-spacing: .08em;
  color: var(--mrd-aurora); background: var(--mrd-ocean); padding: .5em 1em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mrd-hair); }
.mrd-success-link { display: inline-block; margin-top: 1rem; margin-left: .6rem; color: var(--mrd-aurora);
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem; text-decoration: none; border-bottom: 1px solid transparent; }
.mrd-success-link:hover { border-bottom-color: currentColor; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .mrd-studio { grid-template-columns: 1fr; }
  .mrd-stage { height: 56vh; min-height: 380px; }
  .mrd-stage-head { position: static; padding: clamp(70px,10vw,90px) 20px 0; max-width: none; }
  .mrd-regions { top: auto; bottom: 14px; left: 50%; right: auto; transform: translateX(-50%); }
  /* Regions move to the bottom here (z-index 5) and would paint over the
     legend (z-index 4) — lift the legend clear of them. */
  .mrd-legend { bottom: 62px; }
  .mrd-panel { box-shadow: 0 -20px 60px -40px rgba(3,10,18,.9); }
}
@media (max-width: 520px) {
  .mrd-form { grid-template-columns: 1fr; }
  .mrd-sig-stats { gap: .5rem; }
}

/* ══ HOME — Rota Stüdyosu teaser band (cinematic, CSS-only, no interop) ══ */
.mrd-home-teaser {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 12% 20%, color-mix(in oklch, var(--mrd-aurora) 16%, transparent), transparent 55%),
    radial-gradient(60% 80% at 92% 92%, color-mix(in oklch, var(--mrd-violet) 20%, transparent), transparent 55%),
    linear-gradient(180deg, var(--mrd-ocean), var(--mrd-ink));
  padding-block: clamp(56px, 8vw, 104px);
}
.mrd-home-teaser::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--mrd-hair-soft); }
.mrd-home-teaser-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.mrd-home-copy .mrd-eyebrow { margin-bottom: 1rem; }
.mrd-home-title { font-family: var(--font-display, serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.04;
  font-size: clamp(2rem, 3.6vw, 3.4rem); color: var(--mrd-text-hi); margin: 0 0 1rem; max-width: 16ch; }
.mrd-home-lede { color: var(--mrd-text-mid); font-size: clamp(1rem, 1.1vw, 1.18rem); line-height: 1.55; max-width: 46ch; margin: 0 0 1.6rem; }
.mrd-home-cta { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.6em; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem; color: var(--mrd-ink); background: var(--mrd-aurora);
  text-decoration: none; transition: transform .4s var(--mrd-e-expo), box-shadow .4s var(--mrd-e-expo); }
.mrd-home-cta:hover { transform: translateY(-2px); box-shadow: 0 0 34px var(--mrd-glow); }
.mrd-home-cta i { transition: transform .4s var(--mrd-e-expo); }
.mrd-home-cta:hover i { transform: translateX(4px); }
.mrd-home-badges { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.5rem; }
.mrd-home-badges span { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-sans); font-size: .82rem; color: var(--mrd-text-mid); }
.mrd-home-badges i { color: var(--mrd-aurora); font-size: 1.1em; }

.mrd-home-map { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 520 / 380;
  background: radial-gradient(120% 120% at 50% 0%, var(--mrd-ocean-700), var(--mrd-ink));
  box-shadow: 0 40px 90px -30px rgba(3, 10, 18, .85), inset 0 0 0 1px var(--mrd-hair-soft); }
.mrd-home-map svg { width: 100%; height: 100%; display: block; }
.mrd-home-route { stroke-dasharray: 5 9; animation: mrd-flow 2.6s linear infinite; filter: drop-shadow(0 0 6px var(--mrd-glow)); }
.mrd-home-route-glow { filter: blur(3px); }
.mrd-home-spark { offset-path: path("M60 275 C 130 205, 185 170, 245 200 S 345 135, 400 175 S 475 255, 470 305");
  animation: mrd-home-spark 4.2s var(--mrd-e-out) infinite; filter: drop-shadow(0 0 6px #fff); }
@keyframes mrd-home-spark { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.mrd-home-stop circle:first-child, .mrd-home-amb circle:first-child { transform-box: fill-box; transform-origin: center; animation: mrd-halo 3.4s ease-in-out infinite; }
.mrd-home-map-badge { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem .6rem .6rem; border-radius: 16px; background: rgba(8, 24, 38, .66);
  -webkit-backdrop-filter: var(--mrd-glass); backdrop-filter: var(--mrd-glass); box-shadow: inset 0 0 0 1px var(--mrd-hair); }
.mrd-home-map-badge .g { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(247, 241, 230, .14), rgba(247, 241, 230, .02)), var(--mrd-trail);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 0 20px -4px var(--mrd-glow); }
.mrd-home-map-badge .g i { color: var(--mrd-ink); font-size: 1.15rem; }
.mrd-home-map-badge b { display: block; font-family: var(--font-display, serif); font-size: 1rem; color: var(--mrd-text-hi); }
.mrd-home-map-badge span { font-family: var(--font-sans); font-size: .72rem; color: var(--mrd-text-lo); }

@media (max-width: 860px) {
  .mrd-home-teaser-inner { grid-template-columns: 1fr; }
  .mrd-home-map { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .mrd-route, .mrd-home-route, .mrd-home-spark, .mrd-home-stop circle, .mrd-home-amb circle, .mrd-node .halo { animation: none !important; }
}

/* ══ LEAFLET real-map engine (route builder) ══════════════════════════════ */
/* Dark placeholder matching the CARTO dark_all basemap (route-builder.js) so there's
   no flash of a lighter color before tiles arrive. */
.mrd-map.leaflet-container { background: var(--mrd-ink); font-family: var(--font-sans); z-index: 1; }
/* The studio's dark_all tiles read almost black on their own — lift them exactly one
   notch (not all the way to a light basemap, which read as glare next to the dark
   itinerary panel) so terrain/labels are legible without losing the night-map mood.
   Scoped to the editor only; the tour-detail read-only map (.mrd-tourmap) is a
   different, already-light basemap and is unaffected. */
.mrd-stage .leaflet-tile-pane { filter: brightness(1.35) saturate(1.1); }

/* glowing POI markers (divIcon) */
.mrd-mk-wrap { background: transparent; border: 0; }
.mrd-mk { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.mrd-mk-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--m, var(--mrd-aurora));
  box-shadow: 0 0 0 2px rgba(5,16,27,.55), 0 0 14px var(--m, var(--mrd-glow)); transition: transform .2s var(--mrd-e-out); }
.mrd-mk-halo { position: absolute; inset: 0; border-radius: 50%; transform-origin: center;
  background: radial-gradient(circle, var(--m, var(--mrd-aurora)) 0%, transparent 62%); opacity: .32; animation: mrd-mk-halo 3.2s ease-in-out infinite; }
@keyframes mrd-mk-halo { 0%,100% { opacity:.22; transform:scale(1);} 50% { opacity:.5; transform:scale(1.25);} }
.mrd-mk-wrap:hover .mrd-mk-dot { transform: scale(1.28); }
.mrd-mk.is-sel .mrd-mk-dot { background: #fff; box-shadow: 0 0 0 2px var(--m, var(--mrd-aurora)), 0 0 16px var(--m, var(--mrd-glow)); }
.mrd-mk.is-sel .mrd-mk-halo { opacity: .6; animation: none; }
.mrd-mk-seq { position: absolute; top: -9px; right: -9px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--mrd-ink);
  background: var(--m, var(--mrd-aurora)); box-shadow: 0 0 10px var(--m, var(--mrd-glow)); }

/* clusters */
.mrd-cluster-wrap { background: transparent; }
.mrd-cluster { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 700; font-size: .92rem; color: var(--mrd-ink);
  background: radial-gradient(circle at 35% 30%, var(--mrd-aurora-bright), var(--mrd-aurora));
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--mrd-aurora) 20%, transparent), 0 0 22px var(--mrd-glow); }

/* hover card (photo + name) */
.leaflet-tooltip.mrd-tip-wrap { background: transparent; border: 0; box-shadow: none; padding: 0; }
.leaflet-tooltip.mrd-tip-wrap::before { display: none; }   /* remove default arrow */
.mrd-tip { display: flex; align-items: center; gap: .6rem; width: 224px; padding: .5rem; border-radius: 14px;
  background: rgba(8,24,38,.92); -webkit-backdrop-filter: var(--mrd-glass); backdrop-filter: var(--mrd-glass);
  box-shadow: 0 20px 44px -20px rgba(3,10,18,.9), inset 0 0 0 1px var(--mrd-hair); }
.mrd-tip .im { width: 62px; height: 62px; flex-shrink: 0; border-radius: 10px; background-size: cover; background-position: center;
  background-color: var(--mrd-ocean-700); box-shadow: inset 0 0 0 1px var(--mrd-hair-soft); }
.mrd-tip .im--none { display: grid; place-items: center; background: linear-gradient(145deg, var(--mrd-ocean-600), var(--mrd-ocean-700)); }
.mrd-tip .im--none i { font-size: 1.7rem; color: color-mix(in oklch, var(--m, var(--mrd-aurora)) 72%, white); }

/* MERIDIAN — page-transition progress bar (driven by nav-progress.js on enhanced nav) */
.mrd-navbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--c-turquoise, #00A6A6), var(--c-cta, #E07A5F));
  box-shadow: 0 0 10px rgba(0, 166, 166, .6); opacity: 0; }
.mrd-navbar.go { width: 82%; opacity: 1; transition: width 8s cubic-bezier(.1, .7, .1, 1); }
.mrd-navbar.done { width: 100%; opacity: 0; transition: width .2s ease, opacity .4s ease .2s; }
.mrd-tip .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mrd-tip .tx b { font-family: var(--font-display, serif); font-weight: 500; font-size: .98rem; color: var(--mrd-text-hi); line-height: 1.14; }
.mrd-tip .tx i { font-style: normal; font-size: .74rem; color: var(--m, var(--mrd-aurora)); }

/* route light-trail (Leaflet SVG path) */
.mrd-map .mrd-route-line { stroke-dasharray: 6 10; animation: mrd-flow 2.4s linear infinite; filter: drop-shadow(0 0 5px var(--mrd-glow)); }
.mrd-map .mrd-route-glow { filter: blur(3px); }

/* dark Leaflet chrome */
.mrd-map .leaflet-control-zoom a { background: rgba(8,24,38,.82); color: var(--mrd-text-hi); border: 0; box-shadow: inset 0 0 0 1px var(--mrd-hair); }
.mrd-map .leaflet-control-zoom a:hover { background: var(--mrd-ocean-600); color: #fff; }
.mrd-map .leaflet-bar { border: 0; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6); }
.mrd-map .leaflet-control-attribution { background: rgba(5,16,27,.6); color: var(--mrd-text-lo); font-size: .62rem; }
.mrd-map .leaflet-control-attribution a { color: var(--mrd-text-mid); }
/* Leaflet's default zoom buttons are 26px — too small to hit on touch. */
@media (pointer: coarse) {
  .mrd-map .leaflet-control-zoom a,
  .mrd-tourmap .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 1.25rem; }
}

/* scroll containment — page never grows; the whole itinerary PANEL scrolls on its own */
.mrd-panel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mrd-ocean-600) transparent; overscroll-behavior: contain; }
.mrd-panel::-webkit-scrollbar { width: 6px; }
.mrd-panel::-webkit-scrollbar-thumb { background: var(--mrd-ocean-600); border-radius: 3px; }

/* travelling light-trail spark */
.mrd-spark-wrap { background: transparent; }
.mrd-spark { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px #fff, 0 0 15px var(--mrd-aurora), 0 0 26px var(--mrd-aurora); }

/* prominent rule / error alert */
.mrd-alert { display: flex; align-items: flex-start; gap: .55rem; margin: .1rem 0 .2rem; padding: .7rem .85rem; border-radius: 12px;
  font-family: var(--font-sans); font-size: .82rem; line-height: 1.4; color: var(--mrd-text-hi);
  background: color-mix(in oklch, var(--mrd-sun-2) 20%, var(--mrd-ocean-700));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mrd-sun-2) 45%, transparent), 0 0 24px -6px color-mix(in oklch, var(--mrd-sun-2) 40%, transparent);
  animation: mrd-alert-in .4s var(--mrd-e-expo), mrd-alert-pulse 1.6s ease-in-out 1; }
.mrd-alert i { color: var(--mrd-sun-2); font-size: 1.1em; margin-top: .05em; flex-shrink: 0; }
@keyframes mrd-alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes mrd-alert-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* overflow guards */
.mrd-tip { overflow: hidden; }
.mrd-tip .tx { overflow: hidden; }
.mrd-tip .tx b { overflow-wrap: anywhere; }
.mrd-mem .info { min-width: 0; }
.mrd-mem .info h4 { overflow-wrap: anywhere; }

/* tour detail — embedded read-only fixed route map. Lighter than the studio's night map
   (Voyager basemap): the page reads brighter and the loading/edge fill is a soft slate,
   not near-black. Scoped to .mrd-tourmap so the RouteStudio editor stays dark. */
.mrd-tourmap { position: relative; height: clamp(380px, 52vh, 520px); border-radius: 20px; overflow: hidden;
  background: #dfe7ee; box-shadow: 0 24px 60px -32px rgba(15, 33, 51, .45), inset 0 0 0 1px rgba(15, 33, 51, .10); margin-top: .4rem; }
.mrd-tourmap .mrd-map { width: 100%; height: 100%; }
.mrd-tourmap .mrd-map.leaflet-container { background: #dfe7ee; }
.mrd-tourmap .leaflet-control-zoom a { border: 0; }
.detail-route-lede { color: var(--c-ink-soft, #415A77); margin: -.4rem 0 1rem; font-size: .98rem; max-width: 60ch; }

/* route rule info note */
.mrd-rule-note { display: flex; align-items: flex-start; gap: .5rem; margin: .2rem 0 0; padding: .55rem .7rem;
  border-radius: 10px; background: color-mix(in oklch, var(--mrd-aurora) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--mrd-hair-soft); font-family: var(--font-sans); font-size: .72rem; line-height: 1.4; color: var(--mrd-text-mid); }
.mrd-rule-note i { color: var(--mrd-aurora); font-size: 1em; margin-top: .1em; flex-shrink: 0; }

@media (max-width: 960px) {
  .mrd-studio { height: auto; }         /* mobile: stack + flow, page scrolls naturally */
  .mrd-panel { overflow-y: visible; }
}