/* Regional map: document shell, map canvas, and MapLibre chrome. */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--map-font-ui);
  font-size: var(--map-type-control);
  color: var(--nec-ink);
  background: var(--nec-cream);
  /* No padding-bottom override needed — this is a full-viewport app */
  overflow: hidden;
  height: 100dvh;
}

body.scrubber-collapsed {
  --scrubber-height: calc(var(--scrubber-collapsed-base-height) + var(--safe-bottom));
}

body.scrubber-day-detail-open:not(.scrubber-collapsed) {
  --scrubber-height: calc(var(--scrubber-day-detail-base-height) + var(--safe-bottom));
}

.maplibregl-canvas.is-cursor-pointer {
  cursor: pointer;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.map-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--map-color-canvas);
  border-bottom: 1px solid var(--map-alpha-line-15);
}

.map-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--map-font-editorial);
  font-size: var(--map-type-title);
  font-weight: 600;
  color: var(--nec-ink);
  text-decoration: none;
}
.map-nav__brand:hover { color: var(--nec-green); }

.map-nav__links {
  display: flex;
  gap: 20px;
}
.map-nav__links a {
  color: var(--nec-bark);
  text-decoration: none;
  font-size: var(--map-type-body);
  letter-spacing: 0.02em;
}
.map-nav__links a:hover,
.map-nav__links a.active { color: var(--nec-green-dark); }

/* ── Map shell: full viewport minus nav and scrubber ────────────────────── */
#map-shell {
  position: fixed;
  top: var(--nav-height);
  bottom: var(--scrubber-height);
  left: 0;
  right: 0;
  isolation: isolate;
}

#map-canvas {
  position: absolute;
  top: 0;
  right: calc(var(--sidebar-active-width) + var(--spatial-sidebar-active-width) + var(--vendor-details-active-width));
  bottom: 0;
  left: var(--vendor-results-active-width);
  z-index: 0;
  transition: left var(--sidebar-transition), right var(--sidebar-transition);
}

.map-basemap-switcher {
  position: absolute;
  bottom: 12px;
  left: calc(var(--vendor-results-active-width) + 12px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition:
    left var(--sidebar-transition),
    opacity var(--map-motion-quick) var(--map-motion-easing);
}

.map-basemap-control {
  position: relative;
}

.map-basemap-switcher__button {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 54px;
  height: 54px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--map-alpha-line-20);
  border-radius: var(--map-radius-control);
  background: var(--map-color-paper);
  box-shadow: var(--map-shadow-surface);
  color: var(--map-color-white);
  cursor: pointer;
  font: inherit;
}

.map-basemap-switcher__button:hover {
  border-color: var(--map-alpha-line-66);
  box-shadow: var(--map-shadow-basemap-switch);
}

.map-basemap-switcher__button:focus-visible {
  outline: var(--map-focus-ring-strong);
  outline-offset: var(--map-focus-offset);
}

.map-basemap-switcher__button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.62;
}

.map-basemap-switcher__preview {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background-color: var(--map-color-paper);
}

.map-basemap-switcher__button[data-preview-mode="terrain"] [data-basemap-preview="terrain"],
.map-basemap-switcher__button[data-preview-mode="satellite"] [data-basemap-preview="satellite"] {
  display: block;
}

.map-basemap-switcher__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-basemap-preview__relief {
  z-index: 1;
  opacity: 0.28;
}

.map-basemap-preview__streets {
  z-index: 0;
}

body.has-spatial-drawer-open .map-basemap-switcher {
  opacity: 0;
  pointer-events: none;
}

#map-canvas.map-canvas--failed {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(var(--map-alpha-canvas-92), var(--map-alpha-canvas-92)),
    repeating-linear-gradient(135deg, var(--map-alpha-line-08) 0 1px, transparent 1px 18px);
}

.map-runtime-error {
  width: min(440px, 100%);
  border: 1px solid var(--map-alpha-line-18);
  border-radius: var(--map-radius-medium);
  background: var(--map-color-surface);
  box-shadow: var(--map-shadow-overlay);
  padding: 18px;
  color: var(--nec-ink);
}

.map-runtime-error h2 {
  margin: 0 0 8px;
  font-family: var(--map-font-editorial);
  font-size: var(--map-type-display-small);
  line-height: 1.1;
}

.map-runtime-error p {
  margin: 0;
  color: var(--nec-ink-light);
  font-size: var(--map-type-body);
  line-height: 1.45;
}

.map-runtime-error p + p {
  margin-top: 8px;
}

.map-runtime-error__detail {
  color: var(--nec-bark);
  font-size: var(--map-type-meta);
}

.map-runtime-error__reload {
  margin-top: 14px;
  border: 1px solid var(--nec-green-dark);
  border-radius: var(--map-radius-control);
  background: var(--nec-green);
  color: var(--map-color-white);
  cursor: pointer;
  font: inherit;
  font-size: var(--map-type-small);
  font-weight: 700;
  padding: 7px 12px;
}

.map-runtime-error__reload:hover {
  background: var(--nec-green-dark);
}

/* ── MapLibre attribution disclosure ───────────────────────────────────── */
.maplibregl-ctrl-attrib {
  color: var(--map-color-ink-soft);
  font-size: var(--map-type-caption) !important;
  font-family: var(--map-font-ui);
  text-shadow: none;
}

.maplibregl-ctrl-attrib a {
  color: var(--map-color-green-attribution);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--map-color-green-attribution) 28%, transparent);
  text-underline-offset: 2px;
}

.maplibregl-ctrl-attrib a:hover {
  text-decoration-color: currentColor;
}

body.has-spatial-drawer-open .maplibregl-ctrl-bottom-right {
  bottom: calc(var(--ecoregion-drawer-height) + var(--ecoregion-drawer-gap));
}

.maplibregl-ctrl-attrib:not([open]) {
  background: transparent !important;
  box-shadow: none !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact:not([open]) {
  background: transparent !important;
  min-height: 28px;
  padding: 0;
}

.maplibregl-ctrl-attrib.maplibregl-compact:not([open]) .maplibregl-ctrl-attrib-inner {
  display: none;
}

.maplibregl-ctrl-attrib.maplibregl-compact:not([open]) .maplibregl-ctrl-attrib-button {
  position: relative;
  width: auto;
  min-width: 104px;
  height: 30px;
  padding: 0 30px 0 11px;
  background-position: right 6px center;
  background-repeat: no-repeat;
  color: var(--map-color-ink);
  cursor: help;
  font-size: var(--map-type-small);
  font-weight: 700;
  line-height: 30px;
  text-align: left;
}

.maplibregl-ctrl-attrib.maplibregl-compact:not([open]) .maplibregl-ctrl-attrib-button::after {
  content: 'Sources ' attr(data-source-count);
}

.maplibregl-ctrl-attrib.maplibregl-compact[open] {
  box-sizing: border-box;
  width: min(
    500px,
    calc(100vw - var(--vendor-results-active-width) - var(--spatial-sidebar-active-width) - var(--vendor-details-active-width) - 32px)
  );
  max-width: 500px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
  background-color: color-mix(in srgb, var(--map-color-surface) 92%, transparent);
  border: 1px solid var(--map-alpha-line-30);
  border-radius: var(--map-radius-control);
  box-shadow: var(--map-shadow-surface);
}

.maplibregl-ctrl-attrib.maplibregl-compact[open] .maplibregl-ctrl-attrib-button {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  background-image: none;
  color: transparent;
  font-size: 0;
}

.maplibregl-ctrl-attrib.maplibregl-compact[open] .maplibregl-ctrl-attrib-button::after {
  content: '\00d7';
  display: block;
  color: var(--map-color-ink-soft);
  font-size: var(--map-type-title);
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}

.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button:focus-visible {
  outline: var(--map-focus-ring);
  outline-offset: var(--map-focus-offset);
}

.maplibregl-ctrl-attrib.has-formatted-attribution .maplibregl-ctrl-attrib-inner {
  display: none !important;
}

.map-attribution-panel {
  display: none;
}

.maplibregl-ctrl-attrib.maplibregl-compact[open] .map-attribution-panel {
  display: block;
  overflow: hidden;
  width: 100%;
  background: color-mix(in srgb, var(--map-color-surface) 97%, transparent);
  border: 1px solid var(--map-alpha-line-22);
  border-radius: var(--map-radius-medium);
  box-shadow: var(--map-shadow-overlay);
}

.map-attribution-panel__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  padding: 14px 52px 11px 16px;
  border-bottom: 1px solid var(--map-alpha-line-14);
}

.map-attribution-panel__title {
  margin: 0;
  color: var(--map-color-ink);
  font-size: var(--map-type-body);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
}

.map-attribution-panel__count {
  color: var(--map-color-bark);
  font-size: var(--map-type-caption);
  font-weight: 650;
  line-height: 1.25;
}

.map-attribution-panel__list {
  max-height: min(46vh, 360px);
  margin: 0;
  padding: 4px 16px 8px;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: var(--map-color-accent-muted) var(--map-color-paper-warm);
  scrollbar-width: thin;
}

.map-attribution-panel__item {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--map-alpha-line-10);
}

.map-attribution-panel__item:last-child {
  border-bottom: 0;
}

.map-attribution-panel__label {
  color: var(--map-color-bark);
  font-size: var(--map-type-overline);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: uppercase;
}

.map-attribution-panel__source {
  min-width: 0;
  color: var(--map-color-ink-soft);
  font-size: var(--map-type-meta);
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── Sidebar mobile toggle (hidden on desktop) ─────────────────────────── */
.sidebar-mobile-toggle {
  display: none;
}

.map-mobile-controls {
  display: none;
}

@media (max-width: 900px) {
:root {
    --sidebar-peek: 48px;
    --sidebar-expanded: 50vh;
    --vendor-results-active-width: 0px;
    --spatial-sidebar-active-width: 0px;
  }

  body.sidebar-collapsed {
    --vendor-results-active-width: 0px;
  }

  .maplibregl-ctrl-attrib.maplibregl-compact[open] {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .map-attribution-panel__item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
  }

  /* Navbar: hide non-essential links */
  .map-nav__link--desktop { display: none; }
  .map-nav__links { gap: 10px; }

  /* Map shell fills above scrubber — sidebar overlays on top */
  #map-shell {
    bottom: var(--scrubber-height);
  }

  #map-canvas {
    left: 0;
    right: 0;
  }

  .map-mobile-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 128;
    display: flex;
    gap: 6px;
    max-width: calc(100vw - 20px);
    transition: opacity var(--sidebar-transition);
  }

  body.has-details-open .map-mobile-controls {
    opacity: 0;
    pointer-events: none;
  }

  .map-mobile-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--map-alpha-line-22);
    border-radius: var(--map-radius-pill);
    background: var(--map-color-surface);
    color: var(--nec-ink);
    box-shadow: var(--map-shadow-surface);
    cursor: pointer;
    font: inherit;
    font-size: var(--map-type-small);
    font-weight: 700;
  }

  .map-mobile-control:hover,
  .map-mobile-control.is-active {
    border-color: var(--nec-green);
    background: var(--nec-green);
    color: var(--map-color-white);
  }

  .map-mobile-control:focus-visible {
    outline: var(--map-focus-ring-strong);
    outline-offset: var(--map-focus-offset);
  }

  .map-mobile-control__icon {
    position: relative;
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }

  .map-mobile-control__icon--filters::before,
  .map-mobile-control__icon--filters::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    height: 2px;
    border-radius: var(--map-radius-pill);
    background: currentColor;
  }

  .map-mobile-control__icon--filters::before {
    top: 3px;
    box-shadow: var(--map-shadow-filter-glyph);
  }

  .map-mobile-control__icon--filters::after {
    top: 1px;
    left: 8px;
    right: 2px;
    height: 6px;
    background: transparent;
    border: 1px solid currentColor;
  }
}

body :is(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: var(--map-focus-ring);
  outline-offset: var(--map-focus-offset);
}

@media (max-width: 900px) {
  .map-mobile-control {
    min-width: var(--map-control-height-touch);
    min-height: var(--map-control-height-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  #map-canvas,
  .map-basemap-switcher,
  .map-mobile-controls,
  .map-mobile-control__icon {
    transition: none;
  }
}