/* ============================================================================
   responsive.css · ОБЩИЙ адаптивный слой — СКОПИРОВАН из responsive-слоя
   канонического мокапа docs/mockups/cloud/F.html (ФАЗА 5).
   Mobile-first, аддитивный каскад (мобильная база НЕ переопределяется; tablet/desktop —
   только через min-width). Идентичен для обеих тем → макет не «прыгает» при смене темы (SC-010).
   mobile < 768px (база) · tablet 768–1023px · desktop ≥ 1024px.
   Несущие классы реального приложения: .screen, .content, .shelf/.grid, .field, .cta,
   .tabbar, .tab.center. Селекторы лесов мокапа (.stage/.notch/.statusbar/.states/.note)
   в реальном app не матчатся — безвредные no-op (оставлены для верности слоя). */

/* ── TABLET+ (≥768px): телефонная рамка → текучая страница ── */
@media (min-width: 768px) {
  .stage { align-items: stretch; gap: 18px; padding: 0 18px; }

  .phone {
    width: auto;
    max-width: 720px;
    height: auto;
    min-height: auto;
    margin-inline: auto;
    border-radius: 20px;
    padding: 0;
  }
  .screen {
    height: auto;
    min-height: 74vh;
    border-radius: 16px;
  }
  .screen-scroll { flex: none; overflow: visible; }
  .content { flex: none; overflow: visible; overflow-x: hidden; }

  .notch { display: none; }
  .statusbar { display: none; }

  .tabbar { position: sticky; bottom: 0; z-index: 6; }

  .states { width: auto; max-width: 720px; margin-inline: auto; }
  .states-grid { grid-template-columns: repeat(2, 1fr); }

  .note { max-width: 720px; margin-inline: auto; }

  /* ── СТРУКТУРНЫЕ ПРАВИЛА reflow (один способ на сущность) ── */
  .shelf, .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap, 12px); }
  .field, .form-wrap { max-width: 560px; margin-inline: auto; }
  .prose, .review { max-width: var(--read-max); }
  .stats, .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sheet { max-width: 560px; margin-inline: auto; }
  .cta { max-width: 560px; margin-inline: auto; }
}

/* ── DESKTOP (≥1024px): широкая раскладка + рельс-навигация ── */
@media (min-width: 1024px) {
  .phone { max-width: var(--app-max); }
  .states { max-width: var(--app-max); }
  .note { max-width: var(--app-max); }

  /* таб-бар → верхний рельс: тот же состав/порядок, presentation-only */
  .tabbar {
    order: -1;
    position: sticky;
    top: 0;
    bottom: auto;
    z-index: 6;
    justify-content: center;
    gap: 10px;
    border-top: none;
  }
  .tab.add, .tab.center { margin-top: 0; align-self: center; }

  .states-grid { grid-template-columns: repeat(4, 1fr); }

  .shelf, .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .prose, .review { margin-inline: auto; }

  .tabbar .tab { min-width: 76px; }
}