/* ============================================================
   CAP — Action Map shared styles

   Used by BOTH layers of the map:
     action-map.html  → cities
     city.html        → districts within one city

   Anything specific to one of those two lives in that page's own
   <style> block. Everything here is the shared map chrome: the
   stage the map/list share, Leaflet restyled to brand, the popup,
   and the how-to sheet underneath.
   ============================================================ */

/* ── Map embed ── */
.map-container {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  background: var(--cream);
  border-bottom: var(--bw) solid var(--black);
  overflow: hidden;
  /* Contain Leaflet's high z-index panes/controls so the in-app
     Chilli modal (z-index 250) always sits above the map. */
  isolation: isolate;
}
#map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--cream); }

/* Warm the grayscale base tiles toward the Seeding cream palette */
#map .leaflet-tile-pane {
  filter: sepia(0.35) saturate(0.72) brightness(1.03) contrast(0.94) hue-rotate(-8deg);
}
/* Leaflet chrome restyled to brand */
#map .leaflet-control-zoom { margin: 12px; }
#map .leaflet-control-zoom a {
  width: 36px; height: 36px; line-height: 34px; font-size: 22px;
  background: var(--cream); color: var(--black);
  border: var(--bw) solid var(--black);
  font-weight: 700;
}
#map .leaflet-control-zoom a:first-child { border-bottom: none; }
#map .leaflet-control-zoom a:hover, #map .leaflet-control-zoom a:active { background: var(--black); color: var(--cream); }
#map .leaflet-bar { border: none; box-shadow: 2px 2px 0 rgba(0,0,0,0.25); }
#map .leaflet-control-attribution {
  background: rgba(232,223,207,0.85); font-size: 9px; color: rgba(0,0,0,0.55);
}
#map .leaflet-control-attribution a { color: rgba(0,0,0,0.7); }

/* ── District marker — rounded = tappable (per brand shape rule) ── */
.district-marker {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand, var(--navy)); color: var(--ink, #fff);
  border: 2px solid var(--black);
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-main); font-weight: 700; font-size: 12px; line-height: 1;
  cursor: pointer;
}

/* ── Popup restyled to brand — square = info card ── */
.leaflet-popup-content-wrapper {
  background: var(--white); color: var(--black);
  border: var(--bw) solid var(--black); border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
}
.leaflet-popup-tip { background: var(--white); border: var(--bw) solid var(--black); }
.leaflet-popup-content { margin: 12px 13px; }
.map-pop-name { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.map-pop-meta { font-size: 10px; font-weight: 400; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.04em; margin: 3px 0 9px; }
.map-pop-btn {
  display: inline-block; background: var(--black); color: var(--cream);
  font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  text-decoration: none; padding: 7px 11px; border: var(--bw) solid var(--black);
}
.map-pop-btn:hover { background: var(--navy); }

/* ── How-to sheet under the stage ──
   These three lines are the whole point of the page for a first-time
   visitor, so they get their own light-on-black cards rather than one
   dark block: small white type on navy was the hardest thing on the
   screen to read. One brand color per step, black text on all three,
   and the same "Step 1" pill the How To page uses (.step-card in
   style.css) so the app teaches one pattern, not two. */
.action-sheet { background: var(--cream); padding: 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: var(--bw) solid rgba(0,0,0,0.12); }
.action-sheet-label { font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.4; }

.action-howto-title {
  font-family: var(--font-display); font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 8px;
}
.action-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.action-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px;
  background: var(--tint, var(--white)); color: var(--black);
  border: var(--bw) solid var(--black);
  border-radius: 0;            /* info box — square, nothing here is tappable */
}
/* Light fills only: every step is black text, so the three colors read
   as a sequence instead of three different contrast problems. */
.action-step--1 { --tint: var(--yellow); }
.action-step--2 { --tint: var(--green-lt); }
.action-step--3 { --tint: var(--pink); }

.action-step-num {
  flex-shrink: 0; margin-top: 1px;
  font-family: var(--font-main); font-weight: 700; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px;
  border: var(--bw) solid var(--black);
  background: var(--white); color: var(--black);
}
.action-step-text { font-size: 15px; font-weight: 400; line-height: 1.4; }
.action-step-text strong { font-weight: 700; }

.action-fallback { font-size: 12px; font-weight: 400; line-height: 1.4; opacity: 0.7; }

/* ── District (Blocks) cards ── */
.district-card {
  background: var(--white);
  border: var(--bw) solid var(--black);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--black);
  transition: opacity 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.district-card:active { opacity: 0.8; }
.district-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: var(--bw) solid var(--black);
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-main); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.district-info { flex: 1; }
.district-name { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.district-meta { font-size: 10px; font-weight: 400; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.district-count {
  font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--orange); color: var(--white);
  padding: 3px 9px; border-radius: 999px; border: var(--bw) solid var(--black);
}
/* List-view row affordance */
.district-go { flex-shrink: 0; font-size: 16px; font-weight: 700; opacity: 0.45; padding-left: 4px; }

/* ── View toggle (Map ⇄ List) ── */
[hidden] { display: none !important; }
.view-toggle-bar { padding: 12px 14px; background: var(--cream); border-bottom: var(--bw) solid var(--black); }
.view-toggle {
  display: flex; border: var(--bw) solid var(--black);
  border-radius: 999px; overflow: hidden; background: var(--cream);
}
.view-toggle-btn {
  flex: 1; padding: 9px 0; border: none; background: transparent;
  font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.view-toggle-btn + .view-toggle-btn { border-left: var(--bw) solid var(--black); }
.view-toggle-btn.active { background: var(--navy); color: var(--white); }

/* ── Search bar — rides under the Map/List toggle, filters both ──
   Rounded, because you type into it: same shape rule as a button.
   It's a sibling of the toggle inside .view-toggle-bar so the two
   read as one control strip. */
.map-search { position: relative; margin-top: 10px; }
.map-search-input {
  width: 100%;
  font-family: var(--font-main); font-size: 14px; font-weight: 400;
  color: var(--black); background: var(--white);
  border: var(--bw) solid var(--black); border-radius: 999px;
  padding: 10px 38px 10px 36px;
  -webkit-appearance: none; appearance: none;
}
/* 16px on focus would be the usual iOS anti-zoom trick, but this input
   sits above a Leaflet map — a zoom here reflows the whole stage. 14px
   with a 16px focus size is the compromise. */
.map-search-input:focus { outline: none; font-size: 16px; box-shadow: 2px 2px 0 rgba(0,0,0,0.22); }
.map-search-input::placeholder { color: rgba(0,0,0,0.42); }
/* Safari adds its own clear/search decorations to type=search */
.map-search-input::-webkit-search-decoration,
.map-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.map-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: 0.45; pointer-events: none; line-height: 1;
}
.map-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: var(--bw) solid var(--black); background: var(--cream);
  color: var(--black); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.map-search-clear:active { background: var(--black); color: var(--cream); }

.map-search-count {
  margin-top: 7px; padding-left: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.5;
}

/* ── Results dropdown ────────────────────────────────────────
   Filtering the map live is the nicer interaction, but on a phone
   the keyboard covers the map exactly while you're typing. This
   hangs the same matches under the search bar, within thumb reach,
   and overlays the stage instead of pushing it down — the map keeps
   its place, so dismissing the list puts you right back on it.
   The bar is lifted above .map-container, whose Leaflet panes sit at
   z-index 400+ but are sealed off by its `isolation: isolate`. */
.view-toggle-bar { position: relative; z-index: 20; }

.map-search-results {
  position: absolute; top: 100%; left: 14px; right: 14px;
  background: var(--white);
  border: var(--bw) solid var(--black);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.28);
  /* Roughly five rows, then it scrolls — enough to choose from without
     burying the whole map. */
  max-height: 250px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.map-search-result {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  text-decoration: none; color: var(--black);
  border-bottom: var(--bw) solid rgba(0,0,0,0.10);
  -webkit-tap-highlight-color: transparent;
}
.map-search-result:last-child { border-bottom: none; }
.map-search-result:hover,
.map-search-result:active,
.map-search-result.active { background: var(--cream); }
.map-search-badge {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: var(--bw) solid var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-main); font-weight: 700; font-size: 11px;
}
.map-search-text { flex: 1; min-width: 0; }
.map-search-title {
  display: block;
  font-family: var(--font-display); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.map-search-sub {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 400; opacity: 0.55;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.map-search-go { flex-shrink: 0; font-size: 15px; font-weight: 700; opacity: 0.4; }

/* Empty state inside the list stage when nothing matched */
.list-empty {
  background: var(--white); border: var(--bw) solid var(--black);
  padding: 18px 15px; text-align: center;
  font-size: 12px; font-weight: 400; line-height: 1.5; opacity: 0.7;
}

/* List view shares the map's fixed viewport and scrolls internally */
.list-stage {
  height: 60vh; min-height: 320px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream);
  border-bottom: var(--bw) solid var(--black);
  padding: 12px 14px;
}
.list-stage .stack { gap: 8px; }

/* ── Activity feed ── */
.activity-row {
  padding: 11px 14px;
  border-bottom: var(--bw) solid rgba(0,0,0,0.08);
  display: flex; gap: 10px; align-items: center;
}
.activity-row:last-child { border-bottom: none; }
.activity-title { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.activity-meta  { font-size: 10px; font-weight: 400; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }