/* Питальник «Мій шлях». Доповнює legal.css, не замінює його:
   змінні (--navy, --wrap і решта) беруться звідти. */

.quiz { margin:0 0 3.5rem; }
.quiz-box {
  border:1px solid var(--border); border-radius:18px; background:var(--white);
  box-shadow:0 18px 40px -28px rgba(26,39,68,.45); padding:2.25rem 2rem;
}

/* ── Крок питання ─────────────────────────────────────────────────────── */
.quiz-meta { display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; }
.quiz-n {
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-light); padding:.3rem .65rem; border-radius:20px;
}
.quiz-left { font-size:.8rem; color:var(--grey); }
.quiz-q { font-size:1.45rem; line-height:1.3; letter-spacing:-.02em; }
.quiz-hint { color:var(--grey); font-size:.92rem; margin-top:.6rem; }
.quiz-opts { display:grid; gap:.6rem; margin-top:1.5rem; }
.quiz-opt {
  text-align:left; font:inherit; font-size:1rem; color:var(--navy); cursor:pointer;
  background:var(--light); border:1px solid var(--border); border-radius:12px;
  padding:.95rem 1.1rem; transition:border-color .15s, background .15s, transform .06s;
}
.quiz-opt:hover { border-color:var(--blue); background:var(--blue-light); }
.quiz-opt:active { transform:translateY(1px); }
.quiz-back {
  margin-top:1.4rem; background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:.88rem; color:var(--grey);
}
.quiz-back:hover { color:var(--navy); }

/* ── Результат ────────────────────────────────────────────────────────── */
.res-head h3 { font-size:1.6rem; letter-spacing:-.02em; }
.res-lead { color:var(--grey); font-size:.95rem; margin-top:.5rem; }
.ans-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.35rem 0 1.75rem; }
.ans-chip {
  font:inherit; font-size:.8rem; cursor:pointer; color:var(--navy);
  background:var(--light); border:1px solid var(--border); border-radius:20px;
  padding:.32rem .8rem;
}
.ans-chip:hover { border-color:var(--blue); color:var(--blue); }
.ans-chip.reset { color:var(--grey); border-style:dashed; }

.pgrid { display:grid; gap:1rem; }
.pcard {
  border:1px solid var(--border); border-radius:14px; padding:1.4rem 1.5rem;
  background:var(--white);
}
.pcard.best { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
.pcard.check { background:#fffdf7; }
.pcard-head { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-bottom:.7rem; }
.pbadge {
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white); background:var(--blue); padding:.25rem .6rem; border-radius:20px;
}
.pbadge.warn { background:#b45309; }
.pbadge.dl { background:var(--red); }
.pterm { margin-left:auto; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.pcard h4 { font-size:1.12rem; letter-spacing:-.01em; }
.pdesc { color:var(--grey); font-size:.93rem; margin-top:.4rem; }
/* Застереження шляху: стосується не всіх, хто його бачить, тому окремим
   рядком під описом, а не в бейджі заголовка. */
.pwarn {
  color:var(--navy2); font-size:.88rem; margin-top:.55rem;
  background:#fff8e6; border-left:3px solid #e0a800;
  padding:.5rem .7rem; border-radius:0 8px 8px 0;
}
.chain { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:1rem 0; }
.chain-x {
  font-size:.76rem; font-weight:600; color:var(--navy2);
  background:var(--light); border:1px solid var(--border);
  padding:.28rem .6rem; border-radius:8px;
}
.chain-arr { color:var(--grey); font-style:normal; font-size:.8rem; }
.prow { font-size:.92rem; margin-top:.55rem; }
.prow b { font-weight:700; }
.prow.stop { color:#8a4b00; }
.plink {
  display:inline-block; margin-top:1rem; font-size:.88rem; font-weight:700;
  color:var(--blue); text-decoration:none;
}
.plink:hover { text-decoration:underline; }

/* Кнопка в бот у картці шляху. Два вигляди, бо однаковий призів готуватись
   на шляху в три місяці і на шляху в десять років працює по-різному:
   близько — заповнена кнопка, далеко — контурна, щоб не тиснути. */
.pcta {
  display:block; margin-top:.9rem; padding:.62rem 1rem; border-radius:10px;
  font-size:.88rem; font-weight:700; text-align:center; text-decoration:none;
  background:var(--green,#16a34a); color:#fff; border:1px solid transparent;
  transition:background .2s, border-color .2s, color .2s;
}
.pcta:hover { background:#15803d; }
.pcta.soft {
  background:transparent; color:var(--navy2); border-color:var(--border);
  font-weight:600;
}
.pcta.soft:hover { background:var(--light); border-color:var(--navy2); }

.closed { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.closed h4 { font-size:.95rem; color:var(--grey); font-weight:700; }
.closed ul { list-style:none; margin-top:.7rem; display:grid; gap:.45rem; }
.closed li { font-size:.88rem; color:var(--grey); }
.closed li b { color:var(--navy2); font-weight:700; }

/* причина, яку коротким рядком не пояснити (напр. втрата за законом 1951) */
.why-long {
  margin-top:1.1rem; padding:1rem 1.15rem;
  background:var(--bg2, #f6f8fb); border-left:3px solid var(--blue);
  border-radius:0 6px 6px 0;
  font-size:.9rem; line-height:1.6; color:var(--navy2);
}
/* Вихід із відмови. Навмисно не зелена кнопка, як у бота: це не заклик до дії,
   а продовження читання, і виглядати воно має як посилання, а не як продаж. */
.why-more {
  display:inline-block; margin-top:.7rem;
  font-size:.88rem; font-weight:700; text-decoration:none;
  color:var(--blue); border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.why-more:hover { border-bottom-color:var(--blue); }

/* Вихід із застереження. Виглядає як посилання всередині жовтої плашки, а не
   як кнопка: людина ще в процесі читання шляху, а не приймає рішення. */
.warn-more {
  display:inline-block; margin-top:.45rem;
  font-size:.86rem; font-weight:700; text-decoration:none;
  color:var(--blue); border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.warn-more:hover { border-bottom-color:var(--blue); }

/* ── Спільний блок обмежень ───────────────────────────────────────────── */
.blockers { margin:0 0 3.5rem; }
.blockers h2 { font-size:1.3rem; letter-spacing:-.02em; }
.blockers > p { color:var(--grey); margin-top:.5rem; font-size:.95rem; }
.bl-grid { display:grid; grid-template-columns:1fr; gap:1.1rem 2rem; margin-top:1.4rem; }
/* Рівно дві колонки, а не auto-fit: чотири пункти при трьох колонках дають
   сирітський четвертий під першим, і блок читається як помилка верстки. */
@media (min-width:720px) { .bl-grid { grid-template-columns:1fr 1fr; } }
.bl-item { border-left:3px solid var(--red); padding:.15rem 0 .15rem 1rem; }
.bl-item strong { display:block; font-size:.95rem; }
.bl-item span { display:block; color:var(--grey); font-size:.88rem; margin-top:.25rem; }

/* ── Повна карта (працює без JS) ──────────────────────────────────────── */
.allmap { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1rem; margin-top:1.5rem; }
.allmap a {
  display:block; text-decoration:none; color:inherit; border:1px solid var(--border);
  border-radius:12px; padding:1.1rem 1.25rem; transition:border-color .15s, transform .06s;
}
.allmap a:hover { border-color:var(--blue); }
.allmap strong { display:block; font-size:1rem; }
.allmap span { display:block; color:var(--grey); font-size:.87rem; margin-top:.3rem; }

@media (max-width:640px) {
  .quiz-box { padding:1.5rem 1.15rem; }
  .quiz-q { font-size:1.25rem; }
  .pterm { margin-left:0; width:100%; }
}