/* OnlyShows 0.11.11: aligned mobile mastheads, compact navigation and focused theme choices. */

@media (max-width: 719px) {
  :root {
    --mobile-masthead-top: 4px;
    --mobile-masthead-title-top: 24px;
    --mobile-masthead-height: 64px;
    --mobile-masthead-title-size: 28px;
  }

  body:not(.mobile-profile-tab) .library:not([hidden]) {
    top: 0 !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) main {
    padding-top: 0 !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .topbar {
    top: var(--mobile-masthead-top) !important;
    height: 18px !important;
    min-height: 18px !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .topbar .brand {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .hero {
    top: var(--mobile-masthead-title-top) !important;
    height: 34px;
    padding: 0 !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .hero h1,
  body.mobile-database-tab .mobile-workspace-heading h2,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head h2 {
    margin: 0 !important;
    font-size: var(--mobile-masthead-title-size) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    transform: none !important;
  }

  body.mobile-database-tab .mobile-workspace-heading {
    height: var(--mobile-masthead-height);
    padding: var(--mobile-masthead-top) 2px 0 !important;
  }

  body.mobile-database-tab .mobile-workspace-heading p,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head p {
    height: 18px;
    margin: 0 0 2px !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head {
    min-height: var(--mobile-masthead-height);
    padding: var(--mobile-masthead-top) var(--mobile-title-gutter) 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /*
   * Home and database share the same 96px top fade. The bottom portions
   * remain tailored to their different control heights.
   */
  html body:not(.mobile-database-tab):not(.mobile-profile-tab) #showGrid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 4%) 10px,
      rgb(0 0 0 / 12%) 24px,
      rgb(0 0 0 / 28%) 40px,
      rgb(0 0 0 / 50%) 58px,
      rgb(0 0 0 / 72%) 74px,
      rgb(0 0 0 / 90%) 88px,
      #000 96px,
      #000 calc(100% - 56px),
      rgb(0 0 0 / 76%) calc(100% - 44px),
      rgb(0 0 0 / 42%) calc(100% - 29px),
      rgb(0 0 0 / 12%) calc(100% - 15px),
      transparent calc(100% - 4px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 4%) 10px,
      rgb(0 0 0 / 12%) 24px,
      rgb(0 0 0 / 28%) 40px,
      rgb(0 0 0 / 50%) 58px,
      rgb(0 0 0 / 72%) 74px,
      rgb(0 0 0 / 90%) 88px,
      #000 96px,
      #000 calc(100% - 56px),
      rgb(0 0 0 / 76%) calc(100% - 44px),
      rgb(0 0 0 / 42%) calc(100% - 29px),
      rgb(0 0 0 / 12%) calc(100% - 15px),
      transparent calc(100% - 4px),
      transparent 100%
    ) !important;
  }

  html body .mobile-bottom-shell .mobile-bottom-nav,
  html body .mobile-bottom-shell .mobile-bottom-nav.is-scroll-hidden {
    height: 56px !important;
    min-height: 56px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  html body > .mobile-bottom-shell {
    grid-template-rows: 0 56px;
  }

  html body.mobile-database-tab > .mobile-bottom-shell {
    grid-template-rows: 52px 56px;
  }

  .mobile-bottom-tab {
    height: 48px !important;
    min-height: 48px !important;
    padding: 2px 4px !important;
    gap: 0 !important;
  }

  .mobile-tab-indicator,
  .mobile-bottom-tab.active .mobile-tab-indicator,
  .mobile-bottom-tab.is-active .mobile-tab-indicator,
  .mobile-bottom-tab[aria-current="page"] .mobile-tab-indicator {
    width: 28px !important;
    min-width: 28px !important;
    height: 22px !important;
    line-height: 22px !important;
  }

  .mobile-tab-indicator .material-symbols-rounded {
    font-size: 20px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .mobile-tab-label {
    font-size: 9.5px !important;
    line-height: 11px !important;
  }

  .theme-options {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .mobile-add-button {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 719px) and (pointer: coarse) {
  .mobile-add-button:focus,
  .mobile-add-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}