/* ============================================================
   Анкета после вебинара (форк NPS) — mobile-first, блок вопросов на экран.
   ============================================================ */

/* Типографика анкеты: ровно два размера — базовый и заголовочный. */
:root{
  --fs-base:16px;
  --fs-display:clamp(24px,5.4vw,32px);
  /* Единая палитра анкеты: один красный (бордовый) и один зелёный (промоутеры). */
  --scale-red:var(--accent-maroon);
  --scale-green:var(--accent-olive);
}

body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.btn{font-size:var(--fs-base)}

/* ---------------- верхняя панель + прогресс ---------------- */
.s-top{
  position:sticky;top:0;z-index:20;background:rgba(244,242,239,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-hair);
}
.s-top-row{
  max-width:720px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px;
}
.s-top-row .spacer{margin-left:auto}
.s-lang{display:flex;gap:2px;background:var(--sand-200);border-radius:var(--radius-full);padding:3px}
.s-lang button{
  font-size:var(--fs-base);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--radius-full);color:var(--espresso-600);min-height:30px;
}
.s-lang button[aria-pressed="true"]{background:var(--wilco-white);color:var(--wilco-espresso);box-shadow:var(--shadow-xs)}

.s-bar{height:3px;background:var(--sand-300)}
.s-bar span{display:block;height:100%;background:var(--wilco-espresso);width:0;transition:width .3s ease}

/* ---------------- сцена ---------------- */
.stage{
  flex:1;width:100%;max-width:720px;margin:0 auto;padding:28px 18px 140px;
}
.screen{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------- карточка вопроса ---------------- */
.q-head{
  font-size:var(--fs-base);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso-500);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.q-head .num{
  font-family:var(--font-mono);font-size:var(--fs-base);background:var(--sand-200);color:var(--espresso-700);
  padding:3px 8px;border-radius:var(--radius-full);letter-spacing:.02em;
}

/* Закреплённый заголовок-вопрос блока: виден, пока клиент отвечает на критерии. */
.q-block{
  position:sticky;top:52px;z-index:10;
  background:var(--wilco-white);border:1px solid var(--border-hair);border-left:3px solid var(--wilco-espresso);
  border-radius:var(--radius-md);padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.q-block .bq{font-family:var(--font-display);font-size:var(--fs-display);line-height:1.28;font-weight:400}
.q-block .bh{font-size:var(--fs-base);color:var(--espresso-600);margin-top:8px}

.q-title{
  font-family:var(--font-display);font-weight:300;letter-spacing:-.01em;
  font-size:var(--fs-display);line-height:1.16;margin-bottom:12px;
}
.q-item-title{
  font-family:var(--font-sans);font-weight:600;letter-spacing:0;
  font-size:var(--fs-display);line-height:1.3;margin-bottom:18px;
}
.q-hint{font-size:var(--fs-base);color:var(--espresso-600);margin-bottom:22px;max-width:56ch}

/* ---------------- шкала 0..10 ---------------- */
.scale{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
@media (min-width:560px){.scale{grid-template-columns:repeat(11,1fr);gap:7px}}
.scale button{
  aspect-ratio:1/1;min-height:50px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-base);font-weight:500;
  background:var(--wilco-white);border:1.5px solid var(--border-default);border-radius:var(--radius-md);
  color:var(--espresso-700);transition:border-color .12s,background .12s,transform .08s;
}
.scale button:hover{border-color:var(--espresso-600)}
.scale button:active{transform:scale(.96)}
.scale button[aria-checked="true"]{
  background:var(--wilco-espresso);border-color:var(--wilco-espresso);color:var(--wilco-white);
}
/* Выбранная оценка красится по зонам: 0–6 — бордовый, 7–8 — коричневый
   (espresso по умолчанию), 9–10 — зелёный. */
.scale.picked-low button[aria-checked="true"]{background:var(--scale-red);border-color:var(--scale-red)}
.scale.picked-high button[aria-checked="true"]{background:var(--scale-green);border-color:var(--scale-green)}

/* Единственные цветовые акценты шкалы — обводка крайних точек:
   0 — бордовый, 10 — зелёный (зона промоутеров). Цифры нейтральные. */
.scale button[data-score="0"]{border-color:var(--scale-red)}
.scale button[data-score="10"]{border-color:var(--scale-green)}
.scale button[data-score="0"][aria-checked="true"]{
  background:var(--scale-red);border-color:var(--scale-red);color:var(--wilco-white);
}
.scale button[data-score="10"][aria-checked="true"]{
  background:var(--scale-green);border-color:var(--scale-green);color:var(--wilco-white);
}

.poles{
  display:flex;justify-content:space-between;gap:14px;margin-top:10px;
  font-size:var(--fs-base);color:var(--espresso-500);line-height:1.35;
}
.poles span{max-width:46%}
.poles span:last-child{text-align:right}


/* ---------------- список вопросов блока (компоновка block) ---------------- */
.qlist{display:flex;flex-direction:column;gap:14px}
.qcard{
  background:var(--wilco-white);border:1px solid var(--border-hair);border-radius:var(--radius-lg);
  padding:18px 18px 20px;box-shadow:var(--shadow-xs);transition:border-color .16s,box-shadow .16s;
}
.qcard .q-head{margin-bottom:10px}
.qcard .qtitle{
  font-weight:600;font-size:var(--fs-base);line-height:1.34;margin-bottom:14px;color:var(--wilco-espresso);
}
.qcard .q-hint{font-size:var(--fs-base);margin-bottom:14px}
/* Обязательный вопрос, оставленный пустым при попытке идти дальше. */
.qcard.missing{border-color:var(--accent-maroon);box-shadow:0 0 0 3px rgba(152,38,73,.10)}
/* В блоке шкала компактнее: иначе пять вопросов дают слишком длинный экран. */
.qcard .scale button{aspect-ratio:auto;min-height:44px;font-size:var(--fs-base)}
.qcard textarea.field{min-height:96px}
.qcard .yesno{margin-top:0}

/* ---------------- да/нет ---------------- */
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;max-width:420px}
.yesno button{padding:18px 12px;font-size:var(--fs-base);font-weight:600;border-radius:var(--radius-md);
  border:1.5px solid var(--border-default);background:var(--wilco-white)}
.yesno button[aria-checked="true"]{background:var(--wilco-espresso);border-color:var(--wilco-espresso);color:var(--wilco-white)}

/* ---------------- финал / служебные экраны ---------------- */
.final{padding:40px 0;text-align:left}
.final .mark{
  width:60px;height:40px;margin-bottom:18px;
  background:currentColor;
  -webkit-mask:url('../img/logomark.png') center/contain no-repeat;
  mask:url('../img/logomark.png') center/contain no-repeat;
}
.final h1{font-family:var(--font-display);font-weight:300;font-size:var(--fs-display);line-height:1.12;margin-bottom:14px}
.final p{color:var(--espresso-700);max-width:52ch}
.final-follow{margin-top:28px;font-size:14px;color:var(--espresso-600)}
.final-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}

/* ---------------- нижняя навигация ---------------- */
.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  background:rgba(244,242,239,.96);backdrop-filter:blur(8px);border-top:1px solid var(--border-hair);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
}
.nav-row{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:10px}
.nav-row .spacer{margin-left:auto}
.nav .btn{flex:0 0 auto}
.nav .btn-primary{min-width:132px}
.hint-line{
  max-width:720px;margin:0 auto 8px;font-size:var(--fs-base);color:var(--accent-maroon);
  display:none;align-items:center;gap:6px;
}
.hint-line.show{display:flex}
.save-state{font-size:var(--fs-base);color:var(--espresso-500);display:flex;align-items:center;gap:6px;min-height:18px}
.save-state.err{color:var(--accent-maroon)}

/* ---------------- шкала 1..5 ----------------
   Те же кнопки, что и 0..10 в NPS, только пять в ряд на любой ширине.
   Обводка крайних точек: 1 — бордовый, 5 — зелёный. */
.scale.scale-5{grid-template-columns:repeat(5,1fr)}
.scale button[data-edge="low"]{border-color:var(--scale-red)}
.scale button[data-edge="high"]{border-color:var(--scale-green)}
.scale button[data-edge="low"][aria-checked="true"]{background:var(--scale-red);border-color:var(--scale-red);color:var(--wilco-white)}
.scale button[data-edge="high"][aria-checked="true"]{background:var(--scale-green);border-color:var(--scale-green);color:var(--wilco-white)}

/* ---------------- мультивыбор (№5) ----------------
   Плитки в стиле кнопок «Да/Нет» NPS: белые, выбранная — эспрессо. */
.multi{display:flex;flex-direction:column;gap:8px}
.multi-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;min-height:50px;font-size:var(--fs-base);font-weight:500;line-height:1.3;
  background:var(--wilco-white);border:1.5px solid var(--border-default);border-radius:var(--radius-md);
  color:var(--espresso-700);transition:border-color .12s,background .12s;
}
.multi-opt:hover{border-color:var(--espresso-600)}
.multi-opt .box{
  width:20px;height:20px;flex-shrink:0;border-radius:5px;border:1.5px solid var(--espresso-300);
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
}
.multi-opt[aria-checked="true"],
.multi-opt[aria-checked="true"]:hover{background:var(--wilco-espresso);border-color:var(--wilco-espresso);color:var(--wilco-white)}
.multi-opt[aria-checked="true"] .box{border-color:var(--wilco-white)}
.multi-opt[aria-checked="true"] .box::before{content:'✓';font-weight:600}
.multi-other{margin-top:10px}

/* ---------------- CTA на финальном экране ---------------- */
.cta{
  margin-top:6px;background:var(--wilco-white);border:1px solid var(--border-hair);border-radius:var(--radius-lg);
  padding:18px 18px 20px;box-shadow:var(--shadow-xs);max-width:560px;
}
.cta p{margin:0 0 14px}
.cta-form{display:flex;gap:10px;flex-wrap:wrap}
.cta-form .field{flex:1 1 220px;min-width:0}
.cta-form .btn{flex:0 0 auto;min-width:132px}
.cta-err{margin-top:8px;font-size:var(--fs-base);color:var(--accent-maroon)}
.cta-done{font-weight:600;color:var(--accent-olive)}

/* ---------------- финал: вопрос о связи + подпись ---------------- */
.cta-q{font-weight:600;font-size:var(--fs-base);line-height:1.35;margin-bottom:14px;color:var(--wilco-espresso)}
.cta .yesno{margin-top:0}
.cta .cta-done{margin-top:14px}
.final-sign{margin-top:22px;font-family:var(--font-display);font-size:var(--fs-base);color:var(--espresso-700)}
.screen.no-anim{animation:none}