/* ─────────────────────────────────────────────────────────────
   SeedTree — globe pages (Seeds / Trees / Blooms / Landscape)

   ARCHITECTURE
   The themed image IS the page background — full-bleed, edge to
   edge. Every other element (return bar, titlebar, nav, search,
   tag pills, carousel cards, globe viewport, totals, popup) is
   an OVERLAY positioned on top of the bg. The page is the world;
   the UI floats over it.

   - Page bg is sourced via body[data-frame="…"] from the central
     manifest of themed images in assets/backgrounds/.
   - Globe viewport is always a perfect CIRCLE (sized in svmin so
     width and height are equal regardless of viewport ratio).
   - Where text needs legibility, a small scrim sits behind THAT
     text — never behind whole sections.
   - All overlay positions and scrim opacities are tunable in
     Shift+T TUNE mode (see scripts/map-tuner.js).
   ───────────────────────────────────────────────────────────── */

/* === Page surface =========================================== */

/* Pull the html backdrop to forest-deep so the strip exposed by
   --page-zoom (when < 1) reads as the page's frame, not white. */
html:has(body.map-page) { background: var(--forest-deep); overflow: hidden; }

body.map-page {
  background: var(--forest-deep);
  color: var(--cream);
  font-family: var(--font-body);
  margin: 0;
  height: 100vh;
  height: 100svh;
  position: relative;
  overflow: hidden;
  /* Safe-edge: scale the whole stage inward.
     --page-zoom  uniform scale (default 0.96 = 4% inset both axes)
     --safe-y     extra vertical px of margin (top + bottom — splits)
     --safe-x     extra horizontal px of margin (left + right — splits)
     Computed Y-scale = page-zoom × (1 − 2·safe-y / vh)
     Computed X-scale = page-zoom × (1 − 2·safe-x / vw)
     This lets you keep horizontal extent the same while adding only
     vertical breathing room (e.g. to stop bottom counters cropping). */
  --page-zoom: 0.96;
  --safe-y: 0px;
  --safe-x: 0px;
  transform:
    scale(
      calc(var(--page-zoom) * (1 - (2 * var(--safe-x) / 100vw))),
      calc(var(--page-zoom) * (1 - (2 * var(--safe-y) / 100vh)))
    );
  transform-origin: 50% 50%;
}

/* Full-bleed themed background — the page IS the world */
.map-page-bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--page-fit, cover);
}
body[data-frame="seeds"]     .map-page-bg { background-image: url('../assets/backgrounds/seeds-desktop.png'); }
body[data-frame="trees"]     .map-page-bg { background-image: url('../assets/backgrounds/tree-desktop.png'); }
body[data-frame="blooms"]    .map-page-bg { background-image: url('../assets/backgrounds/blooms-desktop.png'); }
body[data-frame="landscape"] .map-page-bg { background-image: url('../assets/backgrounds/landscape-desktop.png'); }
@media (max-width: 768px) {
  body[data-frame="seeds"]     .map-page-bg { background-image: url('../assets/backgrounds/seeds-mobile.png'); }
  body[data-frame="trees"]     .map-page-bg { background-image: url('../assets/backgrounds/tree-mobile.png'); }
  body[data-frame="blooms"]    .map-page-bg { background-image: url('../assets/backgrounds/blooms-mobile.png'); }
  body[data-frame="landscape"] .map-page-bg { background-image: url('../assets/backgrounds/landscape-mobile.png'); }
}

/* === Return bar — decorative gradient strip ================== */
/* The strip is purely visual now. The return link and the wordmark
   live OUTSIDE this header as independent overlays so each can be
   dragged separately in TUNE mode. */

body.map-page .return-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  height: 64px;
  background: linear-gradient(to bottom, rgba(7,20,14,0.55), rgba(7,20,14,0));
  pointer-events: none;
}

/* The return link — independently positionable overlay */
body.map-page > .return-link {
  position: absolute;
  left: var(--return-x, 24px);
  top:  var(--return-y, 18px);
  z-index: 60;
  font: italic 0.95rem var(--font-display);
  color: rgba(236, 231, 216, 0.78);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
body.map-page > .return-link:hover { color: var(--gold-light); }

/* The SEED·TREE wordmark — independently positionable overlay */
body.map-page > .return-wordmark {
  position: absolute;
  top:   var(--wordmark-y, 22px);
  right: var(--wordmark-r, 24px);
  z-index: 60;
  font: 0.78rem var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 231, 216, 0.65);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* === Title bar — floating pill ============================== */

body.map-page .map-titlebar {
  position: absolute;
  top:  var(--title-y, 64px);
  left: var(--title-x, 24px);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  background: rgba(7, 20, 14, var(--title-scrim, 0.45));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 999px;
  max-width: calc(100vw - 48px);
}
body.map-page .map-titlebar h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  color: var(--cream);
  margin: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Stay legible when --title-scrim is dropped low enough to reveal
     what's behind the title pill (e.g. landscape counter rings). */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.55);
}
body.map-page .map-titlebar .map-sub,
body.map-page .map-titlebar .map-fulllink {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
body.map-page .map-titlebar .map-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(236, 231, 216, 0.6);
}
body.map-page .map-titlebar .map-tools {
  display: inline-flex; align-items: center; gap: 10px;
}
/* The .map-fulllink class lives in TWO places:
   1. Inline inside .map-titlebar on Landscape (nav links to seeds/trees/blooms)
   2. As a standalone overlay (.map-fulllink-overlay) on filtered pages
   The selectors below distinguish them. */
.map-titlebar .map-fulllink {
  font: italic 0.82rem var(--font-display);
  color: rgba(236, 231, 216, 0.7);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  transition: color .25s var(--ease-organic);
}
.map-titlebar .map-fulllink:hover { color: var(--gold-light); }

/* Standalone "SeedTree Feed →" overlay — appears on all globe pages */
body.map-page > .map-feedlink-overlay {
  position: absolute;
  left: var(--feedlink-x, calc(100vw - 180px));
  top:  var(--feedlink-y, 108px);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(7, 20, 14, var(--feedlink-scrim, 0.45));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 999px;
  font: italic 0.85rem var(--font-display);
  color: rgba(236, 231, 216, 0.78);
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
body.map-page > .map-feedlink-overlay:hover { color: var(--gold-light); border-color: rgba(201, 169, 97, 0.4); }
body.map-page > .map-feedlink-overlay::before {
  content: '☀';
  color: #fbd54a;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1;
}

/* Standalone "See the full Landscape →" overlay — filtered pages */
body.map-page > .map-fulllink-overlay {
  position: absolute;
  left: var(--fulllink-x, calc(100vw - 260px));
  top:  var(--fulllink-y, 68px);
  z-index: 50;
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: rgba(7, 20, 14, var(--fulllink-scrim, 0.45));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 999px;
  font: italic 0.85rem var(--font-display);
  color: rgba(236, 231, 216, 0.78);
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
body.map-page > .map-fulllink-overlay:hover { color: var(--gold-light); border-color: rgba(201, 169, 97, 0.4); }

body.map-page .map-search {
  background: rgba(236, 231, 216, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.25);
  color: var(--cream);
  padding: 5px 12px;
  border-radius: 999px;
  font: 0.82rem var(--font-body);
  outline: none;
  width: 160px;
}
body.map-page .map-search::placeholder { color: rgba(236, 231, 216, 0.45); }
body.map-page .map-search:focus { border-color: var(--gold); }

/* === Tag pills — floating row =============================== */

body.map-page .map-tags {
  position: absolute;
  top:  var(--tags-y, 116px);
  left: var(--tags-x, 24px);
  z-index: 45;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: calc(100vw - 48px);
  padding: 0;
  background: transparent;
  border: 0;
}
.map-tag {
  font: 0.74rem var(--font-body);
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  background: rgba(7, 20, 14, var(--tag-scrim, 0.5));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(236, 231, 216, 0.78);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.map-tag:hover { color: var(--cream); border-color: rgba(201, 169, 97, 0.6); }
.map-tag.is-active { background: var(--gold); color: var(--forest); border-color: var(--gold); }

/* === Card stack — 3D rolodex of cards ====================== */
/* The .map-carousel is the wrapper; .card-stack-window is the
   perspective box that holds the cards; each .map-card inside is
   absolutely positioned and animates between data-pos states. */

body.map-page.has-carousel .map-carousel {
  position: absolute;
  left: var(--card-x, 78%);
  top:  var(--card-y, 56%);
  transform: translate(-50%, -50%);
  width:  var(--card-w, 360px);
  height: var(--card-h, 380px);
  z-index: 40;
  pointer-events: none;            /* let the cards / meta own events */
  perspective: 1200px;
}
body.map-page.has-carousel .card-stack-window {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
body.map-page.has-carousel .map-carousel-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  font-family: var(--font-display); font-style: italic;
  color: rgba(236, 231, 216, 0.6);
  background: rgba(7, 20, 14, 0.5);
  border-radius: 12px;
  pointer-events: auto;
}
body.map-page.has-carousel .card-stack-meta {
  position: absolute;
  bottom: -32px; left: 0; right: 0;
  text-align: center;
  font: italic 0.78rem var(--font-display);
  color: rgba(236, 231, 216, 0.5);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
body.map-page.has-carousel .card-stack-meta::after {
  content: " · scroll, click, or ↑ ↓";
  color: rgba(236, 231, 216, 0.35);
}

/* The cards — 3D-positioned by data-pos. Background opacity reads
   from --carousel-scrim so the HUD's "Scrim" slider tunes it. */
.card-stack-window .map-card {
  position: absolute;
  inset: 0;
  margin: 0;
  background: rgba(13, 31, 23, var(--carousel-scrim, 0.78));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 169, 97, 0.24);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform 420ms var(--ease-organic),
              opacity   420ms var(--ease-organic);
  will-change: transform, opacity;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Resting stack positions — 5 visible cards, front + 2 above + 2 below.
   Higher |pos| = further from the viewer, smaller, more faded. */
.card-stack-window .map-card[data-pos="0"] {
  transform: translateY(0)     scale(1.00) translateZ(0);
  opacity: 1;    z-index: 30;
  pointer-events: auto;
}
.card-stack-window .map-card[data-pos="1"] {
  transform: translateY(-26px) scale(0.93) translateZ(-50px);
  opacity: 0.65; z-index: 25;
  pointer-events: auto;
}
.card-stack-window .map-card[data-pos="2"] {
  transform: translateY(-52px) scale(0.86) translateZ(-110px);
  opacity: 0.36; z-index: 15;
  pointer-events: auto;
}
.card-stack-window .map-card[data-pos="-1"] {
  transform: translateY(26px)  scale(0.93) translateZ(-50px);
  opacity: 0.65; z-index: 25;
  pointer-events: auto;
}
.card-stack-window .map-card[data-pos="-2"] {
  transform: translateY(52px)  scale(0.86) translateZ(-110px);
  opacity: 0.36; z-index: 15;
  pointer-events: auto;
}

/* Entry / exit transition states.
   exit-up   = slid off the top of the stack (during retreat)
   exit-down = slid off the bottom of the stack (during advance)
   enter-up  = arriving from above   (joining pos 2 on retreat)
   enter-down= arriving from below   (joining pos -2 on advance) */
.card-stack-window .map-card[data-pos="enter-up"] {
  transform: translateY(-78px) scale(0.80) translateZ(-170px);
  opacity: 0;   z-index: 5;
}
.card-stack-window .map-card[data-pos="enter-down"] {
  transform: translateY(78px)  scale(0.80) translateZ(-170px);
  opacity: 0;   z-index: 5;
}
.card-stack-window .map-card[data-pos="exit-up"] {
  transform: translateY(-78px) scale(0.80) translateZ(-170px);
  opacity: 0;   z-index: 5;
}
.card-stack-window .map-card[data-pos="exit-down"] {
  transform: translateY(78px)  scale(0.80) translateZ(-170px);
  opacity: 0;   z-index: 5;
}

/* Active flag (highlighted when its pin is clicked) — subtle gold ring */
.card-stack-window .map-card.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.4) inset,
              0 18px 40px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .card-stack-window .map-card { transition: opacity 180ms; }
  .card-stack-window .map-card[data-pos="1"],
  .card-stack-window .map-card[data-pos="2"] { display: none; }
  .card-stack-window .map-card[data-pos="0"] { transform: none; opacity: 1; }
  .card-stack-window .map-card[data-pos="exit-down"],
  .card-stack-window .map-card[data-pos="exit-back"],
  .card-stack-window .map-card[data-pos="enter-back"],
  .card-stack-window .map-card[data-pos="enter-front"] {
    transform: none; opacity: 0;
  }
}

/* === Globe viewport — ALWAYS a perfect circle =============== */

.globe-port {
  position: absolute;
  left: var(--globe-x, 50%);
  top:  var(--globe-y, 52%);
  /* svmin = smaller of svw/svh → guarantees a square box → circle.
     The accepted trade-off: on wide viewports the circle uses the
     vertical dimension; on tall ones, the horizontal. */
  width:  var(--globe-size, 64svmin);
  height: var(--globe-size, 64svmin);
  transform: translate(-50%, -50%);
  z-index: 20;
  border-radius: 50%;
  overflow: hidden;
  /* tight solid core so the sphere isn't faded near its visible edge */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 92%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 92%, transparent 100%);
  /* belt-and-suspenders ring shadow for the porthole feel */
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, var(--globe-ring, 0.15)),
    0 18px 60px rgba(0, 0, 0, 0.4);
}
.globe-port .seedtree-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe-port .mapboxgl-ctrl-group,
.globe-port .mapboxgl-ctrl-logo,
.globe-port .mapboxgl-ctrl-attrib { display: none !important; }

/* Map loading message — centred inside the globe port */
.map-status {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(236, 231, 216, 0.85);
  background: rgba(7, 20, 14, 0.82);
  padding: 12px 22px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

/* === Landscape number slots — float over the gold rings ===== */

.ldash-slot {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.88);
}
.ldash-slot .ldash-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5svmin, 3.6rem);
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* === Record detail — tree mini-site overlay ================
   Click the front card → this panel expands above the stack with
   logo, full description, website + social, water/sun controls,
   and a clear "visit website" CTA for trees. Backdrop click,
   × button, or Escape closes it. */

.record-detail {
  position: fixed; inset: 0; z-index: 100;
  display: none;
}
.record-detail.is-open { display: block; }
.record-detail-backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 20, 14, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 320ms var(--ease-organic);
}
.record-detail.is-open .record-detail-backdrop { opacity: 1; }

.record-detail-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100svh - 64px);
  overflow-y: auto;
  background: rgba(13, 31, 23, 0.92);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 18px;
  padding: 30px 34px 28px;
  color: var(--cream);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 320ms var(--ease-organic),
              transform 320ms var(--ease-organic);
}
.record-detail.is-open .record-detail-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.record-detail-close {
  position: absolute; top: 12px; right: 16px;
  width: 32px; height: 32px;
  background: rgba(7, 20, 14, 0.5);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 50%;
  color: rgba(236, 231, 216, 0.7);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.record-detail-close:hover { color: var(--cream); border-color: rgba(201, 169, 97, 0.55); background: rgba(7, 20, 14, 0.78); }

.record-detail-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 18px;
}
.record-detail-logo {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(236, 231, 216, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.22);
}
.record-detail-headtext { min-width: 0; flex: 1 1 auto; }
.record-detail-type {
  font: 0.66rem var(--font-body);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(236, 231, 216, 0.55);
  display: inline-flex; align-items: center;
}
.record-detail-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--cream);
  margin: 4px 0 0;
  line-height: 1.15;
}
.record-detail-loc {
  font: 0.85rem var(--font-body);
  color: rgba(236, 231, 216, 0.65);
  margin: 0 0 4px;
}
.record-detail-when {
  font: italic 0.92rem var(--font-display);
  color: var(--gold-light);
  margin: 0 0 14px;
}
.record-detail-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(236, 231, 216, 0.86);
  margin: 0 0 22px;
}
.record-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 18px; }
.record-detail-tag {
  font: 0.72rem var(--font-body);
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  background: rgba(7, 20, 14, 0.4);
  color: rgba(236, 231, 216, 0.7);
}

.record-detail-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
}
.record-detail-links { display: flex; gap: 18px; flex-wrap: wrap; }
.record-detail-links .map-card-link { font-size: 0.92rem; }
.record-detail-links .map-card-link svg { width: 16px; height: 16px; }
.record-detail-acts { display: flex; gap: 10px; }
.record-detail-acts .map-card-act { width: 38px; height: 38px; }
.record-detail-acts .map-card-act svg { width: 19px; height: 19px; }

.record-detail-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding: 11px 22px;
  background: var(--gold);
  color: var(--forest);
  border-radius: 999px;
  text-decoration: none;
  font: 0.9rem var(--font-display);
  letter-spacing: 0.04em;
  transition: background .25s, transform .25s;
}
.record-detail-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.record-detail-cta[hidden] { display: none; }

@media (max-width: 540px) {
  .record-detail-panel { padding: 22px 20px 20px; }
  .record-detail-head { gap: 12px; }
  .record-detail-logo { width: 56px; height: 56px; }
}

/* === Popup ================================================== */

.map-popup {
  position: absolute;
  z-index: 80;
  display: none;
  min-width: 220px;
  max-width: 270px;
  background: rgba(7, 20, 14, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 10px;
  padding: 18px 20px;
}
.map-popup-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: 0;
  color: rgba(236, 231, 216, 0.45);
  font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.map-popup-close:hover { color: var(--cream); }
.map-popup-type {
  font: 0.62rem var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 8px;
}
.map-popup-name {
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--cream); margin-bottom: 6px; line-height: 1.2;
}
.map-popup-loc { font: 0.75rem var(--font-body); color: rgba(236, 231, 216, 0.5); margin-bottom: 8px; }
.map-popup-desc { font: 0.8rem var(--font-body); color: rgba(236, 231, 216, 0.7); line-height: 1.55; margin-bottom: 12px; max-height: 90px; overflow-y: auto; }
.map-popup-btn {
  display: inline-block;
  font: 0.78rem var(--font-display);
  padding: 6px 14px; border-radius: 999px;
  background: var(--gold); color: var(--forest);
  text-decoration: none;
}

/* === Carousel cards ========================================= */

.map-card {
  display: block;
  text-align: left;
  text-decoration: none;
  width: 100%;
  background: rgba(13, 31, 23, 0.6);
  border: 1px solid rgba(201, 169, 97, 0.16);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--cream);
  cursor: pointer;
  transition: background .3s var(--ease-organic), border-color .3s, transform .3s;
}
.map-card:hover, .map-card:focus-visible {
  background: rgba(25, 54, 42, 0.78);
  border-color: rgba(201, 169, 97, 0.4);
  outline: none;
}
.map-card.is-active {
  background: rgba(46, 64, 50, 0.9);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.35) inset;
}
.map-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.map-card-logo {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(236, 231, 216, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.18);
}
.map-card-headtext { min-width: 0; flex: 1 1 auto; }
.map-card-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.map-card-dot.seed  { background: #f0c040; }
.map-card-dot.tree  { background: #4ade80; }
.map-card-dot.bloom { background: #e8729c; }
.map-card-type {
  font: 0.62rem var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(236, 231, 216, 0.55);
  display: inline-flex; align-items: center;
}
.map-card-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--cream);
  font-weight: 400;
  margin: 0 0 6px;
  line-height: 1.25;
}
.map-card-loc {
  font: 0.78rem var(--font-body);
  color: rgba(236, 231, 216, 0.55);
  margin-bottom: 8px;
}
.map-card-desc {
  font: 0.82rem var(--font-body);
  line-height: 1.55;
  color: rgba(236, 231, 216, 0.78);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.map-card-when {
  font: italic 0.78rem var(--font-display);
  color: var(--gold-light);
  margin-bottom: 6px;
}
.map-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: italic 0.8rem var(--font-display);
  color: var(--gold-light);
  text-decoration: none;
  padding: 4px 0;
  transition: color .2s var(--ease-organic);
}
.map-card-link:hover { color: var(--cream); }
.map-card-link svg { width: 14px; height: 14px; }

/* Card footer — links on the left, water + sun icons on the right */
.map-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 169, 97, 0.14);
  gap: 12px;
}
.map-card-links { display: flex; gap: 14px; flex-wrap: wrap; }
.map-card-acts  { display: flex; gap: 8px; }

.map-card-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 50%;
  color: rgba(236, 231, 216, 0.55);
  cursor: pointer;
  transition: color .3s var(--ease-organic), border-color .3s, background .3s, box-shadow .3s, transform .2s;
}
.map-card-act svg { width: 17px; height: 17px; }
.map-card-act:hover { color: var(--cream); border-color: rgba(201, 169, 97, 0.55); transform: translateY(-1px); }

/* Lit state — water = clear blue, sun = warm yellow.
   On flip-to-on the icon pulses outward briefly to signal recognition. */
.map-card-act.is-on[data-act="water"] {
  color: #39a3e6;
  border-color: rgba(57, 163, 230, 0.85);
  background: rgba(57, 163, 230, 0.16);
  box-shadow: 0 0 18px rgba(57, 163, 230, 0.55);
}
.map-card-act.is-on[data-act="sun"] {
  color: #fbd54a;
  border-color: rgba(251, 213, 74, 0.85);
  background: rgba(251, 213, 74, 0.16);
  box-shadow: 0 0 18px rgba(251, 213, 74, 0.55);
}
.map-card-act.just-lit { animation: map-act-pulse 700ms var(--ease-organic); }
@keyframes map-act-pulse {
  0%   { transform: scale(1);     box-shadow: 0 0 0   rgba(255, 255, 255, 0.5); }
  35%  { transform: scale(1.22);  box-shadow: 0 0 28px currentColor; }
  100% { transform: scale(1);     box-shadow: 0 0 18px currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .map-card-act.just-lit { animation: none; }
}

/* === Mobile — globe on top, card stack centered-bottom =====
   Selectors here MUST beat the per-frame desktop rules below
   (`body[data-frame="trees"] .globe-port` etc.) — same specificity
   would lose to source order, since the desktop blocks come after
   this point in the file. Prefixing with `body.map-page` bumps each
   selector to 0,3,1 vs. the desktop 0,2,1 and wins. */

@media (max-width: 768px) {
  body.map-page.has-carousel .map-carousel {
    --card-x: 50%;
    --card-y: 78%;
    --card-w: min(340px, 92vw);
    --card-h: 220px;
  }
  body.map-page[data-frame="seeds"]  .globe-port,
  body.map-page[data-frame="trees"]  .globe-port,
  body.map-page[data-frame="blooms"] .globe-port {
    --globe-x: 50%;
    --globe-y: 36%;
    --globe-size: 72svmin;
  }
  body.map-page .map-search { width: 130px; }
}

/* === Tuner — Shift+T toggles drag mode + the HUD =========== */

body.map-tuning .globe-port,
body.map-tuning .ldash-slot,
body.map-tuning .map-titlebar,
body.map-tuning .map-tags,
body.map-tuning .map-carousel {
  outline: 1px dashed rgba(216, 190, 126, 0.55);
  outline-offset: 4px;
  cursor: move;
}
/* While tuning, disable the page-zoom scale so drag coordinates line
   up with what the user sees. The scale re-applies on exit. */
body.map-tuning { transform: none !important; }

body.map-tuning .ldash-slot,
body.map-tuning .map-carousel,
body.map-tuning > .return-link,
body.map-tuning > .map-fulllink-overlay,
body.map-tuning > .map-feedlink-overlay { pointer-events: auto; }

body.map-tuning .map-titlebar *,
body.map-tuning .map-tags *,
body.map-tuning .map-carousel * {
  /* the parent grabs the drag; descendants pass events through */
  pointer-events: none;
}

/* In TUNE mode the Mapbox canvas shouldn't intercept mousedown — let
   the .globe-port parent receive the event so the tuner can drag it. */
body.map-tuning .globe-port .seedtree-map,
body.map-tuning .globe-port .mapboxgl-canvas { pointer-events: none; }

/* Highlight the new draggable overlays so they're discoverable */
body.map-tuning > .return-link,
body.map-tuning > .map-fulllink-overlay,
body.map-tuning > .map-feedlink-overlay {
  outline: 1px dashed rgba(216, 190, 126, 0.55);
  outline-offset: 4px;
  cursor: move;
}

.map-tune-pill {
  position: fixed; bottom: 14px; right: 14px; z-index: 9998;
  background: rgba(7, 20, 14, 0.85); color: var(--cream);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 999px; padding: 6px 14px;
  font: 12px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
body.map-tuning .map-tune-pill { background: var(--gold); color: var(--forest); border-color: var(--gold); }

.map-tune-hud {
  /* Default to right-centre — doesn't overlap any of the typical corner
     overlays (return link, wordmark, full-landscape, humans counter).
     Drag the header to reposition. */
  position: fixed;
  top: var(--hud-top, 50%);
  left: var(--hud-left, auto);
  right: var(--hud-right, 16px);
  transform: translateY(-50%);
  z-index: 9998;
  background: rgba(7, 20, 14, 0.94); color: var(--cream);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 8px; padding: 0; /* padding moves into .hud-body */
  font: 12px/1.5 var(--font-body);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: none; width: 280px;
  max-height: 80vh; overflow: hidden;
}
.map-tune-hud.is-positioned { transform: none; }   /* once dragged, drop the centring transform */
body.map-tuning .map-tune-hud { display: flex; flex-direction: column; }

.map-tune-hud .hud-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(7, 20, 14, 0.5);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
  cursor: move;
  font: italic 12px var(--font-display);
  color: var(--gold-light);
  user-select: none;
}
.map-tune-hud .hud-header::before { content: "⋮⋮"; opacity: 0.55; margin-right: 8px; }
.map-tune-hud .hud-body { padding: 12px 14px; overflow-y: auto; max-height: 70vh; }

.map-tune-hud h4 { font: italic 13px var(--font-display); color: var(--gold-light); margin: 12px 0 6px; }
.map-tune-hud h4:first-child { margin-top: 0; }
.map-tune-hud .row { display: grid; grid-template-columns: 78px 1fr 48px; gap: 6px; align-items: center; margin: 5px 0; }
.map-tune-hud label { color: rgba(236, 231, 216, 0.75); font-size: 11px; }
.map-tune-hud input[type=range] { accent-color: var(--gold); }
.map-tune-hud input[type=number],
.map-tune-hud select {
  width: 100%; padding: 2px 4px;
  background: rgba(236, 231, 216, 0.08);
  border: 1px solid rgba(216, 190, 126, 0.25);
  border-radius: 3px; color: var(--cream); font: 11px var(--font-body);
}
.map-tune-hud .actions {
  display: flex; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(216, 190, 126, 0.18);
}
.map-tune-hud .actions button {
  flex: 1; padding: 6px;
  background: rgba(201, 169, 97, 0.15);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 4px; color: var(--cream);
  font: 11px var(--font-body); letter-spacing: 0.04em;
  cursor: pointer;
}
.map-tune-hud .actions button:hover { background: rgba(201, 169, 97, 0.28); }
.map-tune-hud .hint { font-style: italic; color: rgba(236, 231, 216, 0.5); font-size: 10.5px; margin-top: 8px; }

/* === Per-page tuned values ================================
   Baked from Shift+T tuning sessions. Each page has its own
   block; live tuning persists per-page in localStorage and the
   Copy CSS button emits paste-ready overrides you can drop here.
   ──────────────────────────────────────────────────────── */

/* ── Landscape ── globe centred over the dashboard, totals in corners */
body[data-frame="landscape"] {
  --page-fit: cover;
  --title-scrim: 0.10;    /* low — let the counter rings read through the nav bar */
  --tag-scrim: 0.76;
  --globe-ring: 0.4;
  --safe-y: 28px;         /* extra top + bottom breathing room — tunable */
}
body[data-frame="landscape"] .globe-port {
  --globe-x: 49.2%;
  --globe-y: 51%;
  --globe-size: 81svmin;
}
body[data-frame="landscape"] .map-titlebar {
  --title-x: 501px;
  --title-y: 14px;
}
body[data-frame="landscape"] > .return-link {
  --return-x: 699px;
  --return-y: 662px;
}
/* Four totals — tuned positions in the dashboard's gold rings */
body[data-frame="landscape"] .ldash-slot[data-slot="trees"]  { --x: 11.7%; --y: 11.5%; }
body[data-frame="landscape"] .ldash-slot[data-slot="seeds"]  { --x: 90.3%; --y: 11.5%; }
body[data-frame="landscape"] .ldash-slot[data-slot="blooms"] { --x: 11.5%; --y: 93.4%; }
body[data-frame="landscape"] .ldash-slot[data-slot="humans"] { --x: 90.3%; --y: 94.9%; }

/* The page title floats free on Landscape — no pill background, no
   blur, no border. Just the text with its shadow for legibility. */
body[data-frame="landscape"] .map-titlebar {
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 0;
}

/* ── Seeds ── globe LEFT, card cascade RIGHT */
body[data-frame="seeds"] {
  --page-fit: cover;
  --carousel-scrim: 0.86;
  --globe-ring: 0.36;
}
body[data-frame="seeds"] .globe-port {
  --globe-x: 29.4%;
  --globe-y: 51%;
  --globe-size: 87svmin;
}
body[data-frame="seeds"] .map-titlebar {
  --title-x: 878px;
  --title-y: 76px;
}
body[data-frame="seeds"] .map-tags {
  --tags-x: 880px;
  --tags-y: 135px;
}
body[data-frame="seeds"] .map-carousel {
  --card-x: 78%;
  --card-y: 55%;
  --card-w: 490px;
  --card-h: 260px;
}
body[data-frame="seeds"] > .map-fulllink-overlay {
  --fulllink-x: 192px;
  --fulllink-y: 14px;
}

/* ── Trees ── globe RIGHT (bigger), cards LEFT */
body[data-frame="trees"] {
  --page-fit: cover;
  --carousel-scrim: 0.74;
  --globe-ring: 0.72;
}
body[data-frame="trees"] .globe-port {
  --globe-x: 70%;
  --globe-y: 56%;
  --globe-size: 80svmin;
}
body[data-frame="trees"] .map-carousel {
  --card-x: 20%;
  --card-y: 55%;
  --card-w: 515px;
  --card-h: 280px;
}

/* ── Blooms ── globe LEFT, cards RIGHT (mirror of Seeds) */
body[data-frame="blooms"] {
  --page-fit: cover;
}
body[data-frame="blooms"] .globe-port {
  --globe-x: 32%;
  --globe-y: 56%;
  --globe-size: 76svmin;
}
body[data-frame="blooms"] .map-titlebar {
  --title-x: 822px;
  --title-y: 76px;
}
body[data-frame="blooms"] .map-tags {
  --tags-x: 823px;
  --tags-y: 136px;
}
body[data-frame="blooms"] .map-carousel {
  --card-x: 78%;
  --card-y: 55%;
  --card-w: 510px;
  --card-h: 275px;
}
body[data-frame="blooms"] > .map-fulllink-overlay {
  --fulllink-x: 187px;
  --fulllink-y: 14px;
}

/* === Mobile responsive adjustments for overlays ============= */

@media (max-width: 540px) {
  body.map-page .map-titlebar {
    top: 56px;
    left: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
  }
  body.map-page .map-tags {
    top: 124px;
    left: 12px;
    max-width: calc(100vw - 24px);
  }
  body.map-page .map-search { width: 110px; font-size: 0.78rem; }
}