/* Квизы и страницы квизов в дизайне Truekind (23.10.2026).
   Подключается после base.css, quiz.css (и home.css на страницах .tk) везде, где есть квиз:
   главные, страницы /quiz…, окно квиза в статьях блога; плюс страницы результата /quiz/…/result.
   Разметку и логику quiz.js не меняет: внутри квиза и окна переопределяет токены дизайн-системы
   (base.css) и несколько правил, где цвет или шрифт зашит. Палитра как на главной: графит, белый,
   серый, беж, пудра; коралл только точками. Шрифты Manrope и Playfair Display (TK_FONTS в build.py). */
.quiz,.quiz-modal,.tk-page{
  --font:'Manrope',Arial,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --ink:#3b3b3b;--ink-body:#3b3b3b;--ink-2:#6b6b6b;--ink-3:#767676;
  --bg:#fff;--surface:#fff;--surface-glass:#fff;
  --sand:#ece6dd;--tint:#ece6dd;--tint-soft:#f5f5f5;--muted:#f5f5f5;
  --coral:#3b3b3b;--coral-300:#a0a0a0;--coral-line:#d8d0c4;
  --grad:#3b3b3b;--grad-soft:#f1cccf;
  --green:#3b3b3b;
  --line:#d8d8d8;--line-soft:#e6e6e6;--line-strong:#d8d8d8;
  --overlay:rgba(40,40,40,.5);
  --r-xl:24px;--r-lg:18px;--r-ml:14px;--r-md:12px;--r-sm:10px;--r-xs:8px;
  --shadow-sm:none;--glow:none;--lift:none;
  --shadow-panel:0 30px 70px -44px rgba(0,0,0,.28);
  --focus-ring:0 0 0 3px rgba(59,59,59,.12);
  --dot:#ef5a35;
}
.quiz,.quiz-modal{font-family:var(--font);color:var(--ink)}
.quiz :is(h1,h2,h3,h4){letter-spacing:-.01em}

/* заголовки: обложка и финал — Playfair, вопрос — Manrope */
.quiz__title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.015em}
.quiz__title strong{font-weight:400}
.quiz__q{font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.25}
.quiz__count{font-weight:600;letter-spacing:.06em;font-size:12px}
.quiz__kicker::before,.quiz__summary-t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dot);margin-right:8px;vertical-align:2px}
.quiz__kicker{font-size:12px;letter-spacing:.12em;font-weight:600}
.quiz__bubble{border-radius:4px var(--r-md) var(--r-md) var(--r-md)}

.quiz__back{white-space:nowrap;color:var(--ink-2);font-weight:500}
@media (max-width:860px){
  /* окно на весь экран: под коротким шагом не просвечивает страница */
  .quiz-modal__in{background:var(--surface)}
}

/* прогресс */
.quiz__bar{height:3px;background:#ececec}
.quiz__bar span{background:var(--ink)}

/* варианты ответа: выбранный — беж и графитовая рамка */
.quiz__opt,.quiz .option{font-weight:500;border-width:1px}
.quiz__opt:hover{border-color:var(--ink);background:var(--surface)}
.quiz__opt:has(input:checked){border-color:var(--ink);background:var(--tint)}
.quiz__opt--tile:has(input:checked){box-shadow:inset 0 0 0 1px var(--ink)}
.quiz__ic{background:#f3efe9}
.quiz__opt:has(input:checked) .quiz__ic{background:#fff}
.quiz__tick{background:var(--tint);color:var(--ink)}
.quiz__q{text-wrap:balance}
.quiz__review blockquote{font-family:var(--serif);font-size:clamp(17px,1.6vw,20px);line-height:1.45}
.quiz__review--mini blockquote{font-family:var(--font);font-size:14px}
.quiz__summary-t{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600}
.quiz__flabel{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.quiz__done{background:var(--ink)}
.quiz__opt::before{border-width:1.5px}
.quiz__form input,.quiz__form textarea,.quiz__own{border-width:1px;background:var(--tint-soft)}
.quiz__form input:focus,.quiz__form textarea:focus,.quiz__own:focus{background:var(--surface)}
.quiz__form label,.quiz__info-field{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* кнопки: графитовая пилюля, как .tk-btn на главной */
.quiz .btn,.tk-page .btn{font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:.02em;padding:17px 30px;box-shadow:none;transition:background .3s,color .3s,border-color .3s}
.quiz .btn--lg,.tk-page .btn--lg{padding:19px 34px;font-size:16px}
.quiz .btn--primary,.tk-page .btn--primary{background:var(--ink);color:#fff}
.quiz .btn--primary:hover,.tk-page .btn--primary:hover{background:#232323;transform:none;box-shadow:none}
.quiz .btn--primary:disabled{opacity:.6}
.quiz .btn--ghost,.tk-page .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.quiz .btn--ghost:hover,.tk-page .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* подарки: панель пудры, как карточка подарка на главной */
.qg__title::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dot);margin-right:8px;vertical-align:2px}
.qg__note{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.15}
.qg__ring b{font-weight:600}
.qg__track{stroke:rgba(59,59,59,.14)}
.qg__gift{border-radius:var(--r-md)}
.qg__icon{background:var(--tint);color:var(--ink)}
.qg__chip{background:#fff;border-color:var(--line);font-weight:500}
.quiz__contact .qg,.quiz__result .qg{background:var(--tint-soft)}

/* окно */
.quiz-modal__close{background:#fff;box-shadow:0 0 0 1px var(--line)}
.quiz-modal__close:hover{background:var(--tint)}

/* ---------- страницы /quiz… и /quiz/…/result: шапка всегда белая, серый фон под панелью (tk-page--grey) ---------- */
.tk-page--grey{background:var(--tk-mist)}
.tk-page .top{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--tk-line)}
.tk-page main{font-family:var(--font)}
.tk-page .quiz-page__in{min-height:calc(100vh - 76px);padding:104px 0 56px}
.tk-page .foot{margin-top:0}
@media (max-width:860px){
  .tk-page .quiz-page__in{padding:76px 0 0}
  .tk-page .quiz-page__in>.wrap{width:100%}
  .tk-page .quiz-page__in .quiz__box{min-height:calc(100vh - 76px)}
}

/* страница результата */
.tk-page .result{min-height:70vh;padding:clamp(120px,12vw,160px) 0 clamp(70px,9vw,120px)}
.tk-page .result h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.02em;margin-top:22px}
.tk-page .result h1 strong{font-weight:400}
.tk-page .result h2{font-family:var(--font);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--ink-2)}
.tk-page .result .lead{color:var(--ink-2);font-size:clamp(16px,1.4vw,19px)}
.tk-page .result__check{background:var(--ink);color:#fff;box-shadow:none}
.tk-page .result__gift{border-radius:18px;box-shadow:none}
@media (max-width:720px){.tk-page .result__btns .btn{width:100%}}

/* выбор мессенджера в форме: обычный текст, не как подписи полей */
.quiz__form .quiz__pill{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--ink)}
.quiz__form .quiz__opt-l{font-size:11px}
/* «плей» из логотипа на кнопке старта квиза: белый круг с треугольником, наведение = нажатие */
.quiz .btn--play,.tk-page .btn--play{display:inline-flex;align-items:center;gap:16px;padding-right:12px}
.quiz__play{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center}
.quiz__play svg{width:16px;height:16px;fill:#ef5a35;transform:translateX(1px)}
.quiz__play::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.4px solid #ef5a35;opacity:0;pointer-events:none}
.btn--play:hover .quiz__play svg{animation:quiz-press .55s cubic-bezier(.3,.8,.3,1)}
.btn--play:hover .quiz__play::after{animation:quiz-rip .9s ease-out}
@keyframes quiz-press{0%,100%{transform:translateX(1px) scale(1)}35%{transform:translateX(1px) scale(.78)}}
@keyframes quiz-rip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.quiz__play svg,.quiz__play::after{animation:none!important}}