/* ============================================================
   Попап-квиз «Запросить SEO-диагностику» (SEO Studio, экран 1)

   Не экран, поэтому не в screens/ — как и brief.css с попапом заявки
   главной. Префикс .quiz-*

   Подложка, карточка, поля, чекбоксы, кнопка и благодарность
   повторяют попап главной (src/styles/brief.css) — там та же система
   из тех же макетов. Отличия только в размерах: карточка 900 против
   600, поле 60 против 57, чекбокс 17 против 20. Правишь общий вид
   попапа — смотри оба файла (см. CLAUDE.md, «Продублированные блоки»).

   Размеры сняты с макетов (архив form SEO-ДИАГНОСТИКА) при окне 1440:
   карточка 900×482 на первом шаге и 900×665 на втором, отступы 24,
   поля 60 и 84 высотой, кнопка 52, благодарность 384 шириной.
   ============================================================ */

/* Скрытие через атрибут hidden прописано явно: у [hidden]
   display: none приходит из стилей браузера, и любое собственное
   display в классе его перебивает. Без этого закрытый попап оставался
   бы невидимым, но перехватывал бы клики по всей странице, а кнопки
   шагов (у них display: inline-flex) висели бы обе сразу. Список —
   всё, что переключает quiz.js. */
.quiz[hidden],
.quiz-form[hidden],
.quiz-pills[hidden],
.quiz-step[hidden],
.quiz-next[hidden],
.quiz-submit[hidden],
.quiz-note[hidden],
.quiz-done[hidden],
.quiz-ref[hidden] { display: none; }

.quiz {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 32px);
  /* Второй шаг на невысоком окне должен прокручиваться внутри
     подложки, а не обрезаться. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Подложка. Страница за ней размывается и гаснет — в макете от неё
   остаются только контуры. backdrop-filter есть не везде, поэтому
   собственный тёмный фон обязателен и без него. */
.quiz-scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 26, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* Синеватая подсветка сверху: в макете её центр не в углу, а на
   трети ширины — замерено по пику синевы (x≈280 при ширине 900). */
.quiz-dialog {
  position: relative;
  width: min(900px, 100%);
  padding: clamp(16px, 1.67vw, 28px);
  border-radius: var(--r-card-lg);
  border: 0.5px solid var(--text-12);
  background:
    radial-gradient(55% 110% at 31% 0%, rgba(77, 107, 255, 0.22) 0%, transparent 62%),
    var(--panel);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease-out),
              width 0.35s var(--ease-out);
}

/* Класс ставит quiz.js в следующем кадре после снятия hidden — иначе
   переход не с чего начинать и окно появлялось бы рывком. */
.quiz.is-open .quiz-scrim { opacity: 1; }
.quiz.is-open .quiz-dialog { opacity: 1; transform: none; }

/* Благодарность в макете заметно уже формы: 384 против 900. */
.quiz.is-done .quiz-dialog {
  width: min(384px, 100%);
  padding: clamp(14px, 1.25vw, 22px);
}

.quiz-close {
  position: absolute;
  top: clamp(12px, 1.3vw, 22px);
  right: clamp(12px, 1.3vw, 22px);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-50);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.quiz-close:hover { color: var(--text); }
.quiz-close svg { width: 20px; height: 20px; }

/* ---------- Шапка ---------- */

/* Шапка одна на оба шага: в макетах она не меняется. */
.quiz-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Место под крестик: он лежит в правом верхнем углу карточки. */
  padding-right: 44px;
}

.quiz-pill {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-50);
  font-size: var(--fs-home-micro);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quiz-title {
  margin-top: clamp(7px, 0.76vw, 13px);
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quiz-lead {
  margin-top: clamp(7px, 0.76vw, 13px);
  max-width: 720px;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ---------- Выбор формата (вариант format) ---------- */

/* Плашка над полями: та же рамка и фон, что у поля ввода, — в макете
   они одного вида. */
.quiz-picker {
  margin-top: clamp(21px, 2.43vw, 42px);
  padding: clamp(8px, 0.7vw, 12px);
  border-radius: var(--r-btn);
  border: 0.5px solid var(--text-12);
  background: var(--surface-30);
  transition: border-color 0.2s var(--ease);
}
/* Формат не выбран — подсвечиваем так же, как незаполненное поле. */
.quiz-picker.is-bad { border-color: var(--danger); }

.quiz-picker-title {
  font-size: var(--fs-home-lead);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Порядок в макете идёт по колонкам: слева первые три формата,
   справа остальные. Число строк ставит quiz.js — оно зависит от того,
   сколько форматов в data/seo.js. */
.quiz-picker-grid {
  margin-top: clamp(6px, 0.7vw, 12px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: clamp(4px, 0.42vw, 7px) clamp(8px, 0.76vw, 13px);
}

.quiz-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  cursor: pointer;
}
/* Родной чекбокс убран из вида, но остаётся в потоке — иначе он
   выпадает из обхода табом и перестаёт ловить пробел. */
.quiz-pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Невыбранные форматы приглушены, выбранный — в полную яркость. */
.quiz-pick-name { color: var(--text-50); transition: color 0.2s var(--ease); }
.quiz-pick input:checked ~ .quiz-pick-name { color: var(--text); }

/* Бокс тот же, что у согласий (17): в макете шаг строк 23 — это он
   плюс зазор 6, строка текста мельче и высоту не задаёт. */

/* ---------- Поля ---------- */

.quiz-fields {
  margin-top: clamp(21px, 2.43vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.76vw, 13px);
}

.quiz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 0.76vw, 13px);
}

/* Под блоком выбора формата поля идут с обычным зазором строки, а не
   с большим отступом: в макете плашка выбора и первая строка полей
   стоят вплотную — крупный отступ уже взял на себя сам блок. */
.quiz-picker + .quiz-fields { margin-top: clamp(8px, 0.76vw, 13px); }

/* Поле — это label: подпись и ввод внутри одной рамки, как в макете,
   и клик по подписи ставит курсор в поле без атрибута for. */
.quiz-field {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.56vw, 10px);
  padding: clamp(8px, 0.7vw, 12px);
  border-radius: var(--r-btn);
  border: 0.5px solid var(--text-12);
  background: var(--surface-30);
  cursor: text;
  transition: border-color 0.2s var(--ease);
}
.quiz-field:focus-within { border-color: var(--accent-50); }
/* Поле с ошибкой подсвечивается только после попытки перейти дальше:
   браузерное :invalid срабатывает по ходу набора, это мешает. */
.quiz-field.is-bad { border-color: var(--danger); }

/* display обязателен: у строчного span высота строки берётся от
   родителя, своя не работает вовсе. */
.quiz-field-label {
  display: block;
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quiz-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.quiz-input::placeholder { color: var(--text-30); }
.quiz-input:focus { outline: none; }

/* 38px — высота большого поля в макете (вся плашка 84 при подписи 14
   и отступах 11). Дальше поле растёт под текст, это делает quiz.js. */
.quiz-textarea {
  min-height: 38px;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
}

/* ---------- Согласия ---------- */

.quiz-checks {
  margin-top: clamp(21px, 2.43vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 12px);
}

/* Межстрочное такое, что строка ровно по боксу чекбокса (17): в
   макете шаг строк 27 при зазоре 10. */
.quiz-check {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
}
/* Родной чекбокс убран из вида, но остаётся в потоке — иначе он
   выпадает из обхода табом и перестаёт ловить пробел. */
.quiz-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.quiz-check-box {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--text-30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.quiz-check-box svg { width: 11px; height: 11px; opacity: 0; transition: opacity 0.2s var(--ease); }
/* Бокс один и тот же у согласий и у выбора формата, поэтому оба
   родителя перечислены. */
.quiz-check input:checked + .quiz-check-box,
.quiz-pick input:checked + .quiz-check-box {
  background: var(--accent);
  border-color: var(--accent);
}
.quiz-check input:checked + .quiz-check-box svg,
.quiz-pick input:checked + .quiz-check-box svg { opacity: 1; }
.quiz-check input:focus-visible + .quiz-check-box,
.quiz-pick input:focus-visible + .quiz-check-box { outline: 2px solid var(--accent-50); outline-offset: 2px; }

.quiz-check a { color: var(--accent); }
.quiz-check a:hover { filter: brightness(1.25); }

/* ---------- Кнопки и сноска ---------- */

/* Своя высота и кегль, не .btn: в макете кнопка попапа крупнее
   обычных (52 против 43, кегль 18 против 15). */
.quiz-next,
.quiz-submit {
  margin-top: clamp(22px, 2.5vw, 44px);
  width: 100%;
  height: clamp(42px, 3.6vw, 62px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-btn);
  border: 0.5px solid transparent;
  background: var(--accent);
  font-family: inherit;
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), filter 0.2s var(--ease);
}
.quiz-next:hover,
.quiz-submit:not(:disabled):hover { filter: brightness(1.1); }

/* Отправка выключена, пока не отмечены оба согласия — так в макете, и
   это единственное, что её включает. Кнопка «Продолжить» на первом
   шаге активна всегда: пустые поля ловятся при нажатии. */
.quiz-submit:disabled {
  background: transparent;
  border-color: var(--text-20);
  color: var(--text-30);
  cursor: not-allowed;
}

/* Стрелка мельче кегля: в макете строка с ней шириной 124, при
   стрелке в 1em выходило 131. */
.quiz-next-arrow {
  display: inline-flex;
  width: 0.75em;
  height: 0.75em;
  flex-shrink: 0;
}
.quiz-next-arrow svg { width: 100%; height: 100%; }

.quiz-note {
  margin-top: clamp(7px, 0.7vw, 12px);
  text-align: center;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.quiz-note[data-state='error'] { color: var(--danger); }
.quiz-note[data-state='sending'] { color: var(--text-50); }

/* ---------- Благодарность ---------- */

.quiz-done {
  padding: clamp(24px, 2.5vw, 44px) clamp(4px, 0.42vw, 8px) clamp(8px, 0.8vw, 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  text-align: center;
}

.quiz-ref {
  padding: 4px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--text-20);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.quiz-ref b { font-weight: 400; color: var(--text); }

.quiz-done-title {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quiz-done-text {
  margin-top: clamp(6px, 0.7vw, 12px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 700px) {
  .quiz { align-items: flex-start; }
  .quiz-dialog { padding: 18px; }
  .quiz-grid { grid-template-columns: 1fr; }
  /* Список форматов в макете идёт в две колонки, три строки. Раньше
     он был столбцом — тогда макета на мобильный попап не было. */
  .quiz-picker-grid { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  /* На узком экране плейсхолдеры длинные, одной строки им мало. */
  .quiz-textarea { min-height: 4.2em; }
  /* 16px — порог, ниже которого Safari зумит страницу на фокусе. */
  .quiz-input { font-size: 16px; }

  /* Плашки формата в мобильных макетах стоят ПОД заголовком и лидом,
     а не над ними, и делят строку поровну. Тот же порядок, что у
     попапа заявки на главной (brief.css) — каркас у них общий,
     см. «Продублированные блоки» в CLAUDE.md. */
  .quiz-form { display: flex; flex-direction: column; }
  /* Место под крестик держал ряд плашек, пока стоял первым; теперь
     первым идёт заголовок — отступ переезжает на него. */
  .quiz-title { order: 1; padding-right: 44px; }
  .quiz-lead { order: 2; }
  .quiz-pills {
    order: 3;
    padding-right: 0;
    margin-top: 4px;
    flex-wrap: nowrap;
  }
  /* Растут от СВОЕЙ ширины, а не от нуля: при flex: 1 (то есть базис 0)
     все плашки становятся равными, и «Digital Research Sprint»
     обрезался многоточием. С базисом auto свободное место делится
     поровну поверх содержимого — в макете так и есть: две плашки
     диагностики выходят 169 и 154, три плашки формата 94, 72 и 149. */
  .quiz-pill {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
  }
  .quiz-step { order: 4; }
  .quiz-checks { order: 5; }
  .cform-trap { order: 6; }
  .quiz-next { order: 7; }
  .quiz-submit { order: 8; }
  .quiz-note { order: 9; }
}