/* Live it UP - /map page, map.5.css. It replaces map.4.css (which stays on disk, untouched: versioned assets are immutable for a year):
   everything above the genre section at the end is map.4.css unchanged, and that last section is new - the genre filter (button, panel,
   pills, filter line) and the genre chips on a show. Design: docs/design/2026-10-13-genre-filters/design-spec.md. No new colour: every
   value is an existing token or an existing literal. */
/* 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); }

/* Since map.4: the line that says why the map opened where it did, with the button that puts the whole world back. */
.map-geo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-primary); }
.map-geo-note[hidden] { display: none; }
.map-geo-note .map-btn { min-height: 44px; flex: none; }

.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%; }
}

/* ================================================================================================================================
   Genre filter (since map.5). The control is one more button in .map-controls; the panel is a popover on wide screens and a bottom
   sheet at 560px and below; a show carries up to two static chips.
   ================================================================================================================================ */

/* ---- the control: one more button in .map-controls -------------------------------------------- */
.map-genre-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.map-genre-btn:hover { color: var(--text-primary); }
.map-genre-btn svg { width: 16px; height: 16px; flex: none; }
.map-genre-btn[aria-expanded='true'] { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.25); }
/* Active = at least one genre picked. Same tint as a pressed segment. */
.map-genre-btn.is-active {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
  color: var(--accent-light);
}
.map-genre-btn:focus-visible { border-radius: 12px; }
.map-genre-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #000000;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.map-genre-badge[hidden] { display: none; }

/* ---- the active-filter line under the scope line ----------------------------------------------- */
.map-filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.map-filter-line[hidden] { display: none; }
.map-filter-line b { color: var(--text-primary); font-weight: 500; }
.map-filter-line .short { display: none; }
.map-linkbtn {
  min-height: 44px;           /* 44px target, 20px of visible text */
  margin: -12px 0;            /* ...without making the line 44px tall */
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--accent-light);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.map-linkbtn:hover { text-decoration: underline; }

/* ---- the panel: popover on wide screens, bottom sheet at 560px and below ------------------------ */
.map-top { position: relative; }
.map-genre-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% - 4px);
  right: 24px;                /* the .container gutter */
  width: 440px;
  max-height: min(560px, calc(100svh - 200px));
  display: flex;
  flex-direction: column;
  background: #16161C;        /* the map card's surface */
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}
.map-genre-panel[hidden] { display: none; }
.map-genre-head { padding: 16px 16px 8px; }
.map-genre-head h2 { font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.map-genre-head p { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.map-genre-body { flex: 1 1 auto; min-height: 0; padding: 4px 16px 12px; overflow-y: auto; }
.map-genre-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.map-genre-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.map-genre-pill:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.25); }
.map-genre-pill .n { color: var(--text-secondary); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.map-genre-pill .tick { display: none; width: 14px; height: 14px; flex: none; }
.map-genre-pill[aria-pressed='true'] {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--accent);
  color: var(--accent-light);
  font-weight: 600;
}
.map-genre-pill[aria-pressed='true'] .tick { display: block; }
.map-genre-pill[aria-pressed='true'] .n { color: var(--accent-light); }
.map-genre-pill:disabled { opacity: 0.45; cursor: default; }
/* The global :focus-visible ring (styles.css) has radius 4; a pill keeps its own shape. Keyboard only, as everywhere. */
.map-genre-pill:focus-visible { border-radius: 999px; }
.map-genre-panel:focus,
.map-genre-panel:focus-visible { outline: none; }
/* A tap or a click puts focus back by script; Chrome may draw the ring on it. map.7.js marks such an element `via-pointer` (the rule the
   card and the pins already follow); any key press hands the ring back. */
.map-genre-btn.via-pointer:focus-visible,
.map-genre-pill.via-pointer:focus-visible,
.map-linkbtn.via-pointer:focus-visible { outline: none; }
.map-genre-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}
.map-genre-foot .map-genre-count { color: var(--text-secondary); font-size: 13px; }
.map-genre-foot .map-genre-count b { color: var(--text-primary); font-weight: 600; }
.map-genre-actions { display: flex; gap: 8px; }
.map-genre-foot .map-btn { min-height: 44px; padding: 0 16px; }
.map-genre-foot .map-btn:disabled { opacity: 0.45; cursor: default; }
.map-genre-scrim { display: none; }

/* The "Clear genre filter" button in the empty-view note. */
.map-empty-btn { margin-top: 8px; display: flex; width: fit-content; }

/* ---- genre chips on a show (map card and list) ------------------------------------------------- */
.map-genres { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 8px; }
.map-show .map-genres { margin: 2px 0 6px; }
.map-genre-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.map-genre-chip.is-match {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-light);
}
.map-genre-chip.more { background: transparent; }
.map-list-item .map-genres { margin: 4px 0 2px; }

/* ---- narrow screens ----------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .map-seg:first-child { flex: 3 1 0; }
  .map-seg:nth-child(2) { flex: 2 1 0; }
  .map-genre-btn { flex: none; padding: 0 12px; font-size: 13px; gap: 6px; }
  /* The long sentence moves into the panel; the phone line keeps the picks and the count. */
  .map-filter-line { font-size: 13px; }
  .map-filter-line .long { display: none; }
  .map-filter-line .short { display: inline; }

  .map-genre-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(10, 10, 12, 0.72);   /* the map overlay's own scrim */
  }
  .map-genre-scrim[hidden] { display: none; }
  .map-genre-panel {
    position: fixed;
    z-index: 51;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: 85vh;
    max-height: 85svh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .map-genre-panel::before {          /* grab handle, decorative */
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--border-default);
  }
  .map-genre-foot { flex-wrap: nowrap; }
  .map-genre-foot .map-btn { flex: 1 1 0; }
  .map-genre-actions { flex: 1 1 auto; }
}

/* Very narrow phones: the button keeps its 44px but shows the icon and the badge only; its accessible name is unchanged. */
@media (max-width: 360px) {
  .map-genre-btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .map-genre-btn { min-width: 44px; padding: 0 10px; }
}