/* iPhone viewport, text scaling and display cutouts (including iOS 15). */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --viewport-height: 100vh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}
body { min-width: 0; }
button, input, select, textarea { max-width: 100%; }

body { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.site, .field, .topbar, .top-actions, .form-grid { min-width: 0; }
#caseForm .field input, #caseForm .field select { font-size: 16px; }
.overlay, #noticeOverlay, .success-overlay {
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
#noticeOverlay .dialog {
  height: min(680px, calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 32px));
  max-height: calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 32px);
  min-height: 0;
}
.success-modal { max-height: calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 32px); overflow-y: auto; }
.event-picker {
  width: min(430px, calc(100% - var(--safe-left) - var(--safe-right)));
  max-height: calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - 16px);
  margin-right: auto; margin-left: auto;
  padding-bottom: var(--safe-bottom);
}
.date-picker-selects select { font-size: 16px; }
html.safari-gate-compact-warning .safari-gate {
  display: flex;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  overflow-y: auto;
}
html.safari-gate-compact-warning .safari-gate-screen { flex: none; width: min(100%, 360px); margin: auto; }
@media (max-width: 350px) {
  .topbar>.top-actions { right: 10px; }
  .brand-hero-art>figcaption { font-size: 14px; letter-spacing: .5px; }
  .hero { padding-right: 18px; padding-left: 18px; }
  .hero h1 { font-size: 25px; }
  #noticeOverlay .notice-scroll, #noticeOverlay .notice-bottom { padding-right: 16px; padding-left: 16px; }
  .date-picker-month, .date-picker-week, .date-picker-grid { padding-right: 16px; padding-left: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #noticeOverlay .dialog { border-radius: 18px; }
  #noticeOverlay .dialog-head { padding-top: 16px; }
  #noticeOverlay .notice-bottom { padding-bottom: 12px; }
  .success-modal { padding-top: 20px; padding-bottom: 20px; }
}