/* ==========================================================================
   Big screens (Galaxy Z Fold6 unfolded, tablets): more room, same calm.
   Phone: one column, in the order hero → plan → plant → extras.
   ========================================================================== */
.today-grid { display: flex; flex-direction: column; gap: var(--s3); }
.today-side, .today-main { display: contents; }
.t-hero, .t-now, .t-plant, .t-extras { display: flex; flex-direction: column; gap: var(--s3); }
.t-hero { order: 1; }
.t-now { order: 2; }
.t-plant { order: 3; }
.t-extras { order: 4; }
.t-hero:empty, .t-extras:empty { display: none; }

@media (min-width: 720px) {
  #app { max-width: 920px; padding-left: var(--s5); padding-right: var(--s5); }
  .view { gap: var(--s4); }
  .today-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
  .today-side, .today-main { display: flex; flex-direction: column; gap: var(--s4); }
  .today-side { position: sticky; top: var(--s4); }
  .today-main .now-card { min-height: 300px; justify-content: center; }
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-grid > :last-child:nth-child(odd) { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .list, .card.form, .log-today, .log-days, .close-list, .round-card, .round-progress, .round-foot { max-width: 680px; width: 100%; margin-left: auto; margin-right: auto; }
  .sheet { max-width: 600px; }
}