/* ==========================================================================
   deck-planner-mobile.css
   Мобильная адаптация. Загружается ПОСЛЕ deck-planner.min.css.
   Не изменяет минифицированный файл — только переопределяет нужные правила.
   ========================================================================== */


/* ── 1. Глобальный фикс: touch-action на canvas (все размеры экрана) ───────
   Без этого браузер перехватывает тач и скроллит страницу вместо того,
   чтобы отдавать события нашим touch-слушателям.                           */

.exw-deck-planner canvas {
  touch-action: none;
}


/* ── 2. Мобильный layout ≤ 768px ────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Вертикальный стек без padding/gap */
  .exw-deck-planner .container {
    flex-direction: column;
    padding: 0;
    gap: 0;
    max-width: 100%;
    align-items: stretch;
  }

  /* Canvas-panel занимает весь viewport по высоте.
     100dvh учитывает адресную строку браузера (iOS/Android).
     Fallback 100vh для старых браузеров.
     overflow:hidden скрывает заголовок и hint, которые выходят
     за пределы панели снизу после canvas.                                  */
  .exw-deck-planner .canvas-panel {
    flex: none;
    /* Phase 116.2: !important перебивает overlay.css:25 «.canvas-panel { height:auto !important }»
       (десктопный inline-layout). Без него мобильная высота проигрывала → canvas-panel схлопывался
       в content-height → canvas height:100% от неопределённой высоты падал на соотношение атрибутов
       (≈ width×600/900 ≈ 250px) → маленькое окошко. Скоупнуто @media ≤768 → десктоп не затронут.
       Phase 118: канва = 80% от пространства ПОД шапкой. Шапка (новостная строка + навбар с
       гамбургером) = fixed, высота 102px (= .wrapper padding-top, main.css:217). Доступное под
       шапкой = (100dvh − 102px); канва = 80% от него → не на весь экран, видно начало панели ниже. */
    height: calc((100vh - 102px) * 0.8) !important;
    height: calc((100dvh - 102px) * 0.8) !important;
    overflow: hidden;
  }

  /* Скрываем всё в canvas-panel кроме самого canvas.
     __EXW_EDGE_INPUTS_MOBILE_RESTORE_V1__: #edge-inputs-layer исключён — это тот же
     прямой ребёнок .canvas-panel (движок добавляет его туда же, куда добавлен canvas),
     поэтому раньше подпадал под это правило и терял видимость вместе с hint/finalSummary.
     Инпуты длины сторон должны остаться видимыми и на мобиле. */
  .exw-deck-planner .canvas-panel > *:not(canvas):not(#edge-inputs-layer) {
    display: none;
  }

  /* Phase 118: «Help with Planning» (.planer__help-link, padding:0 из RUN_ME inline-<style>)
     и подсказки под канвой (.exw-angle-trim-default-hint / .exw-edge-trim-hint) прилипали к
     левому краю. Выравниваем с иконками инструментов move/zoom: их левый отступ =
     .planer__sidebar padding-left = 8px (main.css:2916). Селектор .planer__plan ... (0,2,0)
     бьёт inline-правило .planer__help-link { padding:0 } (0,1,0). */
  .planer__plan .planer__help-link,
  .planer__plan .exw-angle-trim-default-hint,
  .planer__plan .exw-edge-trim-hint {
    padding-left: 8px;
  }

  /* Phase 118: отступ под «Help with Planning» до канвы = такой же, как под хинтом до блока
     инструментов (= .planer__sidebar padding-top 20px). Было margin-bottom:8px (RUN_ME:149). */
  .planer__plan .planer__help-link {
    margin-bottom: 20px;
  }

  /* __EXW_CHOSEN_IMG_MOBILE_V1__ — фикс высоты картинки выбранной доски в блоке
     basics/height/costs. На <768 спец-правила нет → действует только глобальный
     img{max-width:100%} → высота auto по натуральному соотношению → картинка огромная.
     ВАЖНО: .planer__chosen лежит СНАРУЖИ #exw-deck-planner (engine-root, которому
     min.js:1835 ставит className="exw-deck-planner"), поэтому селектор БЕЗ префикса
     .exw-deck-planner — иначе не матчит. Повторяем десктоп (main.css:4518, @media ≥768):
     контейнер фикс 130px + img contain. */
  .planer__chosen--img {
    /* Родитель .planer__chosen--info = flex column (align-items:stretch),
       поэтому бокс растягивался на всю ширину. Фиксируем ширину 200px и
       перебиваем stretch через align-self:flex-start → прижатие к левому краю.
       max-width:100% — страховка на экранах < 200px. */
    width: 200px;
    max-width: 100%;
    height: 130px;
    align-self: flex-start;
  }
  .planer__chosen--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Canvas заполняет canvas-panel целиком */
  .exw-deck-planner canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset;
    max-height: none !important;
  }

  /* Панель управления — обычный блок ниже canvas в потоке.
     Пользователь скроллит страницу чтобы добраться до панели. */
  .exw-deck-planner .controls-panel {
    flex: none;
    width: 100%;
    min-width: unset;
    padding: 12px 8px;
    box-sizing: border-box;
  }

  /* Кнопки: минимум 44×44px */
  .exw-deck-planner button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* iOS Safari: font-size < 16px → авто-зум при фокусе */
  .exw-deck-planner input,
  .exw-deck-planner select {
    font-size: 16px;
    min-height: 44px;
  }

  .exw-deck-planner label {
    font-size: 13px;
  }

  .exw-deck-planner .hint,
  .exw-deck-planner .small,
  .exw-deck-planner .status {
    font-size: 12px;
  }

  /* Строки кнопок: перенос на узком экране */
  .exw-deck-planner .buttons-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .exw-deck-planner #zoomLabel {
    font-size: 14px;
    min-width: 52px;
    text-align: center;
  }

  /* Summary: кнопки не влезают в ширину 375px */
  .exw-deck-planner .final-summary-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* !important: контейнер кнопок имеет inline style="display:flex; gap:8px" */
  .exw-deck-planner .final-summary-head > div {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .exw-deck-planner .final-summary-head button {
    min-width: unset;
    min-height: unset;
    font-size: 12px;
  }

  /* Summary первый в controls-panel после reorderMobile */
  .exw-deck-planner .controls-panel > .final-summary:first-child {
    margin-top: 0;
  }

  /* __EXW_EDGE_INPUTS_MOBILE_RESTORE_V1__ Ранее здесь стоял #edge-inputs-layer{display:none!important} —
     дублирующее скрытие поверх общего правила .canvas-panel > *:not(canvas) чуть выше (тоже снято
     для этого элемента тем же маркером). Оба источника скрытия убраны — слой снова виден.
     Инпуты красятся движком инлайн-стилем (styleEdgeInput(): font-size 14px, height 28px), который
     перебивает не-!important правило ".exw-deck-planner input" (строка ~120, font-size:16px/min-height:44px) —
     без !important здесь эти правила остаются пустой строкой для этого конкретного элемента.
     14px триггерит iOS Safari auto-zoom при фокусе; 28px меньше рекомендованного touch-target 44px. */
  #edge-inputs-layer input {
    font-size: 16px !important;
    min-height: 44px !important;
  }
}


/* ── 3. Landscape-телефон: canvas чуть ниже чтобы видеть начало панели ───── */

@media (max-width: 768px) and (max-height: 500px) {

  .exw-deck-planner .canvas-panel {
    /* Phase 116.2 !important перебивает overlay.css:25; Phase 118: 80% под шапкой (102px). */
    height: calc((100vw - 102px) * 0.8) !important;  /* в landscape ширина = высота экрана в portrait */
    height: calc((100dvh - 102px) * 0.8) !important;
  }
}


/* ── 4. iOS fullscreen fallback (__EXW_IOS_FS_FALLBACK_V1__ Phase 116) ──────
   На iOS Element.requestFullscreen для не-<video> отсутствует → bridge.js сам
   вешает .container.is-fs + body.exw-fs-fallback. Нативный путь (Android/iPad13+/
   десктоп) этот body-класс НЕ получает → правила ниже не активируются (нативный
   .is-fs и его z-index не трогаются). Десктопный .is-fs (grid 1fr 360px из min.css)
   на мобиле дал бы канве ~30px — здесь переопределяем на канву-во-весь-экран +
   плавающий проектный тулбар (он лежит вне .container, поэтому поднимаем над
   fixed-оверлеем, иначе из режима не выйти). */
@media (max-width: 768px) {

  /* Оверлей выше сайтовой обвязки (.header z:5, cmplz z:9998, .nojq z:99999).
     100dvh — URL-бар iOS иначе срезает низ. padding-top = высоте тулбара (52px). */
  body.exw-fs-fallback .exw-deck-planner .container.is-fs {
    z-index: 100000;
    height: 100dvh;
    padding-top: 52px;
    /* Phase 116.1: перебиваем десктопную сетку min.css «grid-template-columns: 1fr 360px»
       (правый 360px-столбец зарезервирован под .controls-panel, которая display:none →
       пустой → канва-столбцу 1fr на 375px остаётся ~15px → пустой экран). Одна колонка
       во всю ширину. Под body.exw-fs-fallback → нативный/десктопный путь не задет. */
    grid-template-columns: 1fr;
  }
  /* Страховка: canvas-panel (единственная видимая ячейка) на всю ширину/высоту.
     Phase 116.2: height !important — overlay.css:25 «height:auto !important» бьёт даже это
     более специфичное правило (важность > специфичности), иначе и в фулскрине canvas-panel
     схлопывался бы в content-height. height:100% от .container.is-fs (100dvh − padding-top). */
  body.exw-fs-fallback .exw-deck-planner .container.is-fs .canvas-panel {
    width: 100%;
    height: 100% !important;
    min-width: 0;
  }

  /* Плавающий тулбар поверх фулскрин-канвы: один ряд, скролл по X, фикс-высота. */
  body.exw-fs-fallback .planer__tools {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    height: 52px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    margin: 0;
    padding: 6px 8px;
    background: #FFFFFC;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
  }
  body.exw-fs-fallback .planer__tools--item {
    flex: 0 0 auto;
    width: auto;
    min-width: 40px;
  }
  body.exw-fs-fallback .planer__tools--button {
    min-width: 40px;
    min-height: 40px;
  }
  /* Подписи скрываем — 9 иконок умещаются в один ряд. */
  body.exw-fs-fallback .planer__tools--text {
    display: none;
  }

  /* Скрыть фиксированную сайтовую обвязку, перекрывающую верх. */
  body.exw-fs-fallback .header,
  body.exw-fs-fallback .nojq {
    display: none !important;
  }

  /* Блокировка скролла фона под оверлеем (снимается при выходе вместе с классом). */
  body.exw-fs-fallback {
    overflow: hidden;
  }
}