/* Loaded after the existing styles. Keep their spacing when safe-area APIs
   are unavailable, and add only the device's actual inset when supported. */
.shell{--device-shell-top:28px;--device-shell-side:40px;--device-shell-bottom:78px}
.invite-overlay{--device-overlay-top:24px;--device-overlay-side:24px;--device-overlay-bottom:24px}
.shop-overlay{--device-overlay-top:32px;--device-overlay-side:24px;--device-overlay-bottom:32px}
.music-toggle{--device-music-bottom:20px;--device-music-right:24px;bottom:20px;right:24px}

@media(max-width:1000px) and (min-width:761px){
 .shell{--device-shell-top:25px;--device-shell-side:25px}
}
@media(max-width:760px){
 .shell{--device-shell-top:19px;--device-shell-side:16px;--device-shell-bottom:72px}
 .shop-overlay{--device-overlay-top:12px;--device-overlay-side:10px;--device-overlay-bottom:12px}
 .music-toggle{--device-music-bottom:14px;--device-music-right:16px;bottom:14px;right:16px}
}
@media(max-width:480px){
 .invite-overlay{--device-overlay-top:14px;--device-overlay-side:14px;--device-overlay-bottom:14px}
}

@supports(padding-top:env(safe-area-inset-top)){
 .shell{
  padding-top:calc(var(--device-shell-top) + env(safe-area-inset-top,0px));
  padding-right:calc(var(--device-shell-side) + env(safe-area-inset-right,0px));
  padding-bottom:calc(var(--device-shell-bottom) + env(safe-area-inset-bottom,0px));
  padding-left:calc(var(--device-shell-side) + env(safe-area-inset-left,0px));
 }
 .invite-overlay,.shop-overlay{
  padding-top:calc(var(--device-overlay-top) + env(safe-area-inset-top,0px));
  padding-right:calc(var(--device-overlay-side) + env(safe-area-inset-right,0px));
  padding-bottom:calc(var(--device-overlay-bottom) + env(safe-area-inset-bottom,0px));
  padding-left:calc(var(--device-overlay-side) + env(safe-area-inset-left,0px));
 }
 .music-toggle{
  bottom:calc(var(--device-music-bottom) + env(safe-area-inset-bottom,0px));
  right:calc(var(--device-music-right) + env(safe-area-inset-right,0px));
 }
}

/* Apply to narrow layouts and touch devices, including landscape phones. */
@media(max-width:760px),(any-pointer:coarse){
 .profile input,.invite-sheet input{font-size:16px;min-height:44px}
 button{min-height:44px;min-width:44px}
}