/* ============================================================================
   site/demo.css — заявка на пробный период.

   Форма — главный экран этой страницы, поэтому она собрана как продукт, а не
   как «поля в столбик»: выбор роли карточками со знаком, три блока-вопроса
   с кольцом-шагом в заголовке, ответы чипсами в одно касание, файл в одном
   боксе на оба состояния, одна яркая кнопка отправки.

   Форма отвечает ЗНАКАМИ (icons.js, пружина smooth), а стили дают знакам
   место и цвет: плюс чипса, тире у поля, кольцо блока, файл в боксе,
   стрелка кнопки. Что во что перетекает — в demo.js.
   ========================================================================== */

/* ── сцена ──
   Шапка и форма — один раздел под одним холстом «Велариса» (velaris.css
   кладёт холст, здесь — только воздух). Между заголовком и формой — тот же
   отступ, что у карточек под заголовком раздела; снизу — воздух раздела
   плюс наезд подвала (плита подвала забирает --tab-lift у нижнего края). */
.dm-stage{ padding-bottom:calc(var(--sect-pad) + var(--tab-lift)) }
.dm-stage .dm-split,.dm-stage .dm-done{ margin-top:clamp(34px,4vw,58px) }
/* Правая колонка лежит прямо на градиенте — тексту нужна тень, а не плашка:
   плашка превратила бы «что дальше» во вторую карточку рядом с формой. */
.dm-stage .dm-side{ text-shadow:0 1px 18px rgba(6,14,11,.55) }

/* ── форма ──
   ФОРМА СТОИТ НА СВОЁМ ФОНЕ, А НЕ НА АВРОРЕ. Стекло по умолчанию прозрачное,
   и сквозь него наискось шло пятно авроры: поля оказывались на меняющейся
   подложке, а волосяные рамки местами пропадали вовсе. Собственная почти
   непрозрачная плита под формой отсекает фон — поля снова лежат на ровном,
   и рамка видна по всей длине. Это лечится подложкой, а не цветом рамки. */
.dm{ display:grid; gap:clamp(18px,1.8vw,26px); padding:clamp(22px,2.4vw,40px);
  background:
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  background-color:var(--glass-base);
}

/* Капкан: собственный display перекрывает атрибут hidden. Всё, что скрипт
   прячет атрибутом, обязано слушаться его сильнее собственной раскладки. */
.dm [hidden],.dm-done[hidden],.dm-split[hidden],[data-role-only][hidden]{ display:none }

/* ── выбор роли ──
   Две карточки: знак в плашке, имя и подпись, справа знак выбора
   (плюс → галочка). У выбранной знак перетекает в «живую» форму: лавка
   раскрывает маркизу, самолётик взлетает. */
.dm-roles{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.dm-role{ appearance:none; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:13px 16px 13px 13px; border-radius:18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:var(--ink); font:inherit;
  transition:border-color .18s var(--e-micro), background-color .18s var(--e-micro),
             transform .18s var(--e-micro) }
.dm-role-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  transition:background-color .18s var(--e-micro), border-color .18s var(--e-micro) }
.dm-role-ic .ic{ width:22px; height:22px; color:var(--muted); stroke-width:1.7;
  transition:color .18s var(--e-micro) }
.dm-role-t{ display:grid; gap:2px; min-width:0 }
.dm-role-t b{ font-weight:800; font-size:clamp(15px,1.15vw,17.5px); letter-spacing:-.01em }
.dm-role-t span{ font-size:12.5px; color:var(--muted) }
.dm-role-ok{ width:17px; height:17px; stroke-width:2.4; color:var(--dim); opacity:.7;
  transition:color .18s var(--e-micro), opacity .18s var(--e-micro) }
.dm-role:hover{ border-color:rgba(255,255,255,.24) }
.dm-role:hover .dm-role-ic .ic{ color:var(--ink) }
.dm-role.is-on{ background:var(--cta-soft); border-color:var(--cta-edge) }
.dm-role.is-on .dm-role-ic{ background:rgba(217,246,92,.12); border-color:rgba(217,246,92,.28) }
.dm-role.is-on .dm-role-ic .ic,.dm-role.is-on:hover .dm-role-ic .ic{ color:var(--cta) }
.dm-role.is-on .dm-role-ok{ color:var(--cta); opacity:1 }

/* ── блоки-вопросы ──
   Девять ответов подряд читаются как анкета. Разделены на три вопроса-блока
   («как связаться», «чтобы собрать за день», «что показать первым»), и
   заголовок блока держит линейку сверху: видно, где кончился один разговор и
   начался другой. В заголовке — кольцо-шаг: становится галочкой, когда блок
   закрыт ответом. Линейка — у блока, а не у каждого поля: полосатая форма
   выглядит длиннее, чем есть. */
.dm-set{ border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0 }
.dm-block{ padding-top:clamp(16px,1.6vw,22px); border-top:1px solid rgba(255,255,255,.10) }
.dm-block:first-of-type{ border-top:0; padding-top:0 }
.dm-set legend{ padding:0; margin-bottom:clamp(12px,1.2vw,18px); float:left; width:100% }
/* legend во float отдаёт поток следующему элементу — вернём его на место. */
.dm-block > legend + *{ clear:both }
.dm-lg{ display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--acc-lit) }
.dm-lg-n{ font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--dim) }
.ic-step{ width:16px; height:16px; stroke-width:2.2; color:var(--dim);
  transition:color .22s var(--e-micro) }
.dm-block.is-done .ic-step{ color:var(--acc-lit) }
.dm-block.is-done .dm-lg-n{ color:var(--acc-lit); opacity:.75 }

.dm-lab,.dm-legend2{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim) }
.dm-legend2{ margin-top:10px }
/* Подзаголовок сразу под заголовком блока: свой отступ сверху ему не нужен. */
.dm-legend2.is-first{ margin-top:0 }

/* ── поля ── */
.dm-grid{ display:grid; gap:14px }
@media (min-width:680px){
  .dm-grid{ grid-template-columns:1fr 1fr }
  .dm-wide{ grid-column:1 / -1 }
}
.dm-field{ display:grid; gap:8px; min-width:0 }
.dm-in{ position:relative; display:block }
.dm-field input,.dm-field textarea{
  appearance:none; width:100%; border-radius:13px;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.16);
  color:var(--ink); font:500 16px/1.4 Manrope, system-ui, sans-serif;
  padding:13px 15px; letter-spacing:-.005em;
  transition:border-color .16s var(--e-micro), background-color .16s var(--e-micro) }
.dm-in input{ padding-right:42px }
.dm-field textarea{ resize:vertical; min-height:74px }
.dm-field input::placeholder,.dm-field textarea::placeholder{ color:var(--hint) }
.dm-field input:hover,.dm-field textarea:hover{ border-color:rgba(255,255,255,.24) }
.dm-field input:focus,.dm-field textarea:focus{ outline:none;
  border-color:var(--acc-lit); background:rgba(0,0,0,.34) }
/* Знак у поля: тире, пока пусто, галочка — когда заполнено. Цвет — второй
   голос: тире почти не видно, галочка мятная. */
.ic-ok{ position:absolute; right:13px; top:50%; translate:0 -50%; pointer-events:none;
  width:16px; height:16px; stroke-width:2.3; color:var(--ink); opacity:.22;
  transition:color .22s var(--e-micro), opacity .22s var(--e-micro) }
.dm-in.is-ok .ic-ok{ color:var(--acc-lit); opacity:1 }
/* поле, не прошедшее проверку при отправке */
.dm-field input.is-bad{ border-color:var(--bad) }
.dm-in.is-bad .ic-ok{ color:var(--bad); opacity:1 }

/* ── чипсы ──
   Плюс слева — «добавить ответ»; выбранный чипс держит галочку. */
.dm-chips{ display:flex; flex-wrap:wrap; gap:8px }
.dm-chip{ appearance:none; cursor:pointer; font:600 14px/1 Manrope, sans-serif;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--muted); padding:10px 15px 10px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  transition:color .15s var(--e-micro), border-color .15s var(--e-micro),
             background-color .15s var(--e-micro), transform .15s var(--e-micro) }
.dm-chip .ic{ width:13px; height:13px; stroke-width:2.5; opacity:.6;
  transition:opacity .15s var(--e-micro) }
.dm-chip:hover{ color:var(--ink); border-color:rgba(255,255,255,.3) }
.dm-chip:hover .ic{ opacity:.9 }
.dm-chip[aria-pressed="true"]{
  background:var(--acc-soft); border-color:var(--acc-edge);
  color:var(--acc-lit) }
.dm-chip[aria-pressed="true"] .ic{ opacity:1 }
.dm-chip:active{ transform:scale(.97) }
/* Зоны доставки — тринадцать чипсов подряд. Кегль и поля меньше обычного:
   иначе список занимает пол-формы и читается как отдельная страница. */
.dm-chips-tight .dm-chip{ font-size:13px; padding:8px 12px 8px 10px }
.dm-chips-tight .dm-chip .ic{ width:12px; height:12px }

/* приманка для ботов: визуально не существует, но в вёрстке есть */
.dm-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

/* ── файл ──
   Один бокс на оба состояния. Пусто: пунктир, знак файла, «Выбрать файл».
   Выбран: сплошная мятная рамка, знак перетёк в «файл с галочкой», имя и
   вес, справа крестик (на ховере — ведро). Не тот файл: красная рамка,
   знак — тревога, подпись почему. Перетаскивание — поверх обычного выбора,
   а не вместо: на телефоне его нет вовсе. */
.dm-file{ display:grid; gap:8px }
.dm-drop{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:14px; padding:12px 14px 12px 12px; border-radius:16px; cursor:pointer;
  background:rgba(0,0,0,.26); border:1px dashed rgba(255,255,255,.24);
  transition:border-color .18s var(--e-micro), background-color .18s var(--e-micro) }
.dm-drop input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.dm-drop-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  transition:background-color .18s var(--e-micro), border-color .18s var(--e-micro) }
.dm-drop-ic .ic{ width:22px; height:22px; color:var(--acc-lit); stroke-width:1.7;
  transition:color .18s var(--e-micro) }
.dm-drop-t{ display:grid; gap:3px; min-width:0 }
.dm-drop-t b{ font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dm-drop-t span{ font-size:12.5px; color:var(--dim) }
.dm-drop:hover,.dm-drop.is-over{ border-color:var(--acc-lit); background:rgba(0,0,0,.34) }
.dm-file.has-file .dm-drop{ border-style:solid; border-color:var(--acc-edge); background:var(--acc-soft) }
.dm-file.has-file .dm-drop-ic{ background:rgba(63,211,162,.12); border-color:rgba(63,211,162,.24) }
.dm-file.has-file .dm-drop-t span{ color:var(--muted) }
.dm-file.is-bad .dm-drop{ border-color:var(--bad) }
.dm-file.is-bad .dm-drop-ic .ic{ color:var(--bad) }
.dm-drop-msg{ color:var(--bad) }
.dm-file.is-bad .dm-drop-msg{ color:var(--bad) }
/* Крестик лежит НАД невидимым полем выбора: иначе клик по нему открывал бы
   диалог файла вместо того, чтобы убрать выбранный. */
.dm-fx{ position:relative; z-index:2; appearance:none; border:0; cursor:pointer;
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--muted);
  transition:color .15s var(--e-micro), background-color .15s var(--e-micro) }
.dm-fx .ic{ width:15px; height:15px; stroke-width:2.2 }
.dm-fx:hover{ color:var(--ink); background:rgba(255,255,255,.12) }

/* ── отправка ── */
.dm-send{ appearance:none; cursor:pointer; border:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:17px 22px; border-radius:16px;
  background:var(--cta); color:var(--cta-ink);
  font:800 16px/1 Manrope, sans-serif; letter-spacing:.01em;
  box-shadow:0 16px 36px -16px var(--cta-glow);
  transition:transform .16s var(--e-micro), filter .16s var(--e-micro), opacity .16s var(--e-micro) }
.dm-send .ic{ width:18px; height:18px; stroke-width:2.4 }
.dm-send:hover{ transform:translate3d(0,-1px,0); filter:brightness(1.05) }
.dm-send:active{ transform:none }
.dm-send[disabled]{ opacity:.7; cursor:progress; transform:none; filter:none }
.dm-note{ color:var(--dim); font-size:13px; text-align:center; margin-top:-6px }
.dm-err{ font-size:14px; line-height:1.45;
  padding:12px 15px; border-radius:12px; border:1px solid transparent }

/* ── правая колонка: что дальше ── */
.dm-side{ display:grid; gap:clamp(20px,2vw,30px); align-content:start;
  position:sticky; top:110px }
.dm-steps{ display:grid; gap:clamp(16px,1.6vw,24px) }
.dm-steps li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px;
  align-items:start }
.dm-steps .dnum{ font-size:clamp(24px,2vw,32px); line-height:1; color:var(--acc-lit);
  min-width:2.2ch }
.dm-steps h3{ font-size:clamp(16px,1.2vw,19px); margin-bottom:5px }
.dm-steps p{ color:var(--muted); font-size:14.5px; line-height:1.5; max-width:38ch }

/* «0 сум» — большая цифра и объяснение рядом */
.dm-free{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px;
  align-items:center; padding:clamp(18px,1.8vw,26px) }
.dm-free-v{ font-size:clamp(40px,3.6vw,64px); line-height:1; color:var(--cta) }
.dm-free b{ display:block; font-size:14.5px; margin-bottom:5px }
.dm-free p{ color:var(--muted); font-size:13.5px; line-height:1.5 }

/* ── подтверждение после отправки ──
   Самолётик в лаймовом круге складывается в галочку (demo.js) — заявка дошла. */
.dm-done{ display:grid; gap:14px; justify-items:start;
  padding:clamp(30px,3.4vw,56px); max-width:720px }
.dm-done-ic{ display:grid; place-items:center; width:58px; height:58px;
  border-radius:50%; background:var(--cta); margin-bottom:6px }
.dm-done-ic .ic{ width:26px; height:26px; stroke-width:2.4; color:var(--cta-ink) }
.js .dm-done:not([hidden]) .dm-done-ic{ animation:dm-pop .5s var(--e-reveal) both }
@keyframes dm-pop{ from{ transform:scale(.55); opacity:0 } to{ transform:none; opacity:1 } }
.dm-done .lead{ max-width:52ch }

@media (max-width:899px){
  .dm-side{ position:static }
}
@media (max-width:560px){
  .dm-roles{ grid-template-columns:1fr }
  .dm-role{ padding:11px 14px 11px 11px }
  .dm-role-ic{ width:40px; height:40px; border-radius:12px }
  .dm-drop{ padding:11px 12px 11px 11px; gap:11px }
  .dm-drop-ic{ width:40px; height:40px; border-radius:12px }
}
@media (prefers-reduced-motion: reduce){
  .js .dm-done:not([hidden]) .dm-done-ic{ animation:none }
}