/* flatradar — interactive coverage map (/map). Self-contained, theme-aware.
   Full-viewport branded d3 orthographic globe + slide-in panel (bottom-sheet on mobile).
   Design-system aliases (--bg-surface, --status-live, --grid-line, --radar-sweep …) are the
   CSS vars the globe engine re-reads each frame, so it re-themes live. No CDNs. */

:root {
  --bg:        #f6f4ee;
  --bg-soft:   #efece3;
  --surface:   #fffefb;
  --surface-2: #faf8f2;
  --ink:       #14201b;
  --ink-soft:  #47554e;
  --ink-faint: #7c8880;
  --line:      #e2ddd0;
  --line-soft: #eae5d9;
  --accent:    #0f9d6b;
  --accent-2:  #0b7d54;
  --accent-ink:#053322;
  --amber:     #c9741a;
  --globe-water: #e7efe9;    /* land-less globe base (light) */
  --globe-atmo:  #0f9d6b;
  --shadow-lg: 0 30px 70px -24px rgba(9,40,29,.30), 0 8px 24px -12px rgba(20,32,27,.14);
  --radius: 16px;
  --display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --sans:    var(--body);
  --mono:    'Space Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- design-system aliases the globe engine reads --- */
  --bg-surface: var(--surface);
  --bg-sunk: var(--bg-soft);
  --status-neutral: #cfcabb;
  --grid-line: rgba(20,32,27,0.045);
  --border: var(--line);
  --status-live: var(--accent);
  --status-soon: var(--amber);
  --radar-sweep: rgba(15,157,107,0.28);
  --text-strong: var(--ink);
  --accent-weak: #e6f6ef;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0a1310;
    --bg-soft:   #0d1a15;
    --surface:   #101e18;
    --surface-2: #13251d;
    --ink:       #eaf2ec;
    --ink-soft:  #a7b8ad;
    --ink-faint: #6f8177;
    --line:      #21362c;
    --line-soft: #1a2c23;
    --accent:    #2fd4a0;
    --accent-2:  #46e0b0;
    --accent-ink:#04140d;
    --amber:     #e59a4a;
    --globe-water: #0e1f18;
    --globe-atmo:  #2fd4a0;
    --shadow-lg: 0 34px 80px -30px rgba(0,0,0,.75), 0 10px 30px -14px rgba(0,0,0,.6);
    --status-neutral: #2b4137;
    --grid-line: rgba(234,242,236,0.05);
    --radar-sweep: rgba(47,212,160,0.30);
    --accent-weak: #0e2a20;
  }
}
:root[data-theme="light"]{ color-scheme: light; --bg:#f6f4ee; --globe-water:#e7efe9;
  --status-neutral:#cfcabb; --grid-line:rgba(20,32,27,0.045); --radar-sweep:rgba(15,157,107,0.28); --accent-weak:#e6f6ef; }
:root[data-theme="dark"] { color-scheme: dark; --bg:#0a1310; --globe-water:#0e1f18;
  --status-neutral:#2b4137; --grid-line:rgba(234,242,236,0.05); --radar-sweep:rgba(47,212,160,0.30); --accent-weak:#0e2a20; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- brand mark (shared with landing) ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { display: inline-flex; }
.brand-word { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.03em; }
.brand-word span { color: var(--accent-2); }
.bm-ring-o { fill: var(--accent-ink); }
@media (prefers-color-scheme: dark) { .bm-ring-o { fill: #06140e; } }
.bm-ring { fill: none; stroke: var(--accent); stroke-width: 1.3; opacity: .85; }
.bm-dot  { fill: var(--accent); }
.bm-sweep{ stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }

/* ---------- header ---------- */
.map-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 60px;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.map-header-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px; }
.map-header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.map-home { font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: color .16s; white-space: nowrap; }
.map-home:hover { color: var(--ink); }
.map-open { padding: 7px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.map-open:hover { background: var(--accent-2); color: var(--accent-ink); }
.map-lang { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--ink-faint); font-family: var(--mono); letter-spacing: .04em; }
.map-lang a { color: var(--ink-faint); transition: color .16s; }
.map-lang a.on { color: var(--ink); }
.map-lang a:hover { color: var(--accent-2); }

/* ---------- globe stage ---------- */
.map-main { position: fixed; inset: 0; }
.globe-canvas { position: absolute; inset: 0; }
.globe-canvas canvas { display: block; outline: none; }

/* intro caption + legend */
.map-intro {
  position: fixed; left: 20px; top: 74px; z-index: 15; max-width: 300px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px;
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px -14px rgba(0,0,0,.4);
  transition: opacity .3s ease, transform .3s ease;
}
.map-intro-text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.map-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.lg-short { display: none; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lg-live { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.lg-soon { background: var(--amber); }
.lg-neutral { background: color-mix(in srgb, var(--ink-faint) 55%, transparent); }

/* reset button */
.map-reset {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 16;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); transition: transform .16s, border-color .2s;
}
.map-reset:hover { border-color: var(--accent); transform: translateX(-50%) translateY(-2px); }

/* hover tooltip — DS surface card (name · status badge · listings) */
.map-tip {
  position: fixed; z-index: 18; pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; min-width: 168px; max-width: 60vw;
  box-shadow: var(--shadow-lg);
}
.map-tip .tip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.map-tip .tip-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.map-tip .tip-badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.map-tip .tip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.map-tip .tip-badge.is-live { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.map-tip .tip-badge.is-soon { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.map-tip .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-soft); }
.map-tip .tip-count { font-family: var(--mono); font-weight: 700; color: var(--ink); letter-spacing: .01em; }

/* ---------- side panel ---------- */
.map-panel {
  position: fixed; top: 60px; right: 0; bottom: 0; z-index: 17; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 28px 26px 32px; overflow-y: auto; box-shadow: var(--shadow-lg);
  transform: translateX(102%); transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.map-panel.open { transform: translateX(0); }
.map-panel[hidden] { display: block; }   /* keep transformable; JS toggles .open + aria */
.mp-close {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer; transition: color .16s, border-color .16s;
}
.mp-close:hover { color: var(--ink); border-color: var(--accent); }
.mp-status {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
}
.mp-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mp-status.is-live { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mp-status.is-soon { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.mp-title { margin: 0 0 10px; font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.mp-blurb { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.mp-sub { margin: 0 0 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.mp-hint { margin: 0 0 14px; font-size: 13px; color: var(--ink-faint); }
.mp-cities { display: flex; flex-direction: column; gap: 8px; }
.mp-city {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: transform .14s, border-color .18s, background .18s;
}
.mp-city:hover { border-color: var(--accent); transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.mp-city-name { flex: none; }
.mp-city .mp-count { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-faint); letter-spacing: .01em; }
.mp-city .mp-arr { flex: none; color: var(--ink-faint); transition: transform .18s, color .18s; }
.mp-city:hover .mp-arr { color: var(--accent-2); transform: translateX(3px); }
.mp-city .mp-count + .mp-arr { margin-left: 2px; }
.mp-city .mp-city-name + .mp-arr { margin-left: auto; }
.mp-soon-teaser { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; font-weight: 650; font-size: 15px;
  cursor: pointer; border: 1px solid transparent; transition: transform .16s ease, background .2s ease;
}
.btn-block { width: 100%; }
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--accent-2); transform: translateY(-2px); }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* footer */
.map-footer {
  position: fixed; left: 0; bottom: 0; z-index: 14; padding: 8px 16px;
  font-size: 11.5px; color: var(--ink-faint);
}
.map-footer a { color: var(--ink-soft); }
.map-footer a:hover { color: var(--accent-2); }

/* ---------- mobile: panel becomes a bottom-sheet ---------- */
@media (max-width: 640px) {
  /* compact legend strip pinned to the bottom — a single row of dot + one word,
     so it steals no globe space (BUG2). Intro sentence hidden on phones. */
  .map-intro {
    left: 12px; right: 12px; top: auto; bottom: 14px; max-width: none;
    padding: 9px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }
  .map-intro-text { display: none; }
  .map-legend { display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 8px; }
  .map-legend li { gap: 6px; font-size: 12px; font-weight: 600; }
  .lg-full { display: none; }
  .lg-short { display: inline; }
  .lg-dot { width: 9px; height: 9px; }
  .lg-live { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
  .map-footer { display: none; }
  .map-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
    max-height: 74vh; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0; padding: 22px 20px 26px;
    transform: translateY(102%);
  }
  .map-panel.open { transform: translateY(0); }
  .map-panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--line);
  }
  .mp-title { font-size: 1.6rem; }
  .map-reset { bottom: auto; top: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}