:root { --overlay-height: 100dvh; --overlay-top: 0px; }
.drawer, dialog, [aria-modal="true"], .job-primary-column,
.job-activity-column, .customer-profile-body, .customer-profile-content,
#customerJobList, .quick-picker-body, .email-fields {
  overscroll-behavior: contain;
}

/* A form must be allowed to shrink before its body can become scrollable. */
#applianceEditorForm { min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; }
.quick-picker > header h2, .quick-picker > header .eyebrow { color: #fff; }
#createDrawer { scroll-padding-top: 8rem; scroll-padding-bottom: 6rem; }

@media (max-width: 900px) {
  .drawer { height: var(--overlay-height); }
  #jobDrawer, #customerDrawer {
    top: calc(var(--overlay-top) + 6px) !important;
    left: 6px !important;
    width: calc(100vw - 12px) !important;
    height: calc(var(--overlay-height) - 12px) !important;
    max-height: calc(var(--overlay-height) - 12px);
  }
  #jobDrawer { grid-template-rows: auto auto minmax(0,1fr); }
  #customerDrawer { grid-template-rows: auto minmax(0,1fr); }
  #jobDrawer .drawer-head { cursor: default; touch-action: auto; }
  #createDrawer { top: var(--overlay-top); padding-bottom: env(safe-area-inset-bottom); }
  #createDrawer .create-actions {
    bottom: max(0px, calc(100dvh - var(--overlay-height) - var(--overlay-top)));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .quick-picker-backdrop, .email-composer-backdrop, .sms-composer-backdrop,
  .payment-composer-backdrop, .expense-composer-backdrop,
  .schedule-confirm-backdrop, .integration-detail-backdrop {
    top: var(--overlay-top); bottom: auto; height: var(--overlay-height);
    box-sizing: border-box; padding: 6px;
  }
  .quick-picker, .email-composer, .sms-composer, .payment-composer,
  .expense-composer, .schedule-confirm, .integration-detail-dialog, dialog {
    max-height: calc(var(--overlay-height) - 12px);
    box-sizing: border-box;
  }
  .sms-composer, .payment-composer, .schedule-confirm { overflow-y: auto; }
  .quick-picker-body { max-height: calc(var(--overlay-height) - 150px); }
  [aria-modal="true"] input, [aria-modal="true"] select, [aria-modal="true"] textarea,
  .drawer input, .drawer select, .drawer textarea { font-size: 16px; }
}