/* Map controls: one quick View button (2D / 3D / Trip) above adjacent My location + Location status in
   .location-control-group, and its advanced menu, which opens to the LEFT of the button.
   Mobile first; tokens come from mobile-first.css with local fallbacks.
   The existing My location button and shared Location status are styled by location.css. */

/* ONE vertical column at every viewport, including short landscape (overrides the old row-reverse
   in mobile-first.css). My location, its status and View share the same right edge. */
main > #map-controls { width:44px; align-items:flex-end; flex-direction:column !important; }
.map-zoom-controls {
  position:static; z-index:5; margin:0; float:none; clear:none;
  width:44px; flex:none;
  transition:opacity 150ms ease,visibility 150ms ease;
}
.map-zoom-controls button { width:44px; height:44px; }
main[data-map-layout="phone-portrait"] #map-controls > #map-zoom-controls,
main[data-map-layout="phone-landscape"] #map-controls > #map-zoom-controls { display:none; }
[data-secondary-revealed="false"] { opacity:0; visibility:hidden; pointer-events:none; }
#map-controls .map-view-button[data-secondary-revealed] { transition:opacity 150ms ease,visibility 150ms ease; }
:root[data-loka-motion="off"] :is(.map-zoom-controls,.map-view-button[data-secondary-revealed]) { transition:none !important; }
@media(prefers-reduced-motion:reduce) {
  :is(.map-zoom-controls,.map-view-button[data-secondary-revealed]) { transition:none !important; }
}
.location-control-group { display:flex; flex-direction:column; align-items:flex-end; width:44px; gap:8px; }
/* Progressive reveal keeps the Compass slot, so View/Locate/GPS never shift.
   Its native rotating needle remains available during manual inspection. */
#map-controls .maplibregl-ctrl-compass[data-revealed] {
  position:relative; transition:opacity 150ms ease, visibility 150ms ease;
}
#map-controls .maplibregl-ctrl-compass[data-revealed="false"] {
  opacity:0; visibility:hidden; pointer-events:none;
}
/* Remove the group's backing behind an unrevealed slot too. Retain its border
   width and all button dimensions; only the visible zoom pair paints a surface. */
#map-controls .maplibregl-ctrl-group:has(.maplibregl-ctrl-compass[data-revealed="false"]) {
  background:transparent !important; border-color:transparent !important; box-shadow:none !important;
}
#map-controls .maplibregl-ctrl-group:has(.maplibregl-ctrl-compass[data-revealed="false"]) > :is(.maplibregl-ctrl-zoom-in,.maplibregl-ctrl-zoom-out) {
  background:#ffffffeb; box-shadow:0 1px 4px #063c2e26;
}
#map-controls .maplibregl-ctrl-group:has(.maplibregl-ctrl-compass[data-revealed="false"]) > .maplibregl-ctrl-zoom-in { border-radius:12px 12px 0 0; }
#map-controls .maplibregl-ctrl-group:has(.maplibregl-ctrl-compass[data-revealed="false"]) > .maplibregl-ctrl-zoom-out { border-radius:0 0 12px 12px; }
#map-controls .maplibregl-ctrl-compass .loka-compass-symbol {
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--green,#063c2e);
}
#map-controls .loka-compass-symbol svg {
  width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
#map-controls .maplibregl-ctrl-compass[data-compass-icon="needle"] .loka-compass-symbol { display:none; }
#map-controls .maplibregl-ctrl-compass[data-compass-icon]:not([data-compass-icon="needle"]) .maplibregl-ctrl-icon { opacity:0; }
#map-controls .maplibregl-ctrl-compass[data-compass-icon="needle"] .maplibregl-ctrl-icon {
  opacity:1; background-size:24px 24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 6.5 12 12 10.5 17.5 12Z' fill='%23de4b37'/%3E%3Cpath d='m12 22-5.5-10 5.5 1.5 5.5-1.5Z' fill='%23667870'/%3E%3C/svg%3E");
}
#map-controls .maplibregl-ctrl-compass[data-heading-pending="true"] .loka-compass-symbol { color:#71817b; }
:root[data-loka-motion="off"] #map-controls .maplibregl-ctrl-compass[data-revealed] { transition:none; }
@media(prefers-reduced-motion:reduce) {
  #map-controls .maplibregl-ctrl-compass[data-revealed] { transition:none; }
}
/* Shared status remains reachable in editors/reporting. The camera action is
   disabled while a draft owns its pin; location diagnosis remains independent. */
main.is-reporting > #map-controls,
main:has(.route-panel:not([hidden])) > #map-controls,
main:has(.nav-trip.is-details-open) > #map-controls { display:flex; }
#map-controls.is-compact .maplibregl-ctrl-zoom-in,
#map-controls.is-compact .maplibregl-ctrl-zoom-out { display:none; }
#map-controls.is-condensed .maplibregl-ctrl-group { display:none; }
/* Planner/Navigation always retain Compass, including short phones. Tighten
   gaps rather than hiding that control or reducing its 44px touch target. */
main:is([data-map-phase="plan"],[data-map-phase="navigate"]) #map-controls .maplibregl-ctrl-group { display:block; }
main:is([data-map-phase="plan"],[data-map-phase="navigate"]) #map-controls.is-condensed { gap:2px; }
main:is([data-map-phase="plan"],[data-map-phase="navigate"]) #map-controls.is-condensed .location-control-group { gap:2px; }
/* Phones use map gestures; keep native zoom buttons for tablet/desktop widths only. */
@media(max-width:759px) {
  #map-controls .maplibregl-ctrl-zoom-in,
  #map-controls .maplibregl-ctrl-zoom-out { display:none; }
  #map-controls .maplibregl-ctrl-compass { border-top:0; }
}
@media(max-width:759px) and (min-height:481px) {
  main > #map-controls { bottom:var(--map-control-floor,auto); }
  main > #map-controls[style*="--map-control-floor: auto"] { bottom:calc(var(--mf-dock) + 60px); }
}

.map-control-button {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  margin: 0; padding: 0;
  border: 0; border-radius: 8px;
  background: #fff; color: #333;
  font: inherit; line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.map-control-button[hidden] { display: none; }
.map-control-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-control-button:hover { box-shadow: 0 2px 7px #063c2e40; }
.map-control-button:disabled,.location-button:disabled,.maplibregl-ctrl-compass:disabled { opacity:.45;cursor:not-allowed; }
.map-control-button:focus-visible,
.map-view-choice:focus-visible,
.map-view-panel:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.map-control-button.is-active,
.map-view-button[aria-expanded="true"] { background: var(--green, #063c2e); color: #fff; }
/* Text label (2D / 3D / Trip), not a glyph. No text selection or touch callout during a long press. */
.map-view-button {
  width: 44px; font-size: 14px; font-weight: 700; color: var(--green, #063c2e);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.map-view-button[aria-expanded="true"] { color: #fff; }

/* Attached View popover: same readable white card treatment as .location-details.
   JS anchors it left of the View button with fixed
   left/top/max-size in px (clamped to the viewport); the values below are the pre-JS fallback.
   Popover-API top layer when available, otherwise a fixed element on <body>/host. Content wraps
   and scrolls inside its own bounds instead of leaving the screen. */
.map-view-panel {
  position: fixed; z-index: 45;
  inset: auto; right: 64px; top: 8px;
  width: 360px; max-width: calc(100vw - 16px); height: auto;
  max-height: calc(100dvh - 16px);
  margin: 0;
  box-sizing: border-box;
  display: block;
  overflow: auto; overscroll-behavior: contain;
  padding: 12px 14px;
  border: 1px solid var(--mf-line, #dfe5e1); border-radius: 14px;
  background: #fff; color: #163d33;
  font-size: 14px; line-height: 1.4;
  box-shadow: 0 6px 24px rgba(22, 61, 51, 0.2);
}
.map-view-panel[hidden] { display: none; }
.map-view-panel:focus { outline: none; }
.map-view-panel:focus-visible { outline: 2px solid #1a73e8; }
.map-view-title { margin: 0 0 12px; font-size: 16px; }
.map-view-group { max-width: 100%; margin: 0 0 12px; }
.map-view-close { align-self: flex-end; }
.map-view-group-label { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--mf-muted, #4e6f61); }
.map-view-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.map-view-note { margin: 4px 0 0; font-size: 13px; color: #5d7068; overflow-wrap: anywhere; }
.map-view-note[hidden] { display: none; }

.map-view-choice {
  min-height: 44px; min-width: 44px;
  padding: 0 14px;
  border: 1px solid #ccd6d1; border-radius: 10px;
  background: #fff; color: inherit;
  font: inherit; font-size: 14px;
  cursor: pointer;
}
/* Selection is shown by a check mark and weight as well as colour. */
.map-view-choice[aria-pressed="true"] {
  border-color: var(--green, #063c2e); background: var(--green, #063c2e); color: #fff; font-weight: 700;
}
.map-view-choice[aria-pressed="true"]::before { content: '\2713\00a0'; }
/* Unavailable but still focusable and explained by the visible note beneath the group. */
.map-view-choice[aria-disabled="true"] {
  border-style: dashed; background: #f4f6f5; color: #5d7068; cursor: not-allowed;
}
.map-view-choice[aria-disabled="true"][aria-pressed="true"] { background: #e3ebe7; color: #163d33; border-color: var(--green, #063c2e); }
.map-view-choice[hidden] { display: none; }
.map-view-close { font-weight: 600; }
/* Inline (Settings): static, vertical, no map button. */
.settings-map-view .map-view-panel.is-inline,
.map-view-panel.is-inline { position:static; display:block; width:auto; max-width:none; max-height:none; margin:0; padding:0; overflow:visible; border:0; border-radius:0; box-shadow:none; background:transparent; }
.map-view-panel.is-inline .map-view-title { display:none; }
.map-view-panel.is-inline .map-view-group { margin: 0 0 10px; }
.nav-map-view,.nav-edit-trip { min-height:44px; padding:0 12px; border:1px solid #ccd6d1; border-radius:10px; background:#fff; color:var(--green); font:inherit; }
.location-control-group .location-status .location-status-icon { border-style:solid; }
.location-control-group .location-status[data-state="quiet"] .location-status-text,
.location-control-group .location-status[data-state="saved"] .location-status-text,
.location-control-group .location-status[data-state="off"] .location-status-text { color:#60746b; }
/* Short landscape keeps the single column (mobile-first.css would make it a row-reverse). */
@media(max-height:500px) {
  main > #map-controls { flex-direction:column !important; right:var(--mf-r,12px) !important; bottom:calc(var(--mf-dock) + 76px); }
  .map-view-panel { padding:12px 14px; }
}
@media(max-height:480px) and (min-width:480px) {
  /* Reporting occupies the right column on short landscape screens. Keep the
     same control column beside it so Location details remains reachable. */
  main.is-reporting > #map-controls {
    right:calc(max(8px,env(safe-area-inset-right)) + min(264px,50%) + 8px) !important;
  }
}
@media(max-width:360px) and (min-height:501px) {
  main:has(.route-panel.is-navigating) #actions-toggle { width:44px; height:44px; min-width:44px; min-height:44px; }
}
/* Both device preference and LOKA's explicit No animations setting disable the reveal. */
:root[data-loka-motion="off"] .map-view-panel { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce) {
  .map-control-button, .map-view-panel, .map-view-choice { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .map-control-button,
  .map-view-panel,
  .map-view-choice { border: 1px solid CanvasText; }
  .map-view-choice[aria-pressed="true"] { border-width: 3px; }
}

/* GPS is a persistent information row in the bottom-left of the exposed map. */
#location-information-dock {
  position:fixed;z-index:6;display:flex;flex-direction:row;align-items:center;
  left:max(var(--location-row-left,16px),env(safe-area-inset-left));right:auto;
  bottom:max(var(--location-row-bottom,44px),env(safe-area-inset-bottom));
  width:max-content;max-width:var(--location-row-width,calc(100vw - 32px));gap:6px;
}
.location-status.location-status--row {position:relative;display:block;width:auto;height:auto;min-width:36px;max-width:100%;padding:0;border-radius:999px;background:#fffffff2;box-shadow:0 1px 5px #063c2e22}
.location-status--row .location-status-text {display:flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:36px;max-width:100%;min-height:36px;height:36px;padding:0 7px;border-radius:999px;background:none;box-shadow:none;font:500 12px/1.35 system-ui}
.location-status--row .location-status-label {position:static;display:none;transform:none;max-width:none;padding:0;background:none;color:inherit;box-shadow:none;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.location-status--row.is-announcing .location-status-label {display:block}
.location-status--row .location-status-icon {flex:none}
.location-status--row .location-status-text::after {display:none}
.map-information {pointer-events:auto;flex:none;width:36px;height:36px;border:0;border-radius:50%;background:#fffffff2;color:var(--green,#063c2e);box-shadow:0 1px 5px #063c2e22;display:grid;place-items:center;cursor:pointer}
.map-information svg {width:21px;height:21px}
.map-attribution-intro {pointer-events:auto;position:absolute;bottom:calc(100% + 8px);left:0;max-width:calc(100vw - 32px);width:max-content;padding:7px 10px;border-radius:8px;background:#fff;color:#063c2e;font:11px/1.5 system-ui;box-shadow:0 1px 5px #063c2e22}
.map-attribution-intro a {color:inherit}
.map-attribution-dialog {box-sizing:border-box;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:22px;border:1px solid #d6e0db;border-radius:20px;background:#fff;color:#063c2e;font:14px/1.6 system-ui}
.map-attribution-dialog::backdrop {background:#063c2e55}
.map-attribution-dialog header {display:flex;align-items:center;justify-content:space-between;gap:12px}
.map-attribution-dialog h2 {font-size:20px;margin:0}
.map-attribution-dialog .loka-author {font-size:12px;color:#61786f}
.map-attribution-dialog .loka-heart {color:var(--orange,#fd5c25)}
.map-source-credits {margin-top:16px;line-height:2}
.map-attribution-dialog h3 {font-size:14px;margin:20px 0 8px}
.map-attribution-dialog header button {width:40px;height:40px;border:0;background:#f0f5f2;border-radius:50%;font-size:24px;color:inherit;cursor:pointer}
.map-attribution-dialog a {color:inherit;text-underline-offset:3px}
.map-attribution-dialog ul {padding-left:18px}
.map-attribution-dialog li {margin:7px 0}
#map-controls-toggle {display:none}
@media(max-width:759px){
 main > #map-controls {top:auto !important;bottom:var(--mobile-control-bottom,24px) !important;right:var(--mobile-control-right,16px) !important;gap:8px}
 #map-controls > #map-controls-toggle {display:grid;place-items:center;width:44px;height:28px;min-height:28px;padding:0;border:0;border-radius:14px;background:#fffffff2;color:#063c2e;box-shadow:0 1px 5px #063c2e22;cursor:pointer}
 #map-controls-toggle svg {width:20px;height:20px;transition:transform 220ms ease}
 main > #map-controls {transition:gap 220ms ease}
 #map-controls > :not(#map-controls-toggle):not(#map-zoom-controls) {
   max-height:44px;opacity:1;transform:translateY(0);transform-origin:top;overflow:hidden;
   transition:max-height 220ms ease,opacity 160ms ease,transform 220ms ease,visibility 0s;
 }
 #map-controls[data-controls-expanded="false"] {gap:0}
 #map-controls[data-controls-expanded="false"] > :not(#map-controls-toggle):not(#map-zoom-controls) {
   max-height:0;opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
   transition:max-height 220ms ease,opacity 160ms ease,transform 220ms ease,visibility 0s 220ms;
 }
 #map-controls[data-controls-expanded="false"] #map-controls-toggle svg {transform:rotate(180deg)}
}
@media(prefers-reduced-motion:reduce){
 :root:not([data-loka-motion="gentle"]) :is(main > #map-controls,#map-controls > :not(#map-controls-toggle),#map-controls-toggle svg) {transition:none !important}
}
:root[data-loka-motion="off"] :is(#map-controls,#map-controls > *,#map-controls-toggle svg) {transition:none !important}
@media(min-width:760px){
  main > #map-controls,main[data-map-layout="tablet-portrait"] > #map-controls {top:var(--map-control-top,max(16px,env(safe-area-inset-top)));bottom:auto !important}
  main:is([data-map-layout="wide"],[data-map-layout="tablet-portrait"]) #map-controls.is-compact :is(.maplibregl-ctrl-zoom-in,.maplibregl-ctrl-zoom-out) {display:block}
}