/* Room for the iPhone notch and home bar when Aurora runs full screen from the home screen.
   Every env() value is 0 on screens without them, so those layouts stay exactly as they were.
   The html prefix keeps these rules ahead of page styles that load later. */
html body {
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
html .aurora-header-wrap,
html .header-wrap { padding-top: env(safe-area-inset-top); }
html .header-wrap,
html .unified-entry > .aurora-header-wrap {
  box-sizing: border-box;
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

html :is(.toast, .aurora-navigation-status) { bottom: calc(24px + env(safe-area-inset-bottom)); }

html :is(.modal-backdrop, .auth-overlay, .signin-backdrop, .detail-backdrop) {
  padding: max(var(--edge), env(safe-area-inset-top)) max(var(--edge), env(safe-area-inset-right))
           max(var(--edge), env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left));
}
.modal-backdrop, .auth-overlay, .signin-backdrop { --edge: 24px; }
.detail-backdrop { --edge: 32px; }
@media (max-width: 800px) { .detail-backdrop { --edge: 16px; } }
@media (max-width: 760px) { .modal-backdrop { --edge: 16px; } }
@media (max-width: 560px) {
  .auth-overlay, .signin-backdrop { --edge: 16px; }
  .detail-backdrop { --edge: 10px; }
}

html .home-welcome-footer { bottom: max(var(--edge), env(safe-area-inset-bottom)); }
.home-welcome-footer { --edge: 26px; }
@media (max-width: 640px) { .home-welcome-footer { --edge: 22px; } }
@media (max-height: 560px) and (orientation: landscape) { .home-welcome-footer { --edge: 5px; } }

/* Student apps don't know about the home bar, so the app frame stops above it. */
html .app-viewer-content {
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
}