/* iPhone / iPad safe areas.
   viewport-fit=cover lets JP Card Lab use the full screen. env(safe-area-*)
   evaluates to 0 on devices without a notch/Dynamic Island, so no UA sniffing
   is necessary and Android/desktop keep their existing layout. */

:root {
  --jp-safe-top: env(safe-area-inset-top, 0px);
  --jp-safe-right: env(safe-area-inset-right, 0px);
  --jp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jp-safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 680px) {
  /* General app shell: keep the top bar / overflow controls below the notch. */
  .shell {
    padding-top: calc(10px + var(--jp-safe-top)) !important;
    padding-right: max(12px, var(--jp-safe-right)) !important;
    padding-bottom: calc(86px + var(--jp-safe-bottom)) !important;
    padding-left: max(12px, var(--jp-safe-left)) !important;
  }

  /* The bottom navigation already floats above the home indicator; include
     horizontal safe areas as well for landscape iPhones. */
  .jp-mobile-nav {
    left: max(8px, var(--jp-safe-left)) !important;
    right: max(8px, var(--jp-safe-right)) !important;
    bottom: max(8px, var(--jp-safe-bottom)) !important;
  }

  /* Fullscreen scanner has its own shell and therefore needs its own insets. */
  .scanner-dialog .scanner-shell {
    padding-top: calc(8px + var(--jp-safe-top));
    padding-right: max(8px, var(--jp-safe-right));
    padding-bottom: max(8px, var(--jp-safe-bottom));
    padding-left: max(8px, var(--jp-safe-left));
  }

  .scanner-dialog .scanner-head {
    min-height: 48px;
  }

  /* Full-width mobile dialogs may otherwise place their close/menu controls
     inside the Dynamic Island/status-bar region. */
  dialog[open] {
    max-width: calc(100vw - var(--jp-safe-left) - var(--jp-safe-right));
  }

  dialog[open] > :first-child {
    padding-top: max(0px, var(--jp-safe-top));
  }
}