/* ================================================================
   Solo - Responsive
   Floating tab pill, mobile sheets
   ================================================================ */

@media (max-width: 359px) {
  :root { --text-hero: 2rem; --content-pad: 16px; }
  .quick-add-grid { grid-template-columns: repeat(2, 1fr); }
  .home-hero { padding: 22px 18px 20px; }
  .home-hero-headline { font-size: 26px; letter-spacing: -0.6px; }
}

/* ── Mobile bottom sheet modals (ship blend) ────────────────── */
@media (max-width: 768px) {
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%; max-width: 100%;
    border-radius: 28px 28px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    max-height: 90vh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    animation: modalSheetUp 360ms var(--ease-sheet);
  }
  .modal-overlay.closing .modal { animation: modalSheetDown 200ms var(--ease-sheet) forwards; }
  .savings-hero-amount { font-size: 2rem; }
  .toast-container { right: auto; left: 16px; width: calc(100% - 32px); }
}

@media (min-width: 769px) { :root { --content-max-w: 488px; } }

@media (min-width: 1024px) {
  :root { --content-max-w: 448px; }
  /* Stack top-bar above .app-shell; otherwise body's row-direction puts
     them side-by-side on wide viewports. */
  body { display: flex; flex-direction: column; align-items: center; }
  .app-shell {
    width: 100%; max-width: var(--content-max-w);
    min-height: 100vh;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}