/* City feature: the full Port Harcourt map (src/life/map.js), drawn bright
   and playful, like a game map: warm green land, sky-blue water with little
   waves, chunky white roads and yellow highways, cars driving, clouds
   drifting, and every place a sticker in its kind's colour on a white name
   tag. The sheet re-points the tokens to light, so the place list, search,
   controls and the travel choices under the map follow. */

#sheet-map {
  --ink: #1d1d1f;
  --ink-2: rgba(29, 29, 31, 0.82);
  --muted: rgba(29, 29, 31, 0.6);
  --faint: rgba(29, 29, 31, 0.4);
  --bg: #f4f7f1;
  --surface: #ffffff;
  --surface-2: #f2f5f1;
  --surface-3: #e7ebe6;
  --fill: rgba(0, 0, 0, 0.06);
  --fill-strong: rgba(0, 0, 0, 0.1);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --material: rgba(255, 255, 255, 0.8);
  --material-strong: rgba(255, 255, 255, 0.95);
  --accent: #008751;
  --accent-rgb: 0, 135, 81;
  --accent-hover: #009a5d;
  --accent-press: #007645;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --accent-line: rgba(var(--accent-rgb), 0.5);
  --on-accent: #ffffff;
  --on-ink: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  color-scheme: light;
}
#map-wrap { position: relative; display: block; }
#sheet-map { background: var(--bg); overflow: hidden; height: 100dvh; max-height: 100dvh; width: 100%; min-width: 0; }
#sheet-map > header { flex: 0 0 auto; }
#map-wrap { width: 100%; min-width: 0; overflow: hidden; }
.citymap {
  /* Map-only geography tones. */
  --cm-land: #eaf4d9;
  --cm-wetland: #c4e7a9;
  --cm-water: #59c3f0;
  --cm-shore: #b4e6fb;
  --cm-water-text: #0a6a96;
  --cm-road: #ffffff;
  --cm-casing: #ddcb98;
  --cm-trunk: #ffd84d;
  --cm-area: #2e6a3a;
  --g: #12a5a0; /* a pin's kind colour (.grp-* below) */
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px;
  font-family: var(--font);
}
/* The kinds of place (map.js GROUPS): pins, bubbles, chips and list icons. */
.citymap .grp-food { --g: #ff7a1a; }
.citymap .grp-party { --g: #f0428f; }
.citymap .grp-chill { --g: #12a5a0; }
.citymap .grp-hustle { --g: #7c5cfa; }
.citymap .grp-learn { --g: #3b7bf6; }
.citymap .grp-move { --g: #e89b00; }
.citymap .grp-sport { --g: #e5484d; }
.citymap .grp-faith { --g: #a36b2e; }
.citymap .grp-home { --g: #008751; }

/* --- Side: search, chips, summary, place list ---------------------------- */
.cm-side {
  display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0;
  padding: 10px; border-radius: var(--r-lg); background: var(--bg);
}
.cm-search-row { position: relative; display: flex; gap: 8px; }
.cm-search-ico { position: absolute; z-index: 1; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
#map-wrap .cm-search-ico svg { display: block; width: 18px; height: 18px; max-height: none; }
.cm-search {
  flex: 1; min-width: 0; min-height: var(--h); padding: 10px 12px 10px 38px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 400 15px var(--font); outline: 0; transition: border-color 0.15s, box-shadow 0.15s;
}
.cm-search::placeholder { color: var(--faint); }
/* The clear button: a grey circle with a white cross, as on iOS. */
.cm-search::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; cursor: pointer;
  background: var(--faint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3l-4 4' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.cm-search:focus, .cm-search:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: 0; }
.cm-list-button { display: none; }

/* Chips: All, Food, Party… a dot in the kind's colour; the chosen one fills. */
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chips:empty { display: none; }
.cm-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 600 13px var(--font); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.cm-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--g); }
.cm-chip[data-kind=""] { --g: var(--ink); }
.cm-chip[data-kind=""]::before { display: none; }
.cm-chip:active { transform: scale(0.95); }
.cm-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-chip[aria-pressed="true"] { background: var(--g); border-color: transparent; color: #fff; }
.cm-chip[aria-pressed="true"]::before { background: #fff; }

.cm-summary { margin: 0 4px; color: var(--muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cm-list {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; min-width: 0;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  overscroll-behavior: contain;
}
.cm-list > li { position: relative; min-width: 0; max-width: 100%; }
/* Hairlines between rows, inset to the text like a grouped list. */
.cm-list > li + li::before { content: ""; position: absolute; z-index: 1; left: 56px; right: 0; top: 0; height: 1px; background: var(--line); pointer-events: none; }
.cm-item {
  width: 100%; min-width: 0; max-width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  padding: 8px 12px; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); text-align: left;
  transition: background-color 0.15s;
}
.cm-item:hover, .cm-item:focus-visible { background: var(--surface-2); }
.cm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cm-item:active { background: var(--fill); }
/* The icon well: a round sticker in the place's kind colour. */
.cm-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--g); color: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.18);
}
#map-wrap .cm-dot svg { display: block; width: 17px; height: 17px; max-height: none; }
.cm-text { flex: 1; min-width: 0; }
.cm-text b, .cm-text small { display: block; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.cm-text b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cm-text small { margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.cm-meta { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-meta:empty { display: none; }
.cm-meta.here { color: var(--accent); }
.cm-meta.busy { color: #e8255a; }
/* Your own place: the icon well is green. */
.cm-item:has(.cm-meta.here) .cm-dot { background: var(--accent); }
.cm-empty { padding: 14px 12px; color: var(--muted); font-size: 13px; }

/* --- Stage -------------------------------------------------------------- */
.cm-stage {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--cm-land);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#map-wrap .cm-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
.cm-dragging .cm-svg { cursor: grabbing; }
.cm-land { fill: var(--cm-land); }

/* Geography (strokes do not scale; widths step with the zoom classes). */
.cm-mangrove { fill: var(--cm-wetland); }
.cm-water { fill: var(--cm-water); stroke: var(--cm-shore); stroke-width: 3px; stroke-linejoin: round; }
.cm-waves { fill: url(#cm-waves); pointer-events: none; }
.cm-river, .cm-stream { fill: none; stroke: var(--cm-water); stroke-linecap: round; stroke-linejoin: round; }
.cm-road, .cm-casing { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cm-casing { stroke: var(--cm-casing); }
.cm-primary, .cm-secondary { stroke: var(--cm-road); }
.cm-trunk { stroke: var(--cm-trunk); }
.cm-tertiary { stroke: var(--cm-road); opacity: 0.8; }
.z1 .cm-river { stroke-width: 1.6px; } .z1 .cm-stream { stroke-width: 0.8px; }
.z1 .cm-trunk { stroke-width: 2.6px; } .z1 .cm-primary { stroke-width: 1.8px; } .z1 .cm-casing { stroke-width: 4px; }
.z1 .cm-secondary { stroke-width: 1.1px; } .z1 .cm-tertiary { stroke-width: 0.7px; }
.z2 .cm-river { stroke-width: 2.6px; } .z2 .cm-stream { stroke-width: 1.2px; }
.z2 .cm-trunk { stroke-width: 4.2px; } .z2 .cm-primary { stroke-width: 3.2px; } .z2 .cm-casing { stroke-width: 6px; }
.z2 .cm-secondary { stroke-width: 2.2px; } .z2 .cm-tertiary { stroke-width: 1.3px; }
.z3 .cm-river { stroke-width: 4px; } .z3 .cm-stream { stroke-width: 2px; }
.z3 .cm-trunk { stroke-width: 7.5px; } .z3 .cm-primary { stroke-width: 6px; } .z3 .cm-casing { stroke-width: 10px; }
.z3 .cm-secondary { stroke-width: 4px; } .z3 .cm-tertiary { stroke-width: 2.6px; opacity: 1; }

/* Labels with a soft halo (keep the fonts in map.js FONT). */
.cm-label { pointer-events: none; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--cm-land); stroke-linejoin: round; stroke-opacity: 0.9; }
.cm-label-a { font: 700 10px var(--font); letter-spacing: 0.6px; fill: var(--cm-area); stroke-width: 3px; opacity: 0.85; }
.cm-label-w { font: italic 500 11px var(--font); fill: var(--cm-water-text); stroke: var(--cm-shore); stroke-width: 3px; }
.cm-label-r { font: 500 10px var(--font); fill: var(--ink-2); stroke: #fff; stroke-width: 3px; }

/* --- Clouds drifting over the land (screen space, under the pins) -------- */
.cm-sky { pointer-events: none; }
.cm-cloud path { fill: #fff; opacity: 0.55; }
.cm-cloud { animation: cm-drift 90s linear infinite; }
.cm-cloud.c0 { --y: 170px; animation-duration: 80s; animation-delay: -30s; }
.cm-cloud.c1 { --y: 380px; animation-duration: 110s; animation-delay: -85s; scale: 1.4; }
.cm-cloud.c2 { --y: 600px; animation-duration: 95s; animation-delay: -10s; scale: 0.9; }
@keyframes cm-drift {
  from { transform: translate(-90px, var(--y)); }
  to { transform: translate(calc(var(--cm-w, 400px) + 90px), var(--y)); }
}

/* --- Cars on the big roads (map.js drive) -------------------------------- */
.cm-cars { pointer-events: none; }
.cm-cars .body { stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.8px; }
.cm-cars .roof { fill: rgba(255, 255, 255, 0.7); }

/* --- Place pins: stickers in their kind's colour, names on white tags ---- */
.citymap .pin { cursor: pointer; outline: none; }
.citymap .pin.off, .citymap .pin.grouped { display: none; }
.citymap .pin .glyph {
  transform: scale(var(--pin-k, 1)); transition: transform 0.15s ease-out;
  animation: cm-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
@keyframes cm-pop { from { transform: scale(0); } }
.citymap .pin .halo { fill: rgba(0, 0, 0, 0.16); transform-box: fill-box; transform-origin: center; transform: scale(0.85, 0.34); }
.citymap .pin .core { fill: var(--g); stroke: #fff; stroke-width: 2.5px; }
.citymap .pin .icon { color: #fff; stroke-width: 3.2px; pointer-events: none; }
.citymap .pin .tag { fill: #fff; stroke: rgba(0, 0, 0, 0.1); stroke-width: 1px; }
/* No halo (life.css gives .pin text one): the tag is the backing. */
.citymap .pin text.name { font: 600 12px var(--font); letter-spacing: 0; fill: var(--ink); stroke: none; }
.citymap .pin text.count { display: none; font: 600 10.5px var(--font); letter-spacing: 0; fill: #fff; stroke: none; }
.citymap .pin.here text.count { display: inline; }
.citymap .pin .badge { display: none; }
.citymap .pin.busy .badge { display: inline; }
.citymap .pin .badge, .cm-bubbles .badge { transform-box: fill-box; transform-origin: center; animation: cm-beat 2.4s ease-in-out infinite; }
@keyframes cm-beat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.3); } 90% { transform: scale(0.95); } }
.citymap .pin .badge circle, .cm-bubbles .badge circle { fill: #ff3d71; stroke: #fff; stroke-width: 1.5px; }
.citymap .pin .badge text, .cm-bubbles .badge text { font: 700 9.5px var(--font); fill: #fff; text-anchor: middle; }
.citymap .pin.nolabel .tag, .citymap .pin.nolabel text.name, .citymap .pin.nolabel text.count { display: none; }
.citymap .pin.nolabel:hover text.name, .citymap .pin.nolabel:focus-visible text.name, .citymap .pin.nolabel.hover text.name,
.citymap .pin.nolabel:hover .tag, .citymap .pin.nolabel:focus-visible .tag, .citymap .pin.nolabel.hover .tag { display: inline; }
.citymap .pin:focus-visible .core { stroke: var(--ink); stroke-width: 3px; }
.citymap .pin:hover .glyph, .citymap .pin.hover .glyph { transform: scale(calc(var(--pin-k, 1) * 1.12)); }
/* The picked place: bigger, with a dark tag. */
.citymap .pin.picked .glyph { transform: scale(calc(var(--pin-k, 1) * 1.2)); }
.citymap .pin.picked .tag { fill: var(--ink); stroke: none; }
.citymap .pin.picked text.name { fill: #fff; }
/* You: a green sticker and a green tag. */
.citymap .pin.here .core { fill: var(--accent); }
.citymap .pin.here .tag { fill: var(--accent); stroke: none; }
.citymap .pin.here text.name { fill: #fff; }
/* Verified businesses (Update 2026-10-12): a smaller white pin ringed in
   green; a tap names the business, it is not a place you ride to. */
.citymap .pin.mark .glyph { transform: scale(calc(var(--pin-k, 1) * 0.82)); }
.citymap .pin.mark .core { fill: #fff; stroke: var(--accent); stroke-width: 2.5px; }
.citymap .pin.mark .icon { color: var(--accent); }
.citymap .pin.mark text.name { font-size: 11px; }
/* "You are here": two green pulses when the map opens (display:none restarts
   them), then a steady ring. */
.citymap .pin.here .halo {
  fill: rgba(var(--accent-rgb), 0.18); stroke: rgba(var(--accent-rgb), 0.6); stroke-width: 1.5px; transform: scale(1.5);
  animation: cm-pulse 1.4s ease-out 2, cm-ring 0.3s ease-out 2.8s;
}
@keyframes cm-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes cm-ring { from { transform: scale(1.2); opacity: 0; } }

/* --- Bubbles: places too close together at this zoom ---------------------- */
.cm-bubbles .bubble { cursor: pointer; outline: none; animation: cm-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
.cm-bubbles .ball { fill: #fff; stroke: var(--g); stroke-width: 4px; }
.cm-bubbles .peek { fill: var(--g); stroke: #fff; stroke-width: 2px; }
.cm-bubbles text.n { font: 700 14px var(--font); text-anchor: middle; fill: var(--ink); pointer-events: none; }
.cm-bubbles .bubble:hover .ball, .cm-bubbles .bubble:focus-visible .ball { stroke-width: 5.5px; }
.cm-bubbles .bubble:focus-visible .ball { stroke: var(--ink); }

/* --- Boat cruise: a party boat moored beside the jetty pin (map.js boatMarker) */
.citymap .cm-boat .art { transform: scale(var(--pin-k, 1)); }
.citymap .cm-boat .bob { animation: cm-bob 2.6s ease-in-out infinite; }
@keyframes cm-bob { 50% { transform: translateY(-1.5px) rotate(-2deg); } }
.citymap .cm-boat .hit { fill: transparent; }
.citymap .cm-boat .pool { fill: var(--cm-water); }
.citymap .cm-boat .wake { fill: none; stroke: #fff; stroke-width: 1.5px; stroke-linecap: round; opacity: 0.8; }
.citymap .cm-boat .hull { fill: #fff; stroke: #1d1d1f; stroke-width: 1.3px; stroke-linejoin: round; }
.citymap .cm-boat .stripe { stroke: #f0428f; stroke-width: 2.2px; }
.citymap .cm-boat .deck { fill: #fff; stroke: #1d1d1f; stroke-width: 1.2px; }
.citymap .cm-boat .windows { fill: #59c3f0; }
.citymap .cm-boat .canopy { fill: #f0428f; stroke: #1d1d1f; stroke-width: 1.2px; stroke-linejoin: round; }
.citymap .cm-boat .mast { stroke: #1d1d1f; stroke-width: 1.3px; }
.citymap .cm-boat .flag { fill: #ffd84d; stroke: #1d1d1f; stroke-width: 1px; stroke-linejoin: round; }
.citymap .cm-boat .rope { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.3px; stroke-dasharray: 2.5 2; }
.citymap .cm-boat text {
  font: 600 11px var(--font); fill: var(--cm-water-text); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round;
}
.citymap .pin:hover .cm-boat .hull, .citymap .pin:focus-visible .cm-boat .hull, .citymap .pin.picked .cm-boat .hull { stroke: var(--accent); }

/* --- Live player pins: green dots with the player's initial --------------- */
.cm-live .live { cursor: pointer; outline: none; }
.cm-live .live circle { fill: var(--accent); stroke: #fff; stroke-width: 2px; }
.cm-live .live:focus-visible circle, .cm-live .live:hover circle { stroke: var(--ink); }
.cm-live .live line { stroke: var(--accent-line); stroke-width: 1.2px; }
.cm-live .live text { font: 600 10px var(--font); text-anchor: middle; fill: var(--on-accent); pointer-events: none; }
.cm-live .live.more { cursor: default; }
.cm-live .live.more circle { fill: #fff; stroke: var(--accent); }
.cm-live .live.more text { fill: var(--ink); }
.cm-tip {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 6px)); pointer-events: none;
  padding: 5px 10px; border-radius: 999px; background: var(--material-strong); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

/* --- Controls, scale, credit -------------------------------------------- */
.cm-controls { position: absolute; z-index: 2; right: 10px; bottom: 34px; display: grid; gap: 8px; }
.cm-zoom {
  display: grid; overflow: hidden; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow);
}
.cm-controls button {
  width: 42px; height: 42px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 0; background: var(--surface); color: var(--ink);
  transition: background-color 0.15s;
}
.cm-zoom button + button { border-top: 1px solid var(--line); }
.cm-controls > button { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cm-controls button:hover { background: var(--surface-2); }
.cm-controls button:active { background: var(--fill); }
.cm-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#map-wrap .cm-controls svg { display: block; width: 20px; height: 20px; max-height: none; }
.cm-scale {
  position: absolute; z-index: 2; left: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; pointer-events: none;
}
.cm-scale i { height: 6px; border: 1.5px solid var(--ink-2); border-top: 0; }
.cm-credit {
  position: absolute; z-index: 2; right: 8px; bottom: 6px; padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--material); color: var(--muted); font-size: 10.5px; text-decoration: none;
}
.cm-credit:hover { color: var(--ink); text-decoration: underline; }

/* --- Phones: the map fills the sheet, search and chips float on top ------ */
@media (max-width: 760px) {
  .citymap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cm-stage { grid-row: 1; grid-column: 1; border-radius: 0; border: 0; }
  .cm-side {
    position: absolute; z-index: 4; top: 8px; left: 8px; right: 8px; max-height: calc(100% - 16px);
    gap: 6px; padding: 0; border-radius: 0; background: none; pointer-events: none;
  }
  .cm-search-row { pointer-events: auto; }
  .cm-search {
    border-color: var(--line); background: var(--material-strong); box-shadow: var(--shadow);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  }
  .cm-list-button {
    display: block; flex: none; min-height: var(--h); padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--material-strong); color: var(--accent); font-size: 15px; font-weight: 600; box-shadow: var(--shadow);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  }
  .cm-list-button:active { transform: scale(0.97); }
  /* One row of chips that scrolls sideways, edge to edge. */
  .cm-chips {
    pointer-events: auto; flex-wrap: nowrap; overflow-x: auto; margin: 0 -8px; padding: 2px 8px 4px;
    scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x;
  }
  .cm-chips::-webkit-scrollbar { display: none; }
  .cm-side:not(.open) .cm-summary, .cm-side:not(.open) .cm-list { display: none; }
  .cm-side.open .cm-summary {
    pointer-events: auto; margin: 0; padding: 6px 12px; border-radius: var(--r); background: var(--material-strong);
    box-shadow: var(--shadow-sm); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  }
  .cm-side.open .cm-list {
    pointer-events: auto; flex: 0 1 auto; border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .cm-side.open { height: calc(100% - 16px); }
  .cm-controls { bottom: 30px; }
  /* The credit takes the bottom edge; the scale sits just above it. */
  .cm-scale { bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .citymap .pin.here .halo, .citymap .pin .glyph, .cm-bubbles .bubble,
  .citymap .pin .badge, .cm-bubbles .badge, .citymap .cm-boat .bob { animation: none; }
  .citymap .pin .glyph { transition: none; }
  .cm-sky { display: none; }
}