html{touch-action:pan-x pan-y}
body{overflow-x:hidden}
#infoToggle{display:none}

@media(max-width:760px){
  header{height:auto;min-height:64px;padding:max(8px,env(safe-area-inset-top)) 10px 8px;gap:8px}
  .brand{flex:0 1 auto;min-width:0;font-size:18px}
  .session-user{display:none}
  .logo{width:34px;height:34px}
  nav{min-width:0;justify-content:flex-end;gap:5px}
  nav button{padding:.55rem .62rem;white-space:nowrap}
  .language-control{margin:0}
  .language-control select{margin:0;padding:.55rem .4rem}
  .photo-panel{padding:12px 10px}
  .photo-head{min-height:72px}
  .photo-head h1{font-size:21px}
  .photo-head p{font-size:14px}
  .tools{top:calc(max(8px,env(safe-area-inset-top)) + 72px);right:12px;background:#111de8}
  .tools button{min-width:40px;min-height:40px;padding:.45rem}
  main{grid-template-rows:62svh 62svh!important}
  .stage{height:calc(100% - 82px)}
  .map-panel{min-height:420px}
  #info{padding:11px 48px 11px 14px;border-left-width:3px}
  #info .eyebrow{font-size:9px}
  #info h2{margin:3px 0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #infoToggle{display:grid;place-items:center;position:absolute;right:8px;top:9px;width:36px;height:36px;padding:0;font-size:20px}
  #info .info-body{display:none}
  #info.expanded{padding:14px 48px 14px 14px}
  #info.expanded .info-body{display:block}
  #info.expanded #infoToggle{transform:rotate(180deg)}
  #info p{margin:.65rem 0}
  .leaflet-control-zoom{margin-bottom:78px!important}
}

@media(max-width:430px){
  .brand{font-size:0}
  .brand .logo{font-size:20px}
  nav button{font-size:14px}
  #adminBtn{max-width:74px;white-space:normal;line-height:1.05}
}