/* ============================================================
   responsive.css — адаптив под телефон/планшет.
   Грузится ПОСЛЕДНИМ → корректно переопределяет десктопные правила.

   ВАЖНО: .container и .section часто висят на ОДНОМ элементе
   (<div class="container section">). Обе задавали `padding` шорткатом и
   затирали друг друга по осям. Поэтому здесь используем ТОЛЬКО longhand
   (padding-left/right vs padding-top/bottom) — оси складываются, а не
   конфликтуют. Это и убирает «прилипание к краям».
   ============================================================ */

/* iOS/Android не зумят страницу при фокусе на поле, если шрифт ≥16px */
@media (max-width:768px) {
  .input, .select, .textarea { font-size: 16px; }
}

/* ---------- ≤640px: телефон ---------- */
@media (max-width:640px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .section { padding-top: 30px; padding-bottom: 30px; }
  .section + .section { padding-top: 6px; }
  .section-head { margin-bottom: 20px; }
  .section-h { font-size: 22px; }
  .section-lede { font-size: 14px; }

  /* шапка: бренд + ссылки в горизонтальный скролл, тех-бейдж скрываем */
  .nav { padding: 10px 0; }
  .nav-inner { flex-wrap: nowrap; gap: 10px; justify-content: flex-start; }
  .brand-name span { display: none; }
  .nav-links {
    flex: 1; min-width: 0; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; padding: 7px 10px; }
  .stage-badge { display: none; }

  /* карточки: внутренние отступы + шапка карточки в столбик (не сжимается) */
  .card-body { padding: 16px; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }

  /* широкие таблицы — горизонтальный скролл, строки не ломаются */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 560px; }
  .sum-table { min-width: 600px; }
  .table th, .table td { padding: 10px 14px; }

  /* удобные тач-таргеты */
  .input, .select, .btn { min-height: 42px; }
  .btn-sm { min-height: 34px; }

  /* результат: крупный диапазон, но влезает и переносится аккуратно */
  .range { flex-wrap: wrap; gap: 4px 10px; }
  .range-val { font-size: 30px; }
  .range-dash { font-size: 22px; }
  .range-unit { font-size: 14px; margin-left: 4px; }
  .kpis { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; }
  .conf-chip { min-width: 0; flex: 1 1 auto; }

  /* нижняя панель подтверждения: кнопка во всю ширину */
  .sum-actions { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .sum-gate-info { min-width: 0; }
  .sum-actions .btn-lg { width: 100%; min-width: 0; }

  /* экспорт-кнопки тянутся на всю ширину */
  .export-grid { width: 100%; }
  .export-grid .btn { flex: 1 1 140px; }

  /* hero-CTA на всю ширину карточки */
  .hero-cta { width: 100%; }
}

/* ---------- ≤420px: маленький телефон ---------- */
@media (max-width:420px) {
  .container { padding-left: 15px; padding-right: 15px; }
  .section-h { font-size: 20px; }
  .range-val { font-size: 25px; }
  .range-val.is-p50::after { display: none; } /* метка «p50» не налезает на край */
}