/* Constrain the app, not browser accessibility zoom. Map gestures stay on the map. */
html {
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body {
  position:fixed;
  inset:0;
  width:100%;
  max-width:100%;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overscroll-behavior:none;
}
body>header {
  flex-shrink:0;
  min-width:0;
  max-width:100%;
}
body>main {
  flex:1;
  min-width:0;
  min-height:0;
  width:100%;
  height:auto;
}
#map-wrap {
  overflow:hidden;
}
#map .ol-viewport,#map3d .maplibregl-canvas-container,#map3d canvas {
  touch-action:none;
}
.mobile-button-icon {
  display:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:760px),(max-width:1100px) and (max-height:500px) {
  :root {
    --app-header-height:calc(52px + env(safe-area-inset-top,0px));
    --mobile-header-height:var(--app-header-height);
  }
  body>header {
    height:var(--mobile-header-height);
    padding:calc(6px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 6px max(8px,env(safe-area-inset-left,0px));
    gap:7px;
    flex-wrap:nowrap;
    align-items:center;
  }
  header .brand,header .home {
    display:none;
  }
  #menu {
    flex:0 0 38px;
    width:38px;
    min-height:38px;
    padding:2px;
    font-size:21px;
  }
  #search-form {
    flex:1 1 0;
    min-width:0;
    max-width:none;
    order:0;
    gap:5px;
  }
  #query {
    font-size:16px;
    min-height:38px;
    height:38px;
    padding:7px 9px;
  }
  #search-submit {
    flex:0 0 38px;
    width:38px;
    min-height:38px;
    height:38px;
    padding:8px;
    display:grid;
    place-items:center;
  }
  #search-submit .mobile-button-label,.coordinate-bar .mobile-button-label {
    display:none;
  }
  .mobile-button-icon {
    display:block;
    width:20px;
    height:20px;
  }
  #results {
    top:44px;
    max-height:min(55dvh,400px);
    overscroll-behavior:contain;
  }
  #panel {
    position:absolute;
    top:var(--mobile-header-height);
    bottom:0;
    left:0;
    width:min(340px,88vw);
    max-width:100%;
    box-shadow:8px 0 24px #0002;
    overscroll-behavior:contain;
  }
  /* 16px text fields avoid automatic focus magnification on mobile browsers. */
  #panel input.name,dialog input:not([type=checkbox]):not([type=range]):not([type=color]) {
    font-size:16px;
  }
  .tools {
    left:8px;
    top:8px;
    right:62px;
  }
  .compass {
    right:7px;
    top:8px;
    width:46px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:24px;
    box-shadow:none;
  }
  .compass #north {
    min-height:50px;
    width:46px;
    padding:3px;
    border:1px solid var(--border);
    border-radius:24px;
    background:#fffffff5;
    box-shadow:0 2px 5px #0002;
  }
  .compass svg {
    width:32px;
    height:32px;
  }
  .compass svg circle,.compass svg text {
    display:none;
  }
  .compass output {
    font-size:10px;
    line-height:12px;
    white-space:nowrap;
  }
  .coordinate-bar {
    min-height:36px;
    padding:2px max(6px,env(safe-area-inset-right,0px)) max(2px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
    gap:4px;
    flex-wrap:nowrap;
  }
  .coordinate-bar>span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .coordinate-bar output,.coordinate-bar:has(#share-point:not([hidden])) output {
    flex:1 1 auto;
    flex-basis:auto;
    min-width:0;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .coordinate-bar button,.coordinate-bar #share-point,.coordinate-bar #share-point:not([hidden])+button {
    flex:0 0 32px;
    width:32px;
    height:32px;
    min-height:32px;
    padding:6px;
    margin:0;
    border:0;
    background:transparent;
  }
  .coordinate-bar .mobile-button-icon {
    width:19px;
    height:19px;
  }
  .ol-attribution,.ol-attribution.ol-uncollapsible {
    bottom:calc(39px + env(safe-area-inset-bottom,0px));
    font-size:9px;
  }
  .ol-scale-line {
    bottom:calc(40px + env(safe-area-inset-bottom,0px));
    left:8px;
  }
  .ol-zoom {
    right:8px;
    bottom:calc(94px + env(safe-area-inset-bottom,0px));
  }
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left {
    bottom:calc(40px + env(safe-area-inset-bottom,0px))!important;
  }
  .tile-status {
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
  }
  #three-note {
    top:56px;
    left:8px;
    max-width:calc(100% - 70px);
    padding:4px 6px;
  }
  .mode-hint {
    top:56px;
    left:8px;
    max-width:calc(100% - 70px);
  }
  .shared-map .tools,.shared-map .compass {
    top:64px;
  }
  .shared-map #three-note {
    top:116px;
  }
  #shared-banner {
    padding:4px 8px;
    font-size:10px;
  }
}
@media(max-width:760px),(max-width:1100px) and (max-height:500px) {
  header .brand {
    display:block;
    flex:0 0 90px;
    min-width:0;
    font-size:13px;
    line-height:1.15;
    letter-spacing:0;
    white-space:normal;
  }
  header .brand span {
    display:none;
  }
}
@media(max-width:760px) {
  .maplibregl-ctrl-bottom-left {
    bottom:30px!important;
  }
}

/* Short maps: keep both zoom buttons below the header and beside the compass. */
@media(max-height:500px) {
  .ol-zoom {
    right:64px;
    bottom:calc(44px + env(safe-area-inset-bottom,0px));
  }
}