/* ── DESKTOP LAYOUT ── */
@media(min-width:900px){
  .page{max-width:800px;padding:0 2rem 5rem;margin:0 auto}
  .header{padding:1.5rem 0 1rem;margin-bottom:.5rem}
  .layout{display:block;padding:0}
  .content-col{min-width:0}
  .section{padding:0}
  .gen-section{padding:0}
  .week-section{padding:0}
  .cook-today-section{padding:0}
  .shop-section{padding:0}
  .history-section{padding:0}
  .favorites-section{padding:0}
  .filter-block{padding:0}
  .status-bar{margin:1rem 0 0}
  .modal-bg{align-items:center}
  .modal{border-radius:var(--r-lg);max-width:700px;max-height:80vh}
  .modal-handle{display:none}
}

/* ── MOBILE TAP TARGETS ── */
@media(max-width:899px){
  .header{padding:.75rem 1.25rem .35rem}
  .header-meta{margin-top:.35rem}
  /* Motivation quote is decoration — hide below 900px to keep the CTA
     (≈5th block below the fold on 375×667) within reach of the first
     screen once the family-setup collapses. */
  .header-motivation{display:none}
  .header-controls{gap:6px}
  .logo{font-size:1rem;letter-spacing:.5px}
  .user-profile{gap:6px}
  .user-name{display:none}
  .user-avatar{width:26px;height:26px}
  .lang-sel{padding:1px;gap:1px}
  .lang-btn{padding:4px 7px;font-size:10.5px}
  .btn-theme{padding:4px 8px;font-size:14px}
  .btn-logout{padding:2px}
  /* Tighter audience presets: 2×2 grid becomes noticeably shorter, saves
     ~24px across two rows without hurting legibility. */
  .preset-btn{min-height:66px;padding:9px 6px}
  .preset-title{font-size:13px}
  .preset-sub{font-size:10.5px}
  /* Inter-block margins — shave a few pixels between filter rows so the
     whole stack breathes without the CTA drifting past the fold. */
  .filter-inline{margin-bottom:5px}
  .mode-sel,.period-sel{margin-bottom:8px}
  .settings-tabs{margin:0 1.25rem .6rem}
  .settings-panel .card{padding:.8rem}
  .section{margin-bottom:.75rem}
  .divider{margin:1.25rem 1.5rem}
  /* segmented controls: equal visual height */
  .mode-btn{padding:7px 6px;gap:2px;min-height:48px;justify-content:center;font-size:11px}
  .mode-btn .i{width:13px;height:13px}
  .period-btn{min-height:48px;font-size:14px;padding:11px 6px}
  /* generate button: slightly smaller font on mobile so long strings fit */
  .btn-generate{padding:16px;font-size:1.05rem}
  .usage-bar-meta{font-size:10.5px}
  .tag,.craving-tag{padding:9px 15px;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
  .btn-sm{padding:12px 16px;font-size:14px;min-height:44px}
  .btn-rate{padding:10px 14px;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
  .btn-recipe{padding:10px 14px;font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .btn-cook-today{padding:10px 14px;font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .btn-copy{padding:10px 16px;font-size:13px;min-height:44px}
  .btn-rohlik{padding:12px 20px;font-size:14px;min-height:44px}
  .btn-swap{padding:8px 12px;font-size:20px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn-remove-today{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
  .s-link{width:36px;height:44px;font-size:15px}
  .s-item input[type=checkbox]{width:18px;height:18px}
  .s-item{padding:8px 0;gap:12px}
  .s-item label{font-size:14px}
  .hist-item{padding:14px 16px;min-height:56px}
  .hist-date{font-size:14px}
  .meal-txt{font-size:12px;color:var(--text)}
  .modal-meal-actions{gap:8px;row-gap:10px}
  .field input,.field select,.field textarea{font-size:15px;padding:12px 14px}
  .add-row input{font-size:14px;padding:11px 13px}
  .add-row{flex-wrap:wrap}
  .add-row input[type=number]{width:90px}
  .add-row .btn-sm{flex:0 0 100%}
}

/* ── SMALL MOBILE ── */
@media(max-width:480px){
  .shop-grid{grid-template-columns:1fr}
}