/* Shared Safari / Home Screen geometry. Insets are zero on ordinary desktops. */
:root {
  --pwa-top: env(safe-area-inset-top, 0px);
  --pwa-right: env(safe-area-inset-right, 0px);
  --pwa-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-left: env(safe-area-inset-left, 0px);
}
.student-ui .app-shell { min-height: 100dvh; }
.student-ui .topbar {
  padding-top: var(--pwa-top);
  padding-left: var(--pwa-left);
  padding-right: var(--pwa-right);
}
.student-ui .main-content {
  /* Preserve the padding of each existing learning surface. */
  border-left: var(--pwa-left) solid transparent;
  border-right: var(--pwa-right) solid transparent;
}
.student-ui.student-layer-open .access-overlay {
  top: calc(73px + var(--pwa-top));
  border-left: var(--pwa-left) solid transparent;
  border-right: var(--pwa-right) solid transparent;
}
.student-ui.access-locked:not(.student-layer-open) .access-overlay:not(:has([data-teacher-workspace])) {
  border-top: var(--pwa-top) solid transparent;
  border-right: var(--pwa-right) solid transparent;
  border-bottom: var(--pwa-bottom) solid transparent;
  border-left: var(--pwa-left) solid transparent;
}
.student-ui .student-login {
  min-height: calc(100dvh - var(--pwa-top) - var(--pwa-bottom));
}
.student-ui .modal-overlay {
  padding: max(16px, var(--pwa-top)) max(16px, var(--pwa-right))
    max(16px, var(--pwa-bottom)) max(16px, var(--pwa-left));
  overflow-y: auto;
}
@media (max-width: 899px) {
  .student-ui .bottom-nav {
    padding-left: var(--pwa-left);
    padding-right: var(--pwa-right);
    padding-bottom: var(--pwa-bottom);
  }
  .student-ui.student-layer-open .access-overlay { bottom: calc(73px + var(--pwa-bottom)); }
  /* Keep the submit button reachable on small phones and with the keyboard open. */
  .student-ui .student-login [data-auth-form="login"] {
    padding-top: clamp(24px, 12dvh, 134px);
  }
}