/* Пошаговый бриф (assets/brief.js): окно поверх страницы и встроенный вид на contacts.html.
   Только токены site.css и theme.css, поэтому светлая и тёмная тема работают сами.
   Правило: один шаг помещается в экран без прокрутки; сколько вопросов на шаге, решает brief.js по высоте. */
html.bf-lock{overflow:hidden}

.bf{--bf-pad:24px;display:flex;flex-direction:column;min-height:0;background:var(--surface);color:var(--text);font:400 15px/1.5 var(--font-ui)}
.bf [hidden]{display:none!important}

/* окно */
dialog.bf-dlg{padding:0;border:0;margin:auto;overflow:hidden;max-width:none;max-height:none;color:var(--text);background:var(--surface);
  width:min(760px,calc(100vw - 32px));height:min(680px,calc(100vh - 32px));height:min(680px,calc(100dvh - 32px));
  border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
dialog.bf-dlg[open]{display:flex;flex-direction:column;animation:bf-pop 220ms cubic-bezier(.2,.7,.2,1)}
dialog.bf-dlg::backdrop{background:rgba(10,14,12,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog.bf-dlg .bf{flex:1;min-height:0;height:100%}
@keyframes bf-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* на телефоне и в низких окнах бриф открывается на весь экран */
@media (max-width:640px),(max-height:520px){
  dialog.bf-dlg{width:100vw;height:100vh;height:100dvh;margin:0;border-radius:0;box-shadow:none}
  .bf{--bf-pad:16px}
}

/* встроенный вид: карточка в странице, высота постоянная, чтобы страница не прыгала между шагами */
.bf-embed{border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;
  height:clamp(500px,calc(100vh - 150px),660px);height:clamp(500px,calc(100dvh - 150px),660px)}
@media (max-width:640px){.bf-embed{height:clamp(520px,calc(100dvh - 120px),680px)}}
.bf-embed .bf-x{display:none}

/* шапка */
.bf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px var(--bf-pad) 0}
.bf-title{margin:0;font:600 clamp(20px,2vw,24px)/1.2 var(--font-ui);letter-spacing:-.01em;color:var(--ink)}
.bf-hint{margin:4px 0 0;font-size:13.5px;line-height:1.4;color:var(--muted);max-width:56ch}
@media (max-height:700px){.bf-hint{display:none}}
.bf-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-6px -8px 0 0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);cursor:pointer}
.bf-x:hover{background:var(--chip)}
.bf-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* прогресс: шаг N из M и сегменты (готово — чернила, текущий — зелёный) */
.bf-prog{padding:12px var(--bf-pad) 0}
.bf-step{display:block;font:500 13px var(--font-ui);color:var(--muted)}
.bf-step:focus-visible{outline:none;box-shadow:none}
.bf-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:8px}
.bf-seg i{display:block;height:4px;border-radius:var(--radius-pill);background:var(--line);transition:background 240ms}
.bf-seg i.is-done{background:var(--ink)}
.bf-seg i.is-now{background:var(--green)}

/* тело шага: прокрутки нет, если вопросы подобраны под высоту; запасная прокрутка только для очень низких экранов */
.bf-body{position:relative;flex:1;min-height:0;overflow:auto;padding:18px var(--bf-pad)}
.bf-page{display:grid;gap:18px;align-content:start}
.bf-page.bf-in{animation:bf-fade 200ms ease-out}
@keyframes bf-fade{from{opacity:.0;transform:translateX(8px)}to{opacity:1;transform:none}}
.bf-body.bf-measuring .bf-page{position:absolute;left:var(--bf-pad);right:var(--bf-pad);top:0;visibility:hidden;animation:none}
.bf-body.bf-measuring .bf-page .bf-q{display:block}

.bf-q{display:grid;gap:8px;align-content:start}
.bf-q[hidden]{display:none}
.bf-contacts{gap:16px}

/* варианты: 2 колонки на десктопе, 1 на телефоне; крупные цели нажатия */
.bf .bf-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:640px){.bf .bf-opts{grid-template-columns:1fr}}
.bf .bf-opts .chip{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;height:auto;padding:8px 14px;text-align:left;font:500 14px/1.3 var(--font-ui);
  border-radius:var(--radius-sm);background:var(--chip);color:var(--ink);box-shadow:var(--shadow-chip)}
.bf .bf-opts .chip::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--muted-2);background:transparent;transition:box-shadow 160ms,background 160ms}
.bf .bf-opts .chip:hover{background:var(--chip-hover)}
.bf .bf-opts .chip[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bf .bf-opts .chip[aria-pressed="true"]::before{background:var(--green);box-shadow:inset 0 0 0 1.5px var(--green),inset 0 0 0 4.5px var(--surface)}

/* очень низкие экраны (телефон на боку, маленький ноутбук): плотнее отступы, чтобы шаги оставались без прокрутки */
@media (max-height:600px){
  .bf-head{padding-top:10px}
  .bf-prog{padding-top:6px}
  .bf-seg{margin-top:5px}
  .bf-body{padding-top:10px;padding-bottom:10px}
  .bf-page{gap:12px}
  .bf-contacts{gap:8px}
  .bf-foot{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .bf-foot .btn{min-height:40px}
}
.bf textarea.input{min-height:96px;height:96px}
@media (max-height:700px){.bf textarea.input{min-height:72px;height:72px}}

/* контакты */
@media (max-width:640px){.bf .f-row{grid-template-columns:1fr}}
.bf-consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.4;color:var(--muted);cursor:pointer}
.bf-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--green)}
.bf-consent.is-error{color:var(--error)}
.bf-err{margin:0;padding:10px 14px;border-radius:var(--radius-sm);background:var(--amber-soft,#FBEFD9);color:var(--error);font-size:14px}
.bf-note{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted-2)}

/* низ: назад и далее */
.bf-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--bf-pad) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft)}
.bf-foot .btn{min-width:112px}
.bf-foot .bf-next{margin-left:auto}

/* экран «бриф получен» */
.bf-thanks{display:grid;gap:16px;align-content:start}
.bf-ty{margin:0;font:600 clamp(22px,2.4vw,28px)/1.2 var(--font-ui);letter-spacing:-.01em;color:var(--ink)}
.bf-ty:focus-visible{outline:none;box-shadow:none}
.bf-after{display:grid;gap:12px;padding:16px;border-radius:var(--radius-md);background:var(--sage);color:var(--sage-ink)}
.bf-after .h4{color:var(--sage-ink)}
.bf-done{justify-self:start}

@media (prefers-reduced-motion:reduce){
  dialog.bf-dlg[open],.bf-page.bf-in{animation:none}
  .bf-seg i{transition:none}
}