/* Page-level mobile fallbacks for authenticated pages whose desktop
   layouts collapse below 860px. Inline-style heavy pages need
   !important here to beat React style attributes. Long-term these
   pages should move to class-based styles. */

@media (max-width: 860px) {

  /* admin /admin/image-library - sidebar + grid stack (still uses images-page__layout). */
  .images-page__layout {
    flex-direction: column !important;
    gap: var(--space-6) !important;
  }
  .images-page__aside {
    width: 100% !important;
  }

  /* /images (t267) - rail + grid + inspector stack instead of side-by-side. */
  .imglib {
    flex-direction: column !important;
    gap: var(--space-6) !important;
  }
  .imglib__rail,
  .imglib__inspector {
    width: 100% !important;
  }
  .imglib__inspector {
    border-left: 0 !important;
    border-top: var(--border-width) solid var(--color-border) !important;
    padding-left: 0 !important;
    padding-top: var(--space-6) !important;
  }

  /* /generations/<id> - main + ReviewSidebar stack. Sidebar collapses
     to natural height below main; outer container is no longer a
     viewport-height flex row. */
  .review-page__layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .review-page__main {
    padding: 0 !important;
  }
  .review-page__main .card {
    padding: var(--space-3) !important;
  }
  .review-page__main .outline-card__body {
    padding: 0 !important;
    gap: var(--space-3) !important;
  }
  .review-page__sidebar {
    width: 100% !important;
    height: auto !important;
    border-left: 0 !important;
    border-bottom: var(--border-width) solid var(--color-border-subtle) !important;
    order: -1;
  }

  /* Inputs/textareas inside the review main read as huge on a small
     viewport because of the desktop padding + 16px base. Trim padding
     and form-field gaps; keep font-size at 16px so iOS doesn't zoom. */
  .review-page__main .input {
    padding: var(--space-1) var(--space-2);
  }
  .review-page__main .input--textarea {
    min-height: 40px;
  }
  .review-page__main .form-field {
    gap: var(--space-1);
  }
}