/* общие стили анкет connected: черное поле, шаг в цвете анкеты, чипы заливаются цветом. страницы: join, choir */
:root{
  color-scheme:dark;
  --c-black:#000;--c-paper:#efede6;--c-cherry:#6e1221;--c-red:#f0123c;--c-scarlet:#d8001f;--c-signal:#fd0100;
  --c-flossy:#ff7fab;--c-hotpink:#ff4fa0;--c-orange:#ff6a00;--c-yellow:#ffee00;--c-mellow:#f4ff1e;--c-lime:#c6ff00;
  --c-mint:#8cf28f;--c-electric:#2b3bff;--c-vinyl:#0759a2;--c-violet:#4a0fb8;--c-indigo:#24097a;
  --field:var(--c-paper);--ink:var(--c-black);--line:rgba(239,237,230,.35);--muted:rgba(239,237,230,.6);
  --font-grotesk:"Aktiv Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-script:Tygra,"Aktiv Grotesk",serif;
}
[data-theme="electric"]{--field:var(--c-electric);--ink:var(--c-lime)}
[data-theme="orange"]{--field:var(--c-orange);--ink:var(--c-indigo)}
[data-theme="cherry"]{--field:var(--c-cherry);--ink:var(--c-flossy)}
[data-theme="mint"]{--field:var(--c-mint);--ink:var(--c-violet)}
[data-theme="yellow"]{--field:var(--c-yellow);--ink:var(--c-black)}
[data-theme="paper"]{--field:var(--c-paper);--ink:var(--c-black)}
[data-theme="signal"]{--field:var(--c-signal);--ink:var(--c-black)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--c-black);color:var(--c-paper);font:400 16px/1.3 var(--font-grotesk);letter-spacing:-.02em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:3px solid var(--c-yellow);outline-offset:2px}
[hidden]{display:none!important}

.page{max-width:560px;margin:0 auto;padding:36px 20px 56px}

.head{display:grid;justify-items:center;gap:12px;text-align:center;margin-bottom:28px}
.mark{display:block;width:100%;height:auto}
.head__script{margin:calc(clamp(40px,12vw,56px) * -.4) 0 0;position:relative;font:400 clamp(40px,12vw,56px)/.8 var(--font-script);letter-spacing:-.04em;color:var(--c-paper);-webkit-text-stroke:2px var(--c-black);paint-order:stroke fill}
.head__lead{margin:6px 0 0;max-width:40ch;font:500 15px/1.35 var(--font-grotesk)}
.head__back{font:700 12px/1 var(--font-grotesk);text-transform:uppercase;color:var(--muted);text-decoration:none}

.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 18px}
.progress span{height:4px;background:rgba(239,237,230,.18)}
.progress span.is-on{background:var(--c-yellow)}
.progress__label{margin:0 0 10px;font:700 11px/1 var(--font-grotesk);text-transform:uppercase;color:var(--muted)}

.step{display:grid;gap:30px}
.step__head{padding:18px 20px;border-radius:14px;background:var(--field);color:var(--ink)}
.step__title{margin:0;font:900 clamp(26px,7vw,34px)/.9 var(--font-grotesk);letter-spacing:-.05em;text-transform:uppercase}
.step__sub{margin:8px 0 0;font:500 14px/1.3 var(--font-grotesk)}

.q{display:grid;gap:10px;border:0;margin:0;padding:0;min-width:0}
.q__label{padding:0;margin:0;font:900 15px/1.15 var(--font-grotesk);text-transform:uppercase;letter-spacing:-.03em}
fieldset.q>legend.q__label{margin-bottom:2px;float:left;width:100%}
fieldset.q>legend.q__label+*{clear:both}
.q__label small{display:block;margin-top:4px;font:500 13px/1.3 var(--font-grotesk);text-transform:none;letter-spacing:-.01em;color:var(--muted)}
.q__req{color:var(--c-yellow)}
.q__error{margin:0;font:700 12px/1.2 var(--font-grotesk);color:var(--c-hotpink)}

.input{width:100%;min-height:52px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:rgba(239,237,230,.04);font-size:16px}
.input::placeholder{color:rgba(239,237,230,.38)}
.input:focus{border-color:var(--c-paper);outline:none;background:rgba(239,237,230,.07)}
textarea.input{min-height:110px;resize:vertical;line-height:1.35}
.q.is-invalid .input{border-color:var(--c-hotpink)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:10px 16px;border:1.5px solid var(--line);border-radius:10px;background:transparent;font:700 14px/1.1 var(--font-grotesk);text-transform:lowercase;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.chip:hover{border-color:var(--c-paper)}
.chip[aria-pressed="true"]{background:var(--field);border-color:var(--field);color:var(--ink)}
.q.is-invalid .chip{border-color:var(--c-hotpink)}

.star{display:inline-block;clip-path:polygon(50% 2.5%,61.8% 36.3%,97.6% 37%,69% 58.7%,79.4% 93%,50% 72.5%,20.6% 93%,31% 58.7%,2.4% 37%,38.2% 36.3%)}

.consent{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font:500 13px/1.35 var(--font-grotesk);color:var(--muted);cursor:pointer}
.consent input{width:22px;height:22px;margin:0;accent-color:var(--c-yellow)}
.consent a{color:var(--c-paper)}
.q.is-invalid .consent{color:var(--c-hotpink)}

.nav{display:flex;gap:10px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border:3px solid var(--c-paper);border-radius:0;background:var(--c-paper);color:var(--c-black);font:900 16px/1 var(--font-grotesk);letter-spacing:-.035em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn--next{flex:1;background:var(--c-yellow);border-color:var(--c-yellow);color:var(--c-black)}
.btn--send{animation:pulse 2s ease-in-out infinite}
.btn--back{background:transparent;color:var(--c-paper)}
.btn .star{width:16px;height:16px;background:currentColor}
.btn[disabled]{opacity:.6;cursor:progress;animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 18px 4px rgba(240,18,60,.55)}50%{box-shadow:0 0 30px 10px rgba(240,18,60,.85)}}
@media (prefers-reduced-motion:reduce){.btn--send{animation:none}.role,.chip{transition:none}}

.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.done{display:grid;gap:18px;text-align:center;justify-items:center;padding-top:8px}
.done__title{margin:0;font:900 clamp(34px,10vw,48px)/.88 var(--font-grotesk);letter-spacing:-.055em;text-transform:uppercase}
.done__text{margin:0;max-width:36ch;font:500 16px/1.35 var(--font-grotesk)}
.done .btn{width:100%}
.alert{margin:0;padding:14px 16px;border:1.5px solid var(--c-hotpink);border-radius:12px;font:500 14px/1.35 var(--font-grotesk)}

.foot{margin-top:44px;text-align:center;font:400 11px/1.35 var(--font-grotesk);color:rgba(239,237,230,.45)}

.progress{grid-template-columns:repeat(var(--steps,4),1fr)}
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photo{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:rgba(239,237,230,.06)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .photo__del{position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(0,0,0,.7);color:var(--c-paper);font:700 16px/1 var(--font-grotesk);cursor:pointer}
.photo--add{display:grid;place-items:center;border:1.5px dashed var(--line);cursor:pointer;font:700 12px/1.2 var(--font-grotesk);text-transform:uppercase;text-align:center;color:var(--muted);padding:6px}
.photo--add:hover{border-color:var(--c-paper);color:var(--c-paper)}
.q.is-invalid .photo--add{border-color:var(--c-hotpink)}
.photo--busy{display:grid;place-items:center;font:700 11px/1 var(--font-grotesk);color:var(--muted)}
.photo--add small{display:block;margin-top:4px;font:500 10px/1.2 var(--font-grotesk);text-transform:none;letter-spacing:0}
/* главное фото (обложка визитки) крупно слева, остальные 2×2 справа */
.photos--slots .photo--main{grid-column:span 2;grid-row:span 2}
.photos--slots .photo--main.photo--add{font-size:14px;border-color:var(--c-paper);color:var(--c-paper)}
.photos--slots .photo--main.photo--add small{font-size:12px;color:var(--muted)}
.photos.is-busy .photo--add{pointer-events:none;opacity:.4}
.photo__tag{position:absolute;left:6px;bottom:6px;padding:4px 6px;border-radius:6px;background:var(--c-yellow);color:var(--c-black);font:700 10px/1 var(--font-grotesk);text-transform:uppercase}
.photo__tag--n{top:6px;bottom:auto;min-width:20px;text-align:center}
.photo .photo__up{position:absolute;left:4px;right:4px;bottom:4px;padding:4px 2px;border:0;border-radius:6px;background:rgba(0,0,0,.7);color:var(--c-paper);font:700 9px/1.1 var(--font-grotesk);text-transform:uppercase;cursor:pointer}

/* где живешь: второй уровень (районы москвы, поиск города или страны) под выбранным вариантом */
.place{display:grid;gap:8px;padding-left:14px;border-left:3px solid var(--field)}
.place__label{margin:0;font:700 11px/1 var(--font-grotesk);text-transform:uppercase;color:var(--muted)}
.place__list{display:grid;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.place__opt{min-height:44px;padding:10px 16px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;font:500 15px/1.2 var(--font-grotesk);cursor:pointer}
.place__opt:first-child{border-top:0}
.place__opt:hover,.place__opt:focus-visible{background:var(--field);color:var(--ink);outline:none}
.q.is-invalid .place .input{border-color:var(--c-hotpink)}