/* ==========================================================================
   responsive.css — адаптация под устройства. Подключается ПОСЛЕДНИМ.
   Базовые стили — телефон в портрете.
     1. до 380px      — очень узкие телефоны
     2. высота ≤ 520  — телефон в ландшафте
     3. от 600px      — планшет: модальные окна по центру
     4. от 900px      — ноутбук/ПК: две колонки на экране дневника, меню слева
     5. от 1400px     — широкий монитор
   ========================================================================== */

/* 1. Очень узкие телефоны */
@media (max-width: 380px) {
  .page { padding-left: 10px; padding-right: 10px; }
  .ring { width: 112px; height: 112px; }
  .ring-c b { font-size: 24px; }
  .ring-wrap { gap: 12px; }
  .tab { font-size: 12px; gap: 4px; }
  .macros { gap: 8px; }
  .preview b { font-size: 15px; }
}

/* 2. Телефон в ландшафте */
@media (max-height: 520px) and (max-width: 899px) {
  :root { --tabbar-h: 50px; }
  .pill { top: 4px; bottom: 4px; }
  .page { padding-top: calc(var(--safe-t) + 8px); }
  .modal { max-height: 96dvh; }
  .ring { width: 104px; height: 104px; }
  .toast { bottom: calc(var(--tabbar-h) + 18px + var(--safe-b)); }
}

/* 3. Планшет: окна по центру, а не «шторкой» */
@media (min-width: 600px) {
  .modal-back { align-items: center; }
  .modal { border-radius: 26px; max-width: 460px; border: 1px solid var(--border); }
  .modal .grab-i { display: none; }
  .ring { width: 150px; height: 150px; }
}

/* 4. Ноутбук / ПК: меню — вертикальная панель слева, дневник в две колонки */
@media (min-width: 900px) {
  :root { --col-w: 980px; }

  .tabbar {
    left: 16px; top: 16px; bottom: 16px; transform: none; width: 200px; height: auto;
    flex-direction: column; border-radius: var(--radius-lg); padding: 10px;
  }
  .tabbar::before { content: "NutriPulse"; display: block; font-weight: 800; font-size: 19px; padding: 10px 12px 18px; letter-spacing: -.02em; }
  .pill { display: none; }
  .tab { flex: none; height: 46px; justify-content: flex-start; padding: 0 14px; gap: 10px; border-radius: 14px; font-size: 14px; }
  .tab.on { background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .5); }
  .tab:not(.on):hover { background: var(--glass-in); }

  .view { left: 232px; }          /* контент — правее меню */
  .page { padding: 28px 28px 40px; }
  .brand-mobile { display: none; }

  /* Дневник: слева сводка, справа приёмы пищи */
  .diary-grid { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
  .diary-side { position: sticky; top: 16px; }

  .toast { bottom: 28px; left: calc(50% + 116px); }
  .food:hover, .entry:hover { background: var(--glass-in); }
}

/* 5. Широкий монитор */
@media (min-width: 1400px) {
  :root { --col-w: 1100px; }
  .diary-grid { grid-template-columns: 420px 1fr; }
}

/* Профиль и поиск на ПК — не растягиваем на всю ширину */
@media (min-width: 900px) {
  #v-search .page, #v-prof .page { max-width: 640px; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }