/* Loaded after the showcase styles. The existing screens and navigation are shared. */
html[data-app-mode="app"],
html[data-app-mode="app"] body { width:100%; height:100%; overflow:hidden; }
html[data-app-mode="app"] body { display:block; padding:0; background:var(--card); }
html[data-app-mode="app"] .app-layout { width:100%; height:100%; }
html[data-app-mode="app"] .showcase-only { display:none; }
html[data-app-mode="app"] .app-shell {
  display:flex; flex-direction:column; width:100%; max-width:none; margin:0;
  height:100vh; height:100dvh; padding:0; border:0; border-radius:0; box-shadow:none;
}
html[data-app-mode="app"] .app-screen {
  flex:1 1 0; min-height:0; height:auto; max-height:none; overflow-y:auto;
  overscroll-behavior-y:contain;
  padding:calc(18px + env(safe-area-inset-top, 0px))
    calc(18px + env(safe-area-inset-right, 0px)) 18px
    calc(18px + env(safe-area-inset-left, 0px));
}
html[data-app-mode="app"] .bottomnav {
  flex:0 0 auto;
  padding:11px calc(6px + env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px));
}
html[data-app-mode="app"] .modal-sheet {
  max-height:calc(100% - env(safe-area-inset-top, 0px)); overflow-y:auto;
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}