/* ==========================================================================
   Map controls toolbar (views/map.ejs, logic in public/js/map/ui-controls.js)
   Three states, each one smaller than the last:
     expanded                    header + body
     #map-controls-wrapper.collapsed
                                 header row only; the body folds away
     #map-controls-wrapper.is-tucked + #map-controls-fab.is-visible
                                 the card shrinks into a round floating
                                 button, scaling toward --mc-origin
   Colours come from the Tailwind classes in the markup (themed by
   tokens/tailwind-remap.css); this file covers geometry and motion only.
   Motion uses the individual `scale` / `translate` properties, so it never
   competes with the page's `button:active { transform }` press feedback.
   Unlayered, like style.css, so it can override the map page's mobile rules.
   ========================================================================== */

#map-controls-wrapper,
#map-controls-fab {
  --mc-dur: 320ms;
  --mc-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mc-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --mc-fab-size: 44px;
}

@media (prefers-reduced-motion: reduce) {
  #map-controls-wrapper,
  #map-controls-fab { --mc-dur: 0ms; }
}
.reduced-effects #map-controls-wrapper,
.reduced-effects #map-controls-fab { --mc-dur: 0ms; }

/* First paint restores the saved state without animating into it. */
.map-controls-static,
.map-controls-static * { transition: none !important; }

/* --- Header --------------------------------------------------------------- */
.map-controls-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: -0.25rem;
}

.map-controls-grip {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  min-height: 2rem;
  padding-inline: 0.25rem;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.map-controls-grip i { font-size: 0.75rem; opacity: 0.7; }
#map-controls-wrapper.is-dragging .map-controls-grip { cursor: grabbing; }

.map-controls-icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 0.375rem;
}
.map-controls-icon-btn i { font-size: 0.875rem; }
#map-controls-collapse i { transition: rotate var(--mc-dur) var(--mc-ease-out); }
#map-controls-wrapper.collapsed #map-controls-collapse i { rotate: 180deg; }

/* --- Card: springs open from --mc-origin (the floating button) ---------- */
.map-controls-card {
  transform-origin: var(--mc-origin, top left);
  transition:
    scale var(--mc-dur) var(--mc-ease-spring),
    opacity calc(var(--mc-dur) * 0.6) var(--mc-ease-out),
    padding var(--mc-dur) var(--mc-ease-out);
}

/* --- Body: folds with a grid row so its height animates from auto ------- */

.map-controls-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--mc-dur) var(--mc-ease-out);
}
.map-controls-body-inner {
  min-height: 0;
  padding-top: 0.5rem;
  transition:
    opacity var(--mc-dur) var(--mc-ease-out),
    padding var(--mc-dur) var(--mc-ease-out),
    visibility 0s;
}

/* Clip only while folding or folded: the filter and layer popovers open
   outside the card and must not be cut off when it is expanded. */
#map-controls-wrapper.is-resizing .map-controls-body-inner,
#map-controls-wrapper.collapsed .map-controls-body-inner { overflow: hidden; }

#map-controls-wrapper.collapsed .map-controls-body { grid-template-rows: 0fr; }
#map-controls-wrapper.collapsed .map-controls-body-inner {
  padding-top: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--mc-dur) var(--mc-ease-out),
    padding var(--mc-dur) var(--mc-ease-out),
    visibility 0s linear var(--mc-dur);
}
#map-controls-wrapper.collapsed .map-controls-card {
  padding-block: 0.375rem;
}

/* The wrapper is position:fixed once moved; never transition its offsets,
   ui-controls.js glides it with `translate` instead. */
#map-controls-wrapper { transition: none; }
#map-controls-wrapper.is-dragging { z-index: 1001; }
#map-controls-wrapper.is-dragging .map-controls-card {
  box-shadow: 0 0 0 2px var(--color-focus), 0 20px 25px -5px rgb(0 0 0 / 0.35);
}

/* --- Tucked: the card shrinks into the floating button ------------------- */
#map-controls-wrapper.is-tucked {
  visibility: hidden;
  transition: visibility 0s linear var(--mc-dur);
}
#map-controls-wrapper.is-tucked .map-controls-card {
  scale: 0.1;
  opacity: 0;
  pointer-events: none;
  transition:
    scale var(--mc-dur) var(--mc-ease-out),
    opacity var(--mc-dur) var(--mc-ease-out);
}

#map-controls-fab {
  position: fixed;
  top: calc(var(--navbar-height, 56px) + 0.5rem);
  left: 0.5rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mc-fab-size);
  height: var(--mc-fab-size);
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  scale: 0.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    scale var(--mc-dur) var(--mc-ease-out),
    opacity calc(var(--mc-dur) * 0.6) var(--mc-ease-out),
    visibility 0s linear var(--mc-dur);
}
#map-controls-fab i { font-size: 1.05rem; }
#map-controls-fab.is-visible {
  scale: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Pops in as the card finishes shrinking into it. */
  transition:
    scale var(--mc-dur) var(--mc-ease-spring) calc(var(--mc-dur) * 0.35),
    opacity calc(var(--mc-dur) * 0.6) var(--mc-ease-out) calc(var(--mc-dur) * 0.35),
    visibility 0s;
}
body.pin-confirmation-popout-open #map-controls-fab {
  visibility: hidden;
  pointer-events: none;
}
#map-controls-fab.is-dragging { cursor: grabbing; }
#map-controls-fab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Mobile: the header holds 44px touch targets (style.css sizes the buttons). */
@media (max-width: 767px) {
  #map-controls-wrapper.collapsed .map-controls-card { padding-block: 0.25rem; }
}