/* v119 — mobile layout stabilization after the Share/Refract redesign. */
@media (max-width: 719px) {
  html,
  body,
  main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body main #library:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: calc(50px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body main #library > .controls {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body main #library > .mobile-workspace-heading {
    position: relative !important;
    inset: auto !important;
    z-index: 8 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 100px !important;
    align-items: center !important;
    width: 100% !important;
    height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top, 0px) 10px 0 !important;
    transform: none !important;
    transition: none !important;
  }

  html body main #library > .mobile-workspace-heading > h2 {
    grid-column: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  html body main #library > .mobile-workspace-heading > .mobile-library-actions {
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 44px) !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 6px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body main #library > .mobile-workspace-heading > .mobile-library-actions > button {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body main #library > #showGrid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.view-database #showGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
    gap: 18px 10px !important;
    padding: 10px 10px calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.view-database #showGrid > article.show-card.database-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 58px !important;
    grid-auto-flow: row !important;
    align-content: start !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.view-database #showGrid > article.show-card.database-card > .poster-frame {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 !important;
  }

  body.view-database #showGrid > article.show-card.database-card > .card-content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 25px 20px 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    overflow: hidden !important;
  }

  body.view-database #showGrid > article.show-card.database-card .card-topline,
  body.view-database #showGrid > article.show-card.database-card .card-main,
  body.view-database #showGrid > article.show-card.database-card .card-progress {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.view-database #showGrid > article.show-card.database-card .card-topline { grid-row: 1 !important; }
  body.view-database #showGrid > article.show-card.database-card .card-main { grid-row: 2 !important; }
  body.view-database #showGrid > article.show-card.database-card .card-progress { grid-row: 3 !important; }

  html body .mobile-bottom-shell {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 60 !important;
    display: block !important;
    width: 100% !important;
    height: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html body .mobile-bottom-shell > .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    transform: none !important;
    transition: none !important;
  }

  html body .mobile-bottom-shell .mobile-bottom-tab {
    display: grid !important;
    place-items: center !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html body .mobile-bottom-shell .mobile-tab-indicator {
    display: grid !important;
    place-items: center !important;
    width: 64px !important;
    height: 38px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  body.mobile-chrome-hidden .mobile-bottom-shell,
  body.mobile-workspace-switching .mobile-bottom-shell {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* A <dialog> lives in the browser top layer, so its scroll surface must end
     above the persistent navigation instead of covering it. */
  html body > #profileDialog.mobile-tab-page {
    position: fixed !important;
    inset: 0 0 calc(50px + env(safe-area-inset-bottom, 0px)) 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: calc(50px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) !important;
    width: 100% !important;
    height: calc(100dvh - 50px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 50px - env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body > #profileDialog.mobile-tab-page .insights-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
  }

  html body > #profileDialog.mobile-tab-page .insights-scroll {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.view-home #showGrid > article.show-card .card-quick-watch {
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }
}