/**
 * @file map-sidebar.css
 * @purpose Make navigation and mode controls one structural, full-height sidebar.
 * @dependencies map.html navigation markup plus mode and project control styles.
 * @public .map-shell, .map-sidebar, .layer-menu, and .layer-dropdown layout states.
 * @sideEffects Expands above the map while the map viewport remains fixed.
 */
/* --------------------------------------------------------------------------
 * Structural map/sidebar layout
 * ----------------------------------------------------------------------- */
.map-shell {
  --sidebar-collapsed-width: 3.5rem;
  --sidebar-expanded-width: 18.5rem;
  --sidebar-current-width: var(--sidebar-collapsed-width);
  display: grid;
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.map-shell:has(.map-sidebar:hover),
.map-shell:has(.map-sidebar :focus-visible),
.map-shell:has(.layer-menu[open]),
.map-shell.is-sidebar-pinned {
  --sidebar-current-width: var(--sidebar-expanded-width);
}

.map-canvas {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
}

/* Keep map-centred chrome centred in the map column, not the viewport. */
.map-search,
.map-message {
  left: calc(
    var(--sidebar-collapsed-width) +
    (100% - var(--sidebar-collapsed-width)) / 2
  );
}

.map-search {
  width: min(32rem, calc(100% - var(--sidebar-collapsed-width) - 7rem));
}

/* --------------------------------------------------------------------------
 * Permanent navigation surface
 * ----------------------------------------------------------------------- */
.map-sidebar {
  --sidebar-footer-clearance: calc(4 * 2.75rem + 4 * .18rem + .45rem);
  position: relative;
  z-index: 10;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  width: var(--sidebar-current-width);
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.45rem 0.38rem;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #3d4247;
  border-radius: 0;
  background: #23272b;
  box-shadow: none;
  color: #f4f6f8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: width;
  transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
}

.map-sidebar .sidebar-button,
.map-sidebar .layer-menu > summary {
  display: grid;
  grid-template-columns: 2.72rem minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  flex: 0 0 auto;
  padding: 0 0.25rem 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.32rem;
  background: transparent;
  box-shadow: none;
  color: #cbd1d7;
  cursor: pointer;
  list-style: none;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.map-sidebar .sidebar-button > :first-child,
.map-sidebar .layer-menu > summary > :first-child {
  justify-self: center;
}

.map-sidebar .navigation-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-0.3rem);
  color: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  visibility: hidden;
  transition:
    max-width 240ms cubic-bezier(0.2, 0, 0, 1),
    opacity 150ms ease,
    transform 220ms ease,
    visibility 0s linear 240ms;
}

.map-shell:has(.map-sidebar:hover) .navigation-label,
.map-shell:has(.map-sidebar :focus-visible) .navigation-label,
.map-shell:has(.layer-menu[open]) .navigation-label,
.map-shell.is-sidebar-pinned .navigation-label {
  max-width: 13rem;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.map-sidebar .sidebar-button:hover,
.map-sidebar .layer-menu > summary:hover {
  background: #30353a;
  color: #ffffff;
}

.map-sidebar .sidebar-button:focus-visible,
.map-sidebar .layer-menu > summary:focus-visible {
  outline: 0;
  background: #30353a;
  box-shadow: inset 0 0 0 1px #89939d;
  color: #ffffff;
}

.map-sidebar .layer-menu[open] > summary {
  background: #32383d;
  box-shadow: inset 3px 0 0 #4285F4;
  color: #ffffff;
}

.map-sidebar .layers-icon i {
  background: #23272b;
}

.map-sidebar .account-menu-button.is-authenticated::after {
  right: auto;
  left: 1.78rem;
}

/* --------------------------------------------------------------------------
 * Integrated mode and selected-mode controls
 * ----------------------------------------------------------------------- */

.map-sidebar .layer-menu {
  display: block;
  min-width: 0;
  margin-top: 0.28rem;
  padding-top: 0.42rem;
  border-top: 1px solid #3a3f44;
}

.map-sidebar .layer-menu[open] {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.map-sidebar .layer-menu > summary::-webkit-details-marker {
  display: none;
}

.map-sidebar .layer-dropdown {
  position: static;
  display: block;
  width: auto;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0.32rem -0.1rem 0;
  padding: 0 0.28rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f4f6f8;
  scrollbar-color: #5f6871 transparent;
  scrollbar-width: thin;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Reserve the four footer rows before sizing scrollable tool filters. Native details
 * content does not reliably shrink like a direct flex child, so cap it explicitly. */
.map-sidebar .layer-menu[open] > .layer-dropdown {
  max-height: max(0px, calc(100dvh - 3.6rem - var(--sidebar-footer-clearance)));
}

.map-sidebar .layer-dropdown::before {
  display: none;
}

.map-sidebar .layer-dropdown-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 0.52rem 0.5rem 0.58rem;
  border-bottom: 1px solid #343a3f;
  background: #23272b;
}

.map-sidebar .layer-dropdown-heading strong {
  color: #ffffff;
  font-size: 0.76rem;
}

.map-sidebar .layer-dropdown-heading small {
  margin-top: 0.12rem;
  color: #8f98a1;
  font-size: 0.59rem;
}

.map-sidebar .layer-choices {
  gap: 0.12rem;
  padding-top: 0.35rem;
}

.map-sidebar .layer-choice {
  grid-template-columns: 2rem minmax(0, 1fr) 0.58rem;
  gap: 0.62rem;
  min-height: 3.1rem;
  padding: 0.38rem 0.5rem;
  border-radius: 0.36rem;
}

.map-sidebar .layer-choice:hover {
  background: #2e3338;
}

.map-sidebar .layer-choice:has(input:checked) {
  background: #343a3f;
  box-shadow: inset 2px 0 0 #4285F4;
}

.map-sidebar .layer-choice:has(input:focus-visible) {
  outline: 1px solid #7d8790;
  outline-offset: -1px;
}

.map-sidebar .layer-swatch {
  width: 2rem;
  height: 2rem;
  border-color: #596169;
  border-radius: 0.3rem;
}

.map-sidebar .layer-choice-copy strong {
  color: #f5f7f8;
  font-size: 0.72rem;
}

.map-sidebar .layer-choice-copy small {
  margin-top: 0.1rem;
  color: #929aa2;
  font-size: 0.56rem;
  line-height: 1.25;
}

.map-sidebar .layer-choice-check {
  border-color: #65707a;
}

.map-sidebar .layer-options,
.map-sidebar .trail-legend,
.map-sidebar .project-legend,
.map-sidebar .valuation-legend,
.map-sidebar .renewable-legend {
  margin-top: 0.45rem;
  border-top-color: #3a3f44;
}

.map-sidebar .layer-toggle {
  min-height: 2.85rem;
  border-radius: 0.36rem;
}

.map-sidebar .layer-toggle:hover {
  background: #2e3338;
}

.map-sidebar .project-filter-option {
  min-height: 1.42rem;
  color: #e5e8eb;
}

.map-sidebar .project-filter-group legend,
.map-sidebar .project-legend-heading strong {
  color: #cbd1d7;
}

.map-sidebar .project-legend-status,
.map-sidebar .project-legend-note {
  color: #9099a2;
}

/* --------------------------------------------------------------------------
 * Responsive containment
 * ----------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .map-shell {
    --sidebar-expanded-width: min(18.5rem, calc(100vw - 3.5rem));
  }

  .map-sidebar {
    --sidebar-footer-clearance: calc(4 * 2.7rem + 4 * .18rem + .35rem);
    inset: auto;
    height: 100dvh;
    padding: 0.35rem 0.3rem;
  }

  .map-sidebar .sidebar-button,
  .map-sidebar .layer-menu > summary {
    grid-template-columns: 2.85rem minmax(0, 1fr);
    width: 100%;
    height: 2.7rem;
  }

  .map-sidebar .layer-dropdown {
    width: auto;
    max-height: none;
    padding: 0 0.22rem 0.8rem;
  }

  .map-search {
    right: 0.65rem;
    left: calc(var(--sidebar-collapsed-width) + 0.65rem);
    width: auto;
    transform: none;
  }

  .map-shell:has(.layer-menu[open]) .map-search,
  .map-shell.is-sidebar-pinned .map-search {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .map-attribution {
    left: calc(var(--sidebar-collapsed-width) + 0.65rem);
  }

  .mapbox-logo {
    left: calc(var(--sidebar-collapsed-width) + 0.65rem);
  }
}

/* A tapped summary can retain :focus-visible; only its open state pins touch UI. */
@media (hover: none), (pointer: coarse) {
  .map-shell:has(.map-sidebar:hover),
  .map-shell:has(.map-sidebar :focus-visible) {
    --sidebar-current-width: var(--sidebar-collapsed-width);
  }
  .map-shell:has(.map-sidebar:hover) .navigation-label,
  .map-shell:has(.map-sidebar :focus-visible) .navigation-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-0.3rem);
    visibility: hidden;
  }
  .map-shell:has(.layer-menu[open]),
  .map-shell.is-sidebar-pinned {
    --sidebar-current-width: var(--sidebar-expanded-width);
  }
  .map-shell:has(.layer-menu[open]) .navigation-label,
  .map-shell.is-sidebar-pinned .navigation-label {
    max-width: 13rem;
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-shell,
  .map-sidebar .navigation-label {
    transition: none;
  }
}