.m-interactions{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}.mi-actions,.mi-sheet{display:flex;flex-wrap:wrap;gap:6px}.m-interactions button{border:1px solid var(--line2);border-radius:9px;background:var(--bg2);color:var(--tx);font:inherit;font-size:12px;font-weight:600;line-height:1.3;padding:8px 10px;min-height:36px;cursor:pointer}.m-interactions button:hover{background:var(--card2)}.m-interactions button:focus-visible,.m-interactions select:focus-visible,.m-interactions summary:focus-visible{outline:3px solid var(--acc);outline-offset:2px}.m-interactions details{margin-top:8px}.m-interactions summary{font-size:12px;font-weight:650;cursor:pointer;padding:5px 0}.mi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.mi-grid label{font-size:11px;font-weight:600;color:var(--mut)}.mi-grid select{display:block;width:100%;margin-top:4px;padding:8px;border:1px solid var(--line2);border-radius:9px;background:var(--bg2);color:var(--tx);font-family:inherit;font-size:12px}.mi-note,.mi-help p,[data-interaction-status]{font-size:11px;line-height:1.5;color:var(--mut);margin:7px 0}.mi-sheet{margin-top:8px}.m-stage.m-full-list .m-panel{max-height:calc(100% - 24px);top:12px;bottom:12px}.m-stage.m-full-list .m-panel .m-body{max-height:none;display:block}.m-stage.m-full-list .m-panel footer{display:block}.m-stage.m-full-list .m-controls{z-index:12}.m-row.m-row-hovered{background:var(--bg3);box-shadow:inset 3px 0 var(--acc)}.m-pin.m-hover{outline:3px solid var(--acc);outline-offset:3px}.m-interactions [data-area]{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}@media(max-width:860px){.m-stage.m-full-list .m-panel{top:auto;max-height:70dvh;height:70dvh;z-index:31}.m-stage.m-full-list .m-tools,.m-stage.m-full-list .m-attrib{display:none}.m-stage .m-controls{max-height:42dvh;overflow-y:auto;overscroll-behavior:contain}.m-stage.m-shut .m-controls{max-height:65dvh}.m-stage.m-full-list .m-controls{max-height:23dvh}.mi-actions button{flex:1 1 auto}}@media(prefers-reduced-motion:reduce){.m-interactions *{transition:none!important}}

#stage:fullscreen{top:0;height:100dvh;width:100vw;background:var(--bg)}

/* Real MapLibre controls share the filter pane instead of sitting underneath
   the phone sheet. Keep a single set of native controls and full touch targets. */
.m-native-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.m-native-navigation .maplibregl-ctrl{margin:0;float:none;clear:none}
.m-native-navigation .maplibregl-ctrl-group{display:flex;flex:0 0 auto;background:var(--card2);border:1px solid var(--line2);border-radius:12px;box-shadow:none;overflow:hidden}
.m-native-navigation .maplibregl-ctrl-group button{width:44px;height:44px;min-width:44px;min-height:44px;border:0;background-color:transparent}
.m-native-navigation .maplibregl-ctrl-group button+button{border-left:1px solid var(--line2)}
.m-native-navigation .maplibregl-ctrl-group button:hover{background-color:var(--bg2)}
:root:not([data-theme="light"]) .m-native-navigation .maplibregl-ctrl-icon{filter:brightness(0) invert(1)}
.m-native-navigation .maplibregl-ctrl-scale{flex:0 1 auto;max-width:110px;background:var(--card);color:var(--tx);border-color:var(--mut)}
@media(max-width:860px){
  /* The header can wrap in landscape. Reserve actual stage space for the
     scrollable controls and the floating rail, rather than sizing both panes
     independently from the whole viewport and letting them intercept taps. */
  .m-stage:not(.m-shut):not(.m-full-list){--sheet:min(29dvh,max(66px,calc(100% - 150px)))}
  .m-stage.m-selected-view:not(.m-shut):not(.m-full-list){--sheet:min(34dvh,max(66px,calc(100% - 150px)))}
  .m-stage .m-controls{max-height:min(42dvh,calc(100% - var(--sheet) - 92px))}
  .m-stage.m-shut .m-controls{max-height:min(65dvh,calc(100% - var(--sheet) - 92px))}
  .m-stage.m-full-list .m-controls{max-height:min(23dvh,calc(100% - min(70dvh,calc(100% - 110px)) - 28px))}
  /* On short landscape screens 70vh can cover the entire filter pane. Reserve
     room for its scrollable search/control row even in Full list mode. */
  .m-stage.m-full-list .m-panel{height:min(70dvh,calc(100% - 110px));max-height:min(70dvh,calc(100% - 110px))}
}

@media(max-width:860px) and (max-height:500px){
  .m-stage:not(.m-full-list) .m-controls,.m-stage.m-selected-view:not(.m-full-list) .m-controls{padding:6px 10px}
  .m-stage:not(.m-full-list):not(.m-shut) .m-panel>header{min-height:44px;padding:4px 10px;gap:6px}
  .m-stage:not(.m-full-list):not(.m-shut) .m-panel #pfoot{max-height:26px;padding:4px 10px}
}