/* Nyquist survey — the instrument itself */
.survey{padding:clamp(80px,9vw,120px) 0 clamp(90px,10vw,140px);border-top:1px solid var(--hair)}
/* Разделитель ПОСЛЕ анкеты. Границы между секциями рисует `.sec + .sec` в
   layer-файле, но анкета — `.survey`, а не `.sec`, поэтому соседний по
   правилу селектор её не видит: пока «Your data» стояла ПЕРЕД анкетой,
   этого не требовалось, а после перестановки секция осталась бы без
   верхней линии и слилась бы с низом анкеты. */
.survey + .sec{border-top:1px solid var(--hair)}
.sv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.sv-top h2{font-size:clamp(28px,3.4vw,46px)}
.sv-top h2 em{font-style:italic;color:var(--or);font-weight:400}
.sv-top .meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);text-align:right;line-height:1.9}

.sv-card{margin-top:38px;border:1px solid var(--hair);border-radius:3px;background:var(--panel);overflow:hidden;box-shadow:0 30px 80px -40px rgba(11,14,20,.22)}
.sv-bar{height:2px;background:var(--hair);position:relative}
.sv-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--or);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.sv-head{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--hair);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);flex-wrap:wrap}
.sv-head .tp{color:var(--or)}
.sv-head .sp{flex:1 1 auto}
.sv-head .ct{color:var(--ink-3)}
.sv-head .sv-save{color:var(--ink-4);opacity:0;transition:opacity .3s}
.sv-head .sv-save.on{opacity:1}

.sv-body{padding:clamp(30px,4.4vw,54px) clamp(22px,4vw,54px) 30px;min-height:430px;display:flex;flex-direction:column}
.sv-step{display:none;flex-direction:column;flex:1 1 auto}
.sv-step.on{display:flex;animation:svin .42s cubic-bezier(.2,.7,.2,1)}
@keyframes svin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sv-q{font-size:clamp(25px,3vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.1;max-width:26ch}
.sv-hint{margin-top:14px;font-size:14.5px;color:var(--ink-3);max-width:62ch}
.sv-hint b{color:var(--ink-2);font-weight:500}
.sv-hint b[data-lim]{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:inline-block;margin-left:2px}
.sv-hint b[data-lim].full{color:var(--or)}
.sv-hint b[data-lim].flash{animation:svflash .5s cubic-bezier(.2,.7,.2,1)}
@keyframes svflash{0%{transform:none}25%{transform:translateX(-4px);color:var(--or)}60%{transform:translateX(3px)}100%{transform:none}}

.sv-note{margin-top:30px;border:1px solid var(--hair-2);border-left:none;border-right:none;padding:28px 0;max-width:70ch}
.sv-note p{font-size:17.5px;line-height:1.55;color:var(--ink-2);letter-spacing:-.01em}
.sv-note .nt{display:block;margin-top:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);line-height:1.7}

.sv-other{display:none;margin-top:10px;max-width:420px}
.sv-other.on{display:block;animation:svin .3s cubic-bezier(.2,.7,.2,1)}
.sv-other input{width:100%;background:#FFFFFF;border:1px solid var(--or);border-radius:2px;padding:12px 15px;color:var(--wh);font-family:var(--font-sans);font-size:15px;outline:none}
.sv-other input::placeholder{color:var(--ink-4)}

.sv-opts{display:grid;gap:8px;margin-top:30px}
.sv-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.sv-opts.two{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 18px;border:1px solid var(--hair);border-radius:2px;background:#FFFFFF;color:var(--wh);font-family:var(--font-sans);font-size:15.5px;letter-spacing:-.012em;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.opt:hover{border-color:var(--or);background:var(--or-tint)}
.opt .kx{flex:0 0 24px;height:24px;display:grid;place-items:center;border:1px solid var(--hair-2);border-radius:2px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);transition:all .15s}
.opt .tx{flex:1 1 auto}
.opt .nt{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.06em}
.opt[aria-pressed="true"]{border-color:var(--or);background:var(--or-tint)}
.opt[aria-pressed="true"] .kx{background:var(--or);border-color:var(--or);color:#FFFFFF}
.opt[aria-pressed="true"] .nt{color:var(--or)}

.sv-fields{display:grid;gap:14px;margin-top:30px;max-width:620px}
.sv-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.sv-fields.two{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.fld label .op{color:var(--ink-4);opacity:.7;text-transform:none;letter-spacing:.04em}
.fld input,.fld textarea{background:#FFFFFF;border:1px solid var(--hair);border-radius:2px;padding:14px 16px;color:var(--wh);font-family:var(--font-sans);font-size:15.5px;letter-spacing:-.01em;outline:none;transition:border-color .15s,background .15s;width:100%}
.fld textarea{min-height:104px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld input:focus,.fld textarea:focus{border-color:var(--or);background:var(--or-tint)}
.fld .cnt{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);align-self:flex-end}
.fld .err{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);display:none}
.fld.bad input{border-color:var(--or)}
.fld.bad .err{display:block}
.chk{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--hair);border-radius:2px;background:#FCFCFA;cursor:pointer;max-width:620px;margin-top:4px}
.chk:hover{border-color:var(--or)}
.chk input{appearance:none;flex:0 0 18px;height:18px;margin:2px 0 0;border:1px solid var(--hair-2);border-radius:2px;cursor:pointer;position:relative;background:transparent}
.chk input:checked{background:var(--or);border-color:var(--or)}
.chk input:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#FFFFFF}
.chk .cl{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.chk .cl b{color:var(--wh);font-weight:500;display:block}

.sv-foot{display:flex;align-items:center;gap:16px;padding:20px clamp(22px,4vw,54px) 26px;border-top:1px solid var(--hair);flex-wrap:wrap}
.sv-foot .sp{flex:1 1 auto}
.sv-foot .kbd{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.sv-foot .kbd kbd{border:1px solid var(--hair);border-radius:2px;padding:2px 6px;color:var(--ink-3);margin:0 2px;font-family:inherit}
@media (max-width:700px){.sv-foot .kbd{display:none}}

/* review + done */
.sv-review{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:26px}
.sv-review .rr{background:#FFFFFF;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:18px;padding:15px 18px;align-items:baseline}
.sv-review .rr .rk{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.sv-review .rr .rv{font-size:14.5px;color:var(--wh);line-height:1.5}
.sv-review .rr .rv.empty{color:var(--ink-4);font-family:var(--font-mono);font-size:12.5px}
.sv-review .rr .re{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);background:none;border:none;border-bottom:1px solid var(--hair);cursor:pointer;padding:0 0 2px}
.sv-review .rr .re:hover{color:var(--or);border-bottom-color:var(--or)}
@media (max-width:760px){.sv-review .rr{grid-template-columns:1fr auto}.sv-review .rr .rk{grid-column:1/-1}}

/* Две колонки: слева благодарность, справа — куда идти дальше. Ширина правой
   задана в ch по САМОЙ ДЛИННОЙ подписи, а не в пикселях: немецкий и арабский
   длиннее английского на треть, и фиксированные 380px рвали бы их на строки. */
.sv-done{display:none;gap:clamp(26px,3.4vw,54px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(300px,26rem);
  padding:clamp(40px,6vw,72px) clamp(22px,4vw,54px) clamp(50px,6vw,76px)}
.sv-done.on{display:grid;animation:svin .5s cubic-bezier(.2,.7,.2,1)}
.sv-done .dl{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
@media (max-width:900px){
  .sv-done{grid-template-columns:minmax(0,1fr)}
}
.sv-done .tick{width:44px;height:44px;border-radius:50%;background:var(--or);color:#FFFFFF;display:grid;place-items:center;font-size:20px}
.sv-done h3{font-size:clamp(27px,3.2vw,40px);letter-spacing:-.035em}
.sv-done p{font-size:16.5px;max-width:56ch;color:var(--ink-2)}
.sv-done .nx{display:grid;gap:10px;margin-top:8px}
.sv-done .nx .r{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.sv-done .nx .r b{color:var(--wh);font-weight:500}

/* Куда идти после анкеты. Разделители рисует САМА сетка: gap:1px поверх фона
   цвета волоска. Отсюда ни border-bottom, ни :last-child{border:0}, ни тени —
   один источник цвета линии и ноль частных случаев. Линии горизонтальные,
   поэтому на RTL переворачивать нечего. */
.sv-done .lks{display:grid;gap:1px;width:100%;
  background:var(--hair);border:1px solid var(--hair);border-radius:2px;overflow:hidden}
.sv-done .lkh{background:var(--panel-2);padding:9px 16px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.sv-done .lk{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  padding:13px 16px;background:var(--panel);color:var(--wh);transition:background .18s ease}
.sv-done .lk:hover{background:var(--or-tint);color:var(--wh)}
.sv-done .lk .m{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;color:var(--ink-4)}
.sv-done .lk b{display:block;font-weight:500;font-size:15.5px;letter-spacing:-.011em}
.sv-done .lk .d{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.sv-done .lk .ar{font-family:var(--font-mono);font-size:13px;color:var(--ink-4);transition:color .18s ease}
.sv-done .lk:hover .ar{color:var(--or)}
.sv-done .lk:hover .m{color:var(--or)}
/* Стрелка «наружу» указывает вовне ПОЛОСЫ ЧТЕНИЯ, а не вправо: на RTL это влево. */
[dir="rtl"] .sv-done .lk .ar{transform:scaleX(-1)}
@media (max-width:560px){
  .sv-done .lk{grid-template-columns:auto 1fr;gap:10px}
  .sv-done .lk .ar{display:none}
}
.sv-err{display:none;margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.sv-err.on{display:block}