/* =========================================================
   Lists tab mobile fit
   - The selected Tasks / Shopping card fills the available screen height.
   - The Tasks / Shopping selector stays just above the mobile nav.
   - When the nav is minimised, the card grows down and the selector follows
     while leaving room for the reveal arrow.
   - Mobile/tablet only; desktop is untouched.
   ========================================================= */

@media (max-width: 820px) {
  #listsTab .overview-page-panel {
    --fc-lists-side-padding: clamp(12px, 4vw, 18px);
    --fc-lists-top-padding: clamp(12px, 3.5vw, 18px);
    --fc-lists-bottom-clearance: calc(92px + env(safe-area-inset-bottom));
    --fc-lists-selector-gap: 10px;
  }

  body.mobile-nav-minimised #listsTab .overview-page-panel,
  body.mobile-nav-minimised[data-active-tab="lists"] #listsTab .overview-page-panel,
  body.mobile-nav-minimised:has(#listsTab.active) #listsTab .overview-page-panel {
    --fc-lists-bottom-clearance: calc(46px + env(safe-area-inset-bottom));
  }

  body[data-active-tab="lists"] #listsTab .overview-page-panel,
  body:has(#listsTab.active) #listsTab .overview-page-panel,
  #listsTab.active .overview-page-panel {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding:
      var(--fc-lists-top-padding)
      var(--fc-lists-side-padding)
      calc(var(--fc-lists-bottom-clearance) + var(--fc-lists-selector-gap)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-dashboard,
  body:has(#listsTab.active) #listsTab .overview-dashboard,
  #listsTab.active .overview-dashboard {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-lists-hero,
  body:has(#listsTab.active) #listsTab .overview-lists-hero,
  #listsTab.active .overview-lists-hero {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-hero-copy h2,
  body:has(#listsTab.active) #listsTab .overview-hero-copy h2,
  #listsTab.active .overview-hero-copy h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 0.96 !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-hero-copy p,
  body:has(#listsTab.active) #listsTab .overview-hero-copy p,
  #listsTab.active .overview-hero-copy p {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-grid.overview-grid-compact,
  body[data-active-tab="lists"] #listsTab .overview-lists-grid,
  body:has(#listsTab.active) #listsTab .overview-grid.overview-grid-compact,
  body:has(#listsTab.active) #listsTab .overview-lists-grid,
  #listsTab.active .overview-grid.overview-grid-compact,
  #listsTab.active .overview-lists-grid {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-task-shopping-carousel,
  body:has(#listsTab.active) #listsTab .overview-task-shopping-carousel,
  #listsTab.active .overview-task-shopping-carousel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: var(--fc-lists-selector-gap) !important;
    align-items: stretch !important;
    align-content: stretch !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-task-shopping-track,
  body:has(#listsTab.active) #listsTab .overview-task-shopping-track,
  #listsTab.active .overview-task-shopping-track {
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-task-shopping-slide.overview-card-shell,
  body:has(#listsTab.active) #listsTab .overview-task-shopping-slide.overview-card-shell,
  #listsTab.active .overview-task-shopping-slide.overview-card-shell {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-task-shopping-slide .overview-card-inner,
  body:has(#listsTab.active) #listsTab .overview-task-shopping-slide .overview-card-inner,
  #listsTab.active .overview-task-shopping-slide .overview-card-inner {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-card-title-row,
  body:has(#listsTab.active) #listsTab .overview-card-title-row,
  #listsTab.active .overview-card-title-row {
    flex: 0 0 auto !important;
    margin-bottom: 12px !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-tasks-list,
  body[data-active-tab="lists"] #listsTab .overview-shopping-list,
  body:has(#listsTab.active) #listsTab .overview-tasks-list,
  body:has(#listsTab.active) #listsTab .overview-shopping-list,
  #listsTab.active .overview-tasks-list,
  #listsTab.active .overview-shopping-list {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-task-shopping-pagination,
  body:has(#listsTab.active) #listsTab .overview-task-shopping-pagination,
  #listsTab.active .overview-task-shopping-pagination {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: end !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: calc(100vw - (var(--fc-lists-side-padding) * 2)) !important;
    margin: 0 auto !important;
    z-index: 1210 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  body[data-active-tab="lists"] #listsTab .overview-card-actions,
  body:has(#listsTab.active) #listsTab .overview-card-actions,
  #listsTab.active .overview-card-actions {
    gap: 6px !important;
  }

  body[data-active-tab="lists"] #listsTab .overview-carousel-dot,
  body:has(#listsTab.active) #listsTab .overview-carousel-dot,
  #listsTab.active .overview-carousel-dot {
    min-width: 70px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
}