/* Live it UP - /map page (map.3.css replaces map.2.css, which stays untouched, as map.2.css did map.1.css: versioned assets are immutable for a
   year, so a changed stylesheet ships under a new name). Tokens, header and footer come from /styles.css; this file only adds the
   page's own parts. Colours are the brand tokens (docs/brandbook.md section 4): text is
   --text-primary or --text-secondary, never --text-tertiary. Weights stay at 600 and below. */

.map-body main { flex: 1 0 auto; }

.map-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 16px;
  padding-bottom: 12px;
}

.map-titlebox { min-width: 0; flex: 1 1 320px; }

.map-below { padding-top: 24px; }

.map-top h1 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 2px;
}

.map-sub {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 680px;
  margin-bottom: 12px;
}

.map-scope {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.map-app-line {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 4px;
}

.map-app-line a,
.map-about a,
.map-attribution a,
.map-noscript a {
  color: var(--accent-light);
}

/* ---- controls ------------------------------------------------------------------------------ */

.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* Equal-width columns; one sliding indicator (::after) sits under the active button. map.2.js sets --seg-i (index of
   the pressed button) and --seg-n (button count) on the group and then data-seg-ready, one frame later, so the first
   placement does not animate. */
.map-seg {
  --seg-i: 0;
  --seg-n: 1;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface-elevated);
}

.map-seg-btn {
  min-height: 44px;
  min-width: 64px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-right: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap; /* equal grid columns are narrow on phones: never break "3 days" onto two lines */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.map-seg-btn:last-child { border-right: 0; }
.map-seg-btn:hover:not(:disabled) { color: var(--text-primary); }

.map-seg-btn[aria-pressed='true'] {
  background: rgba(16, 185, 129, 0.18);
  color: var(--accent-light);
}

.map-seg::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / var(--seg-n));
  height: 2px;
  background: var(--accent);
  transform: translateX(calc(var(--seg-i) * 100%));
  opacity: 0;
  pointer-events: none;
}

.map-seg[data-seg-ready]::after {
  opacity: 1;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-seg-btn:disabled { opacity: 0.45; cursor: default; }
.map-seg-btn:focus-visible { outline-offset: -2px; border-radius: 0; }

/* ---- stage: the map, its states and the card ------------------------------------------------ */

.map-frame {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface-elevated);
}

.map-canvas {
  width: 100%;
  /* The map starts about 170px down at 1280x900 and ends inside the first screen, so the card,
     which sits inside the map, can never be cut off by the bottom of the window. */
  height: clamp(360px, calc(100vh - 190px), 760px);
  height: clamp(360px, calc(100svh - 190px), 760px);
}

.map-frame.view-list .map-canvas,
.map-frame.view-list .map-card { display: none; }

.map-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 10, 12, 0.72);
  color: var(--text-primary);
  font-size: 16px;
}

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

.map-frame.view-list .map-overlay {
  position: static;
  min-height: 140px;
  background: transparent;
}

.map-overlay.is-error p { color: var(--accent-error); }

/* Same-width brand button language as the home page, but never the green primary button: the launch
   form is the only primary action on the site. */
.map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.map-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }

.map-card {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 420px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 16px 16px 16px;
  background: #16161C;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transform: none;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The card grows in from below when [hidden] is removed; closing is instant (display: none). Browsers without
   @starting-style show it instantly. */
@starting-style {
  .map-card { opacity: 0; transform: translateY(12px); }
}

.map-card[hidden] { display: none; }
.map-card:focus { outline: none; }
.map-card:focus-visible { outline: 2px solid var(--border-focused); outline-offset: 2px; }
/* Opened by a finger or a mouse: no ring (map.2.js, openedByPointer). Keyboard opens keep it. */
.map-card.via-pointer:focus-visible,
.map-pin.via-pointer:focus-visible { outline: none; }

.map-card-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.map-card-close:hover { color: var(--text-primary); }

.map-show { padding: 4px 36px 12px 0; }
.map-show + .map-show { border-top: 1px solid var(--border-color); padding-top: 14px; }
.map-show h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin-bottom: 4px; }
.map-show-title { color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }
.map-show-where { color: var(--text-secondary); font-size: 14px; }
.map-show-when { color: var(--text-primary); font-size: 14px; font-weight: 500; margin: 2px 0 12px; }
.map-card-more { color: var(--text-secondary); font-size: 13px; padding-top: 8px; border-top: 1px solid var(--border-color); }

.map-attribution {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

body.no-map .map-attribution { display: none; }

/* ---- pins and clusters (DOM buttons on the canvas) ------------------------------------------- */

/* No `position` here: MapLibre's own `.maplibregl-marker` rule makes the element absolute, and a `position: relative`
   of ours (same specificity, later in the cascade) put every marker back into the normal flow (fixed on master in
   1d3a42c for map.1.css). */
.map-pin,
.map-cluster {
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

/* The pin is a 44px target around a 16px dot. */
.map-pin {
  width: 44px;
  height: 44px;
  background: transparent;
  border-radius: 50%;
}

.map-pin::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0A0A0C;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45), 0 0 14px var(--accent-glow);
  /* The visual scale lives on the dot, never on the marker element: MapLibre writes transform on that. */
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-pin.is-selected::before { transform: scale(1.25); }

.map-pin.has-count::before {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
}

.map-pin.has-count::after {
  content: attr(data-count);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000000;
  font-size: 12px;
  line-height: 1;
}

.map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #000000;
  border: 3px solid rgba(10, 10, 12, 0.85);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 0 18px var(--accent-glow);
}

.map-cluster-sm { width: 44px; height: 44px; font-size: 14px; }
.map-cluster-md { width: 52px; height: 52px; font-size: 15px; }
.map-cluster-lg { width: 62px; height: 62px; font-size: 16px; }

.map-pin:hover::before { background: var(--accent-light); }
.map-cluster:hover { background: var(--accent-light); }

.map-pin:focus-visible,
.map-cluster:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 50%; }

/* ---- notes, list view, noscript, about ---------------------------------------------------- */

.map-notes { padding-top: 12px; }

.map-note {
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 14px;
}

.map-note[hidden] { display: none; }
.map-note-warn { border-color: rgba(52, 211, 153, 0.35); color: var(--text-primary); }

.map-list-view { padding-top: 8px; padding-bottom: 8px; }
.map-list-view[hidden] { display: none; }
.map-list-view h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.map-list-count { color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; }
.map-list { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }

.map-list-item a {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.map-list-item a:hover { border-color: rgba(52, 211, 153, 0.5); background: rgba(255, 255, 255, 0.04); }
.map-list-name { font-size: 16px; font-weight: 600; }
.map-list-where { color: var(--text-secondary); font-size: 14px; }
.map-list-when { color: var(--text-primary); font-size: 14px; font-weight: 500; }
.map-list-cta { color: var(--accent-light); font-size: 14px; font-weight: 600; margin-top: 4px; }

.map-noscript {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--bg-surface);
}

.map-noscript h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.map-noscript p { color: var(--text-secondary); font-size: 15px; }

.map-about { margin: 24px 0 40px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-surface); }
.map-about summary { cursor: pointer; padding: 14px 16px; min-height: 44px; font-size: 15px; font-weight: 600; }
.map-about-body { padding: 0 16px 8px; color: var(--text-secondary); font-size: 14px; }
.map-about-body p { margin-bottom: 12px; }

/* MapLibre's own control buttons stay light on the dark map; only give them the 44px target. */
.maplibregl-ctrl-group button { width: 44px; height: 44px; }

@media (max-width: 560px) {
  /* Compact phone header: one row, the wordmark and the one action. */
  .map-body .glass-header { padding: 8px 0; }
  .map-body .header-inner { flex-wrap: nowrap; gap: 8px; }
  .map-body .nav-links { flex-wrap: nowrap; gap: 8px; }
  .map-body .nav-links a:not(.nav-contact-btn) { display: none; }
  .map-body .nav-contact-btn { padding: 6px 10px; font-size: 13px; }
  .map-body .brand-wordmark { font-size: 19px; gap: 6px; }

  .map-top { padding-top: 10px; padding-bottom: 8px; gap: 6px; }
  .map-top h1 { font-size: 22px; }
  .map-scope { font-size: 13px; }
  /* Both segmented controls on one row, still 44px high. */
  .map-controls { flex-wrap: nowrap; width: 100%; gap: 8px; }
  .map-seg-btn { min-width: 0; padding: 0 6px; font-size: 13px; }
  .map-seg:first-child { flex: 3 1 0; }
  .map-seg:last-child { flex: 2 1 0; }
  .map-canvas { height: clamp(320px, calc(100vh - 215px), 640px); height: clamp(320px, calc(100svh - 215px), 640px); }
  .map-card { left: 8px; right: 8px; bottom: 8px; max-width: none; max-height: 62%; }
}