/* ============================================================
   ПУМА Биллинг — CSS квиза (v4)
   Геометрию вопросов (отступы/паддинги/размеры вариантов) задаёт Webflow.
   Этот файл: состояния (выбор/актив/дизейбл), точка варианта,
   и ПОЛНОСТЬЮ изолированный блок результата (свои шрифты/размеры,
   чтобы стили страницы его не ломали).

   Палитра: фон #222A26 · карточка #323E38 · светлый #D5E7DE · лайм #9AEE65
   текст #E4F1EB · наборный #D5E7DE · красный #E97563 · оранж #F7B430 · зелёный #4E9A31
   ============================================================ */

/* ---------- 1. Варианты ответа ----------
   Нейтральный вид и отступы — вёрстка Webflow. Только курсор/hover/выбор. */
[data-opt] {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, filter .15s ease;
  -webkit-user-select: none; user-select: none;
}
[data-opt]:hover { filter: brightness(1.12); }
[data-opt].is-selected {
  background: #4e9a31 !important;
  border-color: #9AEE65 !important;
}
[data-opt]:focus-visible {
  outline: 2px solid #9AEE65;
  outline-offset: 2px;
}
[data-opt]:hover .data-dot { background: #cfd8cf; }
[data-opt].is-selected .data-dot {
  background: #9AEE65 !important;
  box-shadow: 0 0 0 3px rgba(154, 238, 101, .25);
}

/* ---------- 2. Экраны и навигация ---------- */
[data-quiz="question"] { display: none !important; }
/* показываем активный экран, но НЕ навязываем display —
   пусть работает раскладка Webflow (flex + gap). */
[data-quiz="question"].is-active { display: flex !important; }

[data-quiz="result"] { display: none !important; }
[data-quiz="result"].is-active { display: block !important; }

/* разбитые блоки результата */
[data-quiz="result-1"] { display: none !important; }
[data-quiz="result-1"].is-active { display: block !important; }
[data-quiz="result-2"] { display: none !important; }
[data-quiz="result-2"].is-active { display: block !important; }

/* доп.секция (форма + кнопка) — скрыта до результата; flex, как в Webflow */
[data-quiz="result-extra"] { display: none !important; }
[data-quiz="result-extra"].is-active { display: flex !important; }

[data-quiz="progress-bar"] { transition: width .35s ease; }

/* ============================================================
   СЕГМЕНТИРОВАННЫЙ ПРОГРЕСС (упрощённый)
   Разметка: quiz-progress-wrap > 4× quiz-progress[data-quiz=progress-seg]
   Внутренний bar НЕ нужен. Красится сам сегмент по классу is-filled.
   ============================================================ */
[data-quiz="progress-seg"] {
  background: #506359 !important;   /* серо-зелёный жёлоб по умолчанию */
  border-radius: 4px;
  overflow: hidden;
  transition: background .3s ease;
}
[data-quiz="progress-seg"].is-filled {
  background: #9AEE65 !important;    /* зелёный при заполнении */
}
/* если внутри всё же остался quiz-progress-bar — прячем его,
   чтобы он не перебивал цвет сегмента */
[data-quiz="progress-seg"] .quiz-progress-bar,
[data-quiz="progress-seg"] > div {
  background: transparent !important;
  width: 100%;
  height: 100%;
}

[data-quiz="next"].is-disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

/* кнопка «Скачать PDF»: спрятана, пока результат не наполнен (is-done) */
[data-quiz="download"] { display: none !important; }
[data-quiz="result"].is-done [data-quiz="download"],
[data-quiz="result-1"].is-done [data-quiz="download"],
[data-quiz="result-2"].is-done [data-quiz="download"],
[data-quiz="result-extra"].is-active [data-quiz="download"] { display: inline-flex !important; }
[data-quiz="download"].is-loading { opacity: .6; pointer-events: none; }


/* ============================================================
   3. ЭКРАННЫЙ РЕЗУЛЬТАТ — дизайн под PDF-отчёт.
   Изолированная зона: типографика задаётся жёстко, чтобы стили
   страницы не протекали. Палитра из отчёта.
   ============================================================ */
[data-quiz^="result-body"] {
  color: #D5E7DE;
  font-family: "Gilroy", "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  letter-spacing: normal;
  width: 100%;
  max-width: none;
  margin: 0;
}
[data-quiz^="result-body"] * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }
[data-quiz^="result-body"] svg { display: block; width: 100%; height: 100%; }

/* ---------- карточка вердикта (без фоновой плашки, только акцент слева) ---------- */
[data-quiz^="result-body"] .pq-verdict {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: transparent;
  border-radius: 0;
  padding: 4px 0 4px 16px;
  margin-bottom: 22px;
  overflow: visible;
}
/* акцентная полоса — вертикальная «пилюля» слева */
[data-quiz^="result-body"] .pq-verdict::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: #4E9A31;
}
[data-quiz^="result-body"] .pq-verdict.pq-lvl-high::before { background: #E97563; }
[data-quiz^="result-body"] .pq-verdict.pq-lvl-mid::before  { background: #F7B430; }
[data-quiz^="result-body"] .pq-verdict.pq-lvl-low::before  { background: #9AEE65; }
[data-quiz^="result-body"] .pq-verdict__main { flex: 1 1 auto; }
[data-quiz^="result-body"] .pq-verdict__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;   /* как у названий групп вопросов */
  text-transform: uppercase;
  color: #E4F1EB;
  margin-bottom: 8px;
}
[data-quiz^="result-body"] .pq-verdict__title {
  font-size: 24px;
  font-weight: 700;
  color: #E4F1EB;
  line-height: 1.15;
  margin-bottom: 8px;
}
[data-quiz^="result-body"] .pq-lvl-high .pq-verdict__title { color: #E97563; }
[data-quiz^="result-body"] .pq-lvl-mid  .pq-verdict__title { color: #F7B430; }
[data-quiz^="result-body"] .pq-lvl-low  .pq-verdict__title { color: #9AEE65; }
[data-quiz^="result-body"] .pq-verdict__text { font-size: 15px; color: #D5E7DE; }
[data-quiz^="result-body"] .pq-verdict__scorebox { flex: 0 0 auto; text-align: right; }
/* пояснение под вердиктом (4.08) — мелкий серый текст */
[data-quiz^="result-body"] .pq-riskbar + .pq-verdict__note { margin-top: -14px; }
[data-quiz^="result-body"] .pq-verdict__note {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #A0B2A5;
}
[data-quiz^="result-body"] .pq-verdict__score {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: #E4F1EB;
}
[data-quiz^="result-body"] .pq-lvl-high .pq-verdict__score { color: #E97563; }
[data-quiz^="result-body"] .pq-lvl-mid  .pq-verdict__score { color: #F7B430; }
[data-quiz^="result-body"] .pq-lvl-low  .pq-verdict__score { color: #9AEE65; }
[data-quiz^="result-body"] .pq-verdict__scorecap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #A0B2A5;
  margin-top: 4px;
}

/* ---------- полоса риска ---------- */
[data-quiz^="result-body"] .pq-riskbar { position: relative; margin: 0 0 34px; padding-top: 20px; }
[data-quiz^="result-body"] .pq-riskbar__track {
  position: relative;
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: visible;
}
[data-quiz^="result-body"] .pq-riskbar__seg { height: 100%; }
[data-quiz^="result-body"] .pq-riskbar__seg--g { width: 29%;  background: #4E9A31; border-radius: 4px 0 0 4px; }
[data-quiz^="result-body"] .pq-riskbar__seg--a { width: 25%;  background: #F7B430; }
[data-quiz^="result-body"] .pq-riskbar__seg--r { width: 46%;  background: #E97563; border-radius: 0 4px 4px 0; }
[data-quiz^="result-body"] .pq-riskbar__marker {
  position: absolute;
  top: 50%;
  width: 15px; height: 15px;
  background: #222A26;
  border: 3px solid #9AEE65;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
[data-quiz^="result-body"] .pq-riskbar__val {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
}
[data-quiz^="result-body"] .pq-riskbar__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #A0B2A5;
}

/* ---------- секции ---------- */
[data-quiz^="result-body"] .pq-section { margin-bottom: 72px; }
[data-quiz^="result-body"] .pq-section:last-child { margin-bottom: 0; }
[data-quiz^="result-body"] .pq-section__title {
  font-size: 26px;
  font-weight: 700;
  color: #E4F1EB;
  margin-bottom: 8px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
[data-quiz^="result-body"] .pq-section__title + * { margin-top: 20px; }

/* ---------- ваши ответы (таблица: вопрос слева, ответ справа) ---------- */
[data-quiz^="result-body"] .pq-answers { display: block; }
[data-quiz^="result-body"] .pq-answers__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid #46544A;
}
[data-quiz^="result-body"] .pq-answers__row:first-child { border-top: 0; }
[data-quiz^="result-body"] .pq-answers__q {
  flex: 1 1 0;
  font-size: 14px;
  color: #A0B2A5;
  line-height: 1.4;
}
[data-quiz^="result-body"] .pq-answers__a {
  flex: 1 1 0;
  color: #E4F1EB;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- findings ---------- */
/* findings — плоский список: тег → заголовок → текст → линия-разделитель */
[data-quiz^="result-body"] .pq-find {
  padding: 0 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #46544A;   /* тонкая линия-разделитель (тёмная n) */
}
[data-quiz^="result-body"] .pq-find:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
[data-quiz^="result-body"] .pq-find__title {
  font-size: 16px;
  font-weight: 700;
  color: #E4F1EB;
  line-height: 1.25;
  margin-top: 10px;
}
[data-quiz^="result-body"] .pq-find__body {
  font-size: 14px;
  color: #D5E7DE;
  line-height: 1.6;
  margin-top: 8px;
}
[data-quiz^="result-body"] .pq-find__body + .pq-find__body { margin-top: 10px; }

/* тег severity — блочный, сверху над заголовком */
[data-quiz^="result-body"] .pq-tag {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  background: #222A26;
  white-space: nowrap;
}
[data-quiz^="result-body"] .pq-tag--high { color: #E97563; }
[data-quiz^="result-body"] .pq-tag--mid  { color: #F7B430; }
[data-quiz^="result-body"] .pq-tag--low  { color: #9AEE65; }

/* ссылка в тексте (no_tag): просто жирный, без плашки */
[data-quiz^="result-body"] .pq-ref {
  font-weight: 700;
  color: #E4F1EB;
  white-space: nowrap;
}

/* ---------- timeline ---------- */
[data-quiz^="result-body"] .pq-timeline { list-style: none; }
[data-quiz^="result-body"] .pq-timeline__row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #46544A;
}
[data-quiz^="result-body"] .pq-timeline__row:last-child { border-bottom: 0; }
[data-quiz^="result-body"] .pq-timeline__when {
  flex: 0 0 128px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .02em;
  color: #F7B430;
  padding-top: 2px;
}
[data-quiz^="result-body"] .pq-timeline__row.is-now .pq-timeline__when { color: #E97563; }
[data-quiz^="result-body"] .pq-timeline__body { flex: 1 1 auto; }
[data-quiz^="result-body"] .pq-timeline__what { color: #E4F1EB; font-size: 14px; margin-bottom: 3px; line-height: 1.45; }
[data-quiz^="result-body"] .pq-timeline__cons { color: #A0B2A5; font-size: 13px; line-height: 1.45; }

/* ---------- вопросы по группам (плоский список) ---------- */
[data-quiz^="result-body"] .pq-group {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #46544A;   /* тонкая линия-разделитель */
}
[data-quiz^="result-body"] .pq-group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
[data-quiz^="result-body"] .pq-group__who {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9AEE65;
  margin-bottom: 12px;
}
[data-quiz^="result-body"] .pq-group__list { list-style: none; counter-reset: q; }
[data-quiz^="result-body"] .pq-group__list li {
  position: relative;
  counter-increment: q;
  padding: 5px 0 5px 26px;
  color: #D5E7DE;
  font-size: 14px;
  line-height: 1.5;
}
[data-quiz^="result-body"] .pq-group__list li::before {
  content: counter(q) ".";
  position: absolute;
  left: 0; top: 5px;
  color: #9AEE65;
  font-weight: 700;
}

/* ---------- чек-лист (интерактивный) ---------- */
[data-quiz^="result-body"] .pq-checklist { list-style: none; }
[data-quiz^="result-body"] .pq-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #46544A;
  cursor: pointer;
}
[data-quiz^="result-body"] .pq-checklist li:last-child { border-bottom: 0; }
[data-quiz^="result-body"] .pq-checklist__box {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 2px;
  border: 1.5px solid #9AEE65;
  border-radius: 4px;
  background: transparent;
  transition: background .12s ease;
}
[data-quiz^="result-body"] .pq-checklist__box svg {
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .12s ease;
}
/* отмеченный пункт: зелёная заливка + видимая галочка */
[data-quiz^="result-body"] .pq-checklist li.is-checked .pq-checklist__box { background: #9AEE65; }
[data-quiz^="result-body"] .pq-checklist li.is-checked .pq-checklist__box svg { opacity: 1; }
[data-quiz^="result-body"] .pq-checklist__txt { flex: 1 1 auto; color: #D5E7DE; font-size: 14px; line-height: 1.5; }

/* ---------- мобильные ---------- */
@media (max-width: 600px) {
  [data-quiz^="result-body"] .pq-verdict { flex-direction: column; gap: 12px; }
  [data-quiz^="result-body"] .pq-verdict__scorebox { text-align: left; }
  [data-quiz^="result-body"] .pq-timeline__row { flex-direction: column; gap: 4px; }
  [data-quiz^="result-body"] .pq-timeline__when { flex-basis: auto; }
  [data-quiz^="result-body"] .pq-answers__row { flex-direction: column; gap: 3px; }
  [data-quiz^="result-body"] .pq-answers__q,
  [data-quiz^="result-body"] .pq-answers__a { flex: none; }
}