/* ===================================
   MAP PAGE - Civic Blueprint
   The command center for civic ideas
   =================================== */

/* Main layout */
.map-page {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
}

/* ===================================
   MAP CONTAINER
   =================================== */
.map-wrapper {
  flex: 1;
  position: relative;
  overflow: visible;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--c-abyss);
}

/* Leaflet dark mode overrides */
.leaflet-container {
  background: var(--c-abyss);
  font-family: var(--font-body);
}

.leaflet-tile-pane {
  filter: none;
}

[data-theme="dark"] .leaflet-tile-pane {
  filter: saturate(0.8) brightness(0.9);
}

/* Zoom controls */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: none !important;
  border-bottom: 1px solid var(--c-border) !important;
  font-size: 18px !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
  background: var(--c-surface-glow) !important;
  color: var(--c-accent) !important;
}

/* Attribution */
.leaflet-control-attribution {
  background: var(--c-header-bg) !important;
  backdrop-filter: blur(4px);
  color: var(--c-text-dim) !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-sm) 0 0 0 !important;
}

.leaflet-control-attribution a {
  color: var(--c-text-muted) !important;
}

/* Ensure Leaflet controls don't overlap our custom controls */
.leaflet-control-container {
  z-index: 800 !important;
}

.leaflet-top.leaflet-right {
  right: 100px; /* Make room for our fullscreen/view buttons */
}

/* ===================================
   MAP POPUPS
   =================================== */
.leaflet-popup-content-wrapper {
  background: var(--c-depth) !important;
  color: var(--c-text) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

.leaflet-popup-tip {
  background: var(--c-depth) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: var(--c-text-muted) !important;
  font-size: 20px !important;
  padding: 8px !important;
  top: 4px !important;
  right: 4px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--duration-fast) !important;
}

.leaflet-popup-close-button:hover {
  background: var(--c-abyss) !important;
  color: var(--c-text) !important;
}

/* Popup content */
.popup-card {
  min-width: 260px;
}

.popup-card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-abyss);
}

.popup-card-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.popup-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  margin: 0;
}

.popup-card-body {
  padding: var(--space-4);
}

.popup-card-stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.popup-stat {
  display: flex;
  flex-direction: column;
}

.popup-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--c-accent);
}

.popup-stat-label {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.popup-card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-abyss);
}

/* ===================================
   CUSTOM MARKERS
   =================================== */
.marker-idea {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--c-depth);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-on-accent);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  z-index: 1;
}

.marker-idea::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.3;
  animation: marker-pulse 2s ease-out infinite;
}

@keyframes marker-pulse {
  0% { transform: scale(0.8); opacity: 0.3; }
  50% { opacity: 0.1; }
  100% { transform: scale(1.2); opacity: 0; }
}

.marker-idea:hover {
  transform: scale(1.15);
  z-index: 100;
}

/* Category colors for markers */
.marker-mobility { background: var(--cat-mobility); }
.marker-climate { background: var(--cat-climate); }
.marker-housing { background: var(--cat-housing); }
.marker-safety { background: var(--cat-safety); }
.marker-economy { background: var(--cat-economy); }
.marker-public-space { background: var(--cat-public-space); }
.marker-utilities { background: var(--cat-utilities); }

/* Project marker (realized) */
.marker-project {
  background: var(--c-reality);
  box-shadow: var(--shadow-md);
}

/* Cluster bubble for grouped idea pins (Leaflet.markercluster) */
.idea-cluster {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-depth);
  border: 2px solid var(--c-accent);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.idea-cluster-wrapper:hover .idea-cluster,
.idea-cluster-wrapper:focus-within .idea-cluster {
  transform: scale(1.1);
}

/* Cluster diamond for grouped event markers - keeps the event silhouette */
.event-cluster {
  width: 30px;
  height: 30px;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-depth);
  border: 2px solid var(--c-converge);
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.event-cluster span {
  transform: rotate(-45deg);
}

.event-cluster-wrapper:hover .event-cluster,
.event-cluster-wrapper:focus-within .event-cluster {
  transform: rotate(45deg) scale(1.12);
}

.marker-project::before {
  border-color: var(--c-reality);
}

/* ===================================
   SIDEBAR - Ideas Panel
   =================================== */
.sidebar {
  width: 380px;
  background: var(--c-depth);
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Decorative scan line */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent);
}

.sidebar-header {
  padding: var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface);
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-title h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.sidebar-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-radius: var(--radius-full);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Compact legal-links footer (map page has no block footer) */
.sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--c-border);
  background: var(--c-abyss);
  font-size: var(--text-xs);
  color: var(--c-text-dim);
}

.sidebar-footer a {
  /* padding lifts the tap target to ≥24px tall (WCAG 2.5.8) */
  display: inline-block;
  padding: var(--space-1) 2px;
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.sidebar-footer a:hover,
.sidebar-footer a:focus-visible {
  color: var(--c-accent);
}

/* Mobile-only entry point to the ideas sheet - see the responsive block */
.mobile-ideas-toggle {
  display: none;
}

/* Ideas list */
.ideas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Idea item card */
.idea-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.idea-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--cat-color, var(--c-accent));
  opacity: 0.5;
  transition: opacity var(--duration-fast);
}

.idea-item:hover {
  border-color: var(--c-border-bright);
  transform: translateX(4px);
}

.idea-item:hover::before {
  opacity: 1;
}

.idea-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.idea-item-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.idea-item-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-dim);
}

.idea-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.idea-item-meta {
  display: flex;
  gap: var(--space-4);
}

.idea-item-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.idea-item-stat svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* ===================================
   MAP CONTROLS PANEL
   =================================== */
.map-controls {
  position: absolute;
  /* Below the search box, which owns the top-left corner (map-search.css) */
  top: calc(var(--space-4) + 52px);
  left: 56px; /* After Leaflet zoom controls */
  /* Below Leaflet's popup pane (700) and control container (800) so idea
     popups and the zoom buttons always paint/tap ABOVE the legend
     (mobile-audit blockers 1 & 2). Above the marker pane (600). */
  z-index: 650;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: auto;
}

/* Mobile "Layers" toggle - hidden on desktop, shown ≤768px */
.map-layers-toggle {
  display: none;
}

.control-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}

.control-panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: var(--space-2);
}

.control-btn-group {
  display: flex;
  gap: 2px;
  background: var(--c-abyss);
  border-radius: var(--radius-md);
  padding: 2px;
}

.control-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.control-btn:hover {
  color: var(--c-text);
}

.control-btn.active {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* Filter toggles */
.filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.filter-toggle input {
  width: 36px;
  height: 20px;
  appearance: none;
  background: var(--c-abyss);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.filter-toggle input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--c-text-muted);
  border-radius: 50%;
  transition: all var(--duration-fast) var(--ease-out);
}

.filter-toggle input:checked {
  background: var(--c-accent);
}

.filter-toggle input:checked::before {
  transform: translateX(16px);
  background: var(--c-on-accent);
}

.filter-toggle-label {
  font-size: var(--text-sm);
  color: var(--c-text-soft);
}

/* ===================================
   INSTRUCTIONS PANEL
   =================================== */
.instructions-panel {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900; /* Below create panel and map controls */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-lg);
  animation: float 3s ease-in-out infinite;
  pointer-events: none; /* Allow clicks to pass through to map */
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.instructions-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-soft);
  border-radius: 50%;
  color: var(--c-accent);
}

.instructions-text h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.instructions-text p {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  max-width: none;
}

/* Dismiss button. The panel is click-through (pointer-events: none above) so the
   map keeps taking clicks underneath it - the button has to opt back in, or it
   would render but never be clickable. */
.instructions-close {
  pointer-events: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: calc(var(--space-4) * -1); /* pull back into the panel padding */
}

/* The panel bobs (see `float` above). That was harmless while it was inert text,
   but it now carries a click target, and a button that never stops moving is a
   poor target for motor impairments and a trigger for vestibular ones. */
@media (prefers-reduced-motion: reduce) {
  .instructions-panel {
    animation: none;
  }
}

/* Dismissed. Uses the `hidden` attribute, not the .hidden class: area-selection.js
   toggles that class on this same node, so a class-based dismissal would be undone
   the first time the user opened and closed "Select Area". Needs the explicit rule
   because .instructions-panel sets display:flex. */
.instructions-panel[hidden] {
  display: none !important;
}

/* ===================================
   CREATE IDEA PANEL
   =================================== */
.create-panel {
  position: absolute;
  z-index: 1100; /* Above map-controls (1000) */
  width: 360px;
  max-height: calc(100vh - 120px); /* Leave space for navbar and margins */
  background: var(--c-depth);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: panel-enter var(--duration-base) var(--ease-out);
}

/* Ensure hidden attribute works with flex display */
.create-panel[hidden] {
  display: none !important;
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}

.create-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--c-accent-soft);
  border-bottom: 1px solid var(--c-border);
}

.create-panel-header h3 {
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Ensure close button is always clickable */
.create-panel-header .btn-icon {
  position: relative;
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
}

.create-panel-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* Allow flex child to shrink */
}

/* Custom scrollbar for create panel */
.create-panel-body::-webkit-scrollbar {
  width: 6px;
}

.create-panel-body::-webkit-scrollbar-track {
  background: var(--c-surface);
  border-radius: 3px;
}

.create-panel-body::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 3px;
}

.create-panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-muted);
}

/* Ensure all buttons in create panel are clickable */
.create-panel button,
.create-panel .btn {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.create-coords {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-dim);
  padding: var(--space-2) var(--space-3);
  background: var(--c-abyss);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.create-coords svg {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
}

.create-panel-actions-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.create-panel-actions-header .btn-icon {
  width: 32px;
  height: 32px;
}

.create-panel-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--c-depth);
  padding: var(--space-4) 0;
  margin-left: calc(var(--space-5) * -1);
  margin-right: calc(var(--space-5) * -1);
  margin-bottom: calc(var(--space-5) * -1);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  border-top: 1px solid var(--c-border);
}

.create-panel-actions .btn {
  flex: 1;
  cursor: pointer;
}

/* Create Panel Fullscreen Mode */
.create-panel.fullscreen {
  position: fixed;
  top: 60px; /* Account for navbar height */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 60px);
  max-width: none;
  border-radius: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  animation: none;
}

.create-panel.fullscreen .create-panel-header {
  border-radius: 0;
  padding: var(--space-5) var(--space-6);
}

.create-panel.fullscreen .create-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.create-panel.fullscreen .form-group {
  margin-bottom: var(--space-6);
}

.create-panel.fullscreen .form-input,
.create-panel.fullscreen .form-select,
.create-panel.fullscreen .form-textarea {
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-5);
}

.create-panel.fullscreen .form-label {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.create-panel.fullscreen .create-coords {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.create-panel.fullscreen .create-panel-actions {
  position: sticky;
  bottom: 0;
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--c-border);
  background: var(--c-depth);
  margin: 0;
  margin-left: calc(var(--space-8) * -1);
  margin-right: calc(var(--space-8) * -1);
  margin-bottom: calc(var(--space-6) * -1);
  max-width: none;
  width: calc(100% + var(--space-8) * 2);
}

.create-panel.fullscreen .create-panel-actions .btn {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
}

/* Fullscreen button highlight when active */
.create-panel.fullscreen #fullscreen-create {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

/* ===================================
   EMPTY STATE
   =================================== */
.empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border-radius: 50%;
  color: var(--c-text-muted);
}

.empty-state h4,
.empty-state .empty-state-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-2);
}

.empty-state p:not(.empty-state-title) {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  max-width: 280px;
  margin: 0 auto;
}

/* ===================================
   FULLSCREEN MODE
   =================================== */
.map-page.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}

.map-page.fullscreen .nav {
  display: none;
}

.map-page.fullscreen .sidebar {
  display: none;
}

/* Its sheet is gone in fullscreen, so the opener would be a dead control */
.map-page.fullscreen .mobile-ideas-toggle {
  display: none;
}

.map-page.fullscreen .map-wrapper {
  width: 100%;
  height: 100%;
}

/* Fullscreen toggle button */
.fullscreen-toggle {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000; /* Same as map-controls, below create panel */
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.fullscreen-toggle:hover {
  background: var(--c-surface-glow);
  border-color: var(--c-border-bright);
  color: var(--c-text);
}

.fullscreen-toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.fullscreen-toggle svg {
  width: 18px;
  height: 18px;
}

/* Exit fullscreen button (shown in fullscreen mode) */
.map-page.fullscreen .fullscreen-toggle {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-on-accent);
}

.map-page.fullscreen .fullscreen-toggle:hover {
  background: color-mix(in srgb, var(--c-danger) 85%, var(--c-text));
  border-color: color-mix(in srgb, var(--c-danger) 85%, var(--c-text));
}

/* ===================================
   SPLIT VIEW MODE (Half Map / Half Idea)
   =================================== */
.map-page.split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.map-page.split-view .map-wrapper {
  height: 100%;
}

.map-page.split-view .sidebar {
  width: 100%;
  border-left: 1px solid var(--c-border);
}

/* Split view toggle button */
.view-mode-toggle {
  position: absolute;
  top: var(--space-4);
  right: calc(var(--space-4) + 48px);
  z-index: 1000; /* Same as map-controls, below create panel */
  display: flex !important;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.view-mode-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.view-mode-btn:hover {
  background: var(--c-surface-glow);
  color: var(--c-text);
}

.view-mode-btn.active {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.view-mode-btn:not(:last-child) {
  border-right: 1px solid var(--c-border);
}

.view-mode-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Ensure SVG strokes are visible */
.view-mode-toggle svg,
.fullscreen-toggle svg {
  stroke: currentColor;
  fill: none;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 1024px) {
  .sidebar {
    width: 340px;
  }
}

@media (max-width: 768px) {
  .map-page {
    flex-direction: column;
  }

  /* Hide view mode toggle on mobile - use fullscreen instead.
     (!important needed: the base rule is `display: flex !important`.) */
  .view-mode-toggle {
    display: none !important;
  }

  /* Adjust fullscreen button position */
  .fullscreen-toggle {
    right: var(--space-3);
    top: var(--space-3);
  }

  /* Bottom sheet. It used to peek 60px above the fold as its own affordance,
     but with `z-index: auto` that strip painted *under* the Leaflet panes
     (z 400-800) and the map's floating buttons (z 1000): invisible and
     untappable, so the ideas list was unreachable on a phone. The sheet now
     parks fully off-screen and #mobile-ideas-toggle opens it, above the map
     overlays but still below the create panel (1100). */
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    z-index: 1050;
    border-left: none;
    border-top: 1px solid var(--c-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .sidebar.expanded {
    transform: translateY(0);
  }

  /* Its own row, left-aligned, stacked above the centered "Select Area" pill
     (1.5rem from the bottom, ~38px tall). Sharing that row is not an option:
     the pill is centered and its label is long in FR, so the two collide. */
  .mobile-ideas-toggle {
    position: absolute;
    bottom: calc(1.5rem + 38px + var(--space-2));
    left: var(--space-3);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    background: var(--c-depth);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    color: var(--c-text);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
  }

  .mobile-ideas-toggle svg {
    width: 18px;
    height: 18px;
    color: var(--c-accent);
  }

  .mobile-ideas-toggle span:not(.mobile-ideas-count) {
    white-space: nowrap;
  }

  .mobile-ideas-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-radius: var(--radius-full);
  }

  /* The open sheet has its own close button and drag handle */
  .mobile-ideas-toggle[aria-expanded="true"] {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }

  /* Selection mode owns the map: same treatment as the other floating buttons */
  body.selection-mode-active .mobile-ideas-toggle {
    display: none;
  }

  .sidebar-header {
    cursor: pointer;
  }

  .sidebar-header::after {
    content: '';
    width: 40px;
    height: 4px;
    background: var(--c-border-bright);
    border-radius: var(--radius-full);
    position: absolute;
    top: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
  }

  /* Mobile: the legend is collapsed by default behind a "Layers" toggle so
     the map, zoom controls, and popups are actually usable on a phone
     (audit blocker: panels covered ~60% of a 375px viewport). */
  .map-controls {
    display: none;
    left: 64px; /* clear of the Layers toggle + Leaflet zoom column */
    top: calc(var(--space-3) + 56px); /* below the search box's top row */
    max-width: min(300px, calc(100vw - 64px - var(--space-3)));
    max-height: calc(100% - 196px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .map-controls.open {
    display: flex;
  }

  .map-layers-toggle {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 810; /* above Leaflet controls so it stays reachable */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text-muted);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    pointer-events: auto;
  }

  .map-layers-toggle[aria-expanded="true"] {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
    color: var(--c-accent);
  }

  .map-layers-toggle svg {
    width: 20px;
    height: 20px;
  }

  /* Leaflet zoom controls move below the Layers toggle on mobile */
  .leaflet-top.leaflet-left {
    top: calc(var(--space-3) + 48px);
  }

  /* Sits above the ideas button, which sits above the "Select Area" pill */
  .instructions-panel {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(1.5rem + 38px + var(--space-2) + 44px + var(--space-3));
    transform: none;
    animation: none;
  }

  .create-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Split view becomes stacked on mobile */
  .map-page.split-view {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .map-page.split-view .sidebar {
    position: relative;
    transform: none;
    height: auto;
    border-radius: 0;
    border-top: 1px solid var(--c-border);
  }
}

/* ===================================
   RU-3: review-status badges on the
   sidebar idea cards + map popups
   =================================== */
.idea-item-status {
  margin-bottom: var(--space-2);
}

.map-popup .status-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Leaflet zoom buttons: 44px touch targets on coarse pointers / small
   viewports (mobile audit) */
@media (pointer: coarse), (max-width: 768px) {
  .leaflet-bar a,
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }
}

/* ===================================
   RU-6: COMMUNITY EVENT MARKERS
   Diamond survey-markers - the
   silhouette (rotated square), not
   just the color, separates events
   from circular idea pins.
   =================================== */
.marker-event {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  background: var(--c-depth);
  color: var(--event-color, var(--c-text-muted));
  border: 2px solid var(--event-color, var(--c-text-muted));
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.marker-event svg {
  transform: rotate(-45deg);
}

.marker-event:hover,
.marker-event:focus-visible {
  transform: rotate(45deg) scale(1.15);
}

.marker-event:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ===================================
   CP-2 LOT 1: SITUATION MARKERS
   A permit tag, not a warning triangle:
   CiviPin is not a traffic app. The
   downward pentagon is the third
   silhouette on the map - circle =
   idea, diamond = appointment,
   tag = cited public record.
   =================================== */
.marker-situation {
  position: relative;
  width: 28px;
  height: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  margin: 1px;
  color: var(--c-situation);
  background: var(--c-depth);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  overflow: hidden;
  /* Pentagon tag: square shoulders, point down. */
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* The hazard band - hoarding tape, drawn once at the shoulder. It is the
   detail that makes the tag readable at 28px without shouting. */
.marker-situation-band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--c-situation) 0 3px,
    transparent 3px 6px
  );
  opacity: 0.85;
}

/* The clip-path removes the border box, so the outline is drawn as a ring. */
.marker-situation::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: inset 0 0 0 2px var(--c-situation);
  pointer-events: none;
}

.marker-situation svg {
  position: relative;
  margin-top: 4px;
}

.marker-situation:hover,
.marker-situation:focus-visible {
  transform: scale(1.15);
  filter: brightness(1.05);
}

.marker-situation:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.situation-cluster {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-situation);
  background: var(--c-depth);
  box-shadow: var(--shadow-md), inset 0 0 0 2px var(--c-situation);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
  transition: transform 0.18s ease;
}

.situation-cluster span {
  margin-bottom: 5px;
}

/* Server-side grid aggregate. Same tag, same colours as the Leaflet bubble
   above - it makes the same claim to a reader - but sized by how many records
   it stands for, so density is legible before anyone reads a digit. Four
   steps rather than a continuous scale: sizes the eye can compare beat sizes
   that are merely proportional. */
.situation-cluster-agg {
  width: var(--cluster-size, 34px);
  height: var(--cluster-size, 34px);
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
}

/* Records whose permit is issued but whose work has not started. Kept as its
   own figure, never added into the count above: this feed publishes issued
   permits, and on 2026-08-03, 129 of 1374 had not begun. Folding them in
   would make the badge a claim about the street that the source cannot back. */
.situation-cluster-upcoming {
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  opacity: 0.72;
  margin-bottom: 4px;
}

.situation-cluster-agg:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.situation-cluster-wrapper:hover .situation-cluster,
.situation-cluster-wrapper:focus-within .situation-cluster {
  transform: scale(1.1);
}

/* ===================================
   CP-2 LOT 1: SITUATION POPUP
   Fixed reading order (CP-2 3.5):
   what is blocked -> dates -> who ->
   THE QUESTION -> propose -> source.
   =================================== */
.situation-popup-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.situation-popup h4 {
  margin-bottom: var(--space-2);
}

.situation-impacts {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.situation-impacts li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--c-text);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-situation-soft);
  border: 1px solid color-mix(in srgb, var(--c-situation) 22%, transparent);
}

.situation-segment {
  font-size: var(--text-xs);
  color: var(--c-text-soft);
  margin: 0 0 2px;
}

/* THE QUESTION. It gets the only serif-weight moment in the popup: this is
   the string the whole lot exists to deliver, and a resident must read it
   as addressed to them, not as another data field. */
.situation-question {
  margin: var(--space-3) 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--c-situation);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text);
}

.situation-propose-btn {
  margin-bottom: var(--space-2);
}

/* Attribution rides on the record (CC-BY 4.0), never a credits page. Small,
   permanent, and clickable - it is what makes an error forgivable. */
.situation-source {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--c-text-muted);
}

.situation-source a {
  color: var(--c-text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--c-border-bright);
}

.situation-source a:hover {
  color: var(--c-situation);
  border-bottom-color: var(--c-situation);
}

/* Event popups reuse .map-popup; these are the extras */
.event-popup .event-popup-when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-converge);
  margin: var(--space-1) 0 0;
}

.event-popup .event-popup-place {
  font-size: var(--text-xs);
  color: var(--c-text-soft);
  margin: 2px 0 0;
}

.event-popup .event-popup-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-2);
}

/* ===================================
   RU-6: UPCOMING EVENTS (sidebar ledger)
   =================================== */
.sidebar-events {
  flex-shrink: 0;
  border-top: 1px solid var(--c-border);
  padding: var(--space-3) var(--space-4);
  max-height: 40%;
  overflow-y: auto;
  background: var(--c-abyss);
}

.sidebar-events-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin: 0 0 var(--space-3);
}

.sidebar-events-title svg {
  color: var(--c-converge);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  background: var(--c-depth);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color var(--duration-fast), background var(--duration-fast);
  min-height: 44px;
}

.event-item:hover,
.event-item:focus-visible {
  border-color: var(--c-border-bright);
  background: var(--c-surface);
}

.event-item:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.event-item-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: var(--space-1);
  border: 1px solid var(--c-border-bright);
  border-radius: var(--radius-sm);
  background: var(--c-abyss);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.event-item-month {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--c-converge);
}

.event-item-day {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-text);
}

.event-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.event-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}

.event-item-place {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* ===================================
   UF-10: share in idea popups
   =================================== */
.map-popup-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.map-popup-actions .btn {
  flex: 1;
  margin-top: 0;
}

.map-popup-actions .share-btn-popup {
  height: auto; /* stretch with the CTA */
  min-height: 34px;
}

@media (pointer: coarse), (max-width: 768px) {
  .map-popup-actions .share-btn-popup {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Wave-2 MINOR (375px): the marker-popup title painted UNDER the Layers
   toggle (z 810) and Leaflet's control corners (800). The map pane is a
   stacking context (transformed while panning), so no popup z-index can
   out-stack those siblings - instead, while a popup is open (class set in
   map.js on popupopen/popupclose) the chrome steps below the map pane
   (400) so the popup always paints and taps on top. */
.map-wrapper.map-popup-open .map-layers-toggle,
.map-wrapper.map-popup-open .leaflet-top,
.map-wrapper.map-popup-open .map-controls {
  z-index: 350;
}

/* CP-2 lot 1, found by driving the UI: the same defect was still live for
   two siblings the original fix did not list. The view-mode toggle and the
   fullscreen button both sit at z-index 1000 in the map wrapper's stacking
   context, so they painted OVER the top-right corner of an open popup -
   which is exactly where a situation popup puts its provenance chip. The
   attribution is not optional under CC-BY: it may not be half-covered by a
   button. Same remedy as above - the chrome steps below the map pane while
   a popup is open, and comes back on close. */
.map-wrapper.map-popup-open .view-mode-toggle,
.map-wrapper.map-popup-open .fullscreen-toggle {
  z-index: 350;
}

/* The search box deliberately does NOT get that treatment, and the reason is
   worth stating because the rule above looks like it should apply.
   Dropping below the map pane does not just restack an element, it HIDES it:
   the pane is opaque and spans the whole map. For a legend that is a
   tolerable trade; for the search field it would mean the box disappears the
   moment any popup opens. Instead the conflict is removed at the source -
   MapSearch widens Leaflet's auto-pan padding so no popup ever opens under
   the top-left corner. Nothing to cover, nothing to hide. */