/* =========================================================================
   responsive.css — adattamenti mobile-first
   Base: smartphone (<=600px). Da qui in su solo rifiniture.
   ========================================================================= */

/* --- Tablet / smartphone larghi (>=600px) ------------------------------- */
@media (min-width: 600px) {
  .app-main {
    padding: var(--sp-5);
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-6) + 28px);
  }
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .cal-grid { gap: 7px; }
}

/* --- Desktop (>=900px): contenuto centrato, nav comunque in basso ------- */
@media (min-width: 900px) {
  :root { --content-max: 680px; }

  .cal-cell { font-size: var(--fs-base); }
  .range-value { font-size: 3.4rem; }
}

/* --- Schermi molto piccoli (<=340px) ------------------------------------ */
@media (max-width: 340px) {
  :root {
    --fs-base: 0.95rem;
    --sp-4: 0.85rem;
  }
  .stat-value { font-size: 1.7rem; }
  .nav-item { font-size: 0.7rem; }
}

/* --- Riduzione movimento di sistema ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}