/* Responsive Maps account/settings consistency.
 * Keep the map engine, routes, sheet drag behaviour and existing JavaScript intact. */
#account-dialog{
 box-sizing:border-box!important;
 width:min(490px,calc(100vw - 24px))!important;
 max-width:calc(100vw - 20px)!important;
 max-height:calc(100dvh - 16px)!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 overscroll-behavior-y:contain!important;
 -webkit-overflow-scrolling:touch;
 border:1px solid #317886!important;border-radius:20px!important;
 scrollbar-width:thin;
}
#account-dialog *,
#account-dialog *::before,
#account-dialog *::after{box-sizing:border-box;}
#account-dialog .account-head{
 position:sticky!important;top:0!important;z-index:15!important;
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:14px!important;min-height:58px!important;
 background:linear-gradient(100deg,#0b303e,#082733)!important;
 border-bottom:1px solid #346b78!important;
 margin:0 0 8px!important;padding:10px 0!important;
}
#account-dialog .account-head h2{
 min-width:0!important;flex:1!important;
 font-size:clamp(18px,4.8vw,23px)!important;
 line-height:1.2!important;margin:0!important;
 color:#ecf9fa!important;overflow-wrap:anywhere;
}
#account-dialog #account-close{
 flex:0 0 41px!important;
 width:41px!important;height:41px!important;min-width:41px!important;
 display:grid!important;place-items:center!important;
 margin:0!important;padding:0!important;
 border:1px solid #3b8490!important;border-radius:10px!important;
 color:#e8fcfd!important;background:#123c49!important;
 font:700 25px/1 system-ui!important;
}
#account-dialog .account-tabs{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 align-items:stretch!important;gap:6px!important;
 width:100%!important;max-width:100%!important;
 min-width:0!important;margin:12px 0!important;
 padding:0!important;
}
#account-dialog .account-tabs button{
 min-width:0!important;max-width:100%!important;
 min-height:43px!important;padding:8px 5px!important;
 text-align:center!important;white-space:normal!important;
 overflow-wrap:anywhere!important;font:750 11px/1.2 system-ui!important;
}
#account-dialog .account-pane{
 width:100%!important;max-width:100%!important;min-width:0!important;
 margin:0!important;padding:13px 10px!important;
 border-radius:14px!important;
}
#account-dialog .account-pane > *{max-width:100%;min-width:0;}
#account-dialog .account-pane h3{
 margin:0 0 9px!important;font-size:16px!important;
 line-height:1.3!important;overflow-wrap:anywhere;
}
#account-dialog .account-pane p,
#account-dialog .micro{
 font-size:12px!important;line-height:1.5!important;overflow-wrap:anywhere;
}
#account-dialog label{
 min-width:0!important;max-width:100%!important;
 overflow-wrap:anywhere!important;
}
#account-dialog input:not([type=checkbox]):not([type=radio]),
#account-dialog textarea,#account-dialog select{
 box-sizing:border-box!important;width:100%!important;max-width:100%!important;
 min-width:0!important;font-size:14px!important;line-height:1.4!important;
 min-height:42px!important;
}
#account-dialog .toggle{
 display:flex!important;align-items:center!important;gap:11px!important;
 min-width:0!important;min-height:51px!important;
 padding:11px 12px!important;line-height:1.3!important;
}
#account-dialog .toggle input[type=checkbox]{
 flex:0 0 19px!important;width:19px!important;height:19px!important;min-width:19px!important;
 margin:0!important;accent-color:#1bdddf!important;
}
#account-dialog .account-actions{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:8px!important;align-items:stretch!important;
 width:100%!important;max-width:100%!important;
}
#account-dialog button:not(#account-close),#account-dialog a{
 max-width:100%!important;overflow-wrap:anywhere!important;
}
#account-dialog .account-actions button{min-width:0!important;min-height:42px!important;white-space:normal!important;padding:9px 6px!important;line-height:1.2!important;}
#account-dialog :is(.profile-photo-row,.photo-actions,.account-auth-actions){
 min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;
}
#account-dialog .account-footer{max-width:100%!important;margin:12px 0 0!important;padding:12px 0 0!important;}
#account-dialog :focus-visible{outline:2px solid #5bfafa!important;outline-offset:2px!important;}
/* All three account tabs now use a constant-height anchored panel on phone screens. */
@media(max-width:720px){
 #account-dialog{
  position:fixed!important;
  left:10px!important;right:10px!important;
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;top:auto!important;
  transform:none!important;
  width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;
  height:min(78dvh,720px)!important;min-height:0!important;
  max-height:calc(100dvh - 16px)!important;
  margin:0!important;padding:13px!important;
 }
 #account-dialog .account-pane{padding:11px 8px!important;}
 #account-dialog .account-tabs button{font-size:11px!important;}
}
/* On desktop and landscape, respect the map application's existing centered
   dialog geometry. Do not replace its position or transform. */
@media(min-width:721px){
 #account-dialog{max-height:calc(100dvh - 16px)!important;padding:18px!important;}
}
@media(min-width:721px) and (max-height:550px){
 #account-dialog{max-height:calc(100dvh - 12px)!important;padding:11px 14px!important;}
 #account-dialog .account-head{min-height:48px!important;padding:6px 0!important;}
 #account-dialog .account-head h2{font-size:18px!important;}
 #account-dialog .account-tabs{margin:8px 0!important;}
 #account-dialog .account-tabs button{min-height:36px!important;}
}
/* Prevent account content tabs from resizing the window on narrower screens. */
@media(max-width:720px){
 #account-dialog[open]{min-height:min(78dvh,700px)!important;}
}
@media(min-width:721px){
 #account-dialog[open]{min-height:min(calc(100dvh - 24px),740px)!important;}
}