/* OnlyShows 0.11.16: bottom-anchored search, stable dialog close and hard mobile mastheads. */

@media (max-width: 719px) {
  /*
   * Do not add the keyboard inset to a layout the browser has already
   * resized. The focused database search row stays on the actual viewport
   * edge while the main Tab row remains collapsed.
   */
  html body.mobile-database-input-active > .mobile-bottom-shell {
    right: 12px !important;
    bottom: 0 !important;
    left: 12px !important;
    transform: none !important;
  }

  /*
   * Keep the add-show page opaque until Android finishes dismissing the IME.
   * Its four fixed edges remain filled throughout the return transition.
   */
  html:has(#searchDialog[open]),
  body:has(#searchDialog[open]),
  html body #searchDialog.search-dialog[open],
  html body #searchDialog.search-dialog.closing {
    background: var(--surface-container-high) !important;
  }

  html body #searchDialog.search-dialog.closing {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html body #searchDialog.search-dialog::backdrop {
    background: var(--surface-container-high) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /*
   * Home and database now share a solid black masthead. Cards continue
   * underneath it and are cut at a hard edge—there is no blur, gradient,
   * divider or shadow between the masthead and the scrolling content.
   */
  body:not(.mobile-database-tab):not(.mobile-profile-tab)::before {
    content: "";
    position: fixed;
    z-index: 30;
    top: 0;
    right: 0;
    left: 0;
    height: var(--mobile-masthead-height);
    background: #000;
    pointer-events: none;
  }

  body.mobile-database-tab:not(.mobile-profile-tab)::before {
    content: "";
    position: fixed;
    z-index: 6;
    top: 0;
    right: 0;
    left: 0;
    height: var(--mobile-masthead-height);
    background: #000;
    pointer-events: none;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .topbar,
  body:not(.mobile-database-tab):not(.mobile-profile-tab) .hero,
  body.mobile-database-tab .mobile-workspace-heading {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .brand,
  body:not(.mobile-database-tab):not(.mobile-profile-tab) .hero h1,
  body.mobile-database-tab .mobile-workspace-heading h2 {
    color: #fff !important;
  }

  body.mobile-database-tab .mobile-workspace-heading span {
    color: rgb(255 255 255 / 72%) !important;
  }

  html body:not(.mobile-database-tab):not(.mobile-profile-tab) #showGrid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #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,
      #000 0,
      #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,
      #000 0,
      #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,
      #000 0,
      #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;
  }
}