/* ============================================================
   soboleznovaniya.ru — РЕДИЗАЙН 2026 · конструктор (опросник)
   Клиентский конструктор текста по шаблонам (без AI-бэкенда).
   Источник: dis/Опросник.dc.html
   ============================================================ */

.wsk{ width:100%; }

/* ---------- Интро (на отдельной странице конструктора) ---------- */
.wsk__intro{ padding:8px 0 6px; }
.wsk__intro-eyebrow{ font-size:14px; font-weight:var(--fw-semibold); color:var(--muted); margin-bottom:22px; }
.wsk__intro-title{
  margin:0; font-size:clamp(36px,5vw,72px); line-height:0.95;
  letter-spacing:-0.045em; font-weight:var(--fw-extrabold); max-width:16ch;
}
.wsk__intro-text{ margin:24px 0 0; max-width:50ch; font-size:18px; line-height:1.55; color:var(--graphite); }

/* ---------- Прогресс ---------- */
.wsk__progress{ display:flex; gap:8px; margin-top:24px; }
.wsk__bar{ flex:1; height:5px; border-radius:3px; background:var(--line-3); }
.wsk__bar.is-on{ background:var(--ink); }
.wsk__step-label{ margin-top:14px; font-size:14px; color:var(--muted); }

/* ---------- Рабочая область ---------- */
.wsk__grid{
  padding:36px 0 0;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:start;
}

/* Левая панель — вопрос */
.wsk__q{ min-height:520px; display:flex; flex-direction:column; }
.wsk__q-num{ font-size:13px; font-weight:var(--fw-semibold); color:var(--mute); margin-bottom:14px; }
.wsk__q-title{ margin:0 0 8px; font-size:clamp(26px,2.8vw,36px); line-height:1.05; letter-spacing:var(--track-tight); font-weight:var(--fw-extrabold); }
.wsk__q-hint{ margin:0 0 32px; font-size:16px; line-height:1.5; color:var(--muted-2); }

.wsk__options{ display:flex; flex-direction:column; gap:12px; }
.wsk__opt{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; text-align:left; font-family:inherit;
  padding:18px 22px; border-radius:var(--r-card-sm); cursor:pointer;
  background:var(--cloud); color:var(--ink); border:1px solid var(--cloud);
  transition:all .15s;
}
.wsk__opt:hover{ border-color:var(--border); }
.wsk__opt.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.wsk__opt-body{ display:flex; flex-direction:column; gap:3px; }
.wsk__opt-label{ font-size:17px; font-weight:var(--fw-semibold); }
.wsk__opt-sub{ font-size:14px; color:var(--muted); }
.wsk__opt.is-on .wsk__opt-sub{ color:rgba(255,255,255,.6); }
.wsk__opt-check{
  flex:none; width:26px; height:26px; border-radius:var(--r-xs);
  border:1.5px solid var(--border-3);
  display:flex; align-items:center; justify-content:center;
}
.wsk__opt.is-on .wsk__opt-check{ background:#fff; color:var(--ink); border-color:#fff; font-size:14px; font-weight:var(--fw-bold); }

.wsk__nav{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:36px; }
.wsk__btn{
  font-family:inherit; font-weight:var(--fw-semibold); font-size:16px;
  padding:15px 26px; border-radius:var(--r-chip); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.wsk__btn--back{ background:transparent; color:var(--ink); border:1px solid var(--line-3); }
.wsk__btn--back[disabled]{ color:#C9C9CC; border-color:var(--line); cursor:default; }
.wsk__btn--next{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.wsk__btn--next[disabled]{ background:#EDEDEF; color:var(--mute); border-color:#EDEDEF; cursor:default; }
.wsk__btn--next.is-hidden{ display:none; }

/* Правая панель — результат (тёмная) */
.wsk__result{
  background:var(--ink); color:#fff; border-radius:var(--r-card-lg);
  padding:44px 44px 40px; min-height:520px;
  display:flex; flex-direction:column;
}
.wsk__result-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.wsk__result-label{ font-size:13px; font-weight:var(--fw-semibold); color:var(--on-dark-faint); }
.wsk__result-count{ font-size:13px; color:var(--on-dark-faint); }
.wsk__preview{
  flex:1; background:var(--dark-panel); border-radius:18px;
  padding:30px; overflow:auto;
}
.wsk__text{ font-size:19px; line-height:1.7; white-space:pre-wrap; font-weight:var(--fw-regular); }
.wsk__empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#5C5D63; gap:14px;
}
.wsk__empty-brace{ font-size:64px; font-weight:var(--fw-extrabold); letter-spacing:var(--track-display); color:#34353A; }
.wsk__empty-text{ font-size:15px; max-width:26ch; line-height:1.5; }

.wsk__actions{ display:flex; gap:12px; margin-top:24px; }
.wsk__copy{
  flex:1; font-family:inherit; font-weight:var(--fw-semibold); font-size:16px;
  padding:16px 20px; border-radius:var(--r-chip); cursor:pointer; border:none;
  background:#fff; color:var(--ink);
}
.wsk__copy[disabled]{ background:var(--dark-panel-2); color:#6B6C72; cursor:default; }
.wsk__reset{
  flex:none; background:transparent; color:var(--on-dark-mute);
  border:1px solid var(--dark-border-2); font-family:inherit; font-weight:var(--fw-semibold);
  font-size:16px; padding:16px 20px; border-radius:var(--r-chip); cursor:pointer;
}

/* ---------- Адаптив ---------- */
@media (max-width:860px){
  .wsk__grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px){
  .wsk__intro-title{ font-size:36px; max-width:none; overflow-wrap:break-word; }
  .wsk__q{ min-height:0; }
  .wsk__result{ padding:24px 20px 22px; min-height:380px; }
}