/**
 * @file map-mode-menu.css
 * @purpose Separate plain basemap radio rows from the visual thematic-tool cards.
 * @dependencies map.html choice groups, map-sidebar.css shell, existing layer-swatch artwork.
 * @public .map-base-choices, .map-tool-choices, .map-tool-choice, #map-tool-clear.
 * @sideEffects Changes menu presentation only; sidebar expansion still overlays a fixed map.
 */

/* Global map configuration: concise rows with radio dots, never picture tiles. */
.map-sidebar .map-base-choices {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 10px 3px 0;
  border: 0;
  gap: 2px;
}

.map-base-choices legend {
  float: left;
  width: 100%;
  margin: 0 0 5px;
  padding: 0 7px;
  color: #a7afb7;
  font-size: 11px;
  font-weight: 600;
}

.map-base-choice {
  position: relative;
  display: flex;
  min-height: 33px;
  align-items: center;
  gap: 10px;
  padding: 5px 7px;
  border-radius: 5px;
  color: #e8edf0;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}

.map-base-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.map-base-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1.5px solid #7d8790;
  border-radius: 50%;
}

.map-base-choice:has(input:checked) .map-base-dot {
  border-color: #4285F4;
  background: #4285F4;
  box-shadow: inset 0 0 0 2.5px #23272b;
}

.map-base-choice:hover { background: #2e3338; }
.map-base-choice:has(input:focus-visible) { outline: 2px solid #9daebc; outline-offset: -2px; }
.map-sidebar .map-global-options { margin: 5px 3px 0; padding-top: 3px; }

/* Picture cards use the supplied FERQ2 artwork and the existing Projects image. */
.map-tool-section-heading {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 5px 3px 0;
  padding: 8px 7px;
  border-top: 1px solid #3a3f44;
}

.map-tool-section-heading strong { color: #a7afb7; font-size: 11px; font-weight: 600; }
#map-tool-clear {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 5px;
  border: 1px solid #dc2626;
  border-radius: 4px;
  background: #dc2626;
  color: #ffffff;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

/* Explicit hidden rule keeps the grid display from exposing an inactive clear control. */
#map-tool-clear[hidden] { display: none; }
#map-tool-clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
#map-tool-clear:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
#map-tool-clear:focus-visible { outline: 2px solid #9daebc; outline-offset: 2px; }
#map-tool-clear:disabled { opacity: 0.35; cursor: default; }

.map-sidebar .map-tool-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  padding: 2px 7px 10px;
}

.map-sidebar .layer-choice.map-tool-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  min-width: 0;
  min-height: 0;
  gap: 6px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.map-sidebar .map-tool-choice .layer-swatch {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.65;
  overflow: hidden;
  border: 1px solid #535e68;
  border-radius: 7px;
}

.map-tool-choice .layer-swatch img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.map-sidebar .map-tool-choice .layer-choice-copy strong { font-size: 11px; font-weight: 550; line-height: 1.3; }
.map-sidebar .map-tool-choice .layer-choice-copy small { margin: 0; }
.map-sidebar .map-tool-choice .layer-choice-check { display: none; }
.map-sidebar .map-tool-choice:hover .layer-swatch { border-color: #a9b5be; }
.map-sidebar .map-tool-choice:has(input:checked) .layer-swatch { border: 2px solid #4285F4; }
.map-sidebar .map-tool-choice:has(input:checked) .layer-choice-copy strong { color: #4285F4; }
.map-sidebar .map-tool-choice:has(input:focus-visible) { outline: 2px solid #9daebc; outline-offset: 3px; }

/* A short mobile menu scrolls as a whole; neither group resizes the map canvas. */
@media (max-width: 23rem) {
  .map-sidebar .map-tool-choices { gap: 10px 8px; padding-inline: 5px; }
  .map-sidebar .map-tool-choice .layer-choice-copy strong { font-size: 10px; }
}

/* Keep subjects in the wide crop; map-interface.css overlays the centered mode symbols. */
.map-tool-choice .layer-swatch-solar img { object-position: center bottom; }
.map-tool-choice .layer-swatch-wind img { object-position: center 70%; }
.map-tool-choice .layer-swatch-outdoor img { object-position: center 65%; }