/* Виртуальный вьюпорт: на телефоне это настоящие 100dvh/100vw, на ПК страница целиком
   масштабируется zoom'ом, и единицы обязаны делиться на тот же коэффициент, иначе кадр
   считается от невидимой высоты и страница уезжает в прокрутку. */
:root{--vh:100dvh;--vw:100vw}
/* Общий старт двух тактов: карточки появляются лесенкой, поэтому круг свечения стартует
   на секунде, и кнопка обязана стартовать вместе с ними, иначе такты наезжают. */
body{--beat-start:.3s}

/* flow.css · стили вариантов поверх kit/layout.css. Общие правила там, здесь только то, чем варианты отличаются. */
.screen{min-height:var(--vh)}
/* Финал: высота ровно вьюпорт, чтобы скроллилась область выбора, а бейдж, заголовок, траст и подвал стояли.
   В макете это давал телефон-фрейм, у живой страницы ограничения не было: подвал уезжал, счётчик не показывался. */
#pick.screen{height:var(--vh);min-height:0}
/* --- Старт A: фото на весь экран, текст внизу --- */
.startA{position:relative}
.startA > *{position:relative;z-index:1}
.startA .bleed{position:absolute;inset:0;z-index:0;overflow:hidden}
.startA .bleed .ph{position:absolute;inset:0;background:linear-gradient(160deg,#4a1a78 0%,#1b0630 55%,#08010f 100%)}
.startA .bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#04000d33 0%,#04000dbb 52%,#04000d 82%)}
.startA h1{text-shadow:0 2px 18px rgba(0,0,0,.5)}
/* --- Старт B: карточка-профиль --- */
/* Кадр B: на высоком экране портрет 3:4, на низком (до 700px) осознанно 4:3, а не срезанный max-height:
   landing_qc 10.09.2026 ловил жёсткий cap как сплющенный aspect-ratio (56% на 667). */
.media{position:relative;width:100%;aspect-ratio:3/4;border-radius:var(--r-media);overflow:hidden;
  border:1px solid var(--s-border);margin-top:14px;background:linear-gradient(160deg,#43176e,#140425)}
/* Стопка кадров под героем B: главный кадр уже на 20px справа и на 18px снизу, слои занимают
   всю коробку стопки, поэтому из-под него видно ДВЕ полосы фото, а не намёк на угол
   (правка владельца 10.09.2026: «хочу, чтобы фотка была под фоткой»).
   ⛔ Сдвиги и угол держат слои внутри 375: правый край второго слоя 373px, скролла нет. */
/* Поля стопки в долях ширины, а не в пикселях: размах веера растёт вместе с карточкой
   (сдвиг угла = высота × sin), поэтому на широком экране фиксированные 56px переставали его
   держать и документ уезжал за вьюпорт (замер 430×932, 11.09.2026: 441px при 430).
   ⛔ Меняешь угол раскрытия в deck2 — перепроверяй landing_qc на 375 и 430: он ловит
   переполнение В ДВИЖЕНИИ, в покое его не видно. */
.stack{position:relative;margin:14px 19% 22px 8%;padding:0}
/* Карточный веер из ОДНОГО угла: у всех трёх кадров точка опоры `0 100%` и одинаковый размер,
   раскладка делается только углом поворота, без сдвигов (правка владельца 11.09.2026).
   ⛔ Предел угла считается: сдвиг верхнего левого угла = высота карточки × sin(угол).
   При высоте ~400px это 7px на градус, поэтому у стопки слева запас 26px, а угол 3.6 градуса.
   Точка опоры строго 0 100%. Разводишь сильнее: увеличивай запас, а не только угол. */
.stack .media{margin:0;z-index:2;transform-origin:0 100%;will-change:transform;
  animation:openCard 3.4s var(--ease) 1.15s infinite}
@keyframes openCard{0%,100%{transform:none}50%{transform:rotate(-5deg)}}
.slayer{position:absolute;inset:0;z-index:1;border-radius:var(--r-media);overflow:hidden;
  border:1px solid #ffffff2e;background:linear-gradient(160deg,#3a1364,#120320);
  box-shadow:0 10px 26px #00000080;filter:brightness(.72) saturate(.88);transform-origin:0 100%}
.slayer--1{transform:rotate(2deg);animation:fan1 .85s var(--ease) .2s both, deck1 3.4s var(--ease) 1.1s infinite}
.slayer--2{z-index:0;transform:rotate(4deg);animation:fan2 .85s var(--ease) .32s both, deck2 3.4s var(--ease) 1.25s infinite}
@keyframes fan1{from{transform:rotate(0);opacity:0}to{transform:rotate(2deg);opacity:1}}
@keyframes fan2{from{transform:rotate(0);opacity:0}to{transform:rotate(4deg);opacity:1}}
/* Дыхание колоды: слои чуть разъезжаются и приоткрывают задние кадры, потом сходятся.
   Ход 10-20px и до 1.2 градуса, цикл 3.4 с (правка владельца 11.09.2026: «больше разъезд и быстрее»).
   ⛔ Дальний слой уезжает максимум на 20px: при 26px правый край выходит за 375 и появляется скролл. */
@keyframes deck1{0%,100%{transform:rotate(2deg)}50%{transform:rotate(6.5deg)}}
@keyframes deck2{0%,100%{transform:rotate(4deg)}50%{transform:rotate(12.5deg)}}
@media (prefers-reduced-motion:reduce){ .slayer--1,.slayer--2,.stack .media{animation:none;opacity:1} }
.media .cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px 14px 12px;background:linear-gradient(180deg,transparent,#000000d9 62%)}
.media .nm{font-size:17px}.media .st{font-size:12px}
/* --- Старт C: стена лиц --- */
/* Две плитки в ряд, сетка занимает всю центральную часть экрана (правка владельца 10.09.2026:
   было три в ряд по 109px, лица не читались). Высоту рядов задаёт свободное место, а не aspect-ratio:
   так стена сама подстраивается под 812 и под 667, не выталкивая кнопки за экран. */
.wall{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:8px;
  margin:14px 0 0;flex:1 1 auto;min-height:0}
.wall div{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--s-border);
  background:linear-gradient(160deg,#43176e,#140425)}
/* Плашка «Online now» на каждом фото стены: правка владельца 10.09.2026 (была одна точка в углу).
   11px: этот размер уже есть в подвале, новый размер шрифта на экран не добавляется. */
.wall div .on{position:absolute;left:6px;bottom:6px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:4px 7px;border-radius:var(--r-pill);background:#000000b3;backdrop-filter:blur(6px);
  font:600 11px/1 var(--font);color:var(--ink);white-space:nowrap}
.wall div .on i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent)}
/* --- вопросы --- */
/* Скелет экрана вопроса: плашка · зона заголовка фиксированной высоты · кадр · подводка · ответы.
   Кадр стоит на одном месте и одного размера на всех шести экранах (правка владельца 11.09.2026),
   при этом занимает всю высоту, которая остаётся на самом тесном экране (s3, три ответа).
   Зона держит ровно два ряда заголовка: подводка ушла ПОД кадр, поэтому зона больше не растёт
   от длины текста, и кадру досталось ~70px, которые она занимала.
   ⛔ Высота кадра, зона и ответы делят один бюджет: меняешь одно — проверяй qshot.py на 812 и 667,
   разброс размера и позиции обязан остаться 0.0, а документ не выше вьюпорта. */
.qtext{min-height:62px;margin-top:12px;display:flex;flex-direction:column;justify-content:flex-end}
.qtext h2{margin:0}
/* Кадр отодвинут от заголовка сильнее обычного отступа: вплотную они читались одним пятном
   (правка владельца 11.09.2026). */
/* Высота кадра это ОСТАТОК экрана, а не его доля: всё остальное на экране вопроса задано в
   пикселях (шапка, плашка, зона заголовка, ответы, прогресс, подвал), поэтому доля оставляла
   на высоком телефоне пустоту, а на низком срезала кнопки (замечено владельцем 11.09.2026 на
   экране выше 812). Вычитаемое это сумма этих пикселей на самом тесном экране (s3, три ответа):
   на нём кадр упирается в кнопки, на остальных остаётся небольшой запас, зато размер один.
   ⛔ Меняешь шапку, зону, кнопки, бар или подвал — пересчитывай вычитаемое замером qshot.py
   (высота документа на s3 минус высота кадра), иначе на s3 появится прокрутка. */
/* Формат коробки один на обе версии: 802:678 (эталонный экран владельца, кадр 233×197 CSS при
   вьюпорте 393×670). Высота это остаток экрана, ширина считается от неё по формату, поэтому
   кадр показан целиком и одинаково на всех вопросах. ⛔ Ширину считает CSS, а не JS: JS-вариант
   застревал старым, когда высота менялась без события resize (панель Safari, поворот). */
.shot{margin-top:24px;aspect-ratio:auto;min-height:150px;
  height:min(calc(var(--vh) - 504px), calc((var(--vw) - 32px) / 1.1829), 379px);
  width:min(calc((var(--vh) - 504px) * 1.1829), 100%);
  margin-left:auto;margin-right:auto}
/* Русская версия: формат кадра ГОРИЗОНТАЛЬНЫЙ 802:678 и размер снят с эталонного экрана
   владельца (скрин 14.09.2026: кадр 233×197 CSS при вьюпорте 393×670, верх кадра на 181px,
   кнопки с 407px). Вычитаемое 473px даёт ровно эти 197px, ширину считает photos.js по формату.
   ⛔ Второй предел обязателен: без него на высоком экране ширина упирается в поля, кадр
   превращается в портрет и формат уезжает от эталона. */
html[lang="ru"] .shot{
  height:min(calc(var(--vh) - 473px), calc((var(--vw) - 32px) / 1.1829), 379px);
  width:min(calc((var(--vh) - 473px) * 1.1829), 100%);
  margin:18px auto 0}
/* Место под больший кадр отыграно на второстепенном: кнопки ответа ниже на 6px, зазор между ними
   на 1px, зона заголовка на 6px (русский кегль меньше, два ряда всё равно влезают). Экран с тремя
   ответами обязан помещаться целиком, это проверяется замером после каждой правки. */
html[lang="ru"] .opt{min-height:50px}
/* Зазор «кадр → ответы» на 4px меньше общего: кадр вырос до эталонных 197px, и на широком
   экране (430×745) этих четырёх пикселей не хватало, страница начинала прокручиваться. */
html[lang="ru"] .opts{gap:5px;margin-top:12px}
html[lang="ru"] .qtext{min-height:56px}
/* Зазор между ответами 6px вместо 8: на экране с тремя ответами эти 4px уходят кадру,
   а высота самой кнопки (палец) не тронута. */
.opts{gap:6px}
.qlead{margin:14px 0 0}
/* Низкий экран (667): кадру остаётся меньше, ответы ужимаются. ⛔ Блок стоит ПОСЛЕ правила .shot:
   специфичность равна, выигрывает последнее. До 11.09.2026 он лежал выше по файлу и молча не работал. */
@media (max-height:700px){
  .media{aspect-ratio:4/3}
  .opt{min-height:48px;padding:13px 16px}
  /* На 667 бюджет экрана жёстче: кадр и отступы ужимаются, размер всё равно один на всех вопросах.
     Экран с тремя ответами тут прокручивается примерно на треть кнопки, остальные помещаются. */
  .shot{margin-top:18px;
    height:min(calc(var(--vh) - 473px), calc((var(--vw) - 32px) / 1.1829), 379px);
    width:min(calc((var(--vh) - 473px) * 1.1829), 100%)}
  .qlead{margin-top:10px}
}
/* --- финал B2: кнопка внутри подписи --- */
.card .nmwrap{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px 9px 8px;display:flex;align-items:flex-end;gap:8px;background:linear-gradient(180deg,transparent,#000000e0 58%)}
.card .nmwrap .who{flex:1 1 auto;min-width:0}
.card .cta{flex:0 0 auto;height:30px;padding:0 11px;border-radius:var(--r-pill);display:grid;place-items:center;font:600 12px/1 var(--font);color:var(--cta-ink);background:linear-gradient(180deg,var(--cta-top),var(--cta-bot))}
/* --- слот витрины в сетке --- */
.grid .all{display:flex;flex-direction:column}
.grid .all .shotbox{position:relative;flex:1 1 auto;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(160deg,#1d0733,#0a0213);display:grid;place-items:center;padding:10px}
.grid .all .shotbox b{position:relative;z-index:2;font:600 12px/1.2 var(--font);text-align:center;letter-spacing:-.02em;color:var(--ink);background:#0a0213d9;padding:7px 9px;border-radius:10px;backdrop-filter:blur(6px)}
.all .cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:18px 10px 9px;background:linear-gradient(180deg,transparent,#000000e0 58%);font-size:11px;color:rgba(255,255,255,.82);display:flex;align-items:flex-end;gap:8px}
.all .cap .txt3{flex:1 1 auto;min-width:0}
.all .cap .open{flex:0 0 auto;height:30px;padding:0 12px;border-radius:var(--r-pill);display:grid;place-items:center;font:600 12px/1 var(--font);color:var(--alt-ink);background:var(--alt)}
/* --- финал D1: строка витрины --- */
.list .all{display:flex;align-items:center;gap:11px;padding:8px 12px;min-height:96px;flex:0 0 auto}
.list .all .thumb{position:relative;width:76px;height:76px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:linear-gradient(160deg,#1d0733,#0a0213)}
.list .all .txt2{flex:1 1 auto;min-width:0}
.list .all .txt2 b{display:block;font:600 15px/1.15 var(--font);letter-spacing:-.02em;color:var(--ink)}
.list .all .txt2 span{display:block;margin-top:4px;font-size:12px;color:var(--faint)}
.list .all .go{flex:0 0 auto;font:600 14px/1 var(--font);color:var(--alt-ink);background:var(--alt);padding:10px 14px;border-radius:var(--r-pill)}
.rowi .nm{font-size:16px}.rowi .st{font-size:12px} /* шесть размеров шрифта на экран, не семь */
/* --- финал D2: прямоугольный кадр --- */
.rowi.d2{padding:0;align-items:stretch;gap:0;min-height:128px;overflow:hidden}
.rowi.d2 .big{position:relative;width:96px;flex:0 0 auto;overflow:hidden;background:linear-gradient(160deg,#43176e,#140425)}
.rowi.d2 .side{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 13px}
.rowi.d2 .who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.rowi.d2 .nm{font-size:16px}
.tagline{font-size:12px;color:var(--faint)}
.list .all.d2{padding:0;align-items:stretch;gap:0;min-height:128px}
.list .all.d2 .thumb{width:96px;height:auto;border-radius:0}
.list .all.d2 .side{flex:1 1 auto;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 13px}
/* --- подбор --- */
.ring{width:54px;height:54px;margin:0 auto;border-radius:50%;border:3px solid #ffffff1a;border-top-color:var(--cta-bot);animation:spin .9s linear infinite}
@keyframes spin{to{rotate:360deg}}
.center{text-align:center}
/* --- переход --- */
.veil .tg{margin-top:16px;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:var(--r-ui);background:var(--alt);color:var(--alt-ink);font:600 15px/1 var(--font);text-decoration:none}
.veil .tg svg{width:18px;height:18px}
/* --- панель разработчика, только с ?dev=1 --- */
.rev{position:fixed;left:0;right:0;bottom:0;z-index:9;padding:8px 10px;background:#0a0213f2;border-top:1px solid #ffffff1f;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.rev button{font:600 11px/1 var(--font);color:var(--ink);background:#ffffff14;border:1px solid #ffffff1f;border-radius:var(--r-pill);padding:7px 10px;cursor:pointer}
.rev button.act{background:var(--ink);color:#0a0213}
body.dev .screen{padding-bottom:70px}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}

/* шесть размеров шрифта на экран: кнопка Say hi той же величины, что Open */
.say{font-size:14px}

/* Финал B1/B2: плитки КРУПНЫЕ, нижний ряд намеренно уходит за край примерно наполовину
   (правка владельца 14.09.2026: «фотки мелкие, лица с телом не видно; увеличим и сделаем
   небольшую прокрутку на пол фото»). ⛔ Это отменяет прежнее правило 11.09.2026 «весь финал
   в один экран без проматывания»: владелец поменял требование сам, после того как увидел,
   что плитка 176×114 не показывает ни лица, ни фигуры.
   Считано под эталонный вьюпорт 393×670: сетка начинается на 197px, формат плитки 24:25 даёт
   ряд 183px, третий ряд открывается на 87px из 183 — ровно «пол фото» и повод пролистать.
   Прокручивается вся страница, а не контейнер: на телефоне это привычнее, чем внутренний
   скролл, и подпись с бейджами остаётся под сеткой. Кит не трогаем: он общий. */
#pick.screen{height:auto;min-height:var(--vh)}
#pick .listwrap{flex:0 0 auto;min-height:0}
#pick .grid{grid-template-rows:none;grid-auto-rows:auto;
  align-content:start;overflow:visible;flex:0 0 auto;min-height:0}
#pick .grid > .card,#pick .grid > .all{aspect-ratio:24/25}
#pick .grid > .card,#pick .grid > .all{display:flex;flex-direction:column;min-height:0}
#pick .grid > .card .ph,#pick .grid > .all .shotbox{aspect-ratio:auto;flex:1 1 auto;min-height:0}
#pick .listwrap.more > .grid{-webkit-mask-image:none;mask-image:none}
#pick .listwrap.more .peek{display:none}

/* То же для списков D1/D2: шесть строк делят высоту, кадр сжимается по ряду, min-height строк
   снят (в ките он держит комфортный размер при прокрутке, а здесь прокрутки быть не должно). */
#pick .list{overflow:hidden;flex:1 1 auto;min-height:0;gap:6px}
#pick .list > .rowi,#pick .list > .all{flex:1 1 0;min-height:0;padding-top:0;padding-bottom:0}
#pick .list .rowi .av{width:auto;height:100%;aspect-ratio:1/1}
#pick .list .all .thumb{width:auto;height:100%;aspect-ratio:1/1}
#pick .list .rowi.d2,#pick .list .all.d2{min-height:0}
#pick .list .rowi.d2 .big,#pick .list .all.d2 .thumb{width:auto;height:100%;aspect-ratio:96/126}
#pick .listwrap.more > .list{-webkit-mask-image:none;mask-image:none}

/* D2 в один экран: строка стала низкой, поэтому текстовый блок не должен вылезать за неё.
   Кегли и отступы уменьшены, содержимое строки обрезается, а на коротких экранах (667)
   строка-подпись убирается совсем: имя и статус важнее. */
#pick .list .rowi.d2 .side{padding:6px 10px 6px 11px;overflow:hidden}
#pick .list .rowi.d2 .who{gap:2px;overflow:hidden}
#pick .list .rowi.d2 .nm{font-size:14px}
#pick .list .rowi.d2 .tagline{font-size:10px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pick .list .all.d2 .txt2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-height:720px){
  #pick .list .rowi.d2 .tagline{display:none}
}

/* Первый экран B тоже держится в одном экране (замер 11.09.2026: было 26px скролла на 812 и
   21px на 667 — стопка выдавливала страницу). Работает потолок высоты кадра: пропорция 3/4
   сохраняется, пока места хватает, дальше кадр упирается в потолок, а отступы стопки поджаты.
   ⛔ Не через `height:100%` у кадра: высота стопки сама зависит от кадра, и он схлопывается в
   ноль (наступили в этот же день, видимой оставалась только подложка слоя).
   Углы веера и точка опоры не тронуты: сдвиг слоёв считается от высоты карточки и при меньшей
   высоте только уменьшается. */
#s1 .stack{margin-top:8px;margin-bottom:12px}
#s1 .stack .media{max-height:calc(var(--vh) - 496px)}

/* Кнопка-цель светится: правило владельца 14.08.2026. Имя класса и кейфрейма именно `glow`,
   по нему сдачу проверяет `audit_landings.py`. Светится то, что ведёт в ТМА: «Say hi» на карточке
   и «Open» у витрины; шаги квиза не трогаем, там своя пульсация утвердительного ответа. */
.glow{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cta-top) 0%, transparent)}
  50%{box-shadow:0 0 18px 3px color-mix(in srgb, var(--cta-top) 55%, transparent)}
}
@media (prefers-reduced-motion:reduce){ .glow{animation:none} }

/* Кнопка на карточке финала уже и мельче: она не должна спорить с именем и закрывать лицо
   (правка владельца 14.09.2026 по русскому ленду). Высота 26px это всё ещё уверенный тап,
   потому что нажимается вся карточка, а не только сама кнопка. */
html[lang="ru"] #pick .card .cta{height:26px;padding:0 9px;font-size:11px}
html[lang="ru"] #pick .all .cap .open{height:26px;padding:0 10px;font-size:11px}
/* Подпись под именем короткая («онлайн»), поэтому строка статуса не переносится на узком экране. */
#pick .card .st{white-space:nowrap}

/* Русский кегль заголовка: строки длиннее английских, и при 2rem заголовок цены занимал три ряда
   на 375px. Зона заголовка рассчитана на два, поэтому кадр съезжал вниз именно на этом экране. */
html[lang="ru"] h2{font-size:1.6rem}
html[lang="ru"] h1{font-size:1.85rem}

/* Финал adult: кадр модели показываем целиком, а не обрезанным по центру. У владельца в наборе
   есть и горизонтальные кадры, и на квадратной плитке `cover` вырезал из них узкую полосу
   (правка владельца 14.09.2026: «фотки поменьше, чтобы модели больше влезало в кадр»).
   ⛔ Только для adult-набора: в safe кадры портретные, там `cover` и так показывает модель. */
/* ⛔ `!important` здесь обязателен: `object-fit` ставит инлайном setPhoto из набора, а инлайн
   бьёт таблицу стилей. Без него правило молча не применяется (проверено computed-стилем). */
body.pack-mainadult #pick .card .ph img{object-fit:contain !important;
  background:linear-gradient(160deg,#2a1046,#0c0318)}

/* Кнопка «Say hi» на плитке: уже и мельче, иначе на маленьком кадре она перетягивает внимание
   с фотографии (правка владельца 14.09.2026). Палец всё ещё попадает: 26px при ширине 54. */
#pick .card .cta{height:26px;padding:0 8px;font-size:11px;letter-spacing:-.01em}
#pick .all .cap .open{height:26px;padding:0 9px;font-size:11px}

/* Кадр вопроса в русской версии: рамка обнимает саму фотографию, ширину ставит скрипт по её
   пропорциям. Фон коробки убираем, иначе по бокам узкого кадра видна пустая плашка. */
html[lang="ru"] .shot{background:none;border:none}
html[lang="ru"] .shot img{border-radius:var(--r-media);border:1px solid var(--s-border)}


/* ─── ПК: крупнее только КАДР, выравнивание как на телефоне ────────────────────────────
   Правка владельца 15.09.2026, третий заход. Что уже забраковано и почему:
     · шире колонка с крупными кеглями и кнопками — «ПК перестал быть той же страницей»;
     · кадр по центру — на телефоне он прижат влево, на ПК обязан вести себя так же;
     · общий zoom всей страницы — кадр от него становится МЕНЬШЕ: он считается как остаток
       высоты, а масштаб съедает эту высоту шапкой, кнопками и подвалом (замер: 340px против
       371px на 1440×900).
   Работает только одно: кадру разрешено выходить за ширину колонки (потолок 600px вместо 448),
   всё остальное на ПК не меняется. ⛔ Порог по ШИРИНЕ 900px: мобильная версия сюда не попадает. */
@media (min-width:900px){
  .shot{max-width:none;
        height:min(calc(var(--vh) - 504px), 507px);
        width:min(calc((var(--vh) - 504px) * 1.1829), 600px)}
  html[lang="ru"] .shot{height:min(calc(var(--vh) - 473px), 507px);
        width:min(calc((var(--vh) - 473px) * 1.1829), 600px)}
}

/* ─── ЭКРАНЫ ВОПРОСОВ: ПЕРЕПИСКА ───────────────────────────────────────────────────────
   Утверждено владельцем 15.09.2026 после сравнения пяти раскладок на витрине: экран вопроса
   выглядит как чат с ней (аватар, «печатает…», вопрос пузырём, кадр вложением, ответы
   быстрыми репликами). Раскладка одна, переключателя раскладок больше нет: остальные четыре
   варианта удалены вместе с ним, историю смотреть в git-less архиве витрины.
   Класс `chat` вешает flow.js на <html> всегда: он держит специфичность правил выше
   языковых (`html[lang="ru"] …`), это не переключатель. */
html.chat .pill{display:none}
html.chat .qchat{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
html.chat .qav{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,#43176e,#140425)}
html.chat .qmeta .nm{display:flex;align-items:center;gap:5px;font:600 15px/1.15 var(--font);color:var(--ink)}
html.chat .qmeta .st{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--faint)}
html.chat .qtext{align-self:flex-start;max-width:92%;min-height:0;margin:0;padding:10px 13px;
  background:#ffffff14;border:1px solid var(--s-border);border-radius:18px 18px 18px 6px}
html.chat h2{font-size:1.28rem}
/* Кадр-вложение занимает ВСЮ свободную высоту экрана, а не фиксированные 224px: место под него
   отыграно у полосы прогресса (её заменил счётчик строкой в шапке чата) и у шапки страницы.
   ⛔ Ширина считается от высоты по формату кадра и упирается в ширину контейнера: на планшете
   фиксированный пиксельный размер выглядел маркой (замечание владельца 14.09.2026). */
html.chat .shot{align-self:flex-start;aspect-ratio:auto;margin:8px 0 0;border-radius:16px 16px 16px 6px;
  overflow:hidden;min-height:0;
  height:min(calc(var(--vh) - 431px), calc((var(--vw) - 32px) / 1.1829), 379px);   /* ⛔ не проценты: высота родителя-флекса неопределённая, min() схлопывался в 0 */
  width:min(calc((var(--vh) - 431px) * 1.1829), 100%)}
html.chat .bar{display:none}                  /* прогресс переехал в шапку чата строкой */
html.chat .top{height:52px}
html.chat .qstep{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap}
/* Сообщение и кадр ждут, пока она «печатает», и приходят по очереди. ⛔ Скрыты до класса .in:
   страница целиком рисуется скриптом, так что без JS тут и так ничего нет. */
html.chat .qtext,html.chat .shot,html.chat .qlead{opacity:0}
html.chat .qtext.in,html.chat .shot.in,html.chat .qlead.in{animation:msgin .26s var(--ease) both}
/* Подводка это вторая строка того же сообщения, а не отдельный пузырь: так кадр одного
   размера влезает и на экраны убеждения. */
html.chat .qtext .qlead{margin:6px 0 0;padding:0;border:0;background:none;font-size:13px;line-height:1.4;
  color:rgba(255,255,255,.86);max-width:none}
@keyframes msgin{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
html.chat .opt{background:transparent;border:1px solid #ffb44d80;color:var(--ink);box-shadow:none;min-height:46px}
html.chat .opt.go,html.chat .opt:first-child{background:linear-gradient(180deg,var(--cta-top),var(--cta-bot));color:var(--cta-ink)}


/* при выключенной анимации сообщение обязано быть видно сразу, иначе экран останется пустым */
@media (prefers-reduced-motion:reduce){html.chat .qtext,html.chat .shot,html.chat .qlead{opacity:1;animation:none}}

/* ПК для переписки: растёт только вложение, выравнивание влево как на телефоне. */
@media (min-width:900px){
  html.chat .shot{max-width:none;
        height:min(calc(var(--vh) - 431px), 507px);
        width:min(calc((var(--vh) - 431px) * 1.1829), 600px)}
}