/* Broker Portal modal viewport.
   The top nav is sticky at z-index 1200 and the mobile bottom nav is fixed at
   z-index 1200. The backdrops below sit under that z-index and used to start
   at the top of the viewport, so the navs painted over the dialog header and
   actions. portal-modal-viewport.js publishes the live nav edges as
   --rgp-modal-top and --rgp-modal-bottom. These rules start each backdrop
   between the navs and size each dialog to its backdrop instead of to vh.
   "html body" outranks the single-class rules in portal.html and
   portal-mobile.css without !important. */

html body :is(
  .briefing-popup-overlay,
  .renewals-popup-overlay,
  .pourover-overlay,
  .uxpop-overlay,
  .fileaway-overlay,
  .funded-overlay,
  .drawer-overlay,
  .qd-backdrop,
  .pov-compose-backdrop
) {
  top: var(--rgp-modal-top, 0px);
  bottom: var(--rgp-modal-bottom, 0px);
}

html body :is(.fileaway-overlay, .funded-overlay) {
  padding: 16px;
}

/* Dialogs keep their designed height on tall screens and shrink to the
   space between the navs on short ones. Header and footer stay put; the
   existing scroll region takes up the difference. */
html body .uxpop-card { max-height: min(85vh, 100%); }
html body .renewals-popup-card { max-height: min(80vh, 100%); }
html body .renewals-popup-list { min-height: 0; }
html body .funded-card { max-height: min(90vh, 100%); }
html body .fileaway-card { max-height: 100%; overflow-y: auto; }

/* Side drawers fill the space between the navs. */
html body .drawer { height: 100%; }
html body .qd-drawer {
  top: var(--rgp-modal-top, 0px);
  bottom: var(--rgp-modal-bottom, 0px);
  height: auto;
}

/* The Pour Over compose dialog is fixed and centred on its own, not inside
   its backdrop, so centre it in the space between the navs. */
html body .pov-drawer {
  top: calc((var(--rgp-modal-top, 0px) + 100vh - var(--rgp-modal-bottom, 0px)) / 2);
  top: calc((var(--rgp-modal-top, 0px) + 100dvh - var(--rgp-modal-bottom, 0px)) / 2);
  max-height: min(90vh, calc(100vh - var(--rgp-modal-top, 0px) - var(--rgp-modal-bottom, 0px) - 32px));
  max-height: min(90dvh, calc(100dvh - var(--rgp-modal-top, 0px) - var(--rgp-modal-bottom, 0px) - 32px));
}

@media (max-width: 760px) {
  /* portal-mobile.css turns these into bottom sheets sized to the full
     viewport. Size them to the backdrop so the top of the sheet stays
     reachable above the bottom nav. */
  html body :is(.briefing-popup-card, .pourover-modal) {
    max-height: 100% !important;
    overflow-y: auto;
  }
}