/* Portrait phone bottom-spacing authority.
   The fixed tray and the active page must not both reserve the same space. */
@media (orientation: portrait) and (max-width: 640px) {
  /* Page-level rules below are the only bottom-clearance owners on phones. */
  body {
    padding-bottom: 0 !important;
  }

  body.landing-active main {
    padding-bottom: 0 !important;
  }

  /* Empty live regions previously contributed their grid gap and top margin. */
  body.landing-active .landing-notification:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* No persistent tray is shown on the logged-out landing page. */
  body.cpl-logged-out.landing-active .landing-wrap {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* The collapsed portrait tray exposes a 40px tab row. */
  body.landing-active.bottom-tray-collapsed:not(.cpl-logged-out) .landing-wrap {
    padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  }

  /* The open landing tray is 258px tall in the shared phone layout. */
  body.landing-active:not(.bottom-tray-collapsed):not(.cpl-logged-out) .landing-wrap {
    padding-bottom: calc(266px + env(safe-area-inset-bottom)) !important;
  }

  /* Live, Standings, Bracket, Teams, Stats, Map, and other app pages share
     the same main element and therefore the same tray-aware clearance. */
  body.bottom-tray-collapsed:not(.landing-active) main {
    padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  }

  /* The normal open non-landing tray is 182px tall. */
  body:not(.bottom-tray-collapsed):not(.landing-active) main {
    padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
  }
}