/* Design v2 (10 Oct 2026): the cities map. One sheet per page, loaded last there (scripts/pages/src/<page>.html "styles").
   Phone first; the shared tokens come from style.css, each with a fallback here; motion only inside prefers-reduced-motion: no-preference.
   d3 (11 Oct 2026, the owner: "the claim a city page in both phone and desktop version: there are significant design issues"):
   a calm title block with strong facts only, on one line; the whole world inside the map on a computer and the map inside the first
   screen; nothing picked for the visitor ("Find your city" in the map's bottom slot); the card above a phone's tab bar; no empty blocks.
   Design v5 (1 Nov 2026, Midnight Atlas): every colour is a token or a triplet tint (teal = live, gold = founded, navy-black shadows); the
   find pill, the menu and the suggestions are glass on --bg-2 with --e3; hover and focus move on --dur-2/--ease-out, motion only when welcome. */

/* headings never end on a lone word (the Most wanted title, the panel's, the list's) */
main :is(h1, h2, h3) { text-wrap: balance; }

/* =====================================================================
   The title block: kicker, title (one line), lead; then the facts: communities, countries and territories, official boundaries always,
   founded / choosing a founder / verified members from their threshold (cities.js fitFacts: as many as fit on one line). A phone: one
   inline line under the title. A computer: the title left, the facts right as figures over labels, the status pill above them.
   ===================================================================== */
#cities .cities-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2, 8px); align-items: end; padding: 0 0 var(--sp-3, 12px); }
#cities .cities-intro__head { min-width: 0; }
#cities .cities-intro .kicker { margin: 0 0 var(--sp-2, 8px); }
#cities .cities-intro .page-title { margin: 0; white-space: nowrap; }
#cities .cities-intro .lead { margin: var(--sp-2, 8px) 0 0; max-width: none; color: var(--muted); }
#cities .cities-intro__side { min-width: 0; }
#cities .city-status { display: none; }
#cities .cities-intro .city-stats { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; margin: 0; padding: 0; }
/* one line box per fact (the separator too), so every fact has the same top: the facts are one line, measurably */
#cities .cities-intro .city-stats li { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; white-space: nowrap; font-size: var(--fs-sm, .875rem); line-height: 1.35; }
#cities .cities-intro .city-stats li:not([hidden]) ~ li:not([hidden])::before { content: "·"; margin: 0 9px 0 4px; color: var(--faint); }
#cities .cities-intro .city-stats strong { display: inline; font: 650 var(--fs-base, 1rem)/1.35 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
#cities .cities-intro .city-stats span { display: inline; margin: 0; font-size: var(--fs-sm, .875rem); line-height: 1.35; color: var(--muted); }
@media (max-width: 600px) {
  .page-hero--map { padding-top: var(--sp-4, 16px); }
  #cities .cities-intro { gap: var(--sp-2, 8px); padding-bottom: var(--sp-3, 12px); }
  #cities .cities-intro .kicker { margin-bottom: 6px; }
  #cities .cities-intro .page-title { font-size: clamp(2rem, 9vw, 2.5rem); }
  #cities .cities-intro .lead { margin-top: 6px; font-size: var(--fs-base, 1rem); line-height: 1.45; }
}
@media (max-width: 360px) {
  #cities .cities-intro .city-stats strong { font-size: .9375rem; }
  #cities .cities-intro .city-stats span { font-size: .78125rem; }
  #cities .cities-intro .city-stats li:not([hidden]) ~ li:not([hidden])::before { margin: 0 7px 0 3px; }
}
/* a short phone (an iPhone SE): the map keeps its room, the rules are one tap away in the panel below */
@media (max-width: 600px) and (max-height: 640px) { #cities .cities-intro .lead { display: none; } }
/* a computer: title left, figures right (at most 4, one line, the right edge on the map card's), the status pill above them */
@media (min-width: 1024px) {
  #cities .cities-intro { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; column-gap: var(--sp-6, 32px); padding-bottom: var(--sp-4, 16px); }
  #cities .cities-intro .lead { white-space: nowrap; font-size: var(--fs-md, 1.125rem); }
  #cities .cities-intro__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--sp-3, 12px); padding-bottom: 4px; }
  #cities .city-status { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 5px 12px 5px 9px; border-radius: var(--r-pill, 999px); border: 1px solid rgba(var(--ok-rgb),.35);
    background: var(--ok-soft, rgba(52,211,153,.14)); color: var(--ok-text); font: 600 var(--fs-xs, .75rem)/1.2 var(--body); letter-spacing: .01em; white-space: nowrap; }
  #cities .city-status svg { flex: none; }
  #cities .cities-intro .city-stats { justify-content: flex-end; align-items: stretch; }
  #cities .cities-intro .city-stats li { display: grid; align-content: end; gap: 5px; text-align: left; }
  #cities .cities-intro .city-stats li:not([hidden]) ~ li:not([hidden]) { margin-left: var(--sp-4, 16px); padding-left: var(--sp-4, 16px); border-left: 1px solid var(--line); }
  #cities .cities-intro .city-stats li:not([hidden]) ~ li:not([hidden])::before { content: none; }
  #cities .cities-intro .city-stats strong { font-size: var(--fs-lg, 1.375rem); line-height: 1.05; letter-spacing: -.02em; }
  #cities .cities-intro .city-stats span { font-size: var(--fs-xs, .75rem); line-height: 1.2; }
}
@media (min-width: 1280px) {
  #cities .cities-intro .city-stats li:not([hidden]) ~ li:not([hidden]) { margin-left: var(--sp-5, 24px); padding-left: var(--sp-5, 24px); }
}

/* =====================================================================
   The map stage: inside the first screen. A phone: from under the title to 8 px above the tab bar (cities.js sets --stage-top, the
   stage's place on the page), 280 px at least. A computer: about 2.3:1 (the whole world fills it with little ocean around), never past
   the first screen.
   ===================================================================== */
@media (max-width: 900px) {
  #city-stage { height: calc(100vh - var(--stage-top, 220px) - var(--bottom-bars, 67px) - 8px); height: calc(100svh - var(--stage-top, 220px) - var(--bottom-bars, 67px) - 8px); min-height: 280px; }
}
/* a phone: the stage leaves room for the one-line legend under it, so the first screen ends on the legend, whole, 10 px above the tab bar
   (it used to end on a line of the legend cut by the see-through tab bar); what follows starts below the tab bar (the fold's margin) */
@media (max-width: 600px) {
  #city-stage { --legend-room: 40px; height: calc(100vh - var(--stage-top, 220px) - var(--bottom-bars, 67px) - var(--legend-room)); height: calc(100svh - var(--stage-top, 220px) - var(--bottom-bars, 67px) - var(--legend-room)); min-height: 236px; }
}
/* a tablet (601 to 900 px): the whole world fits the stage (cities.js, a stage 600 px wide or more), so the stage is no taller than the
   world needs (at 900 px it was a small world in a tall frame, with wide empty ocean bands) */
@media (min-width: 601px) and (max-width: 900px) {
  #cities .citymap { container-type: inline-size; }
  #city-stage { height: min(calc(100svh - var(--stage-top, 220px) - var(--bottom-bars, 67px) - 8px), calc(100cqw / 1.75)); min-height: 360px; }
}
@media (min-width: 901px) {
  #cities .citymap { container-type: inline-size; }
  #city-stage { height: 490px; height: clamp(420px, calc(100cqw / 2.3), calc(100svh - var(--stage-top, 250px) - 28px)); }
}
#city-stage.is-full { height: 100vh; height: 100dvh; min-height: 0; }
/* full screen covers the floating header, the tab bar and the feedback button: the hero's own layer (.page-hero isolates its glow) would
   keep the stage's z-index inside it, under them (the top zoom button sat under the header on a phone) */
html.map-is-full #cities.page-hero { isolation: auto; }
/* a search suggestion picked with a tap or a click: the map takes the keyboard without a ring round all of it (a key press brings it back) */
.citymap canvas.is-quiet-focus:focus-visible { outline: none; }
/* the light map: no grey vignette on its edges (it read as dirt on the white land), and a faint blue ocean so the land stands out */
/* (measured: the edges of the light map within about 10% of its middle's lightness; they were 30% darker) */
:root[data-theme="light"] #city-canvas { box-shadow: inset 0 0 60px rgba(var(--ink),.08); }
:root[data-theme="light"] #city-stage { --map-bg: radial-gradient(80% 70% at 30% 35%, rgba(0,203,182,.04), transparent 60%), radial-gradient(120% 90% at 55% 45%, #E6F0FA, #D9E6F4); }

/* =====================================================================
   The map's controls: the magnifier (zoomed in: back to the search), + and − as one control, ⋯ for the rest (whole world, find my city,
   colours, full screen) on every screen: six 44 px squares were a 300 px tower on a 420 px map.
   ===================================================================== */
.map-ctrl { gap: var(--sp-2, 8px); }
.map-zoom { display: grid; }
.map-zoom button:first-child { border-radius: var(--r-chip, 12px) var(--r-chip, 12px) 0 0; }
.map-zoom button + button { margin-top: -1px; border-radius: 0 0 var(--r-chip, 12px) var(--r-chip, 12px); }
.map-zoom button:hover { transform: none; }
.map-search svg, .map-more svg { display: block; margin: auto; }
#city-stage[data-crosshair="off"] .map-search { display: none; }
.map-menu { display: none; position: absolute; right: calc(100% + 8px); top: 0; z-index: 5; width: 196px; padding: 6px; border-radius: var(--r-chip, 12px); background: var(--surface-2, var(--bg-2));
  border: 1px solid var(--line-2); box-shadow: var(--e3, 0 24px 60px -24px rgba(2,8,20,.8)); }
.map-ctrl.is-menu .map-menu { display: grid; gap: 2px; }
.map-ctrl .map-more { display: grid; place-items: center; }
.map-menu__ic { display: grid; place-items: center; font: inherit; }
.map-menu__ic svg { width: 18px; height: 18px; }
.map-ctrl .map-menu button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-xs, 8px);
  background: none; backdrop-filter: none; font: 600 var(--fs-sm, .875rem) var(--body); text-align: left; }
.map-ctrl .map-menu button::after { inset: 0; }
.map-ctrl .map-menu button:hover { background: var(--card-2); transform: none; }
.map-ctrl .map-menu button[aria-pressed="true"] { background: var(--accent-soft, rgba(0,203,182,.12)); color: var(--pin-2); }
.map-menu .map-menu__ic { width: 22px; font-size: 1.1rem; }
.map-menu .map-menu__label { display: inline; font-style: normal; }
.map-ctrl button { width: 44px; height: 44px; }
.map-ctrl button::after { inset: 0; }

/* =====================================================================
   "Find your city": the map's bottom slot on the first view. A phone: one pill (the field and a 44 px location button). A computer: one
   bar in the ocean band under the world (cities.js keeps that band free), centred under it, with its title and "Use my location".
   The suggestions open upward, inside the map.
   ===================================================================== */
.map-find { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; height: 56px; margin: 0; padding: 5px 5px 5px 6px;
  border-radius: var(--r-pill, 999px); background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--line-2);
  box-shadow: 0 18px 44px -18px rgba(2,8,20,.75), inset 0 1px 0 rgba(var(--ink),.06); }
@media (hover: hover) { .map-find:hover { border-color: var(--accent-line); } }
.map-find:focus-within { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 4px var(--accent-soft, rgba(0,203,182,.12)), 0 18px 44px -18px rgba(2,8,20,.75); }
:root[data-theme="light"] .map-find { box-shadow: 0 18px 40px -20px rgba(12,35,68,.4), inset 0 1px 0 rgba(255,255,255,.8); }
/* the light pill's own shadow is more specific than the focus rule above: its teal ring, said again (the ring used to vanish in light) */
:root[data-theme="light"] .map-find:focus-within { box-shadow: 0 0 0 4px var(--accent-soft, rgba(11,122,112,.09)), 0 18px 40px -20px rgba(12,35,68,.4), inset 0 1px 0 rgba(255,255,255,.8); }
/* keyboard focus inside the pill (the field, the location button): the site's 3 px ring around the pill (5.6:1 on the light page), since
   the field's own ring is off below and the soft halo alone is under 3:1 on paper (WCAG 1.4.11) */
.map-find:has(:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.map-find__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.map-find__row { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.map-find__ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.map-find input { width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 14px 0 42px; border: 0; border-radius: var(--r-pill, 999px); background: var(--surface-inset, rgba(var(--ink),.04));
  color: var(--text); font: 500 16px/1.2 var(--body); outline: none; -webkit-appearance: none; appearance: none; }
.map-find input::placeholder { color: var(--muted); opacity: 1; }
.map-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.map-find input:focus-visible { outline: none; }
.map-find__loc { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 var(--fs-sm, .875rem)/1 var(--body); white-space: nowrap; cursor: pointer; }
.map-find__loc svg { flex: none; color: var(--pin-2); }
.map-find__loc span { display: none; }
.map-find__loc:hover { border-color: var(--accent-line); background: var(--accent-soft, rgba(0,203,182,.12)); }
.map-find__loc:disabled { cursor: progress; opacity: .7; }
@media (prefers-reduced-motion: no-preference) { .map-find__loc.is-busy svg { animation: spin 1.2s linear infinite var(--lb-play, running); } }
.map-find__list { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 1; margin: 0; padding: 6px; list-style: none; max-height: calc(var(--stage-h, 280px) - 80px); overflow-y: auto;
  overscroll-behavior: contain; border-radius: var(--r-card, 18px); background: var(--surface-2, var(--bg-2)); border: 1px solid var(--line-2); box-shadow: var(--e3, 0 24px 60px -24px rgba(2,8,20,.8)); }
.map-find__opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--r-chip, 12px); cursor: pointer; }
.map-find__opt + .map-find__opt { margin-top: 2px; }
.map-find__opt:hover, .map-find__opt[aria-selected="true"] { background: var(--card-2); }
.map-find__opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--pin-2); }
.map-find__name { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.map-find__name strong, .map-find__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-find__name strong { font: 600 .95rem/1.25 var(--body); color: var(--text); }
.map-find__name span { font-size: var(--fs-xs, .75rem); line-height: 1.3; color: var(--muted); }
.map-find__opt .tag { flex: none; }
.map-find__none { padding: 12px; font-size: var(--fs-sm, .875rem); line-height: 1.4; color: var(--muted); }
@media (min-width: 720px) {
  /* in the band under the world (cities.js: the world ends 64 px above the stage's bottom), centred under it, left of the controls */
  .map-find { left: 12px; right: 68px; bottom: 8px; max-width: 640px; margin: 0 auto; gap: 8px; padding: 5px 5px 5px 8px; }
  .map-find__title { position: static; width: auto; height: auto; overflow: visible; clip: auto; flex: none; padding: 0 12px 0 10px; border-right: 1px solid var(--line-2);
    font: 600 var(--fs-sm, .875rem)/1 var(--display); letter-spacing: -.005em; color: var(--text); }
  .map-find input { font-size: var(--fs-base, 1rem); }
  .map-find__loc { width: auto; padding: 0 16px 0 13px; }
  .map-find__loc span { display: inline; }
  .map-find__list { max-height: calc(var(--stage-h, 420px) - 96px); }
}

/* =====================================================================
   The city card and the scale bar: the bar sits above whichever card holds the slot (a variable for the card's height, not a fixed
   154 px) and goes on the world view (a "2,000 km" bar is wrong at most latitudes of a whole-world map).
   ===================================================================== */
#city-stage { --slot-h: 134px; }
#city-stage.is-folded { --slot-h: 52px; }
.map-hint { white-space: normal; max-width: calc(100% - 24px); text-align: center; }
.map-focus { height: var(--slot-h, 134px); }
.map-scale { bottom: calc(var(--slot-h, 134px) + 20px); }
#city-stage[data-crosshair="off"] .map-scale { display: none; }
.map-focus .map-focus__area, .map-focus .map-focus__line { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.map-focus .map-focus__line { -webkit-line-clamp: 1; line-clamp: 1; }
.map-focus.is-folded { height: 52px; }
/* folded on the smallest phones: the name and its status tag, whole ("New York City Open · …" was cut; the ticker and the amount are one
   tap away, in the unfolded card) */
@media (max-width: 360px) {
  .map-focus.is-folded .map-focus__ticker, .map-focus.is-folded .map-focus__mini { display: none; }
  .map-focus.is-folded .map-focus__status:not([hidden]) { display: inline-flex; flex: none; margin-left: auto; }
}

/* =====================================================================
   The map's data credit (rule R2: OpenStreetMap's ODbL and GeoNames' CC BY ask for it wherever the map shows): one small line in a bottom
   corner, like any map. "© OpenStreetMap" opens its copyright page, "Data" the full credits (/credits). It sits inside the stage, so full
   screen keeps it; under the slot, the controls and their menu, over the canvases. A phone: the left-hand corner just above the slot (the
   find pill), or above the scale bar once a city is picked (the controls' column runs down the right, and a short phone's stage has no
   room beside it). A computer: the stage's bottom-right corner, beside the centred find bar when the stage is wide enough, above it when
   not. A finger gets a 44 px tall hit area without a bigger pill.
   ===================================================================== */
.map-attrib { position: absolute; z-index: 1; left: 8px; bottom: calc(var(--slot-h, 134px) + 48px); display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 8px;
  border-radius: var(--r-xs, 8px); background: var(--glass); background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text-2);
  font: 500 var(--fs-xs, .75rem)/1 var(--body); white-space: nowrap; }
#city-stage[data-crosshair="off"] .map-attrib { bottom: 74px; }
.map-attrib a { position: relative; color: inherit; text-decoration: none; }
.map-attrib a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .map-attrib a::after { content: ""; position: absolute; inset: -12px -6px; } }
@media (min-width: 720px) {
  .map-attrib { left: auto; right: 8px; bottom: 8px; }
  #city-stage[data-crosshair="off"] .map-attrib { bottom: 72px; }
}
@container (min-width: 960px) { #city-stage[data-crosshair="off"] .map-attrib { bottom: 8px; } }

/* =====================================================================
   Under the map: the status keys on one line (the boundary keys at its end), the how-to in a fold, the founders feed once there is one
   ===================================================================== */
#cities .citymap__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 4px 0; font-size: var(--fs-xs, .75rem); line-height: 1.4; color: var(--muted); }
/* a phone: the four statuses on one line, short words (the fold says the rest: what "Active" means, Yours, the boundary keys) */
.citymap__how--key { display: none; }
@media (max-width: 600px) {
  #cities .citymap__legend { flex-wrap: nowrap; justify-content: space-between; gap: 0 10px; height: 18px; margin: 12px 0 0; overflow: hidden; line-height: 18px; white-space: nowrap; }
  #cities .citymap__legend .citymap__more, #cities .citymap__legend .citymap__yours, #cities .citymap__legend .citymap__keys { display: none; }
  #cities .citymap__howto .citymap__how--key { display: block; }
  /* the fold starts below the tab bar on the first screen (nothing ghosts under the tab icons), a section's gap once scrolled */
  #cities .citymap .citymap__howto { margin-top: calc(var(--bottom-bars, 67px) + 24px); }
}
#cities .citymap__legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#cities .citymap__legend .dot { margin: 0; }
.citymap__keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.citymap__keys > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.citymap__keys .line { margin: 0; width: 18px; }
@media (min-width: 1024px) { .citymap__keys { margin-left: auto; } }
#cities .citymap__legend .dot--active::before { inset: -3px; border-width: 1.5px; } /* the legend's ring: the marker's shape, at the legend's size */
#cities .citymap__howto { margin: 10px 4px 0; }
#cities .citymap__howto > summary { min-height: 44px; font-size: var(--fs-sm, .875rem); color: var(--text-2); } /* a finger's 44 px (was 40) */
.citymap__howto-body { display: grid; gap: 4px; margin: 0 0 var(--sp-2, 8px); font-size: var(--fs-xs, .75rem); line-height: 1.5; color: var(--muted); }
#cities .citymap__howto .citymap__how { display: block; }

/* the founders feed: who and when after the city (a pill on a computer); on a phone one list card, a row per founder: the city, then
   "founder name", the wallet in a small mono chip and the time, hairlines between (it scrolled sideways, then wrapped unevenly) */
.claim-feed__who, .claim-feed__ago { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--muted); }
.claim-feed__who::before, .claim-feed__ago::before { content: "·"; }
.claim-feed__wallet { padding: 1px 6px; border-radius: var(--r-xs, 6px); background: var(--surface-inset, rgba(var(--ink), .06)); color: var(--text-2); font-size: .75rem; }
@media (max-width: 600px) {
  .claim-feed { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card, 18px); background: var(--surface-1, var(--card-2)); box-shadow: var(--e1); }
  .claim-feed li { position: relative; white-space: normal; max-width: 100%; border: 0; border-radius: 0; background: none; }
  .claim-feed li + li { border-top: 1px solid var(--line); }
  .claim-feed li:not(.claim-feed__empty) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; min-height: 0; padding: 8px 14px 10px; line-height: 1.4; }
  .claim-feed li .claim-feed__city { justify-self: start; min-height: 0; padding: 2px 0 0; text-align: left; }
  .claim-feed li .claim-feed__city::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the city (a 60 px target) */
  .claim-feed__who { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 0 21px; font-size: .8rem; }
  .claim-feed__ago { grid-column: 2; grid-row: 1; margin: 0; font-size: .75rem; white-space: nowrap; }
  .claim-feed__who::before, .claim-feed__ago::before { content: none; }
}

/* =====================================================================
   Browse cities (the list: the visitor's country first; the map's find card is the one search) and the claim panel
   ===================================================================== */
.city-search__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2px 16px; margin: 0 0 var(--sp-3, 12px); }
.city-search__head .kicker { margin: 0 0 6px; }
.city-search__title { margin: 0; max-width: none; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; } /* the claim panel's title size: the two cards side by side read as one pair */
.city-search__find { margin-bottom: -10px; }
.city-search__find { font-size: var(--fs-sm, .875rem); font-weight: 600; }
.city-search__row select { flex: 1 1 0; min-width: 0; }
.city-search__row select#city-filter { flex: 0 1 auto; }
/* the list: 8 rows and "Show more" on a phone, no box scrolling inside the page */
.city-more { margin: 6px 0 2px; }
@media (max-width: 600px) {
  .city-list { max-height: none; overflow: visible; }
  .city-list:not(.is-all) > li:nth-child(n+9) { display: none; }
}
@media (min-width: 601px) { .city-more { display: none; } }
/* the light Active pill's 12 px text: --st-active (#0E7C63, frozen by cities.js) reads 4.2:1 on the pill's own tint over the page, so the
   pill reads the light --pin-2 (#006F67, the same teal family, 5:1 on the tint; the map's marks and the legend keep --st-active) */
:root[data-theme="light"] .tag--active { color: var(--pin-2); }
/* hover and focus glide (180 ms, one curve); nothing moves for those who asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .map-find { transition: border-color var(--dur-2, .18s) var(--ease-out, ease-out), box-shadow var(--dur-2, .18s) var(--ease-out, ease-out); }
  .map-find__loc, .map-find__opt, .map-ctrl .map-menu button, .map-attrib a { transition: background-color var(--dur-2, .18s) var(--ease-out, ease-out), border-color var(--dur-2, .18s) var(--ease-out, ease-out), color var(--dur-2, .18s) var(--ease-out, ease-out); }
}