/* ============================================================
   lp/vibe/apply.css — анкета флагмана Vibe Marketing.
   Грузится ПОСЛЕ vibe.css и живет на его токенах и типографике:
   человек приходит сюда с лендинга и не должен заметить стыка.
   ============================================================ */

/* колонка на всю высоту, чтобы на коротком шаге подвал стоял внизу, а не посреди экрана */
body.ap{background:var(--surface); min-height:100vh; display:flex; flex-direction:column}
body.ap .ap-stage{flex:1 0 auto}
body.ap .ap-foot{flex:0 0 auto}

/* ── шапка: назад + прогресс ───────────────────────── */
.ap-top{position:sticky; top:0; z-index:40; background:rgba(247,249,252,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.ap-top .in{display:flex; align-items:center; gap:18px; padding:14px 0; max-width:760px; margin:0 auto; padding-inline:var(--gut)}
.ap-logo{display:inline-flex; align-items:center; min-height:44px; gap:9px; font-weight:800; letter-spacing:-.02em; font-size:15px; text-decoration:none; flex:0 0 auto}
.ap-logo .dot{width:9px; height:9px; border-radius:50%; background:var(--accent)}
.ap-back{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:10px 12px; margin-left:-12px; background:none; border:0; color:var(--muted); font-family:var(--f); font-size:15px; cursor:pointer; border-radius:6px; transition:color .18s ease}
.ap-back:hover{color:var(--primary)}
.ap-back[hidden]{display:none}
.ap-prog{flex:1 1 auto; height:6px; background:var(--border); border-radius:99px; overflow:hidden}
.ap-prog i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .3s ease}
.ap-count{flex:0 0 auto; font-family:var(--fm); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

/* ── сцена ─────────────────────────────────────────── */
.ap-stage{max-width:760px; margin:0 auto; padding:56px var(--gut) 96px}
/* .q это <section>, а vibe.css дает всем секциям padding:96px 0 — здесь он лишний */
.q{display:none; padding:0}
.q.on{display:block; animation:qin .28s ease-out both}
@keyframes qin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.q.on{animation:none}}

.q .kicker{margin-bottom:16px}
.q h2{font-size:34px; margin-bottom:14px}
.q__sub{color:var(--text-2); font-size:17px; line-height:1.55; margin-bottom:30px}
.q__statement{font-size:19px; line-height:1.6; color:var(--text); margin-bottom:34px; text-wrap:pretty}

/* ── карточки вариантов ────────────────────────────── */
.opts{display:grid; grid-template-columns:1fr; gap:12px}
.opt{display:flex; align-items:flex-start; gap:14px; width:100%; min-height:44px; padding:18px 22px; text-align:left; font-family:var(--f); font-size:17px; line-height:1.4; color:var(--text); background:var(--bg); border:2px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .16s ease}
.opt:hover{border-color:var(--primary); transform:translateY(-1px)}
.opt.sel{border-color:var(--primary); background:var(--surface-blue)}
.chk{flex:0 0 auto; width:22px; height:22px; margin-top:1px; border:2px solid var(--border); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px; line-height:1}
.opt.sel .chk{background:var(--primary); border-color:var(--primary)}
.opt.sel .chk::before{content:"\2713"}

/* ── поля ──────────────────────────────────────────── */
.fld{margin-bottom:18px}
.fld label{display:block; margin-bottom:8px; font-size:14px; font-weight:600; color:var(--text-2)}
.fld input, .fld textarea{width:100%; min-height:44px; padding:15px 18px; font-family:var(--f); font-size:17px; color:var(--text); background:var(--bg); border:2px solid var(--border); border-radius:8px; outline:none; transition:border-color .16s ease}
.fld textarea{min-height:140px; resize:vertical; line-height:1.6}
.fld input:focus, .fld textarea:focus{border-color:var(--primary)}
.fld input::placeholder, .fld textarea::placeholder{color:var(--muted); opacity:.75}
.tg{display:flex; align-items:stretch}
.tg span{display:inline-flex; align-items:center; padding-inline:16px; background:var(--surface); border:2px solid var(--border); border-right:0; border-radius:8px 0 0 8px; color:var(--muted); font-size:17px}
.tg input{border-radius:0 8px 8px 0}
.hint{margin-top:8px; font-size:14px; color:var(--muted)}

/* согласие на обработку ПД: активное действие, а не ссылка в подвале (152-ФЗ) */
.agree{display:flex; align-items:flex-start; gap:12px; margin-top:6px; padding:10px 0; min-height:44px; cursor:pointer; font-size:15px; line-height:1.5; color:var(--text-2)}
.agree input{flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; accent-color:var(--primary); cursor:pointer}
.agree a{color:var(--primary); text-decoration:underline; text-underline-offset:3px}

.err{display:none; margin-top:18px; padding:14px 18px; background:var(--bg); border-left:4px solid var(--accent); border-radius:8px; font-size:15px; color:var(--text)}
.err.on{display:block}

.nav{margin-top:34px; display:flex}
.nav .btn{margin-left:auto}

/* ── финал ─────────────────────────────────────────── */
.done{text-align:center; padding-top:40px}
.done h1{font-size:40px; margin-bottom:18px}
.done .lead{max-width:46ch; margin:0 auto 26px; font-size:19px; line-height:1.6; color:var(--text-2)}
.done .meta{font-size:15px; color:var(--muted)}

/* ── подвал ────────────────────────────────────────── */
.ap-foot{border-top:1px solid var(--border); padding:34px 0 44px}
.ap-foot .in{max-width:760px; margin:0 auto; padding-inline:var(--gut); display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between; font-size:13px; color:var(--muted); line-height:1.7}
/* тап-таргет 44px на ссылках подвала (AGENTS.md §6) */
.ap-foot a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.ap-foot a:hover{color:var(--primary)}
.ap-foot nav{display:flex; flex-direction:column}

/* ── десктоп ───────────────────────────────────────── */
@media (min-width:769px){
  .q h2{font-size:40px}
  .opts--2{grid-template-columns:1fr 1fr}
  .opts--2 .opt--wide{grid-column:1 / -1}
}
@media (max-width:768px){
  :root{--gut:20px}
  .ap-stage{padding:34px var(--gut) 72px}
  .q h2{font-size:27px}
  .done h1{font-size:31px}
  .nav .btn{width:100%; margin-left:0}
}