/* Ghosla Career: corrections to the portal's own stylesheet.
 *
 * A separate file rather than edits to portal.css, for the same reason
 * portal.js is left alone — the model stays the model, and everything
 * this site changes about it is in one place where it can be read and
 * undone. Loaded after portal.css, so these win on equal specificity.
 */

/* The account menu ran off the bottom of the window.
 *
 * .ddm is `position:absolute` under the avatar with no height limit,
 * and the student menu is sixteen rows — a header, eleven links, two
 * rules and the language button. On a laptop at 768px, and on any
 * phone, the last rows sat below the fold with nothing to scroll:
 * the page behind it scrolled instead, the menu stayed put, and
 * Account settings, Payment methods, Subscriptions, Purchase history
 * and Ghosla Pass could not be reached at all.
 *
 * It is capped to what is actually on screen and scrolls inside
 * itself. overscroll-behavior stops that scroll running on into the
 * page once it hits the end. */
.ddm {
  max-height: min(70vh, calc(100vh - 110px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Narrow screens: anchoring a 290px panel to the right of a button
   that is itself near the edge leaves it cramped and still too tall.
   Below 560px it becomes a sheet under the header — full width inside
   the margins, and never taller than the space there is. */
@media (max-width: 560px) {
  .ddm {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 84px - env(safe-area-inset-top, 0px));
  }
}

/* The same cap for the notifications panel, which is the other .ddm on
   the page and grows with the number of notifications. */
@media (max-width: 560px) {
  #bell-menu { top: calc(64px + env(safe-area-inset-top, 0px)); }
}