/**
 * @file
 * Map regions (biopama_libraries/map-regions; contract: NOTES-map-regions.md).
 *
 * Layout and responsiveness are Bootstrap's (templates/biopama-tool-page.html.twig):
 * the nine regions are a Bootstrap row of three column lanes stacked with
 * flex utilities, and the drawer is a Bootstrap Offcanvas. This file only
 * adds what Bootstrap cannot express: the clearances around Mapbox's
 * controls and the two toggles (tokens on the tool root, shared with the
 * sidebar in css/toolPage.css), the min-height chain that lets a region's
 * panels scroll, and the drawer toggle's slide. It defines no width
 * breakpoint: Bootstrap's classes own them (js/maps/mapRegions.js reads the
 * drawer's d-lg-none). Every z-index is a layer of the site's stacking scale
 * (css/layers.css, biopama_libraries/layers), never a number.
 */

[data-biopama-tool-page] {
  /* Mapbox's 10px corner margin. */
  --biopama-map-gutter-top: 0.625rem;
  --biopama-map-gutter-start: 0.625rem;
  /* Mapbox's top-right button column: 29px at 10px, its shadow, 15px clear. */
  --biopama-map-gutter-end: 3.5rem;
  /* Mapbox's scale bar above its logo, about 71px. */
  --biopama-map-gutter-bottom-start: 4.75rem;
  /* Mapbox's compact attribution button, 24px at 10px. */
  --biopama-map-gutter-bottom-end: 2.5rem;
  /* The two toggles, level with each other just above the scale bar. */
  --biopama-map-toggle-width: 2.875rem;
  --biopama-map-toggle-height: 2.375rem;
  --biopama-map-toggle-bottom: var(--biopama-map-gutter-bottom-start);
  /* The left sidebar overlay and the right drawer, below lg. */
  --biopama-tool-overlay-width: min(85vw, 24rem);
}

/* The regions row (row gx-2 flex-nowrap position-absolute z-1 pe-none):
   inset by the gutters, so no lane reaches the Mapbox UI. z-1 (the
   map-region layer) keeps it under Mapbox's corner controls (z-index 2), as
   the panels always were. */
.biopama-map-regions.row {
  inset: var(--biopama-map-gutter-top) var(--biopama-map-gutter-end) var(--biopama-map-gutter-bottom-end) var(--biopama-map-gutter-start);
}

/* The flex chain that lets a region shrink and its items scroll inside
   (Bootstrap has no min-height: 0 utility). */
.biopama-map-lane,
.biopama-map-region,
.biopama-map-region > * {
  min-height: 0;
}

/* The centre lane (col: flex 1 0 0) never pushes the end lane off the map. */
.biopama-map-lane--center {
  min-width: 0;
}

/* The start and centre lanes end above Mapbox's scale bar and logo. */
.biopama-map-lane--start,
.biopama-map-lane--center {
  padding-bottom: calc(var(--biopama-map-gutter-bottom-start) - var(--biopama-map-gutter-bottom-end));
}

/* The sidebar chevron sits at the start lane's bottom-left: the lane is never
   narrower than it, and its bottom-left region is never shorter than it (so
   the top and middle regions end above it) and starts beside it (0.5rem:
   the gap-2 spacing). */
.biopama-map-lane--start {
  min-width: var(--biopama-map-toggle-width);
}

.biopama-map-region[data-biopama-map-region="bottom-left"] {
  min-height: var(--biopama-map-toggle-height);
  margin-left: calc(var(--biopama-map-toggle-width) + 0.5rem - var(--biopama-map-gutter-start));
}

/* The row passes the pointer to the map (pe-none); region items take it back. */
.biopama-map-region > * {
  pointer-events: auto;
}

/* Permanent items (the selector) have no scroll body: they never shrink. */
.biopama-map-region > [data-biopama-map-region-permanent] {
  flex-shrink: 0;
}

/* The selector and the hover label (js/maps/mapCountryControl.js,
   createMap.js): bounded by the region, and by the viewport where the lane
   is only as wide as its content (below lg, css/toolPage.css: never under
   Mapbox's buttons on a narrow phone); the label keeps the size it had as a
   Mapbox control (Mapbox's 12px map font times .small). */
.biopama-map-regions .biopama-country-control,
.biopama-map-regions .map-country-pa-info-wrapper {
  max-width: min(100%, calc(100vw - 7rem));
}

.biopama-map-regions .map-country-pa-info-wrapper {
  font-size: 0.65625rem;
  line-height: 1.25rem;
}

/* Fullscreen takes the map column (createMap.js), so the regions, the drawer
   and the results tray come along; the sidebar does not, so its chevrons
   hide (visibility: their d-lg-* display utilities are !important). */
.biopama-map-column:fullscreen > #map-container {
  height: 100%;
}

.biopama-map-column:fullscreen > :is(.biopama-expand-toggle, .biopama-sidebar-toggle) {
  visibility: hidden;
}

/* The drawer (offcanvas offcanvas-end d-lg-none): Bootstrap's Offcanvas,
   left fixed to the viewport (Bootstrap's resize handler closes non-fixed
   ones, which would shut it whenever the phone keyboard opens), starting
   under the page header like the sidebar's Offcanvas, at the overlay width.
   Three classes: Bootstrap's .offcanvas.offcanvas-end may load later. */
.biopama-map-drawer.offcanvas.offcanvas-end {
  --bs-offcanvas-width: var(--biopama-tool-overlay-width);
  /* The tool-overlay layer of the site's stacking scale
     (biopama_libraries/layers): under the navbar, which must stay on top
     (user, 2026-10-16); above the regions, map controls and popups, below
     the notices and the results tray (which the drawer closes on show). */
  --bs-offcanvas-zindex: var(--biopama-z-tool-overlay, 90);
  /* The row's own top (biopama_libraries/viewport), as the sidebar overlay. */
  top: var(--biopama-top-offset, var(--biopama-header-height, 0px));
}

/* In fullscreen there is no header above it. */
.biopama-map-column:fullscreen > .biopama-map-drawer.offcanvas.offcanvas-end {
  top: 0;
}

/* The drawer scrolls as a whole: its items keep their height. */
[data-biopama-map-drawer-body] > * {
  flex-shrink: 0;
}

/* The drawer toggle (d-lg-none): the chevron's look (css/toolPage.css) on
   the right edge at the same height; the button rides the drawer's edge
   while the drawer is open and only its chevron turns to point at it (the
   button never rotates), on Bootstrap's offcanvas timing. */
.btn.biopama-drawer-toggle {
  position: absolute;
  right: 0;
  bottom: var(--biopama-map-toggle-bottom);
  z-index: var(--biopama-z-map-control, 3);
  transition: transform .3s ease-in-out;
}

.btn.biopama-drawer-toggle > .fa-chevron-left {
  transition: transform .3s ease-in-out;
}

.biopama-map-drawer:is(.showing, .show:not(.hiding)) ~ .btn.biopama-drawer-toggle {
  transform: translateX(calc(-1 * var(--biopama-tool-overlay-width)));
}

.biopama-map-drawer:is(.showing, .show:not(.hiding)) ~ .btn.biopama-drawer-toggle > .fa-chevron-left {
  transform: rotate(180deg);
}

/* One overlay at a time, and only its own button (the two meet on narrow
   phones). Separate rules: a selector list with :has() or :fullscreen would
   be dropped whole where either is unsupported (Safari before 16.4). In
   fullscreen the sidebar is outside the column, so the drawer toggle shows.
   The sidebar is open while Bootstrap's Offcanvas has it .showing or .show
   (offcanvas-lg, below lg only). */
#menu-container:is(.showing, .show) ~ .biopama-map-column > .biopama-drawer-toggle {
  visibility: hidden;
}

#menu-container:is(.showing, .show) ~ .biopama-map-column:fullscreen > .biopama-drawer-toggle {
  visibility: visible;
}

.biopama-map-column:has(> .biopama-map-drawer:is(.showing, .show)) > .biopama-sidebar-toggle {
  visibility: hidden;
}

/* Short screens (a phone held sideways): Mapbox's button column reaches the
   bottom corner, so the drawer toggle steps left of it and still rides the
   drawer's edge. Bootstrap has no height breakpoints. */
@media (max-height: 36rem) {
  .btn.biopama-drawer-toggle {
    right: var(--biopama-map-gutter-end);
  }

  .biopama-map-drawer:is(.showing, .show:not(.hiding)) ~ .btn.biopama-drawer-toggle {
    transform: translateX(calc(var(--biopama-map-gutter-end) - var(--biopama-tool-overlay-width)));
  }
}