/* ============================================================================
   mobile.css — единый мобильный слой для всех страниц CLONY.

   Подключается ОДНОЙ строкой в каждую страницу, ничего внутри них не переписывая:
   ровно тот же приём, которым здесь уже сделаны i18n.js и auth-gate.js. Все
   правила живут внутри @media, поэтому десктоп не меняется ни на пиксель.

   Порядок важен: этот файл подключается ПОСЛЕДНИМ, после собственных
   <style> страницы, иначе её медиазапросы перебьют наши.
   ========================================================================= */

/* --------------------------------------------------------------- всегда */

/* iOS зумит страницу, когда фокусируется поле мельче 16px, и после этого
   вёрстка уезжает вбок и обратно уже не возвращается. Это причина номер один
   «на телефоне всё разъезжается». 16px — не стиль, а порог браузера. */
@media (max-width: 900px) {
  input, textarea, select, .text-input, .input, .slides-manual {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------- телефон и узкий */

@media (max-width: 900px) {

  /* Горизонтальная прокрутка ломает ощущение сильнее всего: страница
     «дёргается» при каждом свайпе. Режем её и заставляем медиа ужиматься. */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, canvas, video, svg, iframe { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* Нижняя панель жестов iPhone съедает последние ~34px. */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Палец — не курсор. Всё нажимаемое не мельче 44px по короткой стороне:
     это порог, ниже которого промахи становятся правилом. */
  .btn, .chip, button, .mode-btn, .type-card, .select-card, .nav-archive,
  .color-swatch, a[role="button"] {
    min-height: 44px;
  }
  .color-swatch { min-width: 44px; }

  /* Декор, который на телефоне только жрёт батарею: курсорные эффекты
     физически не могут сработать без мыши. */
  .mouse-follower, .mouse-glow, .creative-bg-layer { display: none !important; }

  /* --------------------------------------------------------- каркас */

  .wrap, .main { padding-left: 14px !important; padding-right: 14px !important; }
  .header { padding: 12px 14px !important; gap: 10px; flex-wrap: wrap; }
  .header-tag, .logo-sub { display: none !important; }
  .card, .form-card { padding: 20px 16px !important; border-radius: 18px !important; }

  /* --------------------------------------------------- шаги и выбор */

  /* Одна колонка. Две карточки в ряд на 390px дают подпись в три строки и
     кегль, который не читается. Лучше длиннее, но крупно. */
  .type-grid, .select-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .type-card, .select-card, .mode-btn {
    display: flex; align-items: center; gap: 12px; text-align: start;
    padding: 14px 16px !important;
  }
  .type-icon, .select-icon, .mode-btn-icon { flex: 0 0 auto; margin: 0 !important; }
  .type-desc, .select-desc, .mode-btn-desc { font-size: .8rem; line-height: 1.35; }

  .input-mode-toggle { flex-direction: column !important; gap: 10px; }
  .step-title { font-size: 1.25rem !important; line-height: 1.25; }
  .step-desc  { font-size: .88rem !important; }
  .hero-title { font-size: 1.35rem !important; min-height: 0 !important; }

  /* Индикатор шагов липнет к верху: на длинной форме важно всегда видеть,
     где ты находишься и сколько осталось. */
  .step-indicator {
    position: sticky; top: 0; z-index: 30;
    padding: 10px 0; margin: 0 0 4px;
    background: rgba(12, 2, 20, .92);
    backdrop-filter: blur(8px);
  }

  /* ------------------------------------------- кнопки шага внизу экрана */

  /* «Назад / Продолжить» перестают быть местом, куда надо доскроллить.
     Палец всегда рядом с большой пальцевой зоной. */
  .btn-group {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; gap: 10px;
    margin: 18px -14px 0; padding: 12px 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(12,2,20,.98) 60%, rgba(12,2,20,0));
  }
  .btn-group .btn { flex: 1; min-width: 0; }
  /* Главное действие шире второстепенного — «Продолжить» должно быть
     очевидной целью, «Назад» лишь запасным выходом. */
  .btn-group .btn-primary   { flex: 2; }
  .btn-group .btn-secondary { flex: 1; }
  .btn-group .btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* --------------------------------------------- редактор карусели */

  /* Холст сверху, настройки под ним. Боковая панель на 390px — это колонка
     в 120px, в которой не живёт ни один ползунок. */
  .editor { grid-template-columns: 1fr !important; gap: 14px; }
  .panel  { position: static !important; max-height: none !important; }
  #board  { max-height: 52vh; }
  .stage  { padding: 0 !important; }

  /* Лента слайдов свайпается пальцем, а не тянется мышью. */
  .strip, .thumbs {
    display: flex; gap: 8px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .strip > *, .thumbs > * { scroll-snap-align: center; flex: 0 0 auto; }
  .strip::-webkit-scrollbar, .thumbs::-webkit-scrollbar { height: 0; }

  /* Действия карусели — тоже липкая полоса, в два ряда по две кнопки. */
  .actions {
    position: sticky; bottom: 0; z-index: 40;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 16px -14px 0; padding: 12px 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(12,2,20,.98) 60%, rgba(12,2,20,0));
  }
  .actions .btn { min-width: 0 !important; width: 100%; }

  .chips { gap: 8px; }
  .chip.sm { padding: 10px 14px; }
  .slider { height: 34px; }

  /* --------------------------------------------------- таблицы и списки */

  /* Таблицы кабинета и архива не влезают никогда — даём им свой скролл,
     чтобы ехала таблица, а не вся страница. */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  .tiles, .stats { grid-template-columns: 1fr 1fr !important; }
}

/* ------------------------------------------------------- очень узкие */

@media (max-width: 380px) {
  .tiles, .stats { grid-template-columns: 1fr !important; }
  .actions { grid-template-columns: 1fr; }
  .step-title { font-size: 1.15rem !important; }
}

/* --------------------------------------------- альбомная на телефоне */

/* В горизонте у телефона остаётся ~380px высоты. Липкие полосы съедают
   половину экрана, поэтому там они обычные. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .btn-group, .actions, .step-indicator { position: static; background: none; }
  #board { max-height: 78vh; }
}