/* Keep the phone shell when a touch phone rotates. Match themes.js and desktop.js. */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html[data-device=phone] .os-window:not(.is-active){visibility:hidden}
  html[data-device=phone] .theme-option{display:grid}
}

/* A compact Home screen leaves room for every app without changing the chosen OS. */
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  html[data-device=phone][data-theme]{
    --phone-top:calc(36px + env(safe-area-inset-top,0px));
    --phone-bottom:calc(76px + env(safe-area-inset-bottom,0px));
  }
  html[data-device=phone][data-theme] .wallpaper-brand{
    left:max(20px,env(safe-area-inset-left,0px));right:auto;top:50%;bottom:auto;
    width:20%;max-width:180px;transform:translateY(-50%);
  }
  html[data-device=phone][data-theme] .wallpaper-brand span{display:none}
  html[data-device=phone][data-theme] .desktop-icons{
    left:25%;right:max(16px,env(safe-area-inset-right,0px));top:8px;bottom:8px;width:auto;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:center;
    overflow-y:auto;overscroll-behavior:contain;padding:4px;
  }
  html[data-device=phone][data-theme] .desktop-icon{
    width:100%;min-height:74px;padding:3px 0;gap:4px;font-size:11px;
  }
  html[data-device=phone]:is([data-theme=macos],[data-theme=modern]) .icon-art{width:48px;height:48px}
  html[data-device=phone][data-theme] .desktop-hint{display:none}
  html[data-device=phone][data-theme] footer.taskbar{
    left:50%;right:auto;bottom:calc(6px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    width:min(410px,calc(100% - 48px));max-width:none;height:62px;padding:3px 9px;gap:7px;
  }
  html[data-device=phone][data-theme] :is(.start-button,.dock-app){height:54px;min-height:44px;gap:2px;padding:2px}
  html[data-device=phone]:is([data-theme=macos],[data-theme=modern]) :is(.start-button>span,.dock-app-art){width:34px;height:34px}
  html[data-device=phone][data-theme] .phone-home-indicator{display:none}
  html[data-device=phone][data-theme] .phone-app-open footer.taskbar{display:none}
  html[data-device=phone][data-theme] .phone-app-open .os-desktop{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  html[data-device=phone][data-theme] :is(.os-titlebar,.os-window.is-active .os-titlebar){min-height:48px;padding-block:2px;flex-shrink:0}
  html[data-device=phone][data-theme] #projekt .wizard-layout{grid-template-columns:120px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  html[data-device=phone][data-theme] #projekt .wizard-sidebar{overflow-y:auto;padding:4px}
  html[data-device=phone][data-theme] #projekt .wizard-sidebar>p{display:none}
  html[data-device=phone][data-theme] #projekt .wizard-sidebar ol{grid-template-columns:1fr;gap:2px}
  html[data-device=phone][data-theme] #projekt .wizard-sidebar button{min-height:44px;text-align:left;justify-content:flex-start;padding:6px}
  html[data-device=phone][data-theme] #projekt .wizard-main{padding:14px 16px}
  html[data-device=phone][data-theme] #projekt footer.wizard-footer{min-height:56px;padding-block:5px}
  #setup-dialog .setup-heading{padding:12px 20px 0}
  #setup-dialog .setup-kicker{margin-bottom:4px}
  #setup-dialog h2{font-size:22px;margin-bottom:6px}
  #setup-dialog .setup-options{padding:12px 20px;min-height:70px}
  #setup-dialog .setup-footer{padding:8px 20px}
}