/* Map Actions: a 60px primary toggle (plus -> X) bottom right, revealing a compact group above it.
   Load LAST. The group holds the existing #reports-open (.report-fab); every older .report-fab
   placement rule (style.css, mobile-first.css, navigation.css, place-card.css) is neutralised
   here with #map-actions #reports-open, so the button only lays out inside the group.
   The container itself takes no taps: only the toggle and the Report button do. */

#map-actions { position: absolute; z-index: 3; right: var(--mf-r, 12px); bottom: var(--mf-dock, 36px); width: 60px; height: 60px; pointer-events: none; }
#map-actions[hidden] { display: none; }
main.is-reporting > #map-actions { display: none; } /* the sheet is in front; Actions is the return target once it closes */

/* ---- Primary toggle ---- */
.actions-toggle { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%;
  background: var(--orange); color: var(--green); box-shadow: 0 3px 12px #fd5c2559, var(--mf-panel-shadow, 0 2px 14px #063c2e26); cursor: pointer; pointer-events: auto;
  transition: background-color .16s ease, color .16s ease; }
.actions-toggle:hover { background: #ff6d3a; }
.actions-toggle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .18s ease; }
#map-actions.is-open .actions-toggle { background: #fff; color: var(--green); box-shadow: 0 0 0 1px var(--mf-line, #dfe5e1), var(--mf-panel-shadow, 0 2px 14px #063c2e26); }
#map-actions.is-open .actions-toggle svg { transform: rotate(45deg); }
.actions-toggle:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* ---- Group: one 48px action fans up-left clear of fixed map controls, label to its left ---- */
.actions-menu { position: absolute; right: 68px; bottom: calc(100% + 10px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0; padding: 0;
  pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.actions-menu[hidden] { display: none; }
@starting-style { .actions-menu:not([hidden]) { opacity: 0; transform: translateY(8px) scale(.96); } }

#map-actions #reports-open { position: static; inset: auto; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;
  min-width: 48px; min-height: 48px; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 24px;
  background: none; color: var(--green); box-shadow: none; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: auto; }
#map-actions #reports-open svg { flex: none; box-sizing: border-box; width: 48px; height: 48px; padding: 12px; border-radius: 50%;
  background: var(--orange); stroke-width: 2.2; box-shadow: 0 2px 10px #fd5c2559, var(--mf-panel-shadow, 0 2px 14px #063c2e26); }
#map-actions #reports-open span { display: flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 16px;
  background: #fffffff2; box-shadow: var(--mf-panel-shadow, 0 2px 14px #063c2e26); }
#map-actions #reports-open:hover svg { background: #ff6d3a; }
#map-actions #reports-open:hover span { background: #fff; }
#map-actions #reports-open:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---- Placement: follows the old Report button's insets ---- */
main.has-place-card > #map-actions { bottom: calc(var(--mf-dock, 36px) + var(--place-card-inset, 0px)); }
@media (min-width: 760px) {
  main.has-place-card > #map-actions { bottom: var(--mf-dock, 36px); }
}
@media (max-width: 759px) and (min-height: 481px), (max-width: 479px) {
  /* Above the phone route sheet / guidance trip footer (navigation hides the top bar, not Actions). */
  main:has(.route-panel:not([hidden])) > #map-actions { bottom: calc(var(--route-bottom-inset, 0px) + 36px); }
}

/* The toggle is 12px taller than the old 48px Report pill: keep the stacked phone controls clear of it. */
@media (max-width: 759px) and (min-height: 501px) {
  main:has(> #map-actions:not([hidden])) > #map-controls { bottom: calc(var(--mf-dock) + 72px); }
  main.has-place-card:has(> #map-actions:not([hidden])) > #map-controls { bottom: calc(var(--mf-dock) + 72px + var(--place-card-inset, 0px)); }
  main:has(.route-panel:not([hidden])):has(> #map-actions:not([hidden])) > #map-controls { top: auto; bottom: calc(var(--route-bottom-inset, 0px) + 112px); }
}
/* Short landscape phones: controls sit in a row to the left; the open group needs less height there. */
@media (max-height: 500px) {
  .actions-menu { bottom: calc(100% + 6px); }
}

:root[data-loka-motion="off"] #map-actions .actions-toggle,
:root[data-loka-motion="off"] #map-actions .actions-toggle svg,
:root[data-loka-motion="off"] #map-actions .actions-menu { transition: none; }
@starting-style {
  :root[data-loka-motion="off"] #map-actions .actions-menu:not([hidden]) { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-loka-motion="gentle"]) #map-actions .actions-toggle,
  :root:not([data-loka-motion="gentle"]) #map-actions .actions-toggle svg,
  :root:not([data-loka-motion="gentle"]) #map-actions .actions-menu { transition: none; }
  @starting-style {
    :root:not([data-loka-motion="gentle"]) #map-actions .actions-menu:not([hidden]) { opacity: 1; transform: none; }
  }
}

@media (forced-colors: active) {
  .actions-toggle, #map-actions #reports-open svg, #map-actions #reports-open span { border: 1px solid ButtonText; forced-color-adjust: auto; }
  .actions-toggle:focus-visible, #map-actions #reports-open:focus-visible { outline-color: Highlight; }
}