/* OnlyShows 0.11.13: keyboard-safe mobile chrome and a shorter shared masthead fade. */

@media (max-width: 719px) {
  :root {
    --mobile-visual-bottom-offset: 0px;
  }

  /*
   * Modal sheets sit above the app chrome. Hiding the chrome, instead of
   * merely blurring it through the backdrop, prevents a ghost Tab row while
   * the software keyboard is being dismissed by a back gesture.
   */
  body:has(dialog[open]:not(.mobile-tab-page)) > .mobile-bottom-shell,
  body:has(dialog[open]:not(.mobile-tab-page)) > #mobileWorkspaceDock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /*
   * While the database field owns the keyboard, retain only its tool row and
   * pin that row to the visual viewport. The main Tab row no longer reserves
   * a large, empty strip above the IME.
   */
  body.mobile-keyboard-open.mobile-database-searching > .mobile-bottom-shell {
    bottom: calc(var(--mobile-visual-bottom-offset) + 2px) !important;
    grid-template-rows: 52px 0 !important;
    border-radius: 24px !important;
    transition: bottom 90ms linear !important;
  }

  body.mobile-keyboard-open.mobile-database-searching .mobile-bottom-shell .mobile-bottom-nav {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-keyboard-open #mobileWorkspaceDock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Inputs inside modal sheets must not reveal the app shell while Android is
   * restoring the visual viewport after a side-swipe back gesture.
   */
  body.mobile-keyboard-open:not(.mobile-database-searching) > .mobile-bottom-shell {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Home and database use the same physical fade curve. It reaches full
   * opacity sooner than v72, leaving less blurred/empty space below the title.
   */
  html body:not(.mobile-database-tab):not(.mobile-profile-tab) #showGrid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 10%) 6px,
      rgb(0 0 0 / 32%) 16px,
      rgb(0 0 0 / 62%) 30px,
      rgb(0 0 0 / 86%) 44px,
      #000 60px,
      #000 calc(100% - 52px),
      rgb(0 0 0 / 76%) calc(100% - 40px),
      rgb(0 0 0 / 42%) calc(100% - 27px),
      rgb(0 0 0 / 12%) calc(100% - 14px),
      transparent calc(100% - 4px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 10%) 6px,
      rgb(0 0 0 / 32%) 16px,
      rgb(0 0 0 / 62%) 30px,
      rgb(0 0 0 / 86%) 44px,
      #000 60px,
      #000 calc(100% - 52px),
      rgb(0 0 0 / 76%) calc(100% - 40px),
      rgb(0 0 0 / 42%) calc(100% - 27px),
      rgb(0 0 0 / 12%) calc(100% - 14px),
      transparent calc(100% - 4px),
      transparent 100%
    ) !important;
  }

  html body.mobile-database-tab:not(.mobile-profile-tab) #showGrid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 10%) 6px,
      rgb(0 0 0 / 32%) 16px,
      rgb(0 0 0 / 62%) 30px,
      rgb(0 0 0 / 86%) 44px,
      #000 60px,
      #000 calc(100% - 102px),
      rgb(0 0 0 / 84%) calc(100% - 88px),
      rgb(0 0 0 / 58%) calc(100% - 70px),
      rgb(0 0 0 / 28%) calc(100% - 53px),
      rgb(0 0 0 / 8%) calc(100% - 38px),
      transparent calc(100% - 28px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 10%) 6px,
      rgb(0 0 0 / 32%) 16px,
      rgb(0 0 0 / 62%) 30px,
      rgb(0 0 0 / 86%) 44px,
      #000 60px,
      #000 calc(100% - 102px),
      rgb(0 0 0 / 84%) calc(100% - 88px),
      rgb(0 0 0 / 58%) calc(100% - 70px),
      rgb(0 0 0 / 28%) calc(100% - 53px),
      rgb(0 0 0 / 8%) calc(100% - 38px),
      transparent calc(100% - 28px),
      transparent 100%
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-keyboard-open.mobile-database-searching > .mobile-bottom-shell {
    transition: none !important;
  }
}