/* ================================================================
   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 ─────────────────────────────── */
@media (max-width: 768px) {
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    animation: sheetUp 0.35s var(--ease);
  }
  .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;
  }
}