/* Pico's own defaults (~110% font-size, 1rem spacing) are sized for a
   marketing-page <main class="container">, not a 280px sidebar - this is
   what made every button/input look oversized. Pico recomputes its padding
   etc. from these two variables, so shrinking them once shrinks everything.
   Pico re-widens --pico-font-size again at larger breakpoints, hence !important. */
:root {
  --pico-font-size: 14px !important;
  --pico-spacing: 0.5rem !important;
  /* height:calc(1rem * line-height + form-element-spacing-vertical * 2 + border * 2)
     on inputs/buttons uses THIS variable, not --pico-spacing above - without
     shrinking it too, controls stayed ~44px tall regardless of padding. */
  --pico-form-element-spacing-vertical: 0.35rem !important;
  --pico-form-element-spacing-horizontal: 0.75rem !important;
}

* { box-sizing: border-box; }
/* overflow/overscroll-behavior hidden: without these, panning/scrolling
   past the map's limits can bubble up into a page-level scroll/rubber-band,
   which reveals the browser's own default (white) background beyond the
   document - not a #map/.leaflet-container styling issue at all. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: system-ui, sans-serif;
  background: #1d1d1d;
  color: #eee;
}

body { display: flex; }

#sidebar {
  width: 340px;
  flex: none;
  overflow-y: auto;
  overflow-x: hidden;
  background: #1d1d1d;
  padding: 12px;
  border-right: 1px solid #333;
  margin-left: 0;
  transition: margin-left 0.2s ease;
}
body.sidebar-collapsed #sidebar { margin-left: -340px; }

#sidebar h2 { font-size: 14px; text-transform: uppercase; color: #999; margin: 16px 0 8px; }

#brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#brand svg { flex: none; color: #6cf; }
#brand h1 { font-size: 18px; margin: 0; }

#sidebar-toggle {
  position: fixed;
  top: 10px;
  left: 340px;
  z-index: 1000;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: #1d1d1d;
  color: #eee;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: left 0.2s ease;
}
body.sidebar-collapsed #sidebar-toggle { left: 0; border-radius: 0 4px 4px 0; }
#sidebar-toggle { display: flex; align-items: center; justify-content: center; }

.category-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.category-actions button { flex: 1; padding: 4px; cursor: pointer; }

#map { flex: 1; height: 100vh; background: #1d1d1d; } /* ground/void color sampled from map tiles */
/* Leaflet's own CSS sets .leaflet-container { background: #ddd } - #map's
   higher specificity (and the inline style map.js also sets) should already
   win, but pin this down explicitly too so nothing can flash white/gray. */
.leaflet-container { background: #1d1d1d !important; }

.top-category-group { margin-bottom: 10px; }
.top-category-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; text-transform: uppercase; color: #999;
  padding: 6px 0 2px; border-bottom: 1px solid #333; margin-bottom: 4px;
}
.top-category-header svg { flex: none; }

.category-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; }
.category-row { display: flex; align-items: flex-start; gap: 4px; padding: 3px 0; font-size: 12px; min-width: 0; }
.category-row input { margin-top: 2px; flex: none; }
.category-row img { width: 14px; height: 18px; flex: none; }
.category-row span:not(.count) { overflow-wrap: break-word; word-break: break-word; }
.category-row span.count { margin-left: auto; color: #777; flex: none; }

#auth-box { font-size: 13px; }
#auth-box input { width: 100%; margin: 3px 0; padding: 4px; }
#auth-box button {
  margin-top: 4px; padding: 4px 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
#auth-box .error { color: #f66; font-size: 12px; }

.popup-content { max-width: 220px; }
.popup-content img { max-width: 100%; margin-top: 6px; }
.popup-content .desc { font-size: 12px; max-height: 150px; overflow-y: auto; }
.popup-content .desc a { color: #6cf; }
.popup-content button { margin-top: 6px; margin-right: 4px; cursor: pointer; }

/* Leaflet gives marker icons role="button" for keyboard a11y, and divIcon
   its own default box - Pico styles both like a real button (bg + border).
   Reset back to a plain image with the top-category icon overlaid on it. */
.marker-icon {
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0; /* Pico's [role=button] rule added 4.9px/10.5px here, shrinking
                 and insetting the pin img while the icon stayed positioned
                 against the un-padded box - the actual centering bug. */
}
.marker-icon img { display: block; width: 100%; height: 100%; }
.marker-icon svg {
  /* The pin is a teardrop: round head + pointed tail, head diameter ~= the
     pin's full width. Center on (width/2, width/2) - the head's center,
     not the icon box's vertical center - via translate(-50%,-50%). */
  position: absolute;
  top: 16px;
  left: 16px;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.marker-icon.marker-found { opacity: 0.35; }

/* Same Pico-vs-Leaflet role="button" conflict, this time on the zoom
   control: Pico's button padding got added on top of Leaflet's own
   fixed-size 30x30 control box, squeezing the +/- glyph down to nothing. */
.leaflet-control a {
  padding: 0;
  border: none;
  background: #fff;
  color: #000;
  box-shadow: none;
}

/* The attribution badge (bottom-right "Leaflet" link) still had its
   default white background - the one white element the earlier
   .leaflet-container fix didn't touch, since it's Leaflet's own control,
   not the container/tile background. */
.leaflet-control-attribution {
  background: rgba(29, 29, 29, 0.8) !important;
  color: #ccc;
}
.leaflet-control-attribution a { color: #6cf; background: transparent !important; }

/* Belt and suspenders alongside the #map/.leaflet-container rules above:
   every pane Leaflet renders into gets the ground color explicitly too. */
.leaflet-pane, .leaflet-map-pane { background: #1d1d1d; }