/* ==========================================================================
   wizard_onepage.css — Ф1 «конструктор одной лентой» (заказ Jan 20.08).

   Слой ПОВЕРХ wizard.css / wizard_scaffold.css. Работает ТОЛЬКО под
   `body.wiz-onepage` (страница wizard-onepage.html) — живой /wizard, главная и
   все прочие страницы правилами этого файла не затронуты.

   Что делает: раскрывает все 12 шагов в один прокручиваемый поток, оформляет
   каждый шаг отдельной карточкой с номером, убирает степпер и кнопки
   «Назад/Далее», добавляет липкую панель чипов-навигации, кнопку «?» у строк
   слоёв/POI, «показать ещё» у длинных списков подслоёв и видов POI и видимое
   состояние кнопки «Скачать» до выбора области. Ф1.5 добавила слой наглядности:
   сводку состояния под заголовком блока с бейджем «изменено» и полосу «Карта
   уже готова» над навигацией (разметку обоих ставит wizard_onepage_summary.js).

   Новых цветов НЕ вводим — только токены проекта (components.css/tokens.css).
   ========================================================================== */

/* Липкая шапка сайта (64px) + липкие чипы: якорь секции не должен уезжать
   под них. Одно число на весь файл — держим переменной. */
.wiz-onepage {
  --wizop-nav-h: 64px;      /* высота шапки сайта (.nav-inner) */
  --wizop-chips-h: 50px;    /* высота ряда чипов */
}

/* ── 1. ЛЕНТА: все шаги видимы ──────────────────────────────────────────── */
.wiz-onepage .wizG-step { display: block; }
/* Режим кадастра переставляет блоки шага 1 через flex-order. В ленте признаком
   больше не служит `.active` (его носит только один шаг), поэтому колонку
   включаем по самому шагу. */
body.wiz-onepage.wiz-cadastre-mode .wizG-step[data-step="1"] {
  display: flex;
  flex-direction: column;
}

/* ── 2. Степпер и пошаговая навигация в ленте бессмысленны ──────────────── */
.wiz-onepage .wizG-stepper,
.wiz-onepage .wizG-topnext { display: none !important; }
/* «Назад/Далее» убираем у шагов 1–11. Ряд шага 12 ОСТАВЛЯЕМ: на мобиле он
   position:fixed внизу и несёт кнопку скачивания (#gDownloadMobile) — это и
   есть нижний док. Двенадцать fixed-рядов сразу иначе легли бы стопкой. */
.wiz-onepage .wizG-step:not([data-step="12"]) .wizG-nav { display: none !important; }
.wiz-onepage .wizG-step[data-step="12"] .wizG-nav .wizG-back { display: none !important; }
/* На десктопе мобильной кнопки скачивания в этом ряду нет (её прячет медиа-
   запрос мастера), и без «Назад» он вырождается в пустую липкую полосу. */
@media (min-width: 760px) {
  .wiz-onepage .wizG-step[data-step="12"] .wizG-nav { display: none !important; }
}

/* ── 3. Карточка на каждый шаг ──────────────────────────────────────────── */
/* Общая панель перестаёт быть карточкой — иначе карточка в карточке. Нижний
   padding НЕ трогаем: на мобиле он держит место под фиксированным доком. */
.wiz-onepage .wizG-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.wiz-onepage .wizG-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin: 0 0 16px;
  /* Отступ якоря. Значение по умолчанию САМОДОСТАТОЧНО (шапка + чипы + 10px):
     оно складывается с общим `html { scroll-padding-top: 80px }` сайта, и
     заголовок встаёт с запасом под липким рядом — грубо, зато без JS.
     Ф1.7 (06.09): поднявшийся wizard_onepage_mobile.js МЕРИТ липкий стек,
     кладёт его в `scroll-padding-top` самой страницы и подменяет здешний
     запас просветом `--wizop-anchor-gap: 10px`. Одно число держит и якоря, и
     чужие scrollIntoView, и автопрокрутку браузера при фокусе в поле. Правка
     сознательно действует на ВСЕХ ширинах: прежняя посадка теряла 80px и на
     десктопе (ревью 06.09, находки 1 и 2, второй открытый вопрос). */
  scroll-margin-top: var(--wizop-anchor-gap,
                         calc(var(--wizop-nav-h) + var(--wizop-chips-h) + 10px));
}
.wiz-onepage .wizG-step:last-child { margin-bottom: 0; }

/* Номер секции. Считаем СЧЁТЧИКОМ CSS, а не вставленным узлом: у заголовка
   стоит data-i18n, и i18n.applyTranslations() переписывает его textContent при
   каждой смене языка — вставленный span она бы стирала, ::before переживает. */
.wiz-onepage .wizG-panel { counter-reset: wizop-step; }
.wiz-onepage .wizG-step { counter-increment: wizop-step; }
.wiz-onepage .wizG-panel-title { font-size: 1.12rem; margin-bottom: 6px; }
.wiz-onepage .wizG-step > .wizG-panel-title::before {
  content: counter(wizop-step, decimal-leading-zero) " · ";
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* ── 4. Липкие чипы-навигация ───────────────────────────────────────────── */
/* Условие липкости: body НЕ должен быть скролл-контейнером. Инлайн-стиль
   страницы ставит `html, body { overflow-x: hidden }` (защита от горизонтального
   выезда карты/шапки), а `hidden` делает body скроллбоксом — и всё, что внутри
   него, липнет к его СОБСТВЕННОМУ скроллпорту, который никогда не двигается.
   Замер на стенде: и ряд чипов, и шапка сайта уезжали вместе со страницей.
   `clip` клипует ровно так же, но скролл-контейнера не создаёт. Браузер без
   поддержки `clip` просто отбросит правило и вернётся к прежнему поведению. */
body.wiz-onepage { overflow-x: clip; }

.wizop-nav {
  position: sticky;
  top: var(--wizop-nav-h);
  z-index: 900;                      /* ниже шапки сайта (1000) и подсказок */
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  margin: 10px 0 14px;
}
.wizop-nav-row {
  display: flex;
  gap: 6px;
  /* Шире карточек (980px): 12 чипов в одну строку на десктоп не влезали и ряд
     уходил в горизонтальный скролл. Та же ширина, что у степпера. */
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wizop-nav-row::-webkit-scrollbar { display: none; }
.wizop-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wizop-chip .wizop-chip-n { font-size: 0.72rem; opacity: 0.65; }
.wizop-chip:hover { color: var(--text); background: rgba(148, 163, 184, 0.14); }
.wizop-chip.is-current {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.wizop-chip.is-current .wizop-chip-n { opacity: 0.85; }
.wizop-chip:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* ── 5. Кнопка «?» у строк слоёв, подслоёв и категорий POI ──────────────── */
.wizop-q {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card2);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.wizop-q:hover,
.wizop-q:focus-visible {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.14);
  outline: none;
}
/* В строке слоя подпись занимает всё свободное место — «?» прижимаем к правому
   краю сам, чтобы не зависеть от раскладки конкретной строки. */
.lt-layer-row > .wizop-q,
.lt-sublayer-row > .wizop-q,
.lt-group-header > .wizop-q,
.wizG-poicat-head > .wizop-q { margin-left: auto; }

/* ── 6. Гейт области у кнопки «Скачать» ─────────────────────────────────── */
/* В ленте карточка «Экспорт» на экране всегда, и до выбора области кнопка
   заказа молча ничего не делала (startExport выходит на !payload.bbox). Клик
   перехватывает wizard_onepage_gate.js, здесь — только видимое состояние.
   Атрибут `disabled` не ставим: syncDownload() в wizard_export.js ВСЕГДА
   выставляет disabled=false (правка Jan 4.6 — кнопка визуально активна, а
   пустое имя разбирается уже на клике), и наш disabled он бы просто снял. */
.wiz-onepage.wizop-no-area #gDownload,
.wiz-onepage.wizop-no-area #gDownloadMobile {
  opacity: 0.5;
  filter: saturate(0.45);
  box-shadow: none;
  cursor: not-allowed;
}
.wizop-need-area { margin-top: 10px; }

/* ── 7. «Показать ещё» у длинных списков подслоёв и видов POI ───────────── */
/* Хвост помечает JS классом wizop-tail (clipTail в wizard_onepage_tips.js) —
   лимит «8» живёт ТОЛЬКО там (MORE_LIMIT): позиционного nth-child-правила нет
   сознательно, второе место с числом разъехалось бы с первым. */
.wizop-clipped .wizop-tail { display: none; }
.wizop-more {
  display: block;
  width: calc(100% - 12px);
  margin: 4px 6px 8px;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, 8px);
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary-light);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
/* На время поиска по дереву хвост списка показан целиком, а кнопка прячется
   (wizard_onepage_tips.js ставит `hidden`). Собственный display:block выше
   атрибут бы перебил — поэтому правило явное. */
.wizop-more[hidden] { display: none; }
.wizop-more:hover { background: rgba(37, 99, 235, 0.16); }
.wizop-more:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
/* В карточке POI список видов — flex-строка чипов: кнопка встаёт в неё своим
   размером, а не полосой во всю ширину. */
.wizG-poicat-sub > .wizop-more {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 6px 11px;
  min-height: 30px;
}

/* ── 8. Сводка состояния под заголовком блока ───────────────────────────── */
/* Значение — зеркало строки рецепта шага 12 (см. wizard_onepage_summary.js).
   Живёт СИБЛИНГОМ после заголовка: внутри него i18n стирала бы вставку. */
.wizop-sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 9px;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.35;
}
.wizop-sum-v { min-width: 0; }
/* Бейдж «изменено» — только у блоков, где пользователь отклонился от дефолта
   (предикаты те же, что у сериализации рецепта в URL). */
.wizop-sum-mod {
  display: none;
  padding: 1px 8px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill, 999px);
  background: rgba(37, 99, 235, 0.14);
  color: var(--primary-light);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.wiz-onepage .wizG-step.wizop-mod .wizop-sum-mod { display: inline-block; }

/* ── 9. Полоса «Карта уже готова» над навигацией ────────────────────────── */
.wizop-ready {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 12px 42px 12px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.12);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.wizop-ready::after {
  content: '↓';
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.75;
}
.wizop-ready:hover { background: rgba(37, 99, 235, 0.2); }
.wizop-ready:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
/* Оба состояния лежат в разметке; переключает их класс тела, который ведёт
   wizard_onepage_gate.js (там же гейт «Скачать») — своего признака области нет. */
body:not(.wizop-no-area) .wizop-ready-no,
body.wizop-no-area .wizop-ready-yes { display: none; }
/* Без области полоса ведёт к карте и звучит предупреждением, а не приглашением
   скачать: тот же янтарь, что у плашек мастера (.wizG-na-banner). */
body.wizop-no-area .wizop-ready {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}
body.wizop-no-area .wizop-ready:hover { background: rgba(245, 158, 11, 0.2); }

/* ── 10. Мобайл (≤759px) ────────────────────────────────────────────────── */
@media (max-width: 759px) {
  .wiz-onepage { --wizop-chips-h: 46px; }
  /* Блюр на липком ряду — пересчёт полупрозрачной подложки на КАЖДОМ кадре
     прокрутки, а лента длиной 52,6K px прокручивается вся и на слабом железе.
     На мобиле убираем совсем и даём непрозрачный фон (цвет тот же, без альфы);
     на десктопе блюр остаётся. */
  .wizop-nav {
    margin: 8px 0 12px;
    background: #0f172a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .wizop-nav-row { padding: 6px 12px; gap: 5px; }
  .wizop-chip { font-size: 0.76rem; padding: 5px 10px; min-height: 32px; }
  .wiz-onepage .wizG-step { padding: 15px 13px; margin-bottom: 13px; }
  /* Кружок «?» в узком окне. Мишени вокруг него здесь НЕТ — прежняя запись
     про «34px» описывала намерение, а не правило (замер живой страницы 07.09:
     28×28 на телефоне, ровно бокс кнопки). Оверлей под палец даёт мобильная
     полоса линии — wizard_onepage_mobile.css, `@media (max-width: 759px)`;
     в диапазоне 760-900px мишенью остаётся сам кружок, как и у остальных
     мелких мишеней шага, которые полоса Ф1.7/Ф1.8 тоже не трогает. */
  .wizop-q { width: 22px; height: 22px; }
  .wizop-sum { gap: 6px; margin-bottom: 8px; font-size: 0.78rem; }
  .wizop-ready { margin-top: 10px; padding: 11px 34px 11px 13px; font-size: 0.86rem; }
  .wizop-ready::after { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wizop-chip { transition: none; }
}