/* ==========================================================================
   Тест-оверлей на главной. Логика: js/quiz-overlay.js, вопросы и тексты: js/quiz-data.js.
   Окно живёт по своей шкале (px, а не --s): тексты в нём читаются одинаково и на 320, и на 1440.
   Цвета, шрифты и радиусы берём из tokens.css. Отступы: 4 · 8 · 12 · 16 · 24 · 32 · 40.
   ========================================================================== */

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

.qo {
  --qo-pad: 16px;
  --qo-row: 48px;
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: stretch; justify-content: center;
  font-family: var(--f-text); font-size: 16px; line-height: var(--lh-text); color: var(--c-ink);
}
.qo[hidden] { display: none; }
.qo__back { position: absolute; inset: 0; background: rgba(5, 6, 11, .72); opacity: 0; transition: opacity .22s var(--ease-out); }
.qo.is-open .qo__back { opacity: 1; }

.qo__panel {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 100%; height: 100dvh;
  background: var(--c-white); overflow: hidden;
  opacity: 0; transform: translateY(24px);
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out);
}
.qo.is-open .qo__panel { opacity: 1; transform: none; }

/* Шапка: подпись части, закрыть, полоса прогресса */
.qo__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 0 var(--qo-pad); min-height: 56px; flex: none; }
.qo__part { font-size: 14px; line-height: 1.2; font-weight: 450; color: var(--c-muted); }
.qo__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-ink); transition: background-color var(--dur-1); }
.qo__prog { height: 3px; margin: 0 var(--qo-pad); border-radius: 3px; background: var(--c-paper); overflow: hidden; flex: none; }
.qo__prog i { display: block; height: 100%; width: 0; background: var(--c-red); border-radius: 3px; transition: width .4s var(--ease-out); }

/* Тело: прокручивается только оно */
.qo__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px var(--qo-pad) 32px; }
.qo__view { width: 100%; max-width: 520px; margin-inline: auto; }
.qo__view.is-fwd  { animation: qo-in-r .38s var(--ease-out) both; }
.qo__view.is-back { animation: qo-in-l .38s var(--ease-out) both; }
@keyframes qo-in-r { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes qo-in-l { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* Подвал: кнопки всегда под пальцем */
.qo__foot { flex: none; padding: 12px var(--qo-pad) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--c-white); box-shadow: 0 -1px 0 var(--c-paper); }
.qo__meta { max-width: 520px; margin: 0 auto 8px; font-size: 14px; line-height: 1.2; font-weight: 450; color: var(--c-muted); }
.qo__row { display: flex; gap: 12px; max-width: 520px; margin-inline: auto; }
.qo__prev { flex: none; min-height: var(--btn-h); padding: 0 20px; background: var(--c-paper); color: var(--c-ink); }
.qo__next { flex: 1 1 auto; min-width: 0; padding: 0 16px; white-space: normal; line-height: 1.1; }
.qo__prev[hidden], .qo__next[hidden] { display: none; }
.qo__foot.is-result { display: none; }
.qo .btn { min-height: 51px; font-size: 16px; padding-inline: 20px; white-space: normal; line-height: 1.1; }
.qo .btn--block { width: 100%; }
.qo .btn--ink { background: var(--c-ink); color: var(--c-white); }
@media (hover: hover) {
  .qo__x:hover { background: var(--c-paper); }
  .qo__prev:hover { background: var(--c-disabled); }
  .qo .btn--ink:hover { background: #262626; transform: translateY(-1px); }
}

/* Заголовки: Bebas, как на сайте. Вопрос может занять 3 строки, поэтому интерлиньяж чуть свободнее .8 */
.qo__top { display: flex; flex-direction: column; gap: 8px; }
.qo__kicker { font-size: 14px; line-height: 1.2; font-weight: 450; color: var(--c-red); }
.qo__title { font-size: clamp(34px, 9vw, 46px); line-height: .9; color: var(--c-ink); }
.qo__title:focus { outline: none; }
.qo__lead { margin-top: 16px; font-size: 18px; line-height: 1.3; }
.qo__hint { margin-top: 12px; font-size: 16px; line-height: var(--lh-small); color: var(--c-muted); }
.qo__fine { margin-top: 12px; font-size: 14px; line-height: var(--lh-small); color: var(--c-muted); }

/* Вводный экран */
.qo__facts { display: grid; gap: 12px; margin-top: 24px; }
.qo__facts li { position: relative; padding-left: 20px; line-height: var(--lh-small); }
.qo__facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); }
.qo__consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 32px; padding: 16px; border-radius: 14px; background: var(--c-paper); font-size: 14px; line-height: 1.3; cursor: pointer; }
.qo__consent input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--c-muted); border-radius: 6px; background: var(--c-white); display: grid; place-items: center; cursor: pointer; }
.qo__consent input:checked { background: var(--c-red); border-color: var(--c-red); }
.qo__consent input:checked::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.qo__consent a { text-decoration: underline; text-underline-offset: .15em; }

/* Карточки выбора: пол, да/нет */
.qo__sex, .qo__yn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.qo__yn { margin-top: 24px; }
.qo__card {
  display: grid; place-items: center; min-height: 128px; padding: 16px; border-radius: var(--r-card, 20px);
  background: var(--c-paper); color: var(--c-ink);
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 40px; line-height: .9;
  border: 1.5px solid transparent; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.qo__card--sm { min-height: 64px; font-size: 32px; border-radius: 14px; }
.qo__card.is-on { background: var(--c-red); color: var(--c-white); }
@media (hover: hover) { .qo__card:not(.is-on):hover { border-color: var(--c-muted); } }

/* «Барабан» */
.qo__wheelbox { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; }
.qo__wheel { position: relative; width: 100%; max-width: 280px; height: calc(var(--qo-row) * 5); border-radius: 14px; }
.qo__wheel:focus-visible { outline-offset: 2px; }
.qo__wlist {
  height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain;
  padding: calc(var(--qo-row) * 2) 0; scroll-behavior: auto; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.qo__wlist::-webkit-scrollbar { display: none; }
.qo__wi {
  height: var(--qo-row); display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--c-muted); opacity: .35;
  transition: font-size .12s var(--ease-out), color .12s, opacity .12s;
}
.qo__wi[data-d="0"] { font-size: 44px; color: var(--c-ink); opacity: 1; }
.qo__wi[data-d="1"] { font-size: 32px; opacity: .6; }
.qo__wi[data-d="2"] { font-size: 26px; opacity: .35; }
.qo__wband { position: absolute; left: 0; right: 0; top: calc(var(--qo-row) * 2); height: var(--qo-row); border-radius: 12px; background: rgba(220, 26, 29, .07); pointer-events: none; }
.qo__manual { display: inline-flex; align-items: center; gap: 12px; }
.qo__manual input, .qo__other input, .qo__ask textarea, .qo__numin input {
  height: 52px; padding: 0 16px; border: 1px solid var(--c-disabled); border-radius: var(--r-input, 8px);
  background: var(--c-white); color: var(--c-ink); font-size: 18px; line-height: 1.2; outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.qo__manual input { width: 112px; text-align: center; font-weight: 500; }
.qo__other input, .qo__ask textarea { width: 100%; font-size: 16px; }
.qo__ask textarea { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; font-family: inherit; line-height: 1.35; }
.qo__manual input:focus, .qo__other input:focus, .qo__ask textarea:focus, .qo__numin input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(220, 26, 29, .14); }
.qo__unit { font-size: 16px; color: var(--c-muted); }

/* Чипы */
.qo__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.qo__chip {
  min-height: 48px; padding: 10px 16px; border-radius: var(--r-btn, 8px);
  background: var(--c-paper); color: var(--c-ink); font-size: 16px; line-height: 1.2; text-align: left;
  border: 1.5px solid transparent; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.qo__chip.is-on { background: var(--c-red); color: var(--c-white); }
.qo__chip--other { border-color: var(--c-disabled); background: var(--c-white); }
.qo__chip--other.is-on { border-color: var(--c-red); }
.qo__other { margin-top: 12px; }
.qo__other[hidden] { display: none; }
@media (hover: hover) { .qo__chip:not(.is-on):hover { border-color: var(--c-muted); } }

/* Уровни активности */
.qo__levels { display: grid; gap: 8px; margin-top: 24px; }
.qo__level { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--c-paper); text-align: left; border: 1.5px solid transparent; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.qo__dots { display: grid; grid-auto-flow: column; gap: 3px; align-items: end; height: 20px; }
.qo__dots i { width: 5px; border-radius: 2px; background: var(--c-disabled); height: 6px; }
.qo__dots i:nth-child(2) { height: 9px; } .qo__dots i:nth-child(3) { height: 12px; } .qo__dots i:nth-child(4) { height: 16px; } .qo__dots i:nth-child(5) { height: 20px; }
.qo__dots i.on { background: var(--c-red); }
.qo__lt { display: grid; gap: 2px; }
.qo__lt b { font-weight: 600; font-size: 16px; line-height: 1.2; }
.qo__lt small { font-size: 14px; line-height: var(--lh-small); color: var(--c-muted); transition: color var(--dur-1); }
.qo__level.is-on { background: var(--c-red); color: var(--c-white); }
.qo__level.is-on small { color: rgba(255, 255, 255, .82); }
.qo__level.is-on .qo__dots i { background: rgba(255, 255, 255, .45); }
.qo__level.is-on .qo__dots i.on { background: var(--c-white); }
@media (hover: hover) { .qo__level:not(.is-on):hover { border-color: var(--c-muted); } }

/* Да/нет с уточнением */
.qo__ask { margin-top: 16px; }
.qo__ask[hidden] { display: none; }
.qo__asklabel { margin-bottom: 8px; font-size: 14px; font-weight: 450; color: var(--c-muted); }

/* Чек-лист: блоки без названий, между ними воздух */
.qo__sec { display: grid; gap: 8px; margin-top: 40px; }
.qo__sec:first-of-type { margin-top: 28px; }
.qo__chk, .qo__sw, .qo__num {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 16px;
  border-radius: 14px; background: var(--c-paper); cursor: pointer; line-height: var(--lh-small);
  border: 1.5px solid transparent; transition: background-color var(--dur-1), border-color var(--dur-1);
}
.qo__ct { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.qo__chk input, .qo__sw input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qo__chk .qo__ct { order: 2; }
.qo__box { order: 1; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--c-muted); background: var(--c-white); transition: background-color var(--dur-1), border-color var(--dur-1); }
.qo__chk input:checked + .qo__box { background: var(--c-red); border-color: var(--c-red); }
.qo__chk input:checked + .qo__box::after { content: ""; width: 11px; height: 6px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.qo__chk:has(input:checked) { background: var(--c-bad-bg); border-color: rgba(220, 26, 29, .35); }
.qo__chk input:focus-visible + .qo__box, .qo__sw input:focus-visible ~ .qo__tg { outline: 2px solid var(--c-red); outline-offset: 3px; }
.qo__tg { flex: none; position: relative; width: 48px; height: 28px; border-radius: 28px; background: var(--c-disabled); transition: background-color var(--dur-1); }
.qo__tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease-out); }
.qo__sw input:checked ~ .qo__tg { background: var(--c-red); }
.qo__sw input:checked ~ .qo__tg::after { transform: translateX(20px); }
.qo__sw:has(input:checked) { background: var(--c-bad-bg); border-color: rgba(220, 26, 29, .35); }
.qo__num { cursor: default; }
.qo__numin { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.qo__numin input { width: 64px; height: 44px; padding: 0 8px; text-align: center; font-size: 16px; }

/* Уточнения: вопрос и две кнопки «да» / «нет» */
.qo__q { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--c-paper); }
.qo__q.is-missing { background: #fdecec; box-shadow: inset 0 0 0 2px var(--c-red); }
.qo__q.is-missing .qo__ct { color: var(--c-red); }
.qo__meta.is-bad { color: var(--c-red); font-weight: 600; }
.qo__q--num { grid-template-columns: 1fr auto; align-items: center; }
.qo__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qo__segb { min-height: 48px; border-radius: var(--r-btn, 8px); background: var(--c-white); border: 1.5px solid var(--c-disabled); font-size: 16px; font-weight: 500; line-height: 1; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.qo__segb.is-on { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }
@media (hover: hover) { .qo__segb:not(.is-on):hover { border-color: var(--c-muted); } }

/* Итог */
.qo__p { margin-top: 16px; font-size: 16px; line-height: 1.4; }
.qo__top + .qo__p { margin-top: 24px; }
.qo__blocks { display: grid; gap: 8px; margin-top: 24px; }
.qo__blk { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--c-paper); line-height: 1.35; }
.qo__bl { font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--c-red); }
.qo__promo { display: grid; gap: 8px; justify-items: start; margin-top: 24px; padding: 20px; border-radius: var(--r-card, 20px); background: var(--c-ink); color: var(--c-on-dark); }
.qo__promo .btn { margin-top: 8px; }
.qo__code { font-family: var(--f-display); font-weight: 700; font-size: 48px; line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.qo__pt { font-size: 16px; line-height: 1.35; color: var(--c-on-dark-2); }
.qo__promo .qo__bl { color: var(--c-on-dark-2); }
.qo__acts { display: grid; gap: 12px; margin-top: 24px; }
.qo__acts .qo__fine { margin-top: -4px; }
.qo__again { display: block; margin: 24px auto 0; padding: 12px 8px; font-size: 14px; color: var(--c-muted); text-decoration: underline; text-underline-offset: .18em; }

/* ПК и планшет: окно по центру */
@media (min-width: 768px) {
  .qo { --qo-pad: 32px; align-items: center; }
  .qo__panel { width: min(640px, calc(100% - 48px)); height: min(780px, calc(100dvh - 48px)); border-radius: 28px; transform: translateY(16px) scale(.985); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
  .qo__head { padding: 16px 16px 0 var(--qo-pad); }
  .qo__body { padding: 32px var(--qo-pad) 40px; }
  .qo__foot { padding: 16px var(--qo-pad) 24px; }
  .qo__title { font-size: 48px; }
  .qo__card { font-size: 44px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .qo__wheel { height: calc(var(--qo-row) * 3); }
  .qo__wlist { padding: var(--qo-row) 0; }
  .qo__wband { top: var(--qo-row); }
}
@media (prefers-reduced-motion: reduce) {
  .qo__panel, .qo__back, .qo__prog i { transition: none; }
  .qo__view.is-fwd, .qo__view.is-back { animation: none; }
}

/* Неактивная кнопка остаётся серой и под курсором */
.qo .btn:disabled, .qo .btn:disabled:hover { background: var(--c-disabled); color: var(--c-muted); transform: none; box-shadow: none; }