/* Квиз «оффер и строка». Цвета, радиусы, отступы только из tokens.css, запасные значения на случай без него.
   Селекторы с префиксом .quiz-; секция #quiz.quiz.quiz. */

.quiz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(60% 55% at 50% 42%, var(--c-surface, #fff) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--c-bg, #fff8f0) 0%, var(--c-bg-2, #fceee0) 100%);
}

/* Оффер и тихая строка под ним (их рисует шаблон страницы или движок) */
.quiz .quiz__intro { max-width: 52rem; margin: 0 auto var(--s-6, 32px); padding-inline: var(--gutter, 16px); }
/* h2 вводного блока по роли h2 из base.css (шкала 06/10/2026: был 32-56 px, вес 300) */
.quiz .quiz__intro .lead {
  margin-top: var(--s-4, 16px); font-size: var(--ty-body); line-height: var(--ty-body-lh); color: var(--c-ink-2, #5c534d);
}

.quiz-stage { width: min(100% - 2 * var(--gutter, 16px), 720px); margin-inline: auto; }

/* Вопрос над строкой */
.quiz-thread { min-height: 5.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2, 8px); margin-bottom: var(--s-4, 16px); }
.quiz-thread > * { animation: quiz-in 0.25s ease both; }
.quiz-prev {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3, #756a63);
}
.quiz-q { font-size: var(--ty-lead); font-weight: var(--ty-fw-body); line-height: var(--ty-h4-lh); color: var(--c-ink, #2a2623); text-wrap: balance; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Строка-пилюля как в поиске */
.quiz-form {
  position: relative; display: flex; align-items: center; gap: var(--s-3, 12px);
  height: 60px; padding: 0 var(--s-2, 8px) 0 var(--s-5, 24px);
  border-radius: var(--r-pill, 999px); background: var(--c-surface, #fff);
  box-shadow: 0 10px 34px -14px rgba(90, 50, 30, 0.28), 0 0 0 1px var(--c-line, rgba(42, 38, 35, 0.08));
  text-align: left;
}
.quiz-form:focus-within { box-shadow: 0 12px 38px -14px rgba(90, 50, 30, 0.35), 0 0 0 2px var(--c-focus, #1f5e49); }
.quiz-ico {
  flex: none; width: 18px; height: 18px; border: 2px solid var(--c-ink-3, #756a63); border-radius: 50%; position: relative; opacity: 0.8;
}
.quiz-ico::after {
  content: ""; position: absolute; width: 7px; height: 2px; background: var(--c-ink-3, #756a63);
  right: -6px; bottom: -3px; transform: rotate(45deg); border-radius: 2px;
}
.quiz-input {
  flex: 1; min-width: 0; height: 100%; margin-left: var(--s-1); border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--ty-body); color: var(--c-ink, #2a2623);
}
.quiz-ph {
  position: absolute; left: 62px; right: 70px; top: 50%; transform: translateY(-50%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  font-size: var(--ty-body); color: var(--c-ink-3, #756a63); transition: opacity 0.3s ease;
}
.quiz-ph.is-out { opacity: 0; }
.quiz-go {
  flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-ink, #2a2623); color: var(--c-surface, #fff); font-size: var(--ty-icon); line-height: var(--ty-icon-lh);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.quiz-go:hover { transform: translateX(2px); background: var(--c-ink-2, #5c534d); }
.quiz-go:focus-visible, .quiz-again:focus-visible, .quiz-btn:focus-visible, .quiz-more:focus-visible { outline: 3px solid var(--c-focus, #1f5e49); outline-offset: 3px; }
.quiz-rh:focus { outline: none; }
.quiz-form[hidden], .quiz-ph[hidden] { display: none; }

.quiz-hint { margin-top: var(--s-3, 12px); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3, #756a63); }

/* Результат */
.quiz-out { animation: quiz-in 0.25s ease both; text-align: left; }
.quiz-rh { text-align: center; } /* размер по роли h3 из base.css */
.quiz-lead { margin: var(--s-3, 12px) auto 0; max-width: 40rem; text-align: center; color: var(--c-ink-2, #5c534d); line-height: var(--ty-body-lh); }
.quiz-echo { margin-top: var(--s-5, 24px); padding: var(--s-5, 24px); border-radius: var(--r-24, 24px); background: rgba(207, 235, 221, 0.55); color: var(--c-mint-ink, #1f5e49); }
.quiz-quote { margin-top: var(--s-2, 8px); line-height: var(--ty-body-lh); overflow-wrap: anywhere; }
.quiz-echo .quiz-hint { color: inherit; }
/* Выдача: крупные пастельные карточки как на сайте (--card-N), номер справа, цена во вставке, «Подробнее» стеклянной кнопкой */
.quiz-blocks { --w: min(1040px, 100vw - 2 * var(--gutter, 16px)); display: grid; gap: var(--gap-grid); margin-top: var(--s-4, 16px); counter-reset: qb; }
.quiz-block {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2, 8px); min-height: 16rem; padding: var(--s-5);
  border-radius: var(--r-card); background: var(--bg, var(--card-2, #d3eee0)); color: var(--c-ink, #2a2623); counter-increment: qb;
}
.quiz-blocks > :nth-child(3n + 1) { --bg: var(--card-2, #d3eee0); }
.quiz-blocks > :nth-child(3n + 2) { --bg: var(--card-1, #ffdcc8); }
.quiz-blocks > :nth-child(3n + 3) { --bg: var(--card-5, #e6e0f2); }
.quiz-block::before { content: "Вариант"; position: absolute; top: var(--s-5); left: var(--s-5); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2, #5c534d); }
.quiz-block::after { content: counter(qb, decimal-leading-zero); position: absolute; top: var(--s-5); right: var(--s-5); font-size: var(--ty-small); line-height: var(--ty-small-lh); font-variant-numeric: tabular-nums; letter-spacing: var(--ty-eyebrow-ls); }
.quiz-bt { margin-top: var(--s-6); } /* размер по роли h4 из base.css */
.quiz-bp { font-size: var(--ty-body); line-height: var(--ty-body-lh); color: var(--c-ink-2, #5c534d); }
.quiz-price { margin-top: auto; padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.62); font-size: var(--ty-h4); font-weight: var(--ty-fw-med); line-height: var(--ty-h4-lh); }
.quiz-price::before { content: "Стоимость"; display: block; margin-bottom: var(--s-1); font-size: var(--ty-small); font-weight: var(--ty-fw-body); line-height: var(--ty-small-lh); color: var(--c-ink-3, #756a63); }
/* «Подробнее» как кнопка-стекло (та же рецептура, что у .btn--ghost на сайте) */
.quiz-more {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); align-self: flex-start; min-height: var(--btn-h-sm); margin-top: var(--s-2, 8px); padding: 0 var(--s-5);
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--r-pill, 999px); color: var(--c-ink, #2a2623); font-size: var(--ty-body); font-weight: var(--ty-fw-med); line-height: var(--ty-btn-lh); text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -12px rgba(120, 60, 40, 0.3), 0 2px 6px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.quiz-more::after { content: "→"; transition: transform 0.2s ease; }
.quiz-more:hover { transform: translateY(-1px); color: var(--c-ink, #2a2623); background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)); }
.quiz-more:hover::after { transform: translateX(3px); }
@media (prefers-reduced-transparency: reduce) { .quiz-more { background: #fffbf6; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .quiz-more, .quiz-more::after { transition: none; } .quiz-more:hover { transform: none; } }
.quiz-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; min-height: var(--btn-h); margin: var(--s-5, 24px) auto 0;
  border-radius: var(--r-pill, 999px); background: var(--c-accent, #c8432b); color: var(--c-accent-ink, #fff);
  box-shadow: var(--shadow-btn, none); font-size: var(--ty-btn); font-weight: var(--ty-btn-fw); line-height: var(--ty-btn-lh); text-decoration: none;
}
.quiz-btn:hover { background: var(--c-accent-hover, #ae3520); color: var(--c-accent-ink, #fff); }
.quiz-out > .quiz-hint { text-align: center; }
.quiz-tip { margin-top: var(--s-5, 24px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--c-line, rgba(42, 38, 35, 0.1)); color: var(--c-ink-2, #5c534d); line-height: var(--ty-body-lh); }
.quiz-again {
  display: block; min-height: var(--btn-h-sm); margin: var(--s-4, 16px) auto 0; padding: 0 var(--s-5, 24px);
  border: 1px solid var(--c-glass-border, rgba(190, 120, 90, 0.25)); border-radius: var(--r-pill, 999px);
  background: transparent; color: var(--c-ink-2, #5c534d); font: inherit; cursor: pointer;
}
.quiz-again:hover { background: var(--c-glass, rgba(255, 255, 255, 0.58)); }

.quiz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
  /* карточки шире текстового столбца: выходят из него симметрично, одна карточка не растягивается */
  .quiz-blocks { width: var(--w); margin-inline: calc((100% - var(--w)) / 2); grid-template-columns: repeat(auto-fit, minmax(260px, 330px)); justify-content: center; }
}
@media (max-width: 480px) {
  .quiz-form { height: 56px; padding-left: var(--s-4, 16px); }
  .quiz-ph { left: 50px; right: 62px; }
  .quiz-input { font-size: var(--ty-body); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-thread > *, .quiz-out { animation: none; }
  .quiz-ph, .quiz-go { transition: none; }
}

/* Подсказки: бледный текст под строкой, не кнопки. Место зарезервировано, чтобы не было CLS */
.quiz-hints {
  min-height: 3.6rem; margin-top: var(--s-4, 16px); padding-inline: var(--s-3, 12px);
  font-size: var(--ty-small); line-height: var(--ty-body-lh); color: var(--c-ink-3, #756a63); opacity: 0.8;
}
.quiz-hints > * { animation: quiz-fade 0.5s ease 0.5s both; }
.quiz-hint-b { white-space: nowrap; cursor: pointer; padding: var(--s-2) var(--s-1); border-radius: 4px; transition: opacity 0.2s ease; }
.quiz-hints:hover, .quiz-hints:focus-within { opacity: 1; }
.quiz-hint-b:hover, .quiz-hint-b:focus-visible { color: var(--c-ink-2, #5c534d); text-decoration: underline; text-underline-offset: 3px; }
.quiz-hint-b:focus-visible { outline: 2px solid var(--c-focus, #1f5e49); outline-offset: 1px; }
@keyframes quiz-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) { .quiz-hints { min-height: 5.4rem; } }
@media (prefers-reduced-motion: reduce) { .quiz-hints > * { animation: none; } }
.quiz-hints:empty { min-height: 0; margin-top: 0; } /* первый вопрос без примеров: пустой блок места не занимает */

/* Резерв под блок квиза до загрузки JS, чтобы страница ниже не ехала (CLS и якоря). Равен высоте блока после mount():
   club (сцена без оффера) 164 / 160 px, inline (оффер 90/105 + отступ 32 + сцена) 286 / 297, hero главной 238 / 262 (там min-height экрана). Замер 07/10/2026. */
@media (scripting: enabled) {
  .quiz:not(.quiz--js)::after { content: ""; display: block; height: 164px; }
  .quiz--inline:not(.quiz--js)::after { height: 286px; }
  .quiz--hero:not(.quiz--js)::after { height: 238px; }
}
@media (scripting: enabled) and (max-width: 480px) {
  .quiz:not(.quiz--js)::after { height: 160px; }
  .quiz--inline:not(.quiz--js)::after { height: 297px; }
  .quiz--hero:not(.quiz--js)::after { height: 262px; }
}