/**
 * My Recipes (Single / Multiple) — mobile & touch layouts
 */
@media (max-width: 1023px) {
  html.my-recipes-page,
  html.my-recipes-page body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.my-recipes-multiple-page #cardDiv_3_2 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.my-recipes-multiple-page .my-recipes-main {
    height: auto !important;
    min-height: 0 !important;
  }

  html.my-recipes-page body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .my-recipes-main-wrap {
    min-height: 100dvh;
  }

  .my-recipes-main {
    padding-top: max(3.25rem, calc(0.5rem + env(safe-area-inset-top, 0)));
    padding-left: max(0.75rem, env(safe-area-inset-left, 0));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0));
  }

  .my-recipes-panel-box {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  .my-recipes-list-col {
    min-width: 0 !important;
    width: 100% !important;
  }

  .my-recipes-page-title {
    padding-right: 2.5rem;
  }

  .my-recipes-toolbar {
    gap: 0.5rem !important;
  }

  .my-recipes-toolbar > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  .my-recipes-toolbar .my-recipes-search-wrap {
    flex: 1 1 100%;
    max-width: none !important;
  }

  .my-recipes-toolbar select,
  .my-recipes-toolbar button {
    min-height: 44px;
    font-size: 0.875rem;
  }

  .my-recipes-list-grid {
    max-height: min(48dvh, 400px) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .my-recipes-preview-panel {
    width: 100% !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-margin-top: 3.5rem;
  }

  .my-recipes-preview-panel .my-recipes-preview-detail {
    max-height: min(42dvh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .my-recipes-preview-panel button {
    min-height: 48px;
    font-size: 0.9375rem;
  }

  /* Multiple: stacked side panels */
  .my-recipes-multiple-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .my-recipes-multiple-layout > section,
  .my-recipes-multiple-layout > .my-recipes-preview-panel {
    width: 100% !important;
    flex: none !important;
    order: unset !important;
    max-height: none !important;
    position: relative !important;
    top: auto !important;
  }

  .my-recipes-multiple-layout #chartsBody {
    order: 2;
  }

  .my-recipes-multiple-layout #chartsStackBody {
    order: 3;
  }

  .my-recipes-multiple-home-btn {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
    left: max(0.75rem, env(safe-area-inset-left, 0.75rem)) !important;
  }

  /* Analysis / chart full view */
  .my-recipes-chart-view {
    min-height: 100dvh;
    padding-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom, 0)));
  }

  .my-recipes-chart-view .my-recipes-chart-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
    padding-top: max(3rem, calc(0.5rem + env(safe-area-inset-top, 0))) !important;
  }

  .my-recipes-chart-view .my-recipes-chart-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  .my-recipes-chart-view .my-recipes-chart-main .chart-roast {
    height: min(42dvh, 340px) !important;
    min-height: 200px !important;
  }

  .my-recipes-chart-view .my-recipes-chart-main .chart-output {
    height: min(24dvh, 200px) !important;
    min-height: 120px !important;
  }

  .my-recipes-chart-view .my-recipes-chart-aside {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .my-recipes-chart-view .my-recipes-chart-aside-scroll {
    max-height: none !important;
    overflow: visible !important;
  }

  .my-recipes-chart-view .my-recipes-detail-analy {
    max-height: min(50dvh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .my-recipes-chart-back {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
    left: max(0.75rem, env(safe-area-inset-left, 0.75rem)) !important;
    right: auto !important;
    z-index: 60 !important;
    min-height: 48px;
    padding: 0.75rem 1.25rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  .my-recipes-sidebar-backdrop {
    display: block;
  }

  .recipe-card-preview-popover {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .my-recipes-sidebar-backdrop {
    display: none !important;
  }
}

.my-recipes-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

body.my-recipes-sidebar-open .my-recipes-sidebar-backdrop {
  display: block;
}

@media (hover: none) and (pointer: coarse) {
  .my-recipes-list-grid .group {
    min-height: 56px;
  }
}