/* Стили страницы демо-теста. Мобильный приоритет: крупные кнопки, один вопрос — один экран.
   Переменные берём из styles.css сайта (с fallback). */
.demo { padding: 28px 0 56px; }
.demo__intro, .demo__result { text-align: center; }

.demo__title { font-size: 1.6rem; line-height: 1.25; margin: 0 0 12px; }
.demo__lead { font-size: 1.02rem; line-height: 1.55; color: var(--muted, #5a6b80); margin: 0 auto 18px; max-width: 640px; }

.demo__facts { list-style: none; padding: 0; margin: 0 auto 22px; max-width: 520px; text-align: left; }
.demo__facts li { position: relative; padding: 6px 0 6px 30px; font-size: .98rem; }
.demo__facts li::before {
  content: "✓"; position: absolute; left: 4px; top: 6px;
  color: var(--brand, #0b4f9e); font-weight: 700;
}

.demo__start { font-size: 1.06rem; min-height: 54px; padding: 14px 34px; }
.demo__hint { font-size: .9rem; color: var(--muted, #5a6b80); margin: 16px auto 0; max-width: 520px; }

/* ── экран вопроса ── */
.demo__bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .92rem; color: var(--muted, #5a6b80); margin-bottom: 8px;
}
.demo__progress {
  height: 8px; border-radius: 6px; background: #e6ebf2; overflow: hidden; margin-bottom: 18px;
}
.demo__progress > span { display: block; height: 100%; width: 0; background: var(--brand, #0b4f9e); transition: width .25s ease; }

.demo__topic { font-size: .86rem; color: var(--muted, #5a6b80); margin: 0 0 8px; }
.demo__q { font-size: 1.22rem; line-height: 1.35; margin: 0 0 16px; }

.demo__pic img {
  display: block; width: 100%; max-width: 560px; height: auto;
  margin: 0 auto 18px; border-radius: 14px; border: 1px solid var(--line, #d8e0ea);
}

.demo__answers { display: grid; gap: 10px; margin-bottom: 16px; }
.demo__ans {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 16px; text-align: left;
  font: inherit; font-size: 1rem; line-height: 1.35; cursor: pointer;
  background: #fff; color: var(--ink, #0f1f33);
  border: 1px solid var(--line, #d8e0ea); border-radius: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.demo__ans:hover:not([disabled]) { border-color: var(--brand, #0b4f9e); }
.demo__ans[disabled] { cursor: default; }
.demo__letter {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #eef2f7; color: var(--brand, #0b4f9e); font-weight: 700; font-size: .95rem;
}
.demo__ans.is-right { background: #e7f5ec; border-color: #1f7a3d; color: #145c2c; }
.demo__ans.is-right .demo__letter { background: #d3ecdc; color: #145c2c; }
.demo__ans.is-wrong { background: #fdeceb; border-color: #b3261e; color: #8e1e18; }
.demo__ans.is-wrong .demo__letter { background: #f8d7d5; color: #8e1e18; }

.demo__exp {
  display: block; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
  font-size: .95rem; line-height: 1.5; text-align: left;
}
.demo__exp[hidden] { display: none; }
/* страховка: любой скрытый элемент в демо действительно скрыт,
   даже если у него в стилях задан display */
.demo [hidden] { display: none !important; }
.demo__exp > span { display: block; margin-top: 6px; }
.demo__exp.is-ok { background: #e7f5ec; border: 1px solid #b7e0c6; color: #145c2c; }
.demo__exp.is-no { background: #fffbe9; border: 1px solid #f0e0a8; color: #4a3b12; }

.demo__next { font-size: 1rem; min-height: 50px; padding: 12px 28px; }

/* ── итог ── */
.demo__topics { max-width: 520px; margin: 18px auto 26px; text-align: left; }
.demo__topics h3 { font-size: 1rem; margin: 0 0 8px; }
.demo__topics ul { list-style: none; padding: 0; margin: 0; }
.demo__topics li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line, #e6ebf2); font-size: .95rem;
}
.demo__topics b { white-space: nowrap; }

.demo__cta {
  max-width: 560px; margin: 0 auto; padding: 22px;
  background: var(--brand, #0b4f9e); color: #fff; border-radius: 18px;
}
.demo__cta h3 { margin: 0 0 8px; font-size: 1.1rem; }
.demo__cta p { margin: 0 0 16px; font-size: .96rem; line-height: 1.5; color: #eaf1fb; }
.demo__cta .btn--primary { background: #ffd54a; color: #0f1f33; font-weight: 700; }
.demo__again {
  display: block; width: 100%; margin-top: 12px; min-height: 46px;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6);
}

/* ── «тест не закончен» ── */
.demo__resume {
  max-width: 520px; margin: 18px auto 0; padding: 14px 16px;
  text-align: left; background: #eef3fb; border: 1px solid #cddcf1; border-radius: 14px;
  font-size: .95rem; line-height: 1.45;
}
.demo__resume p { margin: 0 0 10px; }
.demo__resume-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.demo__restart { background: #fff; border: 1px solid var(--line, #d8e0ea); color: var(--ink, #0f1f33); }

@media (max-width: 640px) {
  .demo { padding: 18px 0 40px; }
  .demo__title { font-size: 1.34rem; }
  .demo__q { font-size: 1.1rem; }
  .demo__ans { min-height: 60px; font-size: 1.02rem; }
  .demo__start { width: 100%; }
  .demo__next { width: 100%; }
}