/* ============================================
   Map — canvas, overlays, markers, popup, Mapbox overrides
   Loaded via <link> in index.html (after style.css).
   Depends on tokens.css custom properties.
   ============================================ */

/* ---- Map ---- */
/* Full-bleed on iOS standalone PWA. position: fixed (not absolute) so the
   containing block is always the viewport. Anchored from the top and sized by
   the *dynamic* viewport height (100dvh) rather than `bottom: 0`/`inset: 0`:
   on iOS, a fixed element's `bottom: 0` resolves above the home-indicator safe
   area, leaving a blank strip at the bottom, whereas 100dvh spans the full
   physical screen. `vh` and `-webkit-fill-available` are fallbacks for older
   engines that don't support dvh. (#52) */
#map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  /* Full-bleed in BOTH contexts (#52). Two different viewport quirks:
       • Standalone PWA with black-translucent status bar: WebKit reports the
         viewport as (screen − topInset) while anchoring content at the physical
         top, so dvh (894 on iPhone 16 Pro Max) falls short of the screen (956)
         and the deficit becomes a bottom gap. calc(100dvh + safe-top) = 956.
       • Safari browser: env() insets are 0, so the calc collapses to 100dvh,
         which stops above the address bar. 100vh (the large viewport) fills
         behind Safari's translucent chrome instead.
     max() of both takes whichever is taller, covering the screen either way.
     Over-extension under overflow:hidden is harmless. */
  height: max(100vh, calc(100dvh + env(safe-area-inset-top, 0px)));
  z-index: var(--z-map);
}

/* See base.css: in mobile Safari (browser display-mode) pin to the large
   viewport (lvh) so the map fills behind the bottom address bar. The PWA keeps
   the max() box above + the html min-height document fix. (#86) */
@media all and (display-mode: browser) {
  #map { height: 100lvh; }
}

/* ---- Map version bar ---- */
.map-version-bar {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-map) + 1);
  font-family: 'Source Code Pro Regular', 'Courier New', monospace;
  font-size: 10px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
}

[data-theme="dark"] .map-version-bar {
  color: rgba(255, 255, 255, 0.35);
}

/* ---- Map Style Toggle (satellite) ---- */
.map-style-toggle {
  position: fixed;
  top: var(--top-safe);
  right: 92px;
  z-index: calc(var(--z-drawer) - 1);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: background var(--duration-base), border-color var(--duration-base);
}

.map-style-toggle:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-hover);
}

.map-style-toggle.active {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--color-cta-bg);
}

/* ---- Map Search Bar ---- */
.map-search {
  position: fixed;
  top: var(--top-safe);
  left: 106px;
  z-index: calc(var(--z-panel) + 1);
  width: 240px;
}

.map-search input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: border-color var(--duration-base), background var(--duration-base);
}

.map-search input:focus {
  outline: none;
  border-color: var(--color-border-hover);
  background: var(--color-canvas);
}

.map-search input::placeholder {
  color: var(--color-text-faint);
}

.map-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.map-search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.map-search-result:last-child {
  border-bottom: none;
}

.map-search-result:hover {
  background: var(--color-surface-alt);
}

.map-search-result-name {
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text-primary);
}

.map-search-result-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-search-result-loc {
  font-family: var(--font-geist-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.map-search-result-type {
  font-family: var(--font-geist-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  white-space: nowrap;
}

/* ---- Map Markers ---- */
.map-marker {
  width: 24px;
  height: 24px;
  background: var(--color-cta-bg);
  border: 2px solid var(--color-marker-stroke);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform var(--duration-base);
}

.map-marker:hover { transform: scale(1.25); }

/* ---- POI Hover Popup ---- */
.poi-hover-popup-wrap {
  opacity: 0;
  animation: fade-in var(--duration-fast) var(--ease-default) forwards;
}

.poi-hover-popup-wrap .mapboxgl-popup-content {
  padding: 0;
  border-radius: var(--radius-base);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-border);
  overflow: hidden;
  font-family: var(--font-geist);
  background: var(--color-surface);
}

.poi-hover-popup-wrap .mapboxgl-popup-tip {
  border-top-color: var(--color-surface);
}

.poi-hover {
  width: 220px;
}

.poi-hover-img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.poi-hover-body {
  padding: 10px 12px;
  background: var(--color-surface);
}

.poi-hover-neighborhood {
  font-family: var(--font-geist-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.poi-hover-name {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poi-hover-desc {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin-bottom: 8px;
}

.poi-hover-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.poi-hover-tag {
  display: inline-block;
  padding: 2px 7px;
  background: var(--color-surface-alt);
  border: none;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-geist-mono);
  color: var(--color-text-muted);
}

/* ---- Mapbox overrides ---- */
/* Push the top control stacks (zoom/compass + geolocate) below the iOS safe
   area so they clear the Dynamic Island / notch. No-op without a safe area (#52). */
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-top-left {
  top: env(safe-area-inset-top, 0px);
}

.mapboxgl-ctrl-group {
  border-radius: var(--radius-input) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--color-border) !important;
  overflow: hidden;
}

.mapboxgl-ctrl-group button {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.mapboxgl-ctrl-group button:hover {
  background: var(--color-surface-alt) !important;
}

[data-theme="dark"] .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: invert(1);
}

[data-theme="dark"] .mapboxgl-ctrl-attrib-inner a {
  color: var(--color-text-muted);
}

/* ============================================
   Mobile (<768px)
   ============================================ */
@media (max-width: 767px) {
  /* Touch targets: minimum 44px */
  .btn, .btn-icon, .drawer-toggle, .settings-toggle, .map-style-toggle, .settings-btn,
  .fab-btn, .neighborhood-city, .neighborhood-pill, .filter-tag, .route-item {
    min-height: 44px;
    min-width: 44px;
  }

  .filter-tag {
    padding: 10px 8px;
  }

  .neighborhood-pill {
    padding: 10px 12px;
  }

  /* Detail panel bottom-sheet rules live in panel.css — that partial loads
     after map.css, so a mobile block here would be overridden by its base
     `.panel` rule (#52). */

  /* Modals */
  .modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .modal-wide {
    max-width: 95%;
  }

  /* Library list */
  .list-view {
    width: 100%;
  }

  /* .list-header mobile padding lives in list.css (load-order, #52). */

  .list-controls {
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }

  .list-type-toggle {
    flex: 1;
  }

  .type-btn {
    flex: 1;
    min-height: 44px;
  }

  .list-search input {
    min-height: 44px;
    font-size: 16px;
  }

  .map-search {
    left: 10px;
    top: calc(60px + env(safe-area-inset-top, 0px));
    right: 10px;
    width: auto;
  }

  .map-search input {
    min-height: 44px;
    font-size: 16px;
  }

  .list-row {
    margin: var(--spacing-6) var(--spacing-12);
    padding: var(--spacing-16);
  }

  .list-row-thumb {
    width: 40px;
    height: 40px;
  }

  .list-row-desc,
  .list-row-notes {
    display: none;
  }

  .list-row-date {
    font-size: 10px;
  }

  .list-bulk-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-12) var(--spacing-16) calc(var(--spacing-12) + env(safe-area-inset-bottom));
    margin-top: 0;
    z-index: 25;
    gap: var(--spacing-10);
  }

  /* Drawer full-height on mobile */
  .drawer {
    width: 85vw;
    max-width: 320px;
  }

  /* FAB */
  .fab-add {
    bottom: var(--spacing-16);
    right: var(--spacing-16);
  }

  .fab-menu {
    width: 220px;
  }

  .fab-menu-item {
    min-height: 44px;
    padding: 12px 14px;
  }

  /* Top controls */
  .drawer-toggle {
    width: 44px;
    height: 44px;
  }

  .filter-toggle {
    width: 44px;
    height: 44px;
    left: 62px;
  }

  .settings-toggle,
  .map-style-toggle {
    width: 36px;
    height: 36px;
  }

  .map-style-toggle {
    right: 96px;
  }

  .settings-panel {
    width: 100%;
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }

  .settings-panel-inner {
    margin: 0 8px;
  }

  /* Form inputs */
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* prevents iOS zoom */
    padding: 8px 12px;
  }

  /* Color swatches larger for touch */
  .color-swatch {
    width: 36px;
    height: 36px;
  }

  /* POI images grid — 2 columns on narrow screens */
  .poi-images {
    grid-template-columns: repeat(2, 1fr);
  }
}