/* Квиз «Разбор ситуации» — окном поверх любой страницы сайта (решение владельца 29.09.2026:
   кнопки ведут в квиз на месте, а не на рекламный razbor.prov115.ru).
   Карточка, вопросы, разбор и форма перенесены из landing/razbor/index.html — там же пороги
   плотности, подобранные замером. Здесь всё под .qz / .qd, чтобы стили сайта и квиза
   не задевали друг друга. Правили вид квиза на razbor — перенести сюда и прогнать
   site-src/tools/quiz-measure.mjs: карточка должна влезать без прокрутки. */

html.qz-lock, html.qz-lock body { overflow: hidden; }

/* ── окно ──────────────────────────────────────────────── */
/* Телефон: весь экран. Высота — dvh: окно следует за панелями браузера, а содержимое
   карточки ужимается по её высоте (@container ниже). */
.qz {
  border: 0; padding: 0; margin: 0; inset: 0; width: 100%; max-width: none;
  height: 100vh; height: 100dvh; max-height: none;
  background: var(--navy); color: var(--ink); overflow: hidden;
  /* Зелёный — только оценка «Хорошие шансы» в разборе, как на razbor; кнопки остаются золотыми. */
  --ok: #0f9d63; --ok-ink: #0b7a4c; --ok-12: rgba(15, 157, 99, .12);
}
.qz::backdrop { background: rgba(6, 14, 24, .72); }
.qz[open] { display: flex; flex-direction: column; }
/* Верхняя строка на телефоне — в одну линию: каждый пиксель высоты нужен карточке. */
.qz-top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px 6px 16px; color: var(--text);
}
.qz-top > div { min-width: 0; }
.qz-top b { display: block; color: #fff; font-size: .95rem; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-long, .qz-sub { display: none; }
.qz-sub { color: var(--muted); font-size: .88rem; line-height: 1.4; margin-top: 4px; }
.qz-x {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center;
  border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.qz-x:hover { border-color: var(--gold); color: var(--gold); }
.qz .quizbox { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 8px 8px; }

/* ── квиз: белая карточка на тёмной подложке (как razbor) ── */
.qz .quiz-aside { display: none; }
.qz .quiz-aside .ava { width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--panel-2); }
.qz .quiz-aside .ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.qz .quiz-aside .say { background: var(--white); color: var(--ink); border-radius: 12px;
  padding: 14px 16px; margin-top: -14px; margin-left: 26px; box-shadow: 0 8px 20px rgba(5, 12, 23, .22); }
.qz .quiz-aside .say b { display: block; font-size: .95rem; color: var(--ink); }
.qz .quiz-aside .say span { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: 8px; }
.qz .quiz-aside .say p { margin: 0; font-size: .88rem; line-height: 1.45; color: #4a5060; }

/* Карточка фиксированной высоты: не прыгает ни между вопросами, ни на разборе. На телефоне
   она забирает всё окно под верхней строкой. container-type — чтобы содержимое ужималось
   по высоте самой карточки. */
.qz .card { background: var(--white); color: var(--ink); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; container-type: size; flex: 1; min-height: 0; }
.qz .card-in { padding: 18px 16px; }
.qz .progress { height: 4px; background: #e7e8ee; flex: none; }
.qz .progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .35s ease; }
.qz .card-in { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.qz .card-in > .fade { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qz .scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin-right: -6px; padding-right: 6px; padding-bottom: 4px; border-bottom: 1px solid #eceef4; }
.qz .card-in .btn, .qz .card-in .card-foot, .qz .card-in .cta-lead { flex: none; }
.qz .card-in h2, .qz .card-in h3 { color: var(--ink); }
.qz .q-title { font-size: clamp(1.2rem, 3.2vw, 1.5rem); font-weight: 700; color: var(--ink);
  margin: 0 0 28px; letter-spacing: -.01em; line-height: 1.3; }
.qz .opts { display: grid; gap: 12px; }
.qz .opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit;
  font-size: .96rem; line-height: 1.4; color: var(--ink); background: var(--light);
  border: 1px solid transparent; border-radius: 10px; padding: 18px 20px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.qz .opt:hover { border-color: var(--gold); background: #fff; }
.qz .opt i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #b9bdc9; flex: none;
  margin-top: 2px; transition: .15s; }
.qz .opt:hover i { border-color: var(--gold); }
.qz .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.qz .stepno { font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.qz .back { font: inherit; font-size: .9rem; color: var(--ink-soft); background: var(--light);
  border: 1px solid #e2e4ec; border-radius: 8px; padding: 11px 18px; cursor: pointer; }
.qz .back:hover { border-color: var(--gold); color: var(--ink); }
.qz .btn[disabled] { background: rgba(255, 255, 255, .05); border-color: var(--gold-25); color: var(--muted);
  cursor: not-allowed; filter: none; }
.qz .btn-wide { width: 100%; }
/* Чем ниже карточка, тем плотнее варианты. Пороги — с razbor, подобраны замером всех экранов. */
@container (max-height: 700px) {
  .qz .q-title { margin-bottom: 14px; }
  .qz .opts { gap: 7px; }
  .qz .opt { padding: 10px 12px; gap: 9px; font-size: .9rem; line-height: 1.28; }
  .qz .opt i { width: 16px; height: 16px; margin-top: 1px; }
  .qz .card-foot { padding-top: 10px; }
  .qz .back { padding: 8px 14px; }
}
@container (max-height: 560px) {
  .qz .q-title { font-size: 1.08rem; margin-bottom: 10px; }
  .qz .opts { gap: 5px; }
  .qz .opt { padding: 8px 10px; font-size: .85rem; line-height: 1.22; }
  .qz .card-foot { padding-top: 8px; }
  .qz .back { padding: 6px 12px; font-size: .85rem; }
  .qz .stepno { font-size: .8rem; }
}

/* пояснение */
.qz .insight { border-left: 3px solid var(--gold); background: var(--light); border-radius: 0 12px 12px 0;
  padding: 26px 28px; color: var(--ink); }
.qz .insight .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8a6a2b; margin-bottom: 9px; }
.qz .insight h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); margin: 0 0 12px; font-weight: 700; }
.qz .insight p { color: #3f4553; font-size: .98rem; }
@media (max-height: 720px) {
  .qz .insight { padding: 20px 20px; }
  .qz .insight p { margin-bottom: 10px; font-size: .95rem; }
  .qz .insight h3 { font-size: 1.12rem; margin-bottom: 10px; }
  .qz .insight .eyebrow { margin-bottom: 7px; }
}
.qz .insight p:last-child { margin-bottom: 0; }

/* разбор */
.qz ol.plan { margin: 0; padding-left: 22px; display: grid; gap: 9px; color: #3f4553; }
.qz .term { display: flex; gap: 12px; align-items: baseline; padding: 12px 15px; background: var(--light);
  border-radius: 9px; margin-bottom: 8px; font-size: .95rem; color: #3f4553; }
.qz .term b { color: #8a6a2b; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .qz .term { flex-direction: column; gap: 3px; } }

/* форма */
.qz .fields { display: grid; gap: 14px; }
.qz .lab { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.qz input[type=text], .qz input[type=tel] { width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--light); border: 1px solid #e2e4ec; border-radius: 9px; padding: 15px 16px; }
.qz input::placeholder { color: #9aa0ae; }
.qz input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px var(--gold-12); }
.qz .consent { display: flex; gap: 11px; align-items: flex-start; font-size: .84rem; color: var(--ink-soft);
  margin: 20px 0; line-height: 1.45; }
.qz .consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.qz .form-note { font-size: .86rem; color: var(--ink-soft); margin: 13px 0 0; }
.qz .linkish { font: inherit; font-size: inherit; color: var(--gold-text); text-decoration: underline;
  text-underline-offset: 3px; }
.qz .linkish:hover { color: var(--ink); }

/* экран «анализируем» */
.qz .analyzing { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; flex: 1; gap: 18px; padding: 20px 0; }
.qz .analyzing h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); margin: 0; color: var(--ink); }
.qz .analyzing p { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: 34ch; }
.qz .spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #e7e8ee;
  border-top-color: var(--gold); animation: qz-spin .9s linear infinite; }
@keyframes qz-spin { to { transform: rotate(360deg); } }
.qz .anbar { width: min(280px, 80%); height: 4px; border-radius: 2px; background: #e7e8ee; overflow: hidden; }
.qz .anbar i { display: block; height: 100%; width: 0; background: var(--gold); animation: qz-fill 1.1s ease forwards; }
@keyframes qz-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .qz .spin { animation: none; } .qz .anbar i { animation: none; width: 100%; }
}

/* разбор в карточке: решение, оценка, форма сразу */
.qz .res-in { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.qz .res .win { background: var(--light); border-left: 3px solid var(--ok); border-radius: 0 12px 12px 0;
  padding: 14px 16px; }
.qz .res .win.stop { border-left-color: #c0504d; }
.qz .win-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.qz .win .eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8a6a2b; white-space: nowrap; }
.qz .relink { font: inherit; font-size: .76rem; color: var(--ink-soft); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.qz .relink:hover { color: var(--ink); }
.qz .win-h { display: flex; gap: 10px; align-items: flex-start; }
.qz .win-h .ok { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: var(--ok-12); border: 1px solid var(--ok); color: var(--ok-ink); display: grid; place-content: center; }
.qz .res .win h3 { font-size: clamp(1.12rem, 4.2vw, 1.45rem); line-height: 1.2; margin: 0; }
.qz .win p { color: #3f4553; font-size: .9rem; line-height: 1.45; margin: 8px 0 0; }
.qz .odds { margin-top: 12px; }
.qz .odds-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.qz .odds-head b { font-size: 1.02rem; color: var(--ok-ink); white-space: nowrap; }
.qz .odds-head span { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.qz .odds-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.qz .odds-bar i { height: 8px; border-radius: 4px; background: #e2e4ec; position: relative; overflow: hidden; }
.qz .odds-bar i.on::after { content: ""; position: absolute; inset: 0; background: var(--ok);
  transform-origin: left; animation: qz-seg .35s cubic-bezier(.2, 0, 0, 1) both; }
.qz .odds-bar i.on:nth-child(2)::after { animation-delay: .18s; }
.qz .odds-bar i.on:nth-child(3)::after { animation-delay: .36s; }
@keyframes qz-seg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .qz .odds-bar i.on::after { animation: none; } }
.qz .lf h3 { font-size: 1.05rem; margin: 0 0 2px; color: var(--ink); }
.qz .lf .sub { color: var(--ink-soft); font-size: .86rem; margin: 0 0 10px; max-width: none; line-height: 1.55; }
.qz .lf input[type=text], .qz .lf input[type=tel] { padding: 11px 14px; }
.qz .lf .fields { gap: 8px; }
/* Подписи полей скрыты визуально: хватает подсказок внутри полей. Для экранных чтецов остаются. */
.qz .lf .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qz .lf .consent { margin: 10px 0; font-size: .74rem; line-height: 1.35; gap: 9px; }
.qz .lf .consent input { margin-top: 0; }
.qz .lf .btn { min-height: 50px; padding: 12px 10px; font-size: .88rem; letter-spacing: .03em; }
.qz .lf input.err { border-color: #cf4444; box-shadow: 0 0 0 3px rgba(207, 68, 68, .12); }
.qz .lf .consent.err { color: #cf4444; }
/* Ошибка встаёт на место подзаголовка — высота не растёт. */
.qz .lf .form-note { color: #cf4444; font-size: .82rem; margin: 0 0 10px; }
.qz .lf:has(.form-note:not([hidden])) .sub { display: none; }
.qz .res-call { display: grid; gap: 12px; }
.qz .more h4 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 6px; }
.qz .more ol.plan { gap: 5px; font-size: .9rem; }
/* Низкая карточка: сначала убираем пояснение, затем подзаголовок формы. */
@container (max-height: 560px) {
  .qz .win p, .qz .lf .sub { display: none; }
  .qz .res-in { gap: 10px; }
  .qz .res .win { padding: 12px 14px; }
  .qz .res .win h3 { font-size: 1.06rem; }
  .qz .odds { margin-top: 10px; }
  .qz .lf .form-note { margin-bottom: 8px; }
  .qz .lf .consent { margin: 8px 0; }
}
.qz .done { text-align: center; padding: 6px 0 0; }
/* Галочка в строку с заголовком (11.10.2026): иначе под кнопки каналов не хватало высоты. */
.qz .done-h { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.qz .done .mark { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--gold-12);
  border: 1px solid var(--gold); display: grid; place-content: center; color: #8a6a2b; }
.qz .done h3 { font-size: 1.4rem; margin: 0; }
.qz .done p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 14px; }
.qz .done .btn { min-height: 52px; }
/* После заявки — канал юриста, вторым планом под «Позвонить сейчас»: две кнопки в строку. */
.qz .done-ch { border-top: 1px solid var(--line); margin: 14px auto 0; padding-top: 12px; max-width: 360px; }
.qz .done-ch p { font-size: .9rem; margin: 0 auto 8px; }
.qz .done-ch .msgs-btn { grid-template-columns: 1fr 1fr; gap: 8px; }
.qz .done-ch .msgs a.btn-line { min-height: 44px; padding: 8px 10px; }
@container (max-height: 560px) {
  .qz .done-h { margin-bottom: 6px; }
  .qz .done p { margin-bottom: 8px; }
  .qz .done .btn { min-height: 46px; }
  .qz .done-ch { margin-top: 10px; padding-top: 8px; }
  .qz .done-ch p { margin-bottom: 6px; }
}
.qz .fade { animation: qz-in .26s ease; }
@keyframes qz-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ── планшет и десктоп: окно по центру ─────────────────── */
@media (min-width: 700px) {
  .qz { inset: 0; margin: auto; width: min(1120px, 94vw); height: fit-content; max-height: 94vh;
    border-radius: 18px; background: var(--panel); }
  .qz-top { padding: 20px 20px 14px 26px; align-items: flex-start; }
  .qz-top b { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.01em; white-space: normal; }
  .qz-long, .qz-sub { display: block; }
  .qz-short { display: none; }
  .qz .quizbox { padding: 0 26px 26px; display: grid; gap: 26px; }
  .qz .card { flex: none; height: clamp(468px, 58vh, 610px); }
  .qz .card-in { padding: clamp(22px, 3.4vw, 42px); }
  .qz .opts { grid-template-columns: 1fr 1fr; }
  .qz .fields { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .qz .quizbox { grid-template-columns: 290px 1fr; }
  .qz .quiz-aside { display: block; position: relative; padding: 8px 4px; }
  /* Решение и форма рядом, в две колонки. */
  .qz .res-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-content: start; }
  .qz .res .lf .fields { grid-template-columns: 1fr; }
  .qz .res .win { padding: 20px 22px; }
}

/* ── окно документа (политика, согласие) поверх квиза ──── */
.qd { border: 0; padding: 0; margin: auto; width: min(820px, 94vw); max-width: none;
  height: min(86vh, 900px); max-height: none; background: var(--light); color: var(--ink);
  border-radius: 16px; overflow: hidden; }
.qd::backdrop { background: rgba(6, 14, 24, .72); }
.qd[open] { display: flex; flex-direction: column; }
.qd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px); background: var(--navy); color: #fff; flex: none; }
.qd-top b { font-weight: 700; font-size: 1rem; }
.qd-body { flex: 1; overflow-y: auto; padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 40px) 30px; }
.qd-inner { max-width: 760px; margin: 0 auto; font-size: .94rem; line-height: 1.65; color: #3f4553; }
.qd-inner h2 { font-size: 1.05rem; color: var(--ink); margin: 26px 0 10px; }
.qd-inner h2:first-child { margin-top: 0; }
.qd-inner h3 { font-size: .98rem; color: var(--ink); margin: 18px 0 8px; }
.qd-inner p { margin: 0 0 10px; }
.qd-inner ul, .qd-inner ol { margin: 0 0 12px; padding-left: 22px; }
.qd-inner a { color: var(--gold-text); }
.qd-inner .date { color: var(--ink-soft); font-size: .86rem; margin-bottom: 18px; }
.qd-foot { flex: none; background: var(--white); border-top: 1px solid var(--line);
  padding: 12px clamp(16px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px)); }
.qd-foot .btn { width: 100%; min-height: 50px; }
@media (min-width: 620px) { .qd-foot { display: flex; justify-content: flex-end; } .qd-foot .btn { width: auto; min-width: 300px; } }