/* =========================================================
   Анкета участника обучения — стили поверх styles.css сайта
   Fiery Ocean brand · mobile-first
   ========================================================= */

.anketa-page{min-height:100dvh; display:flex; flex-direction:column}
.anketa-page main{flex:1}

.hdr-link{font-size:14.5px; font-weight:600; color:var(--text-2); padding:9px 14px; border-radius:var(--r-pill); transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease)}
.hdr-link:hover{color:var(--text); background:var(--surface-2)}

.ank{position:relative; overflow:hidden; padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px)}
.ank-bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.ank-bg .blob-1{top:-10%; right:-14%; width:min(70vw,620px)}
.ank-bg .blob-2{bottom:-20%; left:-16%; width:min(60vw,540px)}
.ank-wrap{position:relative; z-index:1; max-width:860px}

/* ---------- Intro ---------- */
.ank-intro{margin-bottom:var(--space-4)}
.ank-intro h1{font-size:clamp(30px,4.4vw,50px); line-height:1.08; letter-spacing:-.035em; margin-bottom:var(--space-2); text-wrap:balance}
.ank-intro h1 em{display:block}
.ank-intro .lead{margin-bottom:var(--space-3)}
.ank-intro .lead strong{color:var(--accent-text); font-weight:800}
.ank-benefits{display:grid; gap:8px}
.ank-benefits li{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text-2)}
.ank-b-ico{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center}
.ank-b-ico svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Progress ---------- */
.ank-progress{position:sticky; top:76px; z-index:20; margin-bottom:var(--space-3);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:12px 0 10px; border-bottom:1px solid var(--border)}
.ank-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px}
.ank-steps li{display:flex; align-items:center; gap:8px; min-width:0; color:var(--text-3); font-size:13px; font-weight:600; cursor:default}
.ank-steps li .n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12.5px; border:1.5px solid var(--border); background:var(--surface); color:var(--text-3);
  transition:background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), transform var(--t-fast) var(--ease)}
.ank-steps li .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ank-steps li.is-current{color:var(--text)}
.ank-steps li.is-current .n{border-color:var(--accent); background:var(--accent); color:var(--on-accent); transform:scale(1.06); box-shadow:0 0 0 4px var(--glow-1)}
.ank-steps li.is-done{color:var(--text-2); cursor:pointer}
.ank-steps li.is-done .n{border-color:var(--accent); color:var(--accent-text); background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.ank-steps li.is-done:hover .n{background:var(--accent); color:var(--on-accent)}
.ank-bar{height:6px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border); overflow:hidden}
.ank-bar span{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent), var(--steel)); transition:width var(--t-slow) var(--ease)}
.ank-bar-label{margin-top:6px; font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums}

/* ---------- Form card ---------- */
.ank-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  padding:clamp(20px,4vw,40px)}
.ank-step{border:0; padding:0; margin:0; min-width:0; display:none}
.ank-step.is-active{display:grid; gap:var(--space-3); animation:stepIn var(--t-mid) var(--ease)}
@keyframes stepIn{from{opacity:0; transform:translateX(12px)} to{opacity:1; transform:none}}
.ank-step.is-active.back{animation-name:stepBack}
@keyframes stepBack{from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.ank-step.is-active{animation:none}}

legend{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; padding:0; margin-bottom:6px; width:100%}
.lg-n{grid-row:1/3; font-family:var(--font-mono); font-size:13px; color:var(--accent-text); letter-spacing:.06em; align-self:start; padding-top:8px}
.lg-t{font-family:var(--font-head); font-weight:700; font-size:clamp(21px,2.6vw,27px); letter-spacing:-.025em; color:var(--text); line-height:1.15}
.lg-s{font-size:14.5px; color:var(--text-3); margin-top:4px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
@media (max-width:640px){.grid-2{grid-template-columns:1fr; gap:var(--space-2)}}

.field .label{display:block; font-size:14px; font-weight:700; color:var(--text-2); margin-bottom:2px}
.field label .opt, .field .label .opt{font-size:12px; font-weight:500; color:var(--text-3)}
.req{color:var(--accent-text); font-weight:800; margin-left:2px}
.field-inline{margin-top:10px}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.field textarea{
  width:100%; min-height:110px; padding:14px 18px; resize:vertical;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm);
  font:inherit; font-size:16px; line-height:1.5; color:var(--text);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea::placeholder{color:var(--text-3); opacity:.7}
.field textarea:hover{border-color:var(--border-strong)}
.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--glow-1)}
.field textarea[aria-invalid="true"], .field input[aria-invalid="true"], .field select[aria-invalid="true"]{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 4%, var(--surface))}
.field input.is-ok, .field select.is-ok, .field textarea.is-ok{border-color:color-mix(in srgb, var(--steel) 70%, var(--border))}
.field .counter{float:right; font-family:var(--font-mono); font-size:12px; color:var(--text-3)}
.field .counter.is-warn{color:var(--accent-text)}

/* prefix input (@telegram) */
.input-prefix{display:flex; align-items:stretch; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--surface); overflow:hidden;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.input-prefix:hover{border-color:var(--border-strong)}
.input-prefix:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--glow-1)}
.input-prefix span{display:grid; place-items:center; padding:0 0 0 16px; color:var(--text-3); font-weight:700; font-size:17px}
.input-prefix input{border:0 !important; box-shadow:none !important; background:transparent; padding-left:6px; min-height:49px}
.input-prefix.is-invalid{border-color:var(--accent)}

/* segmented radios */
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{position:relative; flex:1 1 auto; min-width:0}
.seg input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.seg span{display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:10px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--surface); font-size:15px; font-weight:600; color:var(--text-2);
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.seg label:hover span{border-color:var(--border-strong)}
.seg input:focus-visible + span{outline:3px solid var(--ring); outline-offset:2px}
.seg input:checked + span{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); color:var(--text)}
.seg input:checked + span::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:10px; flex:none; box-shadow:0 0 0 3px var(--glow-1)}
.seg-col{flex-direction:column}
.seg-col span{justify-content:flex-start; text-align:left; font-weight:500}
.seg-col span strong{font-weight:700; margin-right:4px}
.seg.is-invalid span{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}

/* chips (checkbox) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{position:relative}
.chips input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.chips span{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 16px;
  border:1.5px solid var(--border); border-radius:var(--r-pill); background:var(--surface); font-size:14.5px; font-weight:600; color:var(--text-2);
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.chips span::before{content:''; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); flex:none;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.chips label:hover span{border-color:var(--border-strong); transform:translateY(-1px)}
.chips input:focus-visible + span{outline:3px solid var(--ring); outline-offset:2px}
.chips input:checked + span{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); color:var(--text)}
.chips input:checked + span::before{background:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7E8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m7 12.5 3.2 3.2L17.5 8.5'/></svg>");
  background-size:12px; background-repeat:no-repeat; background-position:center}
.chips-lg span{min-height:46px; font-size:15px}
.chips.is-invalid span{border-color:color-mix(in srgb, var(--accent) 50%, var(--border))}

/* consent */
.field-consent{margin:0}
.consent-label{color:var(--text-2)}
.consent-label input[type="checkbox"]{width:20px; height:20px}
.consent-text a{color:var(--accent-text)}

/* nav */
.ank-nav{display:flex; justify-content:space-between; gap:12px; margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--border)}
.ank-nav .btn{flex:1 1 0; max-width:280px}
.ank-nav #btnPrev{flex:0 1 160px}
.ank-nav #btnNext, .ank-nav #btnSubmit{margin-left:auto}
@media (max-width:520px){.ank-nav .btn{max-width:none} .ank-nav #btnPrev{flex:0 0 auto; padding:0 18px}}
.btn[hidden]{display:none !important}
.btn-submit{position:relative}
.btn-spinner{display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,247,232,.35); border-top-color:#FFF7E8; animation:spin .7s linear infinite}
.btn-submit.is-busy .btn-label{opacity:.6}
.btn-submit.is-busy .btn-spinner{display:inline-block}
.btn-submit.is-busy{pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

.form-err{margin-top:14px; font-size:14.5px; font-weight:600; color:var(--accent-text); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius:var(--r-sm); padding:12px 16px}
.form-err[hidden]{display:none}
.ank-save-note{margin-top:14px; font-size:12.5px; color:var(--text-3); display:flex; align-items:center; gap:8px}
.save-dot{width:7px; height:7px; border-radius:50%; background:var(--steel); box-shadow:0 0 0 3px var(--glow-2); transition:background-color var(--t-fast)}
.ank-save-note.is-saved .save-dot{background:#3aa66b}

/* honeypot */
.hp{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; overflow:hidden}

/* shake for invalid */
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.shake{animation:shake .5s var(--ease)}

/* ---------- Done ---------- */
.ank-done{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:clamp(28px,5vw,56px); text-align:center; animation:stepIn var(--t-slow) var(--ease)}
.ank-done[hidden]{display:none}
.ank-done h2{font-size:clamp(26px,3.4vw,38px); letter-spacing:-.03em; margin:0 0 12px}
.ank-done h2 span{color:var(--accent-text)}
.done-lead{font-size:17px; color:var(--text-2); max-width:56ch; margin:0 auto var(--space-4)}
.done-lead strong{color:var(--text); font-weight:800}
.done-card{text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; max-width:520px; margin:0 auto var(--space-4)}
.done-card-title{font-family:var(--font-head); font-weight:700; font-size:16px; margin-bottom:10px}
.done-card ol{list-style:decimal; padding-left:22px; display:grid; gap:8px; font-size:15.5px; color:var(--text-2)}
.done-card ol li::marker{color:var(--accent-text); font-weight:700}
.done-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:var(--space-3)}
.ank-done code{font-family:var(--font-mono); background:var(--surface-2); padding:2px 8px; border-radius:6px; color:var(--text)}

/* ---------- Footer ---------- */
.ank-footer{padding:var(--space-3) 0}
.ank-footer .footer-bottom{padding-top:0}
.ank-footer a{color:var(--accent-text); font-weight:600}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .brand-tag{display:none}
  .ank-progress{top:66px; padding:8px 0}
  .ank-steps{gap:4px}
  .ank-steps li .t{display:none}
  .ank-steps li{justify-content:center}
  .ank-steps li.is-current .t{display:none}
  .ank-form{padding:18px 16px 22px; border-radius:var(--r-lg)}
  .field input, .field select, .field textarea, .input-prefix input{font-size:16px} /* prevent iOS zoom */
  .seg span{min-height:46px; padding:8px 10px; font-size:14.5px}
  .seg:not(.seg-col) label{flex:1 1 30%}
  .chips span{min-height:40px; padding:7px 13px; font-size:14px}
  .lg-n{display:none}
  legend{grid-template-columns:1fr}
}
@media (max-width:420px){
  .seg:not(.seg-col) label{flex:1 1 45%}
}

/* iOS safe-area */
@supports (padding:max(0px)){
  .ank-form, .ank-done{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
}