/* OnlyShows 0.11.18: transparent hard mastheads and geometry-safe mobile keyboards. */

@media (max-width: 719px) {
  :root {
    --mobile-content-cut: 58px;
  }

  /*
   * The masthead is only a clipping boundary. Wallpaper remains continuous,
   * while cards are hidden until they pass the shared home/database title.
   */
  body:not(.mobile-profile-tab)::before,
  body.mobile-database-tab:not(.mobile-profile-tab)::before {
    content: none !important;
    display: none !important;
  }

  body.mobile-database-tab .mobile-workspace-heading {
    z-index: 8 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: var(--mobile-content-cut) !important;
    padding: var(--mobile-masthead-top) 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

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

  /*
   * Focusing the database field must never destroy either row of the
   * integrated bottom shell. This also removes the stale-focus gap after the
   * keyboard is dismissed without blurring the search input.
   */
  html body.mobile-database-input-active > .mobile-bottom-shell {
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    grid-template-rows: 52px 56px !important;
    border-radius: 30px !important;
    transform: none !important;
  }

  html body.mobile-database-input-active > .mobile-bottom-shell > .mobile-bottom-nav,
  html body.mobile-database-input-active > .mobile-bottom-shell > .mobile-bottom-nav.is-scroll-hidden {
    height: 56px !important;
    min-height: 56px !important;
    padding: 3px !important;
    border: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.mobile-database-input-active > #mobileWorkspaceDock {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
   * The form starts at the layout edge. JavaScript measures the real overlap
   * with VisualViewport and lifts it only by the pixels the keyboard covers,
   * so browsers that already resize are not shifted twice.
   */
  html body #searchDialog.search-dialog:has(#remoteSearchInput:focus) .remote-search {
    transform: translateY(calc(-1 * var(--remote-search-lift, 0px))) !important;
    will-change: transform;
  }

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

  html body #searchDialog.search-dialog.keyboard-closing .remote-search {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #searchDialog.search-dialog.keyboard-closing::backdrop {
    opacity: 1 !important;
  }
}