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

/* The background remains full bleed in an installed PWA, while controls in
   direct-child app bars sit below the Dynamic Island/status area. */
html.iw-standalone body {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: var(--iw-safe-bottom);
}
html.iw-standalone body > header {
  box-sizing: border-box;
  padding-top: calc(10px + var(--iw-safe-top)) !important;
}
html.iw-standalone .fs-bar {
  padding-top: calc(10px + var(--iw-safe-top)) !important;
  padding-left: max(14px, var(--iw-safe-left)) !important;
  padding-right: max(14px, var(--iw-safe-right)) !important;
}

@supports (min-height: 100dvh) {
  html.iw-standalone body { min-height: 100dvh; }
}

@media (max-width: 768px) {
  body > header {
    padding-top: calc(10px + var(--iw-safe-top)) !important;
    padding-left: max(12px, var(--iw-safe-left)) !important;
    padding-right: max(12px, var(--iw-safe-right)) !important;
  }
  body > main {
    margin-left: var(--iw-safe-left);
    margin-right: var(--iw-safe-right);
  }

  /* Keep controls comfortable in both mobile Chrome and the installed PWA.
     The visible control may remain compact; its interactive box is 44px. */
  button,
  [role="button"],
  body > header a {
    box-sizing: border-box;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.10);
    -webkit-user-select: none;
    user-select: none;
  }
  body > header a {
    display: inline-flex;
    align-items: center;
  }
  button:active,
  [role="button"]:active,
  body > header a:active {
    opacity: 0.72;
  }
  input,
  select,
  textarea { font-size: 16px; }

  /* The item header has many intentionally top-level actions. Let them wrap
     instead of overflowing or forcing any action beneath the screen edge. */
  body.iw-item-view > header .iw-item-header-row {
    align-items: flex-start !important;
  }
  body.iw-item-view > header .iw-item-header-actions {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
  }
  body.iw-item-view > header .iw-item-header-secondary {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Fixed and sticky actions must clear the iPhone home indicator. */
  #selActionBar,
  .selection-bar {
    bottom: calc(12px + var(--iw-safe-bottom)) !important;
  }
  .actions {
    padding-bottom: calc(16px + var(--iw-safe-bottom)) !important;
  }
  #enhanceModal {
    bottom: calc(20px + var(--iw-safe-bottom)) !important;
    left: max(20px, var(--iw-safe-left)) !important;
    right: max(20px, var(--iw-safe-right)) !important;
  }
  #controls {
    top: calc(20px + var(--iw-safe-top)) !important;
    right: max(20px, var(--iw-safe-right)) !important;
  }
  #info {
    bottom: calc(20px + var(--iw-safe-bottom)) !important;
    left: max(20px, var(--iw-safe-left)) !important;
    right: max(20px, var(--iw-safe-right)) !important;
  }

  /* Full-screen overlays remain full bleed, but their controls and modal
     panels stay within all four safe-area edges. */
  #rmModal,
  #deleteModal,
  #policyModal,
  #compareModal,
  .modal-overlay {
    box-sizing: border-box;
    padding-top: max(20px, var(--iw-safe-top)) !important;
    padding-right: max(20px, var(--iw-safe-right)) !important;
    padding-bottom: max(20px, var(--iw-safe-bottom)) !important;
    padding-left: max(20px, var(--iw-safe-left)) !important;
  }
}