/* ============================================================
   Doctormama - анкета-диагностика (/quiz)
   Подключается ПОСЛЕ style.css, использует те же токены.
   ============================================================ */

.quiz-body {
  min-height: 100vh;
  background: linear-gradient(165deg, var(--sky) 0%, var(--cream) 45%);
  display: flex;
  flex-direction: column;
}

/* Верхняя планка */
.quiz-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.1rem, 4vw, 2rem);
}
.quiz-top__back { font-weight: 700; color: var(--ink-soft); }
.quiz-top__back:hover { color: var(--leaf); }
.quiz-top__brand { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--ink); }

/* Контейнер шагов */
.quiz { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 1rem 3rem; flex: 1; }
.qstep { display: none; }
.qstep.is-active { display: block; animation: qfade .3s ease; }
@keyframes qfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Карточка */
.qcard {
  background: #fff; border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: var(--sh);
}
.qcard--intro { margin-top: .4rem; }
.qcard__sun { width: 88px; margin: 0 auto 1rem; animation: floaty 5s ease-in-out infinite; }

.qtitle { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 700; margin-bottom: .6rem; text-align: center; }
.qtitle--sm { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.qtitle--q { text-align: left; min-height: 3.2em; display: flex; align-items: center; }
.qlead { color: var(--ink-soft); text-align: center; margin: 0 0 1.4rem; }

/* Преимущества на интро */
.qbenefits { display: grid; gap: .7rem; margin-bottom: 1.6rem; }
.qbenefits li {
  background: var(--cream); border-radius: var(--r);
  padding: .8rem 1rem .8rem 2.4rem; position: relative; font-size: .95rem;
}
.qbenefits li::before {
  content: "✓"; position: absolute; left: .9rem; top: .8rem;
  color: var(--leaf); font-weight: 700;
}
.qbenefits strong { color: var(--leaf-deep); }

/* Форма интро */
.qform { display: grid; gap: .9rem; }
.qlabel { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--ink); margin-bottom: -.3rem; }
.qinput {
  font: inherit; width: 100%;
  padding: .85em 1.1em;
  border: 2px solid var(--cream-deep); border-radius: var(--r);
  background: #fff; color: var(--ink);
  transition: border-color .15s;
}
.qinput:focus { border-color: var(--sun); outline: none; }
.qinput--select { appearance: auto; }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.qconsent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--ink-soft); cursor: pointer; }
.qconsent input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--leaf); flex: none; }
.qconsent a { color: var(--leaf-deep); text-decoration: underline; }

.qform__go { width: 100%; margin-top: .3rem; }
.qdisclaimer { font-size: .8rem; color: var(--ink-soft); text-align: center; margin-top: 1rem; opacity: .85; }

.qerror {
  background: #fde8ec; color: #b23a52; border-radius: var(--r);
  padding: .7rem 1rem; font-weight: 600; font-size: .9rem; margin: 0;
}

/* Метка зоны */
.qzone-tag {
  display: inline-block; font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--leaf-deep); background: #EFF4DC;
  padding: .35em 1em; border-radius: var(--pill); margin-bottom: .9rem;
}
.qzone-tag--screen { color: #15576a; background: var(--sky); }

/* Скрининг по здоровью: вопросы открываются по одному (hidden управляет JS) */
.qscreen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.qscreen-head .qzone-tag { margin-bottom: 0; }
.qscreening { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.qscreening__item {
  background: var(--cream); border-radius: var(--r); padding: .9rem 1.1rem;
  animation: qfade .3s ease;
}
.qscreening__item[hidden] { display: none !important; }
.qscreening__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qscreening__note { margin-top: .7rem; resize: vertical; font-size: 14px; }
.qscreening__note[hidden] { display: none !important; }
.qscreening__text { margin: 0; font-weight: 600; font-size: .95rem; }
.qscreening__btns { display: flex; gap: .4rem; flex: none; }
.qmini {
  font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; font-size: .9rem;
  border: 2px solid var(--cream-deep); background: #fff; color: var(--ink-soft);
  border-radius: var(--pill); padding: .4em 1.1em; cursor: pointer; transition: .15s;
}
.qmini:hover { border-color: var(--sun-soft); }
.qmini.is-on { background: var(--leaf); border-color: var(--leaf); color: #fff; }

/* Прогресс */
.qprogress { display: flex; align-items: center; gap: 1rem; margin: .4rem 0 1rem; }
.qprogress__bar {
  flex: 1; height: 12px; border-radius: var(--pill);
  background: #fff; box-shadow: inset 0 1px 3px rgba(94,75,40,.15); overflow: hidden;
}
.qprogress__bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--leaf) 0%, #A9CB54 100%);
  border-radius: var(--pill); transition: width .3s ease;
}
.qprogress__label { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--ink-soft); font-size: .9rem; }

/* Ответы */
.qanswers { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.qanswer {
  font: inherit; font-weight: 700; text-align: left;
  background: var(--cream); color: var(--ink);
  border: 2px solid transparent; border-radius: var(--r);
  padding: 1rem 1.2rem; cursor: pointer; transition: .15s;
}
.qanswer:hover { border-color: var(--sun-soft); transform: translateY(-1px); }
.qanswer.is-on { background: #EFF4DC; border-color: var(--leaf); color: var(--leaf-deep); }

/* Навигация шага */
.qnav { display: flex; justify-content: space-between; gap: .8rem; }
.qnav--single { justify-content: flex-start; }

/* Результат: без белой карточки - дерево лежит прямо на фоне страницы */
.qcard--result { text-align: center; background: none; box-shadow: none; border-radius: 0;
  padding-left: 0; padding-right: 0; }
.qloading { padding: 2rem 0; }
.qloading__sun { width: 80px; margin: 0 auto 1rem; animation: qspin 4s linear infinite; }
@keyframes qspin { to { transform: rotate(360deg); } }

.qmap { display: grid; gap: .9rem; text-align: left; margin: 1.4rem 0; }
.qmap__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.qmap__zone { font-weight: 700; }
.qmap__status { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; font-size: .85rem; }
.qmap__bar {
  height: 14px; border-radius: var(--pill); background: var(--cream-deep);
  overflow: hidden;
}
.qmap__bar span { display: block; height: 100%; border-radius: var(--pill); transition: width .6s ease; }

.qmap__row--mature  .qmap__status { color: var(--leaf-deep); }
.qmap__row--mature  .qmap__bar span { background: var(--leaf); }
.qmap__row--forming .qmap__status { color: #c07b12; }
.qmap__row--forming .qmap__bar span { background: var(--sun); }
.qmap__row--needs   .qmap__status { color: #b23a52; }
.qmap__row--needs   .qmap__bar span { background: var(--berry); }

.qrisk {
  background: var(--sky); color: #15576a; border-radius: var(--r);
  padding: .8rem 1.1rem; font-size: .9rem; font-weight: 600; text-align: left;
}
.qresult-cta { margin-top: 1.4rem; }

/* Адаптив */
@media (max-width: 560px) {
  .qscreening__row { flex-direction: column; align-items: stretch; }
  .qscreening__btns { justify-content: stretch; }
  .qmini { flex: 1; }
  .qrow { grid-template-columns: 1fr; }
}

/* Картинка на интро анкеты */
.qhero {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  margin-bottom: 1.4rem;
  display: block;
}

/* ---------- Попап контактов (Phase B) ---------- */
.qhp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
body.qmodal-open { overflow: hidden; }

.qmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.qmodal[hidden] { display: none !important; }
.qmodal__overlay { position: absolute; inset: 0; background: rgba(54, 64, 43, .55); backdrop-filter: blur(3px); }
.qmodal__card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh);
  padding: 1.6rem 1.5rem 1.4rem; text-align: center;
  animation: qmodalIn .22s ease;
}
@keyframes qmodalIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.qmodal__close {
  position: absolute; top: .5rem; right: .7rem;
  width: 34px; height: 34px; border: none; background: none;
  font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 50%;
}
.qmodal__close:hover { background: var(--cream); color: var(--ink); }
.qmodal__sun { width: 60px; margin: .2rem auto .6rem; }
.qmodal__sun svg { width: 100%; height: auto; }
.qmodal__title { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--ink); font-size: 1.35rem; margin: 0 0 .5rem; }
.qmodal__lead { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; margin: 0 0 1.1rem; }

.qmodal__form { display: flex; flex-direction: column; gap: .7rem; text-align: left; }
.qmodal__go { margin-top: .3rem; }
.qmodal__note { font-size: .74rem; color: var(--ink-soft); text-align: center; margin: .5rem 0 0; opacity: .85; }
.qconsent--ads { font-size: .82rem; opacity: .95; }

/* Телефон: код страны + номер */
.qphone { display: grid; grid-template-columns: minmax(0, 1.15fr) 1.4fr; gap: .5rem; }
.qphone__code { min-width: 0; }
.qphone__num { min-width: 0; }

@media (max-width: 560px) {
  .qmodal__card { padding: 1.3rem 1.1rem 1.2rem; }
  .qphone { grid-template-columns: 1fr; }
}

/* ---------- Дерево навыков результата (версия 3, дизайн-инструмент 15.07) ---------- */
/* Иллюстративное SVG-дерево: разметка в modules/quiz/_result_tree_asset.svg
   (генерируется gen_tree_svg.py, руками не править), враппер - _result_tree.php.
   Цвета статусов - палитра докмама: leaf / sun / berry. */
.qtree4 { width: 100%; margin: .4rem auto 1rem; }
.qtree4 svg { width: 100%; height: auto; display: block; }

/* Узлы-яблоки с баллом (цвет тела по статусу зоны) */
.qtree4 .fruit { fill: #E98AA0; stroke: #fff; stroke-width: 4; filter: url(#dropf); }
.qtree4 .qnode[data-status="mature"]  .fruit { fill: #7A982B; }
.qtree4 .qnode[data-status="forming"] .fruit { fill: #F5A12C; }
.qtree4 .qnode[data-status="needs"]   .fruit { fill: #E98AA0; }
.qtree4 .fruit-stem { fill: none; stroke: #7a5a3a; stroke-width: 5; stroke-linecap: round; }
.qtree4 .fruit-leaf { fill: #7A982B; }
.qtree4 .badge { fill: #fff; font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700;
  font-size: 30px; text-anchor: middle; dominant-baseline: central; }

/* Связи-зависимости между зонами (что от чего тянется) + бегущие облачка.
   Белая подложка-halo выделяет линию на тёмной кроне. Ручейки .vein-root -
   тонкие импульсы от кончиков корней в сенсорику («корни питают сенсорику»). */
.qtree4 .vein-halo { fill: none; stroke: #ffffff; stroke-width: 13; stroke-linecap: round; opacity: .5; }
.qtree4 .vein { fill: none; stroke: #4c6b1f; stroke-width: 6.5; stroke-linecap: round; opacity: .9; }
.qtree4 .vein-root { fill: none; stroke: #4c6b1f; stroke-width: 3.5; stroke-linecap: round; opacity: .55; }

/* Пунктирные выноски к боковым подписям */
.qtree4 .lead { stroke: #36402B; stroke-width: 1.8; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .7; fill: none; }
.qtree4 .lead-dot { fill: #36402B; opacity: .7; }

/* Боковые подписи зон: крупное тёмное имя + чип-плашка статуса с белым текстом
   (тон чипа - затемнённый цвет яблока, белый текст читается на любом фоне).
   Текст и ширину чипа обновляет скрипт партиала (data-zscore / data-zbadge). */
.qtree4 .z-name { font-family: "Nunito", "Comfortaa", system-ui, sans-serif; font-weight: 800; font-size: 24px; fill: #2f3a24; }
.qtree4 .z-score { font-family: "Nunito", "Comfortaa", system-ui, sans-serif; font-weight: 700; font-size: 16.5px;
  fill: #fff; dominant-baseline: central; }
.qtree4 .z-chip { fill: #b9aa90; }
.qtree4 .z-badge.mature  .z-chip { fill: #5C7520; }
.qtree4 .z-badge.forming .z-chip { fill: #C9781F; }
.qtree4 .z-badge.needs   .z-chip { fill: #C25E75; }

/* Итоговый % и легенда внутри SVG */
.qtree4 .result-num { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700;
  font-size: 96px; fill: #5C7520; text-anchor: middle; }
.qtree4 .result-cap { font-family: "Nunito", "Comfortaa", system-ui, sans-serif; font-weight: 700;
  font-size: 23px; fill: #36402B; text-anchor: middle; }
.qtree4 .leg-label { font-family: "Nunito", "Comfortaa", system-ui, sans-serif; font-weight: 700;
  font-size: 20px; fill: #2f3a24; }

/* Появление при скролле: до класса .is-live (ставит IntersectionObserver
   партиала) все слои скрыты, дальше хореография ствол -> крона -> листья ->
   выноски -> узлы -> подписи -> футер (задержки листьев/узлов/подписей -
   инлайн в SVG-ассете). */
.qtree4 .tree-struct, .qtree4 .ground { transform-box: fill-box; transform-origin: 50% 100%; }
.qtree4 .roots { transform-box: fill-box; transform-origin: 50% 0; }
.qtree4 .qnode { transform-box: fill-box; transform-origin: center; }
.qtree4 .tree-struct, .qtree4 .crown-base, .qtree4 .leaf, .qtree4 .lead-g, .qtree4 .vein-g,
.qtree4 .roots, .qtree4 .qnode, .qtree4 .labels .lab, .qtree4 .footer-g .fade, .qtree4 .ground { opacity: 0; }

@keyframes qt4Grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes qt4Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qt4FadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes qt4Pop { 0% { opacity: 0; transform: scale(0); } 62% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
.qtree4.is-live .tree-struct { animation: qt4Grow 1s cubic-bezier(.2,.9,.2,1) .25s both, qt4Fade .4s ease .25s both; }
.qtree4.is-live .roots { animation: qt4Grow .9s cubic-bezier(.2,.9,.2,1) .5s both, qt4Fade .4s ease .5s both; }
.qtree4.is-live .crown-base { animation: qt4Fade .8s ease .45s both; }
.qtree4.is-live .leaf { animation: qt4Fade .5s ease both; }
.qtree4.is-live .lead-g { animation: qt4Fade .6s ease 1.5s both; }
.qtree4.is-live .vein-g { animation: qt4Fade .5s ease 1.35s both; }
/* Прорисовка связей снизу вверх каскадом (pathLength=1, задержки --vd из ассета):
   корни -> сенсорика -> контакт/слух -> совм.внимание/имитация -> игра -> речь */
@keyframes qt4Draw { to { stroke-dashoffset: 0; } }
.qtree4.is-live .vein-draw { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: qt4Draw 1s cubic-bezier(.3,.6,.3,1) both; animation-delay: var(--vd, 1.5s); }
.qtree4.is-live .qnode { animation: qt4Pop .55s cubic-bezier(.2,1.3,.4,1) both; }
.qtree4.is-live .labels .lab { animation: qt4FadeUp .55s ease both; }
.qtree4.is-live .footer-g .fade { animation: qt4FadeUp .7s ease 1.9s both; }
.qtree4.is-live .ground { animation: qt4Grow .8s cubic-bezier(.2,.9,.2,1) .55s both, qt4Fade .5s ease .55s both; }

/* Ветер - три слоя движения:
   1) вся крона «дышит» (два слоя листвы .foliage качаются в противофазе);
   2) каждый 4-й лист флаттерит индивидуально (.sway: поворот + смещение);
   3) травинки и цветы колышутся.
   Одиночный поворот листа на 20px почти незаметен - поэтому крона целиком. */
@keyframes qt4Crown { from { transform: rotate(-1.3deg) skewX(-1.6deg); }
  to { transform: rotate(1.4deg) skewX(1.7deg); } }
.qtree4 .foliage { transform-box: fill-box; transform-origin: 50% 88%;
  animation: qt4Crown 4.6s ease-in-out infinite alternate; }
.qtree4 .foliage ~ .foliage { animation-duration: 5.6s; animation-delay: -2.4s; }
@keyframes qt4Sway { from { transform: translate(-5px, 0) rotate(-8deg); }
  to { transform: translate(5px, -3px) rotate(9deg); } }
@keyframes qt4GrassSway { from { transform: skewX(-7deg); } to { transform: skewX(7deg); } }
.qtree4 .sway { transform-box: fill-box; transform-origin: 30% 10%;
  animation: qt4Sway 4s ease-in-out infinite alternate; }
.qtree4 .ground > path:nth-of-type(n+3) { transform-box: fill-box; transform-origin: 50% 100%;
  animation: qt4GrassSway 3.6s ease-in-out infinite alternate; }
.qtree4 .ground > path:nth-of-type(3n) { animation-duration: 4.4s; }
.qtree4 .ground > path:nth-of-type(3n+1) { animation-delay: -1.7s; }
.qtree4 .ground > g { transform-box: fill-box; transform-origin: 50% 100%;
  animation: qt4Sway 3.8s ease-in-out infinite alternate; }
.qtree4 .ground > g:nth-of-type(even) { animation-delay: -1.9s; animation-duration: 4.6s; }

/* На телефонах дерево статично. 576 листьев с бесконечными CSS-анимациями
   плюс плывущие облачка загружали процессор так, что интерфейс "думал"
   (жалоба Елены и Юлии 27.07.2026). На десктопе анимации остаются. */
@media (max-width: 860px) {
  .qtree4 .foliage,
  .qtree4 .foliage ~ .foliage,
  .qtree4 .sway,
  .qtree4 .ground > path,
  .qtree4 .ground > g { animation: none !important; }
  .qtree4 .pulse { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .qtree4 .tree-struct, .qtree4 .crown-base, .qtree4 .leaf, .qtree4 .lead-g, .qtree4 .vein-g,
  .qtree4 .roots, .qtree4 .qnode, .qtree4 .labels .lab, .qtree4 .footer-g .fade, .qtree4 .ground,
  .qtree4 .sway, .qtree4 .foliage, .qtree4 .ground > path, .qtree4 .ground > g {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .qtree4 .pulse { display: none; }
  .qtree4 .vein-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

.qresult-actions { display: flex; justify-content: center; margin: .2rem 0 1rem; }

/* Попап «Сохранить на телефон» - переиспользует .qmodal */
.qmodal__card--save { max-width: 420px; text-align: left; }
.qmodal__card--save .qmodal__title,
.qmodal__card--save .qmodal__lead { text-align: center; }
.qsave-os__h { font-family: "Comfortaa", "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--leaf-deep); margin: .4rem 0 .5rem; }
.qsave-steps { margin: 0; padding-left: 1.2rem; color: var(--ink); }
.qsave-steps li { margin-bottom: .45rem; line-height: 1.45; }


/* Итог повторного замера (возврат в кабинет) */
.qresult__saved {
    margin: 10px 0 0; font-size: .9rem; font-weight: 600; color: #5C7520;
}