/* match-wizard.css — scoped-стили визарда «Три коротких шага» (/match).
   Только .mq-wizard-хром и стадии; контентные .mq-* стили квиза живут
   в инлайн-блоке mqFormAssets (одна копия с /me/preferences). Light-only. */

/* Стадии повторяют ритм бывшей .mq-form (flex, gap 56) — no-JS страница
   визуально идентична прежней плоской форме. */
.mq-stage{display:flex;flex-direction:column;gap:44px}
.mq-stage + .mq-stage{margin-top:44px}

/* Скрытая стадия обязана исчезнуть: глобального [hidden]-правила в app.css нет,
   а display:flex на .mq-progress/.mq-wizard-actions перебивает UA-скрытие. */
.mq-stage[hidden],
.mq-step-count[hidden],
.mq-progress[hidden],
.mq-wizard-actions[hidden],
.mq-wizard-actions [data-mq-back][hidden],
.mq-wizard-actions [data-mq-next][hidden]{display:none!important}

/* Одинокая «Далее» (шаг 1: «Назад» скрыт) держится правого края строки —
   space-between без второго видимого ребёнка прижимал её влево (P2,
   browser-audit 2026-10-02). На mobile кнопки full-width (flex:1) и
   auto-margin поглощается; шаг 3 (Back-only) не затрагивается. */
.mq-wizard-actions [data-mq-next]{margin-inline-start:auto}

/* Индикатор шага и прогресс-точки */
.mq-step-count{font-size:15px;font-weight:700;color:var(--muted);margin:0}
.mq-progress{display:flex;gap:8px;margin:4px 0 0}
.mq-progress button{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.mq-progress button:hover{border-color:var(--primary)}
/* Активный шаг: номер белый на терракоте #C2410C (5.18:1 AA, пара владельца
   VC S2) — белый на коралле давал ~2.9:1 */
.mq-progress button[aria-current="step"]{background:#C2410C;border-color:#C2410C;color:#fff}
.mq-progress button:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}

/* Действия навигации: Назад слева, Далее справа */
.mq-wizard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.mq-wizard-actions:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}

/* F-016: строки-чекбоксы (темы/подходы) ≥24px высоты цели — было 21px,
   WCAG 2.5.8 Target Size (Minimum, AA). Высоту задаёт сама строка (label):
   клик ловит вся строка целиком. */
.mq-check{min-height:24px}

/* S4 «Компактные чипы» (победитель VC-турнира-3 V1, ACK
   yd-wizard-step1-2026-10-11): все темы шага 1 — терракотовые чипы-чекбоксы
   (label + visually-hidden input), группы в 2 колонки на десктопе, свёртков
   «Ещё N» больше нет; под группами — счётчик «Выбрано: N тем». Стили живут
   здесь, а не в общем инлайн-блоке mqFormAssets: его байты пиняет
   golden-контракт /me/preferences, который этот файл не загружает. Пара
   #C2410C + #fff (5.18:1 AA) уже утверждена владельцем в VC S2 (active step);
   #7A3B22 на --primary-soft ≈ 7.2:1. Чипы компактнее прежних строк-чекбоксов
   ~2.5× — «Далее» попадает в первый экран 1440×1020. */
.mq-topic-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
/* двойная специфичность перебивает общие .mq-topic-group/.mq-group-title
   из инлайн-блока mqFormAssets (он подключается позже в DOM) */
.mq-topic-groups .mq-topic-group{margin-bottom:12px}
.mq-topic-groups .mq-topic-group:last-child{margin-bottom:0}
.mq-topic-groups .mq-group-title{margin:0 0 8px}
.mq-chips{display:flex;flex-wrap:wrap;gap:7px}
.mq-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-pill);background:var(--primary-soft);color:#7A3B22;font-size:14px;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.mq-chip input{position:absolute;opacity:0;width:0;height:0}
.mq-chip:has(input:checked){background:#C2410C;color:#fff;font-weight:600}
.mq-chip:has(input:focus-visible){outline:3px solid var(--accent-soft);outline-offset:2px}
.mq-selnote{margin:8px 0 0;font-size:13px;color:var(--muted)}
.mq-selnote b{color:#C2410C;font-weight:700}

@media (max-width:900px){
	/* группы тем — в одну колонку, как остальные mq-section */
	.mq-topic-groups{grid-template-columns:1fr}
}
@media (max-width:640px){
	/* длинные темы (детская аудитория) не должны рвать 390px: чип переносит текст */
	.mq-chip{white-space:normal}
}

/* F-034: сводка уточнений шага 2 на шаге 3 — на всю ширину CTA-секции,
   рядом с «Показать подборку»; пилюли переиспользуют ритм .mq-pill из
   mqFormAssets (статичный вариант без input). */
.mq-summary{grid-column:1 / -1;margin:0 0 var(--sp-3)}
.mq-summary[hidden]{display:none!important}
.mq-summary .mq-sub{margin:0 0 10px}
.mq-summary .mq-pills{gap:8px}
.mq-pill--static{cursor:default;padding:9px 18px;font-size:13.5px}
.mq-pill--static:hover{border-color:var(--border)}

@media (max-width:900px){
	.mq-stage{gap:44px}
	.mq-stage + .mq-stage{margin-top:44px}
	/* F-015: кнопки визарда не заходят в коридор фиксированного help-FAB
	   (справа снизу): «Далее» на шаге 2 теряла ~29% ширины под FAB на M.
	   Коридор = размер FAB + его right-отступ + зазор (как у .profile-booking). */
	.mq-wizard-actions{padding-right:calc(var(--help-fab-size) + var(--help-fab-right) + 8px)}
}
@media (max-width:640px){
	.mq-wizard-actions{margin-top:28px}
	.mq-wizard-actions .app-btn{flex:1}
}

/* W1 «Далее» в первый экран 1440×1020 (fb22, ACK yd-wizard-fold): компакт-хедер
   вместо центрированного section-header (eyebrow + h1 40px + lead 18px):
   h1 в масштабе me-hero (clamp 26-32px), подзаголовок muted 15px, отступы
   sp-4/sp-3; живой счётчик .mq-count первой строкой формы визуально замыкает
   хедер. Контейнер страницы 980→1200 (инлайн на .app-container в match.templ):
   двухколоночная сетка чипов тем становится шире, шаг 1 короче — «Далее»
   поднимается в фолд. */
.mq-hero{margin:var(--sp-3) 0 var(--sp-2);text-align:left}
.mq-hero h1{font-size:clamp(26px,3vw,32px);margin:0 0 4px}
.mq-hero-sub{font-size:15px;color:var(--muted);line-height:1.5;margin:0}

/* W1 (fb22): секция тем шага 1 — на всю ширину контейнера 1200. В сетке
   mq-section (280px лейбл + 1fr) чипы получали ~880px и стекались в высокий
   столб (~700px секция); лейбл над полем возвращает чипам полную ширину,
   секция тем ~400px — «Далее» поднимается в фолд 1440×1020. Override только
   на /match: /me/preferences этот файл не грузит (golden-байты не задеты). */
.mq-stage .mq-section:has(.mq-topic-groups){display:block}
.mq-stage .mq-section:has(.mq-topic-groups) > .mq-label{margin-bottom:6px}

/* W1 (fb22): счётчик — часть компакт-хедера, не отдельный блок: mb sp-4→sp-2,
   иначе мёртвые ~16px над «Шаг 1 из 3». Override shared-правила mqFormAssets
   (golden /me/preferences не задет — файл только на /match). */
.mq-quiz .mq-count{margin-bottom:var(--sp-2)}