/* ============================================================
   Вход Хрисы на первом экране главной — макет C (задачи 1807, 1815, 1823).

   КРУГ 1823 переписал раскладку по шести правкам владельца от 07.09:
   первый экран короче (поле целиком в кадре без прокрутки), чат живёт
   в коробке со своей прокруткой, функции под ответом как в чате
   Anthropic, поле ввода растёт до шести строк, подсказок пять, пульт
   «Aa» и плавающий виджет с главной сняты.

   ЕДИНИЦА ВЫСОТЫ ЗДЕСЬ — dvh, А НЕ vh. На телефоне `100vh` — это высота
   экрана БЕЗ учёта нижней панели Safari: коробка, посчитанная в vh,
   уезжает под панель ровно на её высоту, и кнопки под ней прячутся —
   это и видел владелец на кадрах 07.09 16:39. `dvh` меряет ВИДИМУЮ
   область и пересчитывается сам, когда панель прячется и появляется.
   Запасное значение в vh оставлено для браузеров без dvh (@supports).
   ============================================================ */

/* ---------- 1. Сцена ---------- */
.hero--vhod {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg, #0B0D10) 0,
              var(--scene-bg) clamp(40px, 6vw, 90px), var(--scene-bg) 100%);
}
/* ПЕРВЫЙ ЭКРАН НАЧИНАЕТСЯ СВЕРХУ, А НЕ ПО ЦЕНТРУ (задача 1823, п.1).
   ТОЧКА, КОТОРУЮ ЭТО ЧИНИТ. `style2.css:232` от 980 px ставит хиро
   `display:flex; align-items:center; min-height: calc(100svh - --hdr-h)` —
   первый экран равен экрану, а содержимое ВИСИТ В ЕГО СЕРЕДИНЕ. На боевой
   главной 1440×900 это давало 164 px пустоты сверху и 150 снизу, и поле
   уезжало на 59 % высоты экрана при планке владельца в 45 %. Уменьшать
   шрифты дальше было бы лечением не той болезни: место съедало выравнивание,
   а не буквы.
   Высоту секции НЕ трогаем: первый экран обязан оставаться ровно одним
   экраном, иначе второй живой блок вылезает в кадр половиной. Освободившееся
   место внизу забирает лента чата, когда разговор начался (vhod.js,
   `--vhod-lenta-max`), а до разговора там небо — та самая галактика.
   Вес селектора 0-3-0 против 0-1-0 у `.hero`: спорить о порядке подключения
   таблиц не нужно, правило выигрывает по весу. */
.hero.hero--scene.hero--vhod {
  padding-bottom: clamp(10px, 1.6vw, 24px);
}
@media (min-width: 980px) {
  .hero.hero--scene.hero--vhod {
    align-items: flex-start;
    padding-top: clamp(16px, 2.4vh, 32px);
    padding-bottom: clamp(12px, 1.6vh, 24px);
  }
}
/* ПРАВИЛА `hero--dialog` СНЯТЫ (задача 1832). Круг 1823 давал секции первого
   экрана высоту в экран, пока идёт разговор, и не давал до разговора: на
   одном экране стояли и сцена, и чат, и приходилось выбирать между пустотой
   под подсказками и обрезанным разговором. С тремя экранами выбора нет:
   галактика живёт на своём экране, чат — на своём и всегда во весь экран
   (§17.2). Класс `hero--dialog` больше не ставится ничем; правила, которые
   его ждали, удалены здесь, а не оставлены мёртвыми. */
/* ТО ЖЕ САМОЕ, НО ВЕСОМ ПОД ГЛАВНУЮ (задача 1815, П6). На стенде правила выше
   довольно: там подключены только scene/style2/metall/komfort. На боевой
   главной рядом живёт `fon-epik.css`, и он красит первый экран ночной
   ФОТОГРАФИЕЙ правилами вида `[data-theme="dark"] .hero--scene` — вес 0,2,0
   против 0,1,0 у строки выше. Без этого блока галактика рисовалась бы поверх
   фотографии: два фона разом, и ни один не тот, что владелец принял на стенде.
   Поэтому здесь тот же вес и тот же смысл — ровное небо под звёздами. */
[data-theme="dark"] .hero--vhod,
[data-theme="light"] .hero--vhod,
:root:not([data-theme]) .hero--vhod {
  background-color: var(--scene-bg);
  background-image: linear-gradient(180deg, var(--bg, #0B0D10) 0,
                    var(--scene-bg) clamp(40px, 6vw, 90px), var(--scene-bg) 100%);
}
/* Полог читаемости `fon-epik` (.hero--scene::after — тёмная плита на нижние
   62 %) придуман для фотографии. Над ровным небом он только гасит звёзды
   внизу экрана, где как раз стоит поле ввода. Гасим его вместе с фотографией:
   поднимать читаемость текста здесь нечему — фон и так ровный. */
.hero--vhod::after { background: none; }
#galaktika {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: auto; touch-action: pan-y;
}
/* без WebGL и при reduce-motion — тихое небо картинкой не рисуем: пусто не
   бывает, есть мягкая глубина градиентом */
.hero--vhod::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 30%,
              rgba(212,175,55,.10) 0, rgba(212,175,55,0) 70%);
}
[data-theme="light"] .hero--vhod::before {
  background: radial-gradient(ellipse 60% 40% at 50% 30%,
              rgba(138,109,11,.12) 0, rgba(138,109,11,0) 70%);
}
/* без своего z-index: контекст наложения у .scene-in не создаётся, и
   mix-blend-mode знака смешивается с галактикой позади, а не с пустотой
   (иначе вокруг «А» виден чёрный прямоугольник картинки) */
.hero--vhod .scene-in { position: relative; z-index: auto; }

/* ЗНАК НИЖЕ НА ТРЕТЬ (задача 1823, п.1: «знак и галактика ниже по высоте
   примерно на треть»). Замер боевой главной 07.09: 120 px на ноутбуке
   1440×900 и 110 px на телефоне 390×844. Здесь 84 и 74 — минус 30 и минус
   33 процента. Высота задаётся ЯВНО, а не через ширину: считать первый экран
   надо по вертикали, а ширина при пропорции 1080×1446 отдаёт высоту с
   множителем 1,34 и всякий раз врёт на треть. */
.hero--vhod .scene-mark img { width: auto; height: min(11vh, 84px); }
/* БЛОК «300+» НА ПЕРВОМ ЭКРАНЕ ВХОДА НЕ ПОКАЗЫВАЕМ (задача 1815, П6).
   На главной рядом со знаком живёт `.zhar` — огненное «300+ моделей ИИ в
   строю». Со знаком уменьшенного размера он не соседствует, а перекрывает
   его. Вторая причина важнее вида: прямо под ним стоит ЖИВАЯ строка «В парке
   427 моделей · за сутки N». Две цифры об одном и том же в двадцати пикселях
   друг от друга — это не «богато», это разные ответы на один вопрос: «300+»
   округлено и вписано в разметку руками, 427 приходит из Книги парка.
   Узел ПРЯЧЕМ, А НЕ УДАЛЯЕМ: `komfort.js` и `kapsuly.js` ищут его
   `querySelector('.hero--scene .zhar')` и вешают на него подсказку. */
.hero--vhod .zhar { display: none; }
/* КОРОБКА У ЗНАКА — ПОЧИНЕНА В САМОМ КАДРЕ, А НЕ ЗАМАСКИРОВАНА (задача 1861,
   п.2).
   ЧТО СТОЯЛО ЗДЕСЬ. Прямоугольник картинки прятали ДВА приёма сразу:
   `mix-blend-mode` (screen в тёмной теме, multiply в светлой) и градиентная
   маска по краям. Оба — обход того, что у `hero-a-*.webp` не было
   альфа-канала вовсе (`ffprobe`: `pix_fmt=yuv420p`, протокол 01 круга): фон
   кадра залит чёрным в тёмной редакции и белым в светлой.
   ПОЧЕМУ ОБХОД НЕ ДЕРЖАЛ. `mix-blend-mode` вместе с `mask-image` и `filter`
   на одном узле — известное слепое пятно мобильных браузеров; у владельца на
   телефоне 08.09 коробка была видна в обеих темах, а в headless-Chromium
   цеха её нет. Пока починка держится на трёх свойствах, работающих только
   вместе, «у меня не воспроизводится» — не ответ.
   КАК СТАЛО. У кадров теперь настоящая альфа (`tools/znak_alfa.py`,
   `pix_fmt=yuva420p`), и прятать нечего: ни блендов, ни маски. Заодно ушла
   и цена маски — она гасила края буквы и отражение на 13 % ширины.
   Заметим цену честно: кадр с альфой тяжелее (см. отчёт круга). */

/* Гасим бленды, назначенные знаку СНАРУЖИ (fon-epik.css §17, строки про
   `.hero--scene .scene-mark img`): вход — тоже `.hero--scene`, и молча
   унаследованный `screen` поверх честной альфы высветлил бы тёмные грани
   хрома, то есть вернул бы ровно ту беду, от которой круг уходит. Правило
   адресное — на других страницах сцена живёт по-прежнему. */
.hero--vhod .scene-mark img,
[data-theme="dark"] .hero--vhod .scene-mark img,
[data-theme="light"] .hero--vhod .scene-mark img,
:root:not([data-theme]) .hero--vhod .scene-mark img { mix-blend-mode: normal; }
/* ХВОСТ ОТРАЖЕНИЯ — единственное, что доходит до края кадра. Замер на чужом
   фоне (`tools/korobka_zamer.py`) даёт по нижней кромке 8 тонов из 255: это
   не коробка, это само отражение, обрезанное границей картинки. Растворяем
   ТОЛЬКО низ и только последние 6 % высоты. Прежняя маска резала ещё и бока
   по 13 % — то есть гасила края самой буквы; её не возвращаем. */
.hero--vhod .scene-mark img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%);
}

/* Знак чуть выше середины экрана на телефоне (задача 1861, п.1). Сдвиг —
   `transform`, а не отступ: галактика берёт центр спирали из
   `getBoundingClientRect()`, который трансформацию учитывает, и воздух у
   знака едет вместе со знаком сам. Отступ пришлось бы повторять в движке. */
@media (max-width: 760px) {
  .hero--vhod .scene-znak { transform: translateY(-6.5vh); }
}
/* И ГЛАВНОЕ — гасим виньетку `.scene-mark::after` (scene.css §8). Она красит
   края знака НЕПРОЗРАЧНЫМ `--scene-bg` (#000 в тёмной, #F0E9E0 в светлой):
   на ровном фоне страницы так прямоугольник картинки растворяется, а поверх
   галактики та же заливка и есть «рамка вокруг буквы» — прямоугольник
   другого чёрного, который увидел владелец 07.09.
   Замер на ровном сером фоне (задача 1815, tools/ramka_zamer.py): с виньеткой
   края 66–89 тонов, без неё 0,00–0,04. Маска выше пришла сюда из fon-epik §17,
   а эта строка — её пара из §16, потерянная при переносе. */
.hero--vhod .scene-mark::after { background: none; }

/* ---------- 2. Шапка ---------- */
.hdr--tiho .hdr-nav a { opacity: .78; }
.hdr--tiho .hdr-nav a:hover { opacity: 1; }
@media (max-width: 860px) {
  .hdr--tiho .hdr-nav { display: none; }
  .hdr--tiho .btn--sm { display: none; }
}
/* ШАПКА ТЕЛЕФОНА ЛЕГЧЕ (задача 1823, п.10): язык и тема уезжают в меню «≡»,
   их копии в шторку ставит vhod.js. Правило живёт в ЭТОЙ таблице, а таблица
   подключается только главной и стенду — на остальных страницах витрины
   шапка не меняется ни на пиксель.
   Пульта «Aa» здесь нет вовсе: `komfort.js` главной больше не грузится и
   кнопку в шапку не ставит (build.py, ручка `bez_komforta`).
   Вес 0-3-0 не для красоты: `kapsuly.css` §4 даёт капсуле языка собственное
   правило `.hdr-lang.kap-lang { display: inline-flex }` (0-2-0) и стоит в
   голове ПОЗЖЕ этой таблицы — при равном весе побеждало бы оно, и «RU ▾»
   осталось бы в шапке (поймано на кадре пробы, а не вычислено). */
@media (max-width: 760px) {
  .hdr .hdr-tools .hdr-lang { display: none; }
}
/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ — И В ШАПКЕ ТЕЛЕФОНА ТОЖЕ (задача 1843, п.4).
   Слово владельца 08.09: «мобильная версия — нет переключателя день/ночь».
   Проба шапки 08.09 (protokoly/03) показала, что в меню «≡» тема ЕСТЬ и
   работает («было dark, стало light»), а в шапке её нет — то есть гость не
   находил кнопку, не открывая меню. Возвращаем её на видное место рядом с
   «Кабинет», а копию в шторке НЕ снимаем: там рядом с ней живут языки, и
   `sverit()` в vhod.js держит блок, пока скрыт хотя бы один из двух.
   РАЗМЕР — ПОЛНЫЙ, КАК У БУРГЕРА. Первая редакция сузила кнопку до 36×36
   «чтобы влезла» — и матрица доступности честно покрасила 80 сочетаний из 244
   правилом «палец 44 px» (protokoly/27 против чистых 0 у дерева #1832).
   Проверено замером: «Кабинет» (64) + тема (44) + «≡» (44) с зазорами 6 px
   встают в 390 px рядом со знаком. Ужимать орган управления ради композиции
   мы не имеем права — это тот самый размен, на котором круг и покраснел. */
@media (max-width: 760px) {
  .hdr .hdr-tools [data-theme-toggle] { display: inline-grid; }
}
/* «Кабинет» на телефоне виден (правило витрины ниже 900 px его прячет, но
   главная показывает — вход вернувшегося гостя): тема встаёт рядом с ним. */
@media (max-width: 760px) {
  .hdr .hdr-tools { gap: 6px; }
}
/* ШАПКА ГЛАВНОЙ — НЕПРОЗРАЧНАЯ (задача 1843, п.4).
   ЧТО ЭТО ЧИНИТ. `shapka.css` даёт шапке 94 % непрозрачности с размытием
   фона. На всех страницах витрины под шапкой в этот момент пусто, а на
   главной там стоит `.ekran-niz` первого экрана: когда гость доезжает до
   второго экрана, строка «источник: Книга парка · …» оказывается ровно под
   шапкой и просвечивает сквозь неё серой полосой — в светлой теме её видно
   отчётливо (снимок владельца 08.09 05:54). Строка обязана жить только внизу
   первого экрана, поэтому шапке главной возвращаем сплошной фон.
   Адресовано ТОЛЬКО странице с экраном-галактикой: на остальных 208
   страницах размытие остаётся как было. */
html:has(.ekran--galaktika) .hdr {
  background: var(--bg);
  backdrop-filter: none;
}
/* Копии в шторке — своим блоком, чтобы их было видно первыми при открытии. */
.drw-shapka-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.drw-shapka-tools .drw-lang { font-size: 14px; color: var(--text-2); }
.drw-shapka-tools .drw-lang a { color: var(--text-2); }
.drw-shapka-tools .drw-lang a:hover { color: var(--accent-tekst); }

/* ---------- 3. Живая строка у знака ---------- */
.stroy {
  margin-top: clamp(6px, 1vw, 10px);
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.4;
  color: var(--text-2);
}
.stroy b { color: var(--text); font-weight: 600; }
/* Ровно ОДИН блочный `<small>` — источник и время. Подпись пульса («сейчас
   N задач») идёт в ту же строку обычным `<span>`: до круга 1823 она была
   вторым `<small>`, и на 390 px цифры парка занимали пять строк. */
.stroy small { display: block; font-size: 11.5px; opacity: .75; margin-top: 2px; }

/* ---------- 4. Строфа: кичка, заголовок, слоган ---------- */
/* Строфа первого экрана (кичка, заголовок, слоган рядом) снята кругом 1882:
   с круга 1832 заголовок живёт на втором экране (§17, .ekran--chat .vhod-zag),
   и эти правила там целиком перекрывались. Вес — в §18. */

/* ---------- 5. Коробка чата ---------- */
/* КОРОБКА, А НЕ ПРОСТЫНЯ (п.2). До круга ответы падали под подсказками и
   растили страницу вниз. Теперь разговор живёт внутри коробки со своей
   прокруткой, поле прижато к низу коробки, а высота документа от числа
   сообщений не зависит вовсе — это и меряет П2.

   Высоту ленты считает vhod.js и кладёт в `--vhod-lenta-max`: она равна
   расстоянию от верха ленты до низа ВИДИМОЙ области минус высота поля. В CSS
   такую величину не выразить — верх коробки зависит от того, во сколько строк
   встал заголовок. Запасное значение (46dvh) работает, пока скрипт не
   посчитал, и на случай, если он не отработал вовсе. */
.vhod-blok {
  width: min(94vw, 720px);
  margin: clamp(12px, 2vw, 22px) auto 0;
  display: flex; flex-direction: column; text-align: left;
}
.vhod-lenta-obertka { position: relative; display: none; min-height: 0; }
.vhod-blok--dialog .vhod-lenta-obertka { display: block; }
/* ЖЁЛОБ ПОД ПОЛОСУ — ПОСТОЯННЫЙ (задача 1881, п.2). Слово владельца 08.09:
   «скролл закрывает текст, и сбоку белеет поле». Полоса прокрутки лежала
   поверх последних букв, а при наведении браузер красил её дорожку в свой
   белый. Теперь справа у ленты всегда 18 px воздуха (`padding-right`) — текст
   до полосы не дотягивается, и `scrollbar-gutter: stable` держит это место
   и тогда, когда прокручивать нечего. Полоса 4 px, золотая, полупрозрачная;
   в покое невидима — проявляется на прокрутке (класс `--katit` ставит
   vhod.js и снимает через секунду) и при наведении; дорожка прозрачна всегда,
   белого поля нет ни в одной теме. */
.vhod-lenta {
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: var(--vhod-lenta-max, 46vh);
  padding: 0 18px calc(var(--vhod-pole-h, 44px) + 16px) 2px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
  scroll-snap-type: y proximity;
  transition: scrollbar-color .4s ease;
}
/* СНАП МОЛЧИТ, ПОКА ГОСТЬ ПРИКОЛОТ К СВОЕЙ РЕПЛИКЕ (задача 1939, п.4).
   Класс вешает `kVerhu` на время ответа и снимает `kNizu`, когда лента снова
   прилипла к низу. Зачем: у хвоста ленты есть точка снапа «конец», и пока
   ответ дорастает, браузер уводит ленту к ней — реплика гостя уезжает под
   шапку уже ПОСЛЕ того, как встала на место (замер боя 10.09: 79 px → −54 px
   за 0,3 с, без единой нашей строки прокрутки между ними). */
.vhod-lenta--bez-snapa { scroll-snap-type: none; }
@supports (height: 100dvh) {
  .vhod-lenta { max-height: var(--vhod-lenta-max, 46dvh); }
}
.vhod-lenta--katit, .vhod-lenta:hover {
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.vhod-lenta::-webkit-scrollbar { width: 4px; background: transparent; }
.vhod-lenta::-webkit-scrollbar-track { background: transparent; }
.vhod-lenta::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.vhod-lenta--katit::-webkit-scrollbar-thumb,
.vhod-lenta:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.vhod-lenta::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Звёздная нить встала на место полосы (vhod-nit.js, п.3) — обычная полоса
   прячется, жёлоб остаётся ей. */
.vhod-lenta--nit { scrollbar-width: none; }
.vhod-lenta--nit::-webkit-scrollbar { display: none; }
/* ПРИЛИПАНИЕ К РЕПЛИКАМ (п.5, И2): прокрутка колёсиком и пальцем
   останавливается на границе сообщения, а не посреди строки. `proximity`, а
   не `mandatory`: длинный ответ выше экрана иначе нельзя было бы дочитать. */
/* ОТСТУП ПРОКРУТКИ РАВЕН ПОЛОСЕ, ЗАКРЫТОЙ ЛИПКОЙ ШАПКОЙ (задача 1939, п.4).
   Полосу считает vhod.js (`podShapkoy`) по прямоугольникам и кладёт сюда
   переменной `--vhod-pod-shapkoy`: без неё точка прилипания реплики стоит на
   6 px от верха ленты, а верх ленты после своей прокрутки гостя уезжает под
   шапку — и снап возвращал реплику ровно в невидимую полосу. Шапка не липкая
   или страница на якоре — переменная 0 px, и правило то же, что было. */
.vhod-msg {
  scroll-snap-align: start;
  scroll-margin-top: calc(6px + var(--vhod-pod-shapkoy, 0px));
}
/* КНОПКА «ВНИЗ» — МАЛЕНЬКАЯ СВЕТЯЩАЯСЯ СТРЕЛКА (п.6). Таблетка «↓ вниз»
   ушла: круглая стрелка 36 px над последними строками, видна только когда
   гость не внизу (vhod.js следит за прокруткой), пульсирует золотом при новом
   сообщении (`--puls`), пока гость не спустится. */
.vhod-vniz {
  position: absolute; left: 50%; translate: -50% 0; bottom: 10px; z-index: 3;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent),
              0 4px 14px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}
.vhod-vniz svg { width: 16px; height: 16px; display: block; }
.vhod-vniz[hidden] { display: none; }
.vhod-vniz:hover { border-color: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); }
.vhod-vniz--puls { animation: vhod-vniz-puls 1.2s ease-in-out infinite; }
@keyframes vhod-vniz-puls {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 85%, transparent); transform: scale(1.1); }
}
/* ЗВЁЗДНАЯ НИТЬ (п.3, И1 ⭐; п.4, И3). Тонкая золотая нить справа в жёлобе
   ленты; по ней ходит звезда с хвостом кометы — она же ползунок: тянется
   мышью и пальцем. Точки — места реплик; нить ниже звезды залита золотом,
   выше — тусклая (прочитанное). Всё рисует vhod-nit.js на холсте; здесь —
   только место и слои. На телефоне нить тоньше, звезда без хвоста (флаг
   `data-tonko`). */
.vhod-nit {
  position: absolute; top: 4px; right: 3px; bottom: 4px; width: 14px; z-index: 4;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.vhod-nit--tyanut { cursor: grabbing; }
.vhod-nit canvas { width: 100%; height: 100%; display: block; }
.vhod-nit-podskazka {
  position: absolute; right: 18px; transform: translateY(-50%);
  font: 11px var(--font); color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px; padding: 2px 7px; pointer-events: none; opacity: 0;
  transition: opacity .15s ease;
}
.vhod-nit-podskazka--vidna { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vhod-vniz--puls { animation: none; }
}

/* ---------- 6. Поле ---------- */
.vhod { text-align: left; }
.vhod-forma {
  display: flex; gap: 8px; align-items: flex-end;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 6px 8px 6px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
[data-theme="light"] .vhod-forma { box-shadow: 0 8px 26px rgba(20,20,20,.12); }
.vhod-forma:focus-within { border-color: var(--accent); }
.vhod-forma textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent;
  font: 16px/1.45 var(--font); color: var(--text);
  /* ОДНА СТРОКА В ПОКОЕ, ШЕСТЬ В ПОТОЛКЕ (п.4). Подсказка стала короткой
     («Опишите задачу или введите ИНН») и в одну строку помещается и на 1440,
     и на 390 — прежние две строки высоты больше не нужны, и первый экран
     стал на 20 px короче. Потолок 160 px замерен, а не выведен из формулы:
     на 1440 шесть строк дают scrollHeight 159 px (16 px × 1,45 = 23,2 на
     строку плюс 20 отступов), и прежние «примерно 152» обрезали шестую
     строку — проба поля это и показала. Высоту в этих границах ведёт
     скрипт по содержимому; то же число стоит в vhod.js. */
  min-height: 44px; max-height: 160px; padding: 10px 0;
}
.vhod-forma textarea::placeholder { color: var(--text-2); }
.vhod-knopki { display: flex; gap: 4px; align-items: center; }
/* ── ПАЛЕЦ 44 px И КОНТРАСТ 4,5:1 (задача 1815) ────────────────────────────
   Матрица состояний витрины (deploy/matrica) остановила ворота на этих же
   элементах, когда они приехали с закрытого стенда на боевую главную:
   иконки были 42×42 при норме 44, подсказки — 25 в высоту, контраст кнопки
   «Спросить» 3,25 при норме 4,5. 44 px — это размер подушечки пальца, а
   4,5:1 — порог читаемости мелкого текста. */
.vhod-ikonka {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.vhod-ikonka:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
/* zadacha 2045, p.7 */
.vhod-ikonka[aria-disabled="true"] { opacity: .45; cursor: default; }
.vhod-ikonka[aria-disabled="true"]:hover { background: transparent; }
/* Микрофон в записи — красный и пульсирует. «Вслух» включён — золотой и
   стоит спокойно: он не пишет и не тратит время гостя, он лишь помечает,
   что следующий ответ прозвучит. */
#vhod-mikro[aria-pressed="true"] {
  color: #fff; background: #C2410C; border-color: #C2410C;
  animation: vhod-puls 1.2s infinite;
}
#vhod-vsluh[aria-pressed="true"] {
  color: #17130A; background: var(--accent); border-color: var(--accent);
}
@keyframes vhod-puls { 0%,100% { box-shadow: 0 0 0 0 rgba(194,65,12,.5);} 50% { box-shadow: 0 0 0 8px rgba(194,65,12,0);} }
.vhod-otpravit {
  height: 44px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 15px var(--font); background: var(--accent);
  /* ЧЕРНИЛА ЗДЕСЬ СВОИ, А НЕ `--accent-ink` (задача 1815). В тёмной теме
     токен витрины равен белому (style2.css:12), и белый по золоту #B8860B даёт
     3,25:1 при норме 4,5. Наша кнопка золотая В ПОКОЕ — значит и чернила ей
     нужны тёмные: #17130A по золоту даёт 6,45:1. */
  color: #17130A;
  white-space: nowrap;
}
.vhod-otpravit:disabled { opacity: .5; cursor: default; }
/* Кнопка «стоп» (п.4): пока Хриса печатает, та же кнопка гасит ответ. Цвет
   меняем, а место — нет: прыгающая кнопка под пальцем хуже, чем ясная. */
.vhod-otpravit.vhod-stop {
  background: #C2410C; color: #fff;
}
.vhod-faily { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vhod-fail-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 3px 6px 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.vhod-fail-chip.otkaz { border-color: #C2410C; color: #C2410C; }
/* Крестик у прикреплённого файла (п.4): у гостя должен быть способ передумать
   до отправки, иначе единственный выход — перезагрузить страницу. */
/* Тап-цель крестика — 44 px, а КОРОБКА метки от этого не растёт: цель
   вынесена отрицательными полями наружу. Иначе выбор был бы между пальцем и
   метками файлов в полэкрана. */
.vhod-fail-snyat {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; border-radius: 50%;
  width: 44px; height: 44px; padding: 0;
  margin: -11px -12px -11px -6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vhod-fail-snyat:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* ---------- 7. Подсказки ---------- */
.vhod-podskazki {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; padding: 0;
  list-style: none;
}
.vhod-podskazki button {
  font: 13px var(--font); color: var(--text-2); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px;
  cursor: pointer; min-height: 44px; white-space: nowrap;
}
.vhod-podskazki button:hover { color: var(--text); border-color: var(--accent); }
/* Когда разговор начался, подсказки уходят: их место занял сам разговор. */
.vhod-blok--dialog .vhod-podskazki { display: none; }

/* ---------- 8. Плашка «отвечает ИИ» — одна строка с раскрытием ---------- */
.vhod-melko { font-size: 12px; color: var(--text-2); margin-top: 8px; }
.vhod-melko summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  list-style: none; padding: 4px 0; min-height: 44px;
}
.vhod-melko summary::-webkit-details-marker { display: none; }
.vhod-melko summary::after {
  content: "▾"; margin-left: 2px; opacity: .7; transition: rotate .15s ease;
}
.vhod-melko[open] summary::after { rotate: 180deg; }
.vhod-melko p { margin: 4px 0 0; }
.vhod-melko a { color: inherit; }
.vhod-tochka {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.vhod-bez-js { font-size: 12px; color: var(--text-2); margin-top: 8px; }

/* ---------- 9. Диалог документом ---------- */
.vhod-dialog { text-align: left; }
.vhod-dialog:empty { display: none; }
.vhod-msg { margin: 0 0 14px; }
.vhod-msg--gost {
  margin-left: auto; width: fit-content; max-width: 86%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text); border-radius: 16px 16px 4px 16px; padding: 10px 14px;
  font-size: 15px; white-space: pre-wrap;
}
/* «Править и отправить заново» (п.3) — под своей репликой, справа, мелко. */
.vhod-gost-dely {
  display: flex; justify-content: flex-end; gap: 6px; margin: -8px 0 14px;
}
.vhod-gost-dely button {
  font: 12px var(--font); color: var(--text-2); background: transparent;
  border: 0; cursor: pointer; padding: 4px 10px; border-radius: 8px;
  min-height: 44px;
}
.vhod-gost-dely button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
/* ОТВЕТ ХРИСЫ — БЕЗ РАМКИ (задача 1843, п.2).
   Слово владельца 08.09: «чат привести в аккуратный вид как у Anthropic».
   У Anthropic реплика гостя — пузырь справа, ответ помощника — просто текст:
   рамка вокруг ответа спорит с рамкой пузыря и делит короткий разговор на
   коробки. Убираем фон, границу, тень и внутренние поля; отступ слева даёт
   не коробка, а живая буква «А» рядом с текстом. */
.vhod-doc {
  background: none; border: 0; border-radius: 0;
  padding: 0; color: var(--text); font-size: 15.5px; line-height: 1.55;
  box-shadow: none; min-width: 0; flex: 1;
}
/* СООБЩЕНИЕ ХРИСЫ — СТРОКА ИЗ ДВУХ: аватар и текст. */
.vhod-msg--hrisa { display: flex; align-items: flex-start; gap: 10px; }
.vhod-doc-shapka {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2);
  margin-bottom: 8px;
}
/* ВРЕМЯ У КАЖДОГО СООБЩЕНИЯ (задача 1843, п.2) — мелко и приглушённо: это
   справка, а не содержание разговора. */
.vhod-vremya { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vhod-msg--gost .vhod-vremya {
  display: block; text-align: right; margin-top: 4px; opacity: .75;
}

/* ЖИВАЯ БУКВА «А» — АВАТАР ХРИСЫ (задача 1843, п.3).
   Пока Хриса думает, буква рисуется снизу вверх: обрезка `inset()` поднимает
   нижнюю кромку от 100 % до 0. Цикл 1,8 с — середина названного владельцем
   отрезка 1,5–2 с. В момент первого слова класс `--vspyshka` зажигает искру
   у вершины и гаснет сам. */
.vhod-avatar {
  position: relative; flex: 0 0 auto;
  width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center; color: var(--accent);
}
.vhod-avatar svg { width: 22px; height: 22px; display: block; opacity: .9; }
.vhod-avatar--dumaet svg { animation: vhod-bukva-ris 1.8s ease-in-out infinite; }
@keyframes vhod-bukva-ris {
  0%   { clip-path: inset(100% 0 0 0); opacity: .35; }
  65%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  85%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100% { clip-path: inset(100% 0 0 0); opacity: .35; }
}
.vhod-avatar-iskra {
  position: absolute; top: -1px; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: var(--accent);
  opacity: 0; pointer-events: none;
}
.vhod-avatar--vspyshka .vhod-avatar-iskra { animation: vhod-bukva-vspyshka .9s ease-out 1; }
@keyframes vhod-bukva-vspyshka {
  0%   { opacity: 0; transform: scale(.3); box-shadow: 0 0 0 0 var(--accent); }
  20%  { opacity: 1; transform: scale(1.8); box-shadow: 0 0 16px 6px var(--accent); }
  100% { opacity: 0; transform: scale(1);   box-shadow: 0 0 0 0 var(--accent); }
}
/* «Уменьшить движение» — статичный знак и никакой вспышки (П3). */
@media (prefers-reduced-motion: reduce) {
  .vhod-avatar--dumaet svg { animation: none; clip-path: none; opacity: 1; }
  .vhod-avatar--vspyshka .vhod-avatar-iskra { animation: none; opacity: 0; }
}
.vhod-doc-shapka b { color: var(--text); font-weight: 600; }
.vhod-doc-telo h2, .vhod-doc-telo h3, .vhod-doc-telo h4 { margin: 14px 0 6px; line-height: 1.3; }
.vhod-doc-telo h2 { font-size: 19px; }
.vhod-doc-telo h3 { font-size: 16.5px; }
.vhod-doc-telo p { margin: 6px 0; }
.vhod-doc-telo ul, .vhod-doc-telo ol { margin: 6px 0 6px 20px; padding: 0; }
.vhod-doc-telo li { margin: 3px 0; }
.vhod-doc-telo a { color: var(--accent-tekst); text-decoration: underline; text-underline-offset: 2px; }
.vhod-doc-telo table { border-collapse: collapse; margin: 8px 0; font-size: 14px; width: 100%; }
.vhod-doc-telo th, .vhod-doc-telo td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.vhod-doc-telo code { font-size: 90%; background: color-mix(in srgb, var(--text) 8%, transparent); padding: 0 4px; border-radius: 4px; }
.vhod-kartochki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vhod-kartochka {
  display: block; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; max-width: 320px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.vhod-kartochka b { display: block; font-size: 14px; }
.vhod-kartochka span { font-size: 12.5px; color: var(--text-2); }

/* ФУНКЦИИ ПОД ОТВЕТОМ (п.3) — одной строкой мелких кнопок, как в чате
   Anthropic. Строка переносится, а не прячет кнопки за «ещё»: на 390 px
   восемь кнопок в один ряд не встают, а спрятанная функция всё равно что
   отсутствует. */
.vhod-doc-dely {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin-top: 8px;
  font-size: 13px;
  /* ЗНАЧКИ ПОЯВЛЯЮТСЯ ПРИ НАВЕДЕНИИ (задача 1843, п.2). Прячем
     ПРОЗРАЧНОСТЬЮ, а не `display: none`: скрытый строкой ряд забирал бы у
     ответа свою высоту в момент появления и дёргал ленту вверх на каждое
     наведение. С прозрачностью место занято всегда — движется только цвет.
     Клавиатуре ряд доступен всегда: `:focus-within` показывает его на первом
     же Tab, а `visibility` мы не трогаем — иначе кнопки выпали бы из обхода. */
  opacity: 0; transition: opacity .16s ease;
}
.vhod-msg--hrisa:hover .vhod-doc-dely,
.vhod-msg--hrisa:focus-within .vhod-doc-dely,
.vhod-msg--tronut .vhod-doc-dely { opacity: 1; }
/* НА ТЕЛЕФОНЕ — ПО ТАПУ, И ДРУГОГО ПУТИ НЕТ (слово владельца 08.09, П2).
   Соблазн был показать ряд всегда там, где наведения не бывает
   (`@media (hover: none)`), — но тогда обещание «значки скрыты без наведения»
   на 390 px не выполняется, а приёмка мерит именно 390 px. Путь у пальца
   один и он рабочий: тап по сообщению (`pointerdown` в vhod.js). */
/* Кнопки мелкие НА ВИД и полноразмерные ПОД ПАЛЕЦ: шрифт 12,5 px, а коробка
   44×44 — порог матрицы доступности витрины. Рисовать 26-пиксельные кнопки
   «как у Anthropic» и не попадать в них пальцем — не «как у Anthropic», а
   просто мимо. */
/* КНОПКА МЕЛКАЯ НА ВИД (30 px) И ПОЛНОРАЗМЕРНАЯ ПОД ПАЛЕЦ (44 px).
   Прежняя редакция растила саму коробку до 44×44 — восемь таких кнопок в
   узкой колонке не вставали в строку и переносились в два-три ряда, а
   владелец просит одну строку маленьких значков. Тап-цель растим невидимым
   `::after` — это не обещание, а признанный заслоном приём: матрица
   доступности (deploy/matrica/matrica.py, раздел «ПАЛЕЦ 44 px») читает
   размер абсолютного псевдоэлемента и засчитывает его. */
.vhod-doc-dely button, .vhod-doc-dely .vhod-menu summary {
  position: relative;
  font: 12.5px var(--font); color: var(--text-2); background: transparent; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px; padding: 0; list-style: none;
  width: 30px; height: 30px; min-height: 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.vhod-doc-dely button::after, .vhod-doc-dely .vhod-menu summary::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.vhod-ico { width: 17px; height: 17px; display: block; }
.vhod-doc-dely button:hover, .vhod-menu summary:hover {
  color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent);
}
.vhod-doc-dely button[aria-pressed="true"] {
  color: var(--text); border-color: var(--accent);
}
.vhod-menu { position: relative; }
.vhod-menu summary::-webkit-details-marker { display: none; }
.vhod-menu-spisok {
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; min-width: 180px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
/* Кнопки ВНУТРИ выпадающего списка форматов — обычные, со словами: правило
   30×30 выше адресовано ряду значков, а не списку «Word · PDF · Excel».
   Сбрасываем размер и псевдо-расширитель явно (задача 1843, п.2): без этого
   пункты списка встали бы квадратиками по 30 px, а их 44-пиксельные хвосты
   перекрыли бы соседний пункт. */
.vhod-menu-spisok button {
  display: block; width: 100%; height: auto; min-height: 44px;
  text-align: left; border: 0; border-radius: 8px; padding: 7px 10px;
}
.vhod-menu-spisok button::after { content: none; }
/* Правило `.vhod-prim--stroka` («черновик ИИ» своей строкой под значками)
   снято вместе с самой строкой — задача 1861, п.3: подписи про ИИ у каждого
   ответа убраны, предупреждение осталось одно, внизу блока (`.vhod-melko`). */

/* ОКНО ОЦЕНКИ — ПОЛЕ В ТОМ ЖЕ РЯДУ, ЧТО ЗНАЧКИ (задача 1861, п.4).
   Было: `width: 100%` — то есть блок ВО ВСЮ ШИРИНУ под рядом, и высота 44 px
   против 30 у значков. Владелец назвал это «криво», и он прав: два разных
   роста в двух прижатых друг к другу строках читаются как сломанная вёрстка.
   Стало: строка причины — обычный член того же гибкого ряда (`flex: 1 1 220px`),
   а ряд НА ВРЕМЯ ОЦЕНКИ выравнивается по одной высоте 44 px — и значки, и
   поле, и «отправить», и крестик. 44, а не 30: поле ввода — орган управления,
   псевдо-расширителя у `input` не бывает (браузер его не рисует), и меньшая
   высота была бы промахом мимо пальца, а не «как у Anthropic». */
.vhod-prichina {
  display: flex; gap: 6px; align-items: center;
  flex: 1 1 220px; width: auto; margin-top: 0;
  /* МИНИМАЛЬНАЯ ШИРИНА — ЧТОБЫ СТРОКА ПЕРЕНОСИЛАСЬ, А НЕ СХЛОПЫВАЛАСЬ.
     С `min-width: 0` на 390 px четыре значка, «отправить» и крестик
     занимали ряд целиком, и поле ужималось в нитку шириной в пару
     пикселей — это видно на кадре `kadry-chat/ocenka-telefon.png` первой
     редакции. Теперь строка причины либо стоит в ряду, либо переносится
     на свою строку ЦЕЛИКОМ и остаётся годной для пальца. */
  min-width: min(100%, 130px);
}
.vhod-prichina input {
  flex: 1; min-width: 0; font: 13px var(--font); color: var(--text);
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; height: 44px; min-height: 44px;
}
.vhod-prichina button {
  border: 1px solid var(--line) !important; border-radius: 10px;
  width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 auto;
  font-size: 17px; line-height: 1;
}
.vhod-prichina button::after { content: none; }
.vhod-prichina-krest { font-size: 20px; }
/* Ряд на время оценки: одна высота у всего, что в нём стоит. Класс снимается
   вместе с закрытием окна — обычный ряд значков остаётся мелким, как просил
   владелец в круге 1843. */
.vhod-doc-dely--ocenka { align-items: center; row-gap: 6px; flex-wrap: nowrap; }
.vhod-doc-dely--ocenka button,
.vhod-doc-dely--ocenka .vhod-menu summary { width: 44px; height: 44px; }
.vhod-doc-dely--ocenka .vhod-menu-spisok button { width: 100%; height: auto; }
/* НА ВРЕМЯ ОЦЕНКИ РЯД ОТДАЁТСЯ ПОЛЮ, а прочие значки уходят.
   ЧТО БЫЛО НЕ ТАК И КАК ЭТО ВЫГЛЯДЕЛО. На 390 px в ряду стоят 👍 👎 «скачать»
   «копировать» «повторить» «документом» «уточнить» — семь коробок по 44 px,
   то есть 308 px из 330 доступных. Полю оставалось около сотни, и вместе с
   кнопкой «отправить» и крестиком оно сжималось в нитку: кадр
   `kadry-chat/ocenka-telefon.png` первых двух редакций. Ни `min-width`, ни
   перенос строки этого не лечат — места действительно нет.
   ПОЧЕМУ ПРЯЧЕМ ИМЕННО ИХ. Гость только что нажал 👍 или 👎 и отвечает на
   вопрос «чем понравился ответ». «Скачать», «повторить» и «сделать
   документом» в эту секунду не нужны и ведут в другую сторону; 👍 и 👎
   остаются — по ним видно, какая оценка поставлена, и ими же её можно
   переставить. Прячем на ЛЮБОЙ ширине: на широком экране лишние семь кнопок
   рядом с полем ввода мешают ровно так же, просто не ломают вёрстку. */
.vhod-doc-dely--ocenka > *:not(.vhod-prichina):not([aria-label^="Ответ "]) {
  display: none;
}
.vhod-spasibo { font-size: 12px; color: var(--text-2); width: 100%; margin-top: 4px; }

/* ---------- 10. Карточки согласия и памяти ---------- */
.vhod-karta {
  width: min(94vw, 720px); margin: 12px auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 14px;
  padding: 12px 14px; font-size: 14px; color: var(--text);
}
.vhod-karta p { margin: 0 0 8px; }
.vhod-karta .vhod-karta-knopki { display: flex; gap: 8px; flex-wrap: wrap; }
.vhod-karta button {
  font: 600 14px var(--font); border-radius: 10px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text);
}
.vhod-karta button.glavnaya { background: var(--accent); color: #17130A; border-color: var(--accent); }
.vhod-karta[hidden] { display: none; }

/* ---------- 11. Голос ---------- */
.vhod-golos-sost { font-size: 12.5px; color: var(--text-2); min-height: 0; margin-top: 4px; }
.vhod-golos-sost:empty { display: none; }

/* ---------- 12. Кнопка размера шрифта в подвале ---------- */
/* Пульта «Aa» на главной больше нет (п.6). Одна кнопка вместо него — по
   тому же файлу владельца: «если размер шрифта нужен для доступности — одна
   кнопка в подвале, без пульта». Она пишет тот же ключ `mrn_komfort`, что и
   прежний пульт, поэтому выбор читателя переезжает с ним на любую страницу
   витрины и обратно. */
.vhod-kegl {
  font: 13px var(--font); color: var(--text-2); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px; min-height: 44px; cursor: pointer;
}
.vhod-kegl:hover { color: var(--text); border-color: var(--accent); }

/* ---------- 13. Подвал стенда ---------- */
.vhod-podval { text-align: center; font-size: 12.5px; color: var(--text-2); padding: 18px 12px 28px; }
.vhod-podval a { color: inherit; }

/* ---------- 14. Порядок блоков ----------
   Боевая сцена на телефоне уносит знак вниз (order), у входа знак стоит над
   полем на любой ширине.
   ПОСЛЕ КРУГА 1832 в колонке сцены остался ОДИН узел — знак: живая строка
   уехала в низ первого экрана, заголовок и коробка чата — на второй экран.
   Правила порядка для уехавших узлов сняты: мёртвое правило дороже
   отсутствующего — следующий круг читает его как действующее. */
.hero--vhod .scene-in .scene-znak { order: 1; }

/* ---------- 15. Второй живой блок ---------- */
/* ПРАВИЛО СНЯТО КРУГОМ 2206 — ВМЕСТЕ С ПРИЧИНОЙ, А НЕ ВОПРЕКИ ЕЙ.
   Пряталось так: `.polosa-cex .lenta--kompakt .lenta-cifry { display: none }`
   на ширине до 760 px. Причина (п.10 файла владельца тех дней) была честной:
   живая строка под знаком первого экрана говорила «сейчас N задач», и на
   телефоне два одинаковых числа шли встык — гость читал это как
   противоречие. С тех пор первый экран переписан дважды (круги 2156 и 2171):
   строки «сейчас N задач» на нём больше НЕТ — внизу экрана стоит «принято
   задач — с 06.08.2026», это другое число и другой период. Повторять стало
   нечего, а правило пережило свою причину и прятало от владельца три
   честные цифры с источником и временем съёма — ровно те, которые файл
   владельца 18.09 (п.4) велит оставить на месте. Замер: 390 px, блок на
   стенде — до снятия цифр в блоке 0, после снятия 3.
   МЁРТВОЕ ПРАВИЛО ДОРОЖЕ ОТСУТСТВУЮЩЕГО — тот же довод, что в разделе 14
   этого файла: следующий круг читает его как действующее. */
@media (max-width: 760px) {
  /* И разрыв под первым экраном: отступ секции сверху здесь лишний — полоса
     обязана начинаться сразу за экраном. */
  .polosa-cex { padding-top: 8px; }
  /* Правило `.hero--vhod ~ .scene-flow` снято (задача 1832): «стекание
     металла» между первым экраном и полосой цеха рисовал `hero_scene`, а
     три экрана его не рисуют вовсе — экраны идут встык, и никакого разрыва
     между ними нет по построению. */
}

/* ---------- 16. Телефон ---------- */
@media (max-width: 760px) {
  .hero--vhod .scene-mark img { width: auto; height: min(9.5vh, 74px); }
  .vhod-blok { width: 94vw; margin-top: 10px; }
  /* ПОДСКАЗКИ — ОДНОЙ ЛИСТАЕМОЙ СТРОКОЙ (п.10). Перенос на два ряда съедал
     44 px первого экрана и ставил «Вслух» четвёртой подсказкой. Теперь
     строка одна и листается пальцем вбок; полоса прокрутки скрыта — её роль
     играет обрезанная справа пятая подсказка. */
  .vhod-podskazki {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
    /* Полосу НЕ выпускаем за колонку отрицательным полем (было -3vw): так
       красивее, но сам ряд тогда торчит за край экрана на 8 px, и заслон
       доступности витрины перестаёт отличать замысел от обрезки. Признак
       «карусель» в matrica.py требует, чтобы за краем была ТОЛЬКО начинка,
       а не сама полоса, — и это правильное требование. */
  }
  .vhod-podskazki::-webkit-scrollbar { display: none; }
  /* Высоту подсказок на телефоне НЕ снижаем: 44 px — порог пальца, и
     сэкономленные четыре пикселя стоили бы промаха по кнопке. Место
     экономит листаемая строка выше, а не мелкие кнопки. */
  .vhod-podskazki button { padding: 4px 12px; }
  .vhod-doc { padding: 14px 14px 10px; font-size: 15px; }
  .vhod-msg--gost { max-width: 92%; }
}
@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .hero--vhod .scene-mark img { height: min(9.5dvh, 74px); }
  }
}
@media (max-width: 480px) {
  /* НА ТЕЛЕФОНЕ КНОПКИ УХОДЯТ ПОД ПОЛЕ (задача 1815). В строку с ними на
     390 px текстовому полю оставалось около 170 px. Четыре иконки под полем
     умещаются в один ряд и попадают под палец. */
  .vhod-forma { border-radius: 16px; padding: 8px 12px; flex-direction: column;
                align-items: stretch; gap: 4px; }
  /* `flex: 1` базового правила в КОЛОНКЕ означает `flex-basis: 0` — высота
     поля перестаёт зависеть от его собственной и берётся из свободного места
     колонки, то есть всегда равна `min-height`. Скрипт при этом честно
     ставил инлайновую высоту 138 px, а на экране поле оставалось в 40 —
     ровно это показала проба поля (tools/proba_polya.py). В колонке поле
     обязано мерить себя само. */
  .vhod-forma textarea { flex: 0 0 auto; font-size: 16px; line-height: 1.35;
                         min-height: 44px; padding: 6px 0; }
  .vhod-knopki { justify-content: flex-end; }
  .vhod-otpravit { padding: 0 14px; }
}
/* НИЖНЯЯ ПАНЕЛЬ SAFARI (п.10): у липкой полосы и у подвала уже есть
   `env(safe-area-inset-bottom)` в style2.css; коробке чата тот же зазор
   нужен по той же причине — иначе поле ввода упирается в панель. Величина
   входит в расчёт `--vhod-lenta-max` (vhod.js), здесь — только запас. */
.vhod-blok { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (prefers-reduced-motion: reduce) {
  .vhod-ikonka[aria-pressed="true"] { animation: none; }
  .vhod-melko summary::after { transition: none; }
}

/* ============================================================
   17. ТРИ ЭКРАНА ГЛАВНОЙ (задача 1832, блок Б2-042)
   ============================================================
   Слово владельца 07.09 20:30: «1 экран — галактика без текста, 2 экран —
   крутой чат как у Anthropic, не мелкий, 3 экран — блок задач».

   ЕДИНИЦА ВЫСОТЫ — dvh, и вычитается шапка. Шапка липкая (style2.css §…:
   `position: sticky; top: 0`), то есть она стоит НАД экраном всегда, а не
   только на первом. Экран ростом в 100dvh уезжал бы под неё ровно на её
   высоту при каждой прокрутке к следующему якорю — поэтому экран равен
   `100dvh − --hdr-h`. Запас в vh оставлен браузерам без dvh.

   ТРИ ВЗГЛЯДА. Первый — знак в центре пустого неба (ничего, кроме образа).
   Второй — заголовок простыми словами и под ним поле, куда можно написать.
   Третий — доказательство работой. Каждый экран отвечает ровно на один
   вопрос, и ни один не отбирает первый взгляд у соседа. */

.ekran {
  position: relative;
  min-height: calc(100vh - var(--hdr-h, 60px));
}
@supports (height: 100dvh) {
  .ekran { min-height: calc(100dvh - var(--hdr-h, 60px)); }
}
/* ЯКОРЬ ПОДВОДИТ ЭКРАН РОВНО ПОД ШАПКУ, БЕЗ ЗАПАСА.
   ЧТО ЭТО ЧИНИТ. У витрины общий отступ прокрутки `scroll-padding-top:
   calc(--hdr-h + 16px)` (style2.css): 16 px воздуха над якорем — верно для
   раздела посреди длинной страницы и НЕВЕРНО для экрана ростом ровно в окно.
   Замер на 1440×900: экран уезжал вниз на 88 px, и на столько же обрезался
   снизу — под обрез попадало поле ввода, то есть единственное, ради чего
   этот экран есть. Своего `scroll-margin-top` экранам НЕ даём: он
   СКЛАДЫВАЕТСЯ с отступом страницы, и первая же попытка так починить дала
   160 px вместо 88.
   Правило адресовано странице, у которой есть экран-галактика, — то есть
   главной и стенду; на остальных 208 страницах отступ прокрутки остаётся
   прежним. Браузер без `:has` теряет 16 px низа — заметно меньше, чем
   потерял бы весь запас, и поле при этом остаётся в кадре. */
html:has(.ekran--galaktika) { scroll-padding-top: var(--hdr-h, 60px); }

/* ---------- 17.1. Экран 1 — только галактика ---------- */
/* Секция сохраняет классы `hero hero--scene hero--vhod`: по ним живут знак,
   маска, ровное небо и гашение виньетки (§1). Меняем ровно раскладку. */
.ekran--galaktika {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 0;
}
/* Правило §1 давало сцене отступы под старую композицию; здесь экран пустой,
   и знак обязан стоять РОВНО в центре. Вес 0-3-0 — как у правила §1. */
/* ЗНАК — В ЦЕНТРЕ ОКНА, А НЕ В ЦЕНТРЕ СЕКЦИИ (задача 1843, п.1).
   ЧТО БЫЛО. Секция ростом `100dvh − --hdr-h` начинается ПОД липкой шапкой,
   значит её собственная середина стоит на `--hdr-h/2` ниже середины окна.
   Замер боя 08.09 (protokoly/02) поймал это числом: центр знака 487 px при
   середине окна 450 на 1440×900 и 460 при 422 на 390×844 — оба раза ровно
   половина высоты шапки (73 и 61 px). Владелец назвал это «галактика слишком
   вниз уехала».
   ЧЕМ ЛЕЧИМ. Нижним отступом ровно в высоту шапки: колонка центрирует
   содержимое по СВОЕЙ рабочей области, и она поднимается на `--hdr-h/2`.
   Отступ съедает высоту внутри `min-height` (у витрины `box-sizing:
   border-box`), поэтому экран не становится выше окна ни на пиксель.
   Цифры парка и стрелка живут в `.ekran-niz` — она прижата к низу секции
   АБСОЛЮТНО и этим отступом не двигается. */
.hero.hero--scene.ekran--galaktika {
  align-items: center; padding-top: 0;
  padding-bottom: var(--hdr-h, 60px);
}
@media (min-width: 980px) {
  .hero.hero--scene.ekran--galaktika { align-items: center; padding-top: 0; }
}
/* КРУГ 1883 (п.1): знак — треть шара, шар — 55 % высоты окна. Высоту знака
   СТАВИТ ДВИЖОК из galaktika-scena.js (shar.dolyaVysoty × znakDolya; телефон
   dolyaShirinyTelefon × znakDolyaTelefon); здесь то же число запасом до
   `load` и без скрипта — меняешь там, поправь и здесь. Потолка 340 px нет. */
/* КРУГ 1889 (п.1): шар — 45 % высоты окна (знак 14,85 % высоты), телефон 75 % (знак 27 % ширины).
   КРУГ 1890 (п.1): шар — 38 % высоты окна (знак 0,38 × 0,33 = 12,54 % высоты),
   на телефоне шар — 65 % ширины (знак 0,65 × 0,33 = 21,45 % ширины).
   КРУГ 1907 (п.2): шар — 30 % высоты окна (знак 0,30 × 0,33 = 9,9 % высоты),
   на телефоне шар — 60 % ширины (знак 0,60 × 0,33 = 19,8 % ширины). */
.ekran--galaktika .scene-mark img { width: auto; height: 9.9vh; }
@supports (height: 100svh) { .ekran--galaktika .scene-mark img { height: 9.9svh; } }
@media (max-width: 760px) { .hero--vhod.ekran--galaktika .scene-mark img { height: 19.8vw; } }
.ekran--galaktika .scene-in { width: 100%; }
/* КРУГ 1883 (п.7): первый экран — svh (dvh менял рост под пальцем). Под
   полупрозрачной панелью Safari стоял заголовок второго экрана: на телефоне
   секция растёт до lvh, а содержимое и низ (--niz-dop) стоят по svh — под
   панелью своё небо. На компьютере lvh = svh. */
@supports (height: 100svh) { .ekran--galaktika { min-height: calc(100svh - var(--hdr-h, 60px)); } }
@supports (height: 100lvh) {
  @media (max-width: 760px) {
    .hero.hero--scene.ekran--galaktika { --niz-dop: calc(100lvh - 100svh); min-height: calc(100lvh - var(--hdr-h, 60px)); padding-bottom: calc(var(--hdr-h, 60px) + var(--niz-dop)); }
  }
}
/* Низ экрана: цифры парка мелкой строкой и тихая стрелка под ними. Полоса
   прижата к нижнему краю АБСОЛЮТНО, а не хвостом колонки: иначе знак
   переставал быть по центру ровно на её высоту. */
.ekran-niz {
  position: absolute; left: 0; right: 0; z-index: 2;
  bottom: calc(10px + var(--niz-dop, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 12px; pointer-events: none;
}
/* УВЕДОМЛЕНИЕ О КУКАХ ЗАКРЫВАЕТ НИЖНИЙ КРАЙ — ПОДНИМАЕМСЯ НАД НИМ.
   Владелец просил цифры парка «у нижнего края» и «тихую стрелку вниз»; на
   первом кадре круга обе оказались ПОД плашкой куков — то есть на первом же
   визите гостя их не было видно вовсе. Плашка сама объявляет свою высоту
   (`cookie-notice.js`: класс `cknote-on` на html и переменная `--cknote-h`),
   и это готовый договор — пользуемся им, а не своим числом. Гость нажал
   «Понятно» — класс снимается, и низ экрана возвращается на место сам. */
html.cknote-on .ekran-niz {
  bottom: calc(var(--cknote-h, 0px) + 10px + var(--niz-dop, 0px) + env(safe-area-inset-bottom, 0px));
}
html.cknote-on .ekran--chat {
  padding-bottom: calc(var(--cknote-h, 0px) + 8px + env(safe-area-inset-bottom, 0px));
}
/* СТРОКА ЖИВЁТ ТОЛЬКО ВНИЗУ ПЕРВОГО ЭКРАНА (задача 1843, п.4).
   Непрозрачная шапка (§2) убрала просвечивание, но строка всё равно
   выглядывала ИЗ-ПОД её нижнего края на промежуточной прокрутке — проба
   `proba_polosy_istochnika.py` поймала 913 несовпавших точек в полосе под
   шапкой. Поэтому строку и стрелку гасим, как только они подъехали к шапке:
   класс ставит vhod.js по прокрутке. Гаснем плавно, но `visibility` снимаем
   сразу — иначе полупрозрачная строка всё ещё «полоса». */
.ekran-niz { transition: opacity .18s ease; }
.ekran-niz--ushla { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ekran-niz { transition: none; } }
.ekran-niz .stroy { pointer-events: auto; margin: 0; font-size: 12.5px; opacity: .8; }
.ekran-niz .stroy small { font-size: 10.5px; opacity: .7; }
/* Стрелка «вниз» — тихая (п.1): не кнопка-призыв, а подсказка, что ниже есть
   продолжение. Тап-цель 44 px, как у всех органов управления витрины. */
.ekran-strelka {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--text-2); text-decoration: none; font-size: 20px; line-height: 1;
  border: 1px solid transparent;
  animation: ekran-strelka-dyshit 2.6s ease-in-out infinite;
}
.ekran-strelka:hover { color: var(--text); border-color: var(--line); }
@keyframes ekran-strelka-dyshit {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- 17.2. Экран 2 — заголовок и чат ---------- */
/* ВЫСОТА ФИКСИРОВАНА, А ВНУТРИ — КОЛОНКА. Отсюда и берётся обещание П2
   «страница не растёт от сообщений»: держит его браузер раскладкой, а не
   формула в скрипте. Лента `flex: 1` со своей прокруткой, поле и подсказки —
   `flex: 0 0 auto`, и любое новое поле под лентой само отнимает место у неё,
   а не у страницы. */
.ekran--chat {
  height: calc(100vh - var(--hdr-h, 60px));
  display: flex; flex-direction: column;
  padding: clamp(10px, 2vh, 24px) 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
@supports (height: 100dvh) {
  .ekran--chat { height: calc(100dvh - var(--hdr-h, 60px)); }
}
/* ДО РАЗГОВОРА ГРУППА СТОИТ ПО ЦЕНТРУ ЭКРАНА, В РАЗГОВОРЕ — ПРИЖАТА КВЕРХУ.
   Это два разных экрана по смыслу, и раскладка у них разная. Пока разговора
   нет, на экране одно предложение — «напишите»: заголовок, строка и поле
   стоят группой посередине, воздух вокруг работает на них. Как только
   разговор начался, главным становится он: заголовок уходит к верхней
   границе, лента забирает всё освободившееся место, поле садится вниз.
   Класс `ekran--dialog` вешает vhod.js в тот же момент, когда ставит
   `vhod-blok--dialog` на коробку. */
.ekran--chat .ekran-in {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  width: min(100%, 860px);
  /* ЦЕНТР — ТОЛЬКО ПОКА СОДЕРЖИМОЕ ВЛЕЗАЕТ (задача 2186). Обычный `center`
     при высоком содержимом выносит его за ОБА края разом, и верхняя строка
     уходит под липкую шапку — не прокруткой, которой на этой странице нет
     вовсе (`body.chatstr { overflow: hidden }`), а просто наружу. Замер
     круга 390×844 после того, как приветствие выросло с 39 до 330 px:
     строка обещания стояла верхом на 44 px при низе шапки 52 — подмята на
     8 px (protokol/p11-zamer-obeshchaniya.txt). `safe center` в этом случае
     прижимает группу к началу и ничего не срезает, а пока содержимое влезает
     — центрирует ровно как прежде. */
  justify-content: safe center;
}
.ekran--chat.ekran--dialog .ekran-in { justify-content: flex-start; }
.ekran--chat .vhod-zag {
  flex: 0 0 auto; display: block; text-align: center;
  margin: 0 auto clamp(8px, 1.6vh, 16px); max-width: 780px;
}
.ekran--chat .vhod-zag h1 {
  margin: 0 0 6px; max-width: none;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.16;
  transition: font-size .35s ease;
}
/* ПОДЗАГОЛОВОК «Задайте вопрос — Хриса ответит…» СНЯТ (задача 1918, круг 20,
   У2; слово владельца 10.09 04:05: «лишний подзаголовок точно убрать»).
   Узла `.scene-poz` на втором экране больше нет — ни в разметке
   (content_v2.ekran_chat), ни в словаре главной; правила для него сняты,
   чтобы на его месте не осталось ни пустой полосы, ни мёртвого стиля. */
/* Пульс-полоска над чатом (п.8): своя двухпиксельная строка, а не край
   шапки. Опора нужна абсолютной полоске — отсюда position: relative. */
.ekran-puls {
  flex: 0 0 auto; position: relative; height: 2px;
  width: min(100%, 800px); margin: 0 auto clamp(6px, 1.2vh, 14px);
  opacity: .85;
}
/* КОРОБКА ЧАТА В ЭКРАНЕ 2. Ширина колонки — 800 px (п.3 файла владельца).
   Правило §5 давало ей 720 px и внешний отступ сверху; здесь колонку держит
   раскладка экрана. */
/* Коробка чата: до разговора ростом по содержимому, в разговоре — во всё
   свободное место экрана. Обещание П2 «страница не растёт от сообщений»
   держит именно вторая строка: лента получает `flex: 1` и прокручивается
   внутри, а не толкает страницу вниз. */
.ekran--chat .vhod-blok {
  /* СЖИМАТЬСЯ — ДА, РАСТИ — НЕТ (задача 2186). `0 0 auto` запрещал коробке
     и то, и другое: при высоком приветствии она вылезала за низ экрана
     вместе со ссылкой «Оставить заявку», а достать уехавшее нельзя —
     прокрутки у страницы чата нет. `0 1 auto` оставляет прежний рост (его
     и не было), но разрешает сжатие: лишнее уходит в прокрутку ЛЕНТЫ, а
     поле и ссылки остаются в кадре. Замер — protokol/p12-zamer-niza.txt. */
  flex: 0 1 auto; min-height: 0; width: 100%; max-width: 800px;
  margin: 0 auto; padding-bottom: 0;
}
.ekran--chat.ekran--dialog .vhod-blok {
  flex: 1; justify-content: flex-end;
}
/* Лента видна ВСЕГДА, а не только в разговоре: приветствие Хрисы стоит в
   ней с первого кадра. Правило §5 (`display: none` до класса `--dialog`)
   перебивается весом 0-2-0 против 0-1-0. */
/* ЛЕНТА ДО РАЗГОВОРА УМЕЕТ СЖАТЬСЯ (задача 2186). Было `flex: 0 0 auto` —
   лента брала высоту содержимого и толкала вниз всё, что под ней. Пока в
   приветствии стояла одна строка (39 px), это ничего не стоило; с формулой
   предложения (330 px) на 390×844 за нижний край уехала ссылка «Оставить
   заявку» — на 23 px, и достать её было НЕЛЬЗЯ: у страницы чата прокрутки
   нет вовсе (`body.chatstr { overflow: hidden }`). Замер —
   protokol/p12-zamer-niza.txt. Теперь лента сжимается (расти по-прежнему не
   может) и прокручивается внутри себя, а поле, подсказки и ссылка заявки
   остаются в кадре на любом экране. На 390×844 сжиматься ей не приходится:
   приветствие целиком в первом экране, прокрутки ленты нет (замер П4). */
.ekran--chat .vhod-lenta-obertka { display: block; flex: 0 1 auto; min-height: 0; }
.ekran--chat.ekran--dialog .vhod-lenta-obertka { flex: 1; min-height: 0; }
/* Жёлоб справа и отступ под поле — те же, что у общей ленты (задача 1881,
   пп.2 и 7): это правило весом 0-2-0 перебивало их и возвращало 2 px. */
.ekran--chat .vhod-lenta { max-height: none; padding: 0 18px calc(var(--vhod-pole-h, 44px) + 16px) 2px; }
/* Точка прилипания у самого низа ленты: без неё «proximity» тянул ленту
   назад к началу последней реплики, и дотянуть звезду до конца было нельзя. */
.vhod-dialog::after {
  content: ''; display: block; height: 1px;
  scroll-snap-align: end; scroll-margin-bottom: calc(var(--vhod-pole-h, 44px) + 16px);
}
.ekran--chat.ekran--dialog .vhod-lenta { height: 100%; }
/* Ответы Хрисы — БЕЗ РАМОК-КОРОБОК (п.3, «как у Anthropic»): текст на фоне
   страницы, отделённый воздухом, а не карточка с тенью. Пузырь остаётся
   только у гостя (§9) — так видно, кто говорит, без единой лишней линии. */
.ekran--chat .vhod-doc {
  background: none; border: 0; box-shadow: none; padding: 2px 0 0;
  font-size: 16px;
}
.ekran--chat .vhod-doc-shapka { margin-bottom: 6px; }
/* ФУНКЦИИ ПОД ОТВЕТОМ — ОДНОЙ СТРОКОЙ (П2).
   С кругом 1843 кнопки стали значками 30×30, и восемь штук встают в ряд даже
   на 390 px (8·30 + 7·2 = 254 px при доступных ~340). Боковую прокрутку тем
   не менее оставляем: крупный кегль читателя («Крупно» в komfort) растит
   ряд, и тогда он листается, а не рвётся на второй ряд. Пометка
   `data-listaemaya` остаётся при нём — заслон доступности витрины прощает
   узел за краем только у помеченного предка (задача 1832, О2). */
.ekran--chat .vhod-doc-dely {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ekran--chat .vhod-doc-dely::-webkit-scrollbar { display: none; }
.ekran--chat .vhod-doc-dely button,
.ekran--chat .vhod-doc-dely .vhod-menu summary { flex: 0 0 auto; }
/* Поле и всё, что под ним, — низом экрана. */
.ekran--chat .vhod { flex: 0 0 auto; }
.ekran--chat .vhod-podskazki { margin-bottom: 0; }
/* Приветствие швейцара — той же типографикой, что ответы, но тише: это
   ещё не разговор, это открытая дверь. */
.vhod-privet {
  color: var(--text-2); font-size: 16px; line-height: 1.55;
  padding: 4px 0 10px;
}
.vhod-privet p { margin: 0; }

/* ФОРМУЛА ПРЕДЛОЖЕНИЯ В ПРИВЕТСТВИИ (задача 2186). Четыре шага владельца и
   мелкая строка «Не делаем» — до вопроса гостю. Ровно один экран телефона:
   ни рамки, ни подложки, ни иконок — это ещё не карточка, это первая реплика.
   Слова приходят из общего с главной источника (deploy/build2/
   formula_kak_rabotaem.py) — здесь только их вид. */
.vhod-privet .vhod-privet-zag {
  color: var(--text); font-weight: 600; letter-spacing: .01em;
  margin: 0 0 6px;
}
.vhod-privet-shagi {
  margin: 0 0 8px; padding: 0 0 0 1.35em;
  display: grid; gap: 4px;
}
/* Номера — счётчиком списка, а не цифрами в разметке: читалка объявляет
   «пункт 2 из 4», а гость видит порядок шагов. */
.vhod-privet-shagi li { color: var(--text); }
.vhod-privet-shagi li::marker { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* «Не делаем» — мелко и тише квартета (слово владельца: «строкой ниже,
   мелко»), но не бледнее порога WCAG AA: 13 px держат 4,5:1 на обеих темах
   тем же цветом, что мелкая строка под полем. */
.vhod-privet .vhod-privet-ne {
  font-size: 13px; line-height: 1.45; color: var(--text-2);
  margin: 0 0 10px;
}
.vhod-privet-slovo { color: var(--text); }

/* ПРИГЛАШЕНИЕ ПОСЛЕ ТРЕТЬЕГО КРУГА (п.4). Поле закрывается, и на его месте
   остаётся одно — дверь в кабинет. Карточка не всплывает поверх разговора:
   она встаёт ровно туда, где было поле, и разговор остаётся читаемым. */
.vhod-priglashenie {
  flex: 0 0 auto; text-align: left;
  border: 1px solid var(--accent); border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  padding: 14px 16px; margin-top: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.vhod-priglashenie[hidden] { display: none; }
.vhod-priglashenie-tekst {
  margin: 0; flex: 1 1 260px; font-size: 15px; line-height: 1.45; color: var(--text);
}
.vhod-v-kabinet {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 12px;
  background: var(--accent); color: #17130A; border: 1px solid var(--accent);
  font: 600 15px var(--font); text-decoration: none;
}
.vhod-v-kabinet:hover { filter: brightness(1.06); }
/* Поле закрыто — прячем его целиком вместе с подсказками и плашкой: гость
   не должен видеть орган управления, который больше не работает. */
.vhod-blok--zakryto .vhod-forma,
.vhod-blok--zakryto .vhod-podskazki,
.vhod-blok--zakryto .vhod-faily,
.vhod-blok--zakryto .vhod-golos-sost { display: none; }

/* ---------- 17.3. Экран 3 — живой блок ---------- */
/* Блок не переделан (граница круга): он приехал сюда тем же вызовом, каким
   стоял врезкой под первым экраном. Новое — заголовок и место.
   Высота ЭКРАНА здесь `min-height`, а не `height`: сам живой блок на
   ноутбуке выше экрана (замер 07.09 — 1022 px при 900 px окна), а
   переделывать его круг не имеет права. Экран не короче окна — это и есть
   обещание «третий экран»; длиннее он ровно настолько, насколько длинен
   блок. */
.ekran--zhivoy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(12px, 2.4vh, 28px) 0;
}
.ekran-zag {
  margin: 0 0 clamp(8px, 1.6vh, 18px); text-align: center;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.2;
}
/* НИЖНИЙ ОТСТУП СЕКЦИИ — НОЛЬ, И ЭТО ГЛАВНАЯ ПРИЧИНА ПЕРЕБОРА (задача 1843).
   Замер разбора (protokoly/07) показал число, которое одно объясняло весь
   перебор: у `.polosa-cex` собственный `padding-bottom: 112px` — отступ до
   СЛЕДУЮЩЕГО раздела страницы, оставшийся с тех пор, когда живой блок стоял
   врезкой посреди длинной главной. На своём экране следующего раздела нет:
   112 px там — чистый воздух под обрезом. Верхний отступ круг 1832 уже снял,
   нижний остался и стоил ровно 8,2 % высоты окна из 8,2 % перебора. */
.ekran--zhivoy .polosa-cex { padding-top: 0; padding-bottom: 0; }

/* ---------- 17.3а. Третий экран влезает в окно ноутбука (задача 1843, п.6) ----
   ЧТО БЫЛО. Замер боя 08.09 (protokoly/02): третий экран на 1440×900 —
   973,8 px, то есть 108,2 % окна. Обещание «три экрана» на ноутбуке ломалось
   на третьем: гость доезжал до него и упирался в обрез.

   ЧТО МЕНЯЕМ И ЧЕГО НЕ МЕНЯЕМ. Граница постановки прямая: «только компоновка
   под окно, содержимое не менять». Поэтому здесь нет ни одной правки текста,
   числа или порядка блоков — только шаг кегля вниз, отступы и потолок высоты
   у САМОЙ ДЛИННОЙ колонки (список задач), которая одна и растит экран: она
   получает свою прокрутку, как лента чата на втором экране.

   ПРО «В ДВЕ КОЛОНКИ». Владелец назвал две колонки как способ ужать блок, но
   счётчики, «над чем работает» и «как растёт» уже стоят в ТРИ колонки, и
   перевод их в две сделал бы экран ВЫШЕ, а не ниже (та же высота содержимого
   в меньшем числе колонок). Цель — «влезает в окно» — достигается кеглем,
   отступами и потолком списка; три колонки при этом сохранены. Названо в
   отчёте отдельной строкой, чтобы решение видел владелец.

   Правило адресовано только ноутбучной ширине: на телефоне третий экран
   владелец просил оставить как есть. */
@media (min-width: 980px) {
  .ekran--zhivoy { padding: clamp(8px, 1.2vh, 14px) 0; }
  .ekran--zhivoy .ekran-zag {
    margin-bottom: clamp(6px, 1vh, 10px);
    font-size: clamp(19px, 2vw, 24px);
  }
  .ekran--zhivoy .lenta--kompakt .lenta-setka { gap: 12px; margin-top: 10px; }
  .ekran--zhivoy .lenta--kompakt .lenta-sost { font-size: 13.5px; }
  .ekran--zhivoy .lenta-cifry { gap: 10px; }
  .ekran--zhivoy .lenta-cifra { padding: 10px 12px; }
  .ekran--zhivoy .lenta-cifra .lenta-schet { font-size: 31px; line-height: 1.05; }
  .ekran--zhivoy .lenta-cifra-l { font-size: 12.5px; line-height: 1.25; }
  .ekran--zhivoy .lenta-cifra-src { font-size: 10.5px; line-height: 1.25; }
  .ekran--zhivoy .lenta-tip { font-size: 13.5px; }
  .ekran--zhivoy .lenta--kompakt .lenta-stadii li { padding: 6px 12px; }
  /* Потолок списка задач — в долях окна, а не в пикселях: окна у ноутбуков
     разной высоты, а обещание одно — «третий экран в окно». */
  .ekran--zhivoy .lenta-stadii {
    max-height: 52dvh; overflow-y: auto; overscroll-behavior-y: contain;
  }
  .ekran--zhivoy .lenta-vnizu { margin-top: 8px; font-size: 13px; }
}

/* ---------- 17.4. Телефон ---------- */
/* §17.3 РАЗГОВОР ИДЁТ (задача 1891, круг 15 к #1861, У1 — ставил; задача
   1908, круг 18, У2 — переставил словом Лёхи).
   Круг 15 с первого вопроса сжимал шапку в одну строку и прятал живую
   строку сцен. Круг 18: ШАПКА НЕ СЖИМАЕТСЯ — заголовок стоит как есть,
   живая строка «Пока ИИ …, вы …» идёт и во время разговора (это и есть
   «перебор текстов, для чего ИИ полезен», который владелец велел вернуть).
   Двигаться разом могут только живая строка и мысль Хрисы, ОСТАЛЬНОЕ ТИХО:
   пульс-полоска над чатом и пульс стрелки вниз на время разговора гаснут.
   Класс `ekran--fokus` вешает vhod.js с первого вопроса и снимает через
   пять минут тишины; имя класса оставлено, чтобы щупы и журнал круга 15
   читались как прежде. */
.ekran--chat.ekran--fokus .ekran-puls { display: none; }
.ekran--chat.ekran--fokus .vhod-vniz--puls { animation: none; }
/* §17.3а ШАПКА СЖИМАЕТСЯ ПОСЛЕ ПЕРВОГО СООБЩЕНИЯ (задача 1918, круг 20, п.3;
   слово владельца 10.09 04:05). Заголовок «Работает ИИ — живёте вы» в
   разговоре уменьшается ровно до 60 % (каждый член clamp × 0,6:
   24/3.4vw/40 → 14.4/2.04vw/24), живая строка остаётся и остаётся ОДНОЙ
   строкой (§18), пульс-полоска уходит (§17.3), а освободившееся место
   получает лента — её держит `flex: 1` раскладки экрана (§17.2). Шапка
   при этом не прячется и не уезжает: она стоит первой в колонке экрана,
   а прокручивается только лента. Класс `ekran--dialog` ставит vhod.js
   вместе с `vhod-blok--dialog` (razgovorNachat). Правило стоит ниже §17.2
   и весом 0-3-1 против 0-2-1 берёт верх. */
.ekran--chat.ekran--dialog .vhod-zag { margin-bottom: clamp(4px, .8vh, 8px); }
.ekran--chat.ekran--dialog .vhod-zag h1 {
  font-size: clamp(14.4px, 2.04vw, 24px); margin-bottom: 2px; opacity: .85;
}
.ekran--chat.ekran--dialog .ekran-puls { margin-bottom: 4px; }
/* §17.4 КОЛОНКА ЧТЕНИЯ (задача 1891, У3): ширина текста ответа 60–70 знаков,
   интервал шире, воздух между репликами. Колонка чата 800 px остаётся —
   узким становится ТЕКСТ, не лента: слева живёт буква «А», справа воздух.
   33em при 16 px = 528 px: живая дверь 61–66 знаков (31em давали 57–60 в бою при 66 на стенде: живой текст длиннее словами). */
.ekran--chat .vhod-doc-telo { max-width: 33em; line-height: 1.7; }
.ekran--chat .vhod-doc-telo p { margin: 8px 0; }
.ekran--chat .vhod-msg { margin: 0 0 22px; }
/* ПУЗЫРЬ ГОСТЯ — СПРАВА (задача 1918, круг 20, У1; слово владельца 10.09
   04:05: «что печатает посетитель, стоит слева, а должен справа»).
   ПОЧЕМУ ОН ОКАЗАЛСЯ СЛЕВА. Правило §9 ставит пузырь к правому краю через
   `margin-left: auto` весом 0-1-0, а строка выше (§17.4, круг 15) задавала
   `.ekran--chat .vhod-msg { margin: 0 0 22px }` весом 0-2-0 — и молча
   обнуляла левое поле у всех реплик, включая гостя. На главной пузырь
   съезжал влево, в окне «Хриса везде» (без `.ekran--chat`) оставался
   справа. Здесь правое поле возвращается тем же весом 0-2-0, ширина — не
   больше 70 % ленты (было 33em ≈ 66 % колонки, на телефоне 92 %), время —
   внутри пузыря (§9), ссылка «править и отправить заново» — под пузырём
   к правому краю (§9, .vhod-gost-dely). Обе темы: цвета через var(). */
.ekran--chat .vhod-msg--gost {
  margin-left: auto; margin-right: 0; max-width: 70%; width: fit-content;
}
.ekran--chat .vhod-gost-dely { justify-content: flex-end; }
/* Кнопка «подробнее» под ответом (1891, У2): тихая строка, не кнопка-таблетка. */
.vhod-podrobnee {
  display: inline-block; margin: 2px 0 0; padding: 0; border: 0; background: none;
  color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.vhod-podrobnee:hover { color: var(--text); }

@media (max-width: 760px) {
  .ekran--chat { padding-top: 8px; }
  .ekran--chat .vhod-zag { margin-bottom: 8px; }
  .ekran--chat .vhod-zag h1 { font-size: clamp(21px, 5.6vw, 26px); }
  /* Правило §16 давало коробке 94vw и внешний отступ — на экране-колонке
     ширину держит контейнер, а отступ отбирал бы у ленты строку. */
  .ekran--chat .vhod-blok { width: 100%; margin-top: 0; }
  .ekran-niz .stroy { font-size: 11.5px; }
  /* В РАЗГОВОРЕ ЗАГОЛОВОК УСТУПАЕТ МЕСТО РАЗГОВОРУ (телефон).
     Замер 390×844: с полным заголовком и строкой под ним на ленту оставалось
     250 px — четыре строки ответа. Заголовок свою работу уже сделал: гость
     прочитал его и написал. Поэтому в разговоре он мельчает — до 60 % (задача
     1918: 21/5.6vw/26 → 12.6/3.36vw/15.6), пульс-полоска уходит, живая
     строка остаётся одной строкой мелким кеглем (§18): лента получает около
     110 px, то есть ещё две-три строки читаемого текста.
     H1 ОСТАЁТСЯ НА ЭКРАНЕ И В РАЗМЕТКЕ — он не прячется, а уменьшается:
     фундамент SEO круга 1635 требует H1 в разметке, а честность — чтобы
     заголовок страницы не исчезал у гостя посреди разговора. */
  .ekran--chat.ekran--dialog .vhod-zag { margin-bottom: 4px; }
  .ekran--chat.ekran--dialog .vhod-zag h1 {
    font-size: clamp(12.6px, 3.36vw, 15.6px); line-height: 1.25; margin-bottom: 0;
    opacity: .78; font-weight: 500;
  }
  .ekran--chat.ekran--dialog .ekran-puls { margin-bottom: 6px; }
}
/* Экран 1 на телефоне без dvh: тот же расчёт в vh. */
@media (max-width: 760px) {
  .ekran--galaktika .scene-mark img { height: min(30vh, 230px); }
}
@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .ekran--galaktika .scene-mark img { height: min(30dvh, 230px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ekran-strelka { animation: none; opacity: .8; }
}

/* ---------- 18. Живая строка сцен под H1 (1882; разбор — content_v2.STROKA_JS) ---------- */
/* min-height — резерв высоты: печать и стирание не двигают поле.
   ВСЕГДА ОДНОЙ СТРОКОЙ (задача 1918, круг 20, п.5; скрин владельца 10.09
   04:02: «…смотрите на звёзды в телескоп» переносилась на вторую строку).
   Три опоры: сцены словаря не длиннее 56 знаков (proba_zaboty, ZNAKOV_MAX);
   `white-space: nowrap` — переноса нет по построению; на узком экране
   stroka.js меряет строку целиком до печати (canvas.measureText) и
   уменьшает кегль ровно настолько, чтобы она уместилась (не ниже 11 px).
   overflow: hidden — на случай, если скрипт не успел: срез, а не перенос. */
.ekran--chat .vhod-zag .vhod-scena {
  margin: 0 auto 8px; max-width: 100%; min-height: 1.5em;
  font-size: clamp(16px, 1.75vw, 20px); line-height: 1.5;
  color: var(--text); white-space: nowrap; overflow: hidden;
  text-overflow: clip;
}
.ekran--chat.ekran--dialog .vhod-zag .vhod-scena { margin-bottom: 4px; font-size: clamp(14px, 1.4vw, 17px); }
.vhod-scena-k {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -.12em; background: var(--accent, #D4AF37);
  animation: vsk .53s step-end infinite;
}
.vhod-scena.chtenie .vhod-scena-k { animation: vsk .53s step-end 3, vsu .4s linear 1.59s forwards; }
@keyframes vsk { 50% { opacity: 0; } }
@keyframes vsu { to { opacity: 0; } }
/* «Меньше движения» (класс tiho ставит скрипт): без курсора, сцена появляется и гаснет плавно. */
.vhod-scena.tiho .vhod-scena-k { display: none; }
.vhod-scena.tiho .vhod-scena-t { transition: opacity .6s ease; }
.vhod-scena.tiho.gasnet .vhod-scena-t { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vhod-scena-k { display: none; animation: none; } }
/* Перенос H1 на телефоне — только там (content_v2.zagolovok_s_perenosom). */
.vhod-zag-tel { display: none; }
@media (max-width: 760px) {
  .vhod-zag-tel { display: inline; }
  /* Телефон: одна строка (задача 1918, п.5) — резерв в две строки снят,
     кегль подбирает stroka.js по ширине; в разговоре строка остаётся. */
  .ekran--chat .vhod-zag .vhod-scena { font-size: 14px; min-height: 1.5em; margin-bottom: 6px; }
  .ekran--chat.ekran--dialog .vhod-zag .vhod-scena { font-size: 12.5px; margin-bottom: 4px; }
}

/* ---------- 19. Девиз под чатом (1884, п.3; слова — словарь главной, deviz) ---------- */
/* Мелко, золотом (--accent — то же золото, что у курсора строки), без анимации; одна строка.
   flex: 0 0 auto — в разговоре ленту сжимает браузер, девиз не уезжает за край экрана. */
.ekran--chat .vhod-deviz {
  flex: 0 0 auto; margin: clamp(6px, 1.2vh, 12px) auto 0; max-width: 860px;
  text-align: center; font-size: 12.5px; line-height: 1.4; letter-spacing: .03em;
  color: var(--accent, #D4AF37); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .ekran--chat .vhod-deviz { font-size: 12px; margin-top: 6px; }
}

/* ============================================================
   20. ПЯТЬ ЭКРАНОВ ГЛАВНОЙ — экраны 3, 4, 5 (задача 1950; слово владельца
   10.09.2026: «блок под размер экрана, посетитель видит в блоке всю
   информацию; заголовок и 3–4 строки как карточка и кнопка „если
   интересно“; текстов как можно меньше»).

   ОБЩЕЕ ПРАВИЛО ЭКРАНА (п.2 файла владельца): высота — окно минус шапка,
   содержимое по центру колонкой, ничего не обрезается краем; на телефоне
   экран не выше двух окон (min-height, а не height, — и `overflow` не
   режет). Отступы и кегли — clamp от высоты окна, чтобы 1280×720 и
   1920×1080 держали блок в одном окне без правок числа. Секции внутри
   экранов теряют свои большие вертикальные поля (.section — общий слой):
   их держит сам экран.
   ============================================================ */
.ekran--doska, .ekran--kuda, .ekran--cifry {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(10px, 2vh, 24px) 0;
}
@media (max-width: 760px) {
  .ekran--doska, .ekran--kuda, .ekran--cifry { min-height: 0; max-height: none; justify-content: flex-start; padding: 18px 0; }
}
.ekran--doska .ekran-in, .ekran--kuda .ekran-in, .ekran--cifry .ekran-in { width: 100%; }
.ekran--doska .section, .ekran--kuda .section, .ekran--cifry .section { padding: 0; }
.ekran--doska .section > .container, .ekran--kuda .section > .container, .ekran--cifry .section > .container { padding-left: 0; padding-right: 0; }
.ekran--kuda .section-head, .ekran--cifry .section-head { margin-bottom: clamp(10px, 2vh, 22px); text-align: center; }
.ekran--kuda .section-head h2, .ekran--cifry .section-head h2 { margin: 4px 0 0; font-size: clamp(22px, 3.2vh, 34px); }
.ekran--doska .ekran-zag { margin: 0 0 clamp(10px, 2vh, 22px); text-align: center; font-size: clamp(22px, 3.2vh, 34px); }
.ekran--doska .polosa-cex { padding: 0; }
.dalshe { margin: clamp(12px, 2.4vh, 26px) 0 0; text-align: center; }

/* ---------- 20.1. Экран 3 — живая доска ---------- */
/* Рамка блока дышит в такт делу — тот же `lenta--ramka`, что был у ленты
   (правило огня 0.4: светится только рамка). Внутри четыре строки. */
.doska {
  position: relative; max-width: 880px; margin: 0 auto;
  padding: clamp(14px, 2.6vh, 28px) clamp(16px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--bg, #0e0f12) 82%, transparent);
}
.doska-glavnoe {
  margin: 0 0 clamp(8px, 1.6vh, 16px); text-align: center;
  font-size: clamp(18px, 2.4vh, 24px); line-height: 1.3;
}
.doska-chislo {
  display: inline-block; min-width: 1.2em; margin: 0 .12em;
  font-size: clamp(34px, 6vh, 64px); font-weight: 700; line-height: 1;
  color: var(--accent, #D4AF37); font-variant-numeric: tabular-nums;
}
.doska-chislo[aria-busy="true"], .doska-chasy b[aria-busy="true"] { opacity: .45; }
.doska-stroki {
  list-style: none; margin: 0 0 clamp(10px, 2vh, 20px); padding: 0;
  display: grid; gap: clamp(4px, .8vh, 8px);
  font-size: clamp(14px, 1.9vh, 17px); line-height: 1.4;
}
.doska-stroki li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.doska-stroki li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #D4AF37); opacity: .85; transform: translateY(-2px); }
.doska-stroki li:last-child { border-bottom: 0; }
.doska-chto { color: var(--text); }
.doska-kak { color: var(--text-2); }
.doska-dve { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.4vw, 28px); align-items: start; }
.doska-prihodyat h3, .doska-chasy .doska-chasy-stroka { margin: 0 0 6px; font-size: clamp(13px, 1.7vh, 15px); font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.doska-prihodyat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.doska-prihodyat li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: clamp(12.5px, 1.6vh, 14px); color: var(--text); }
.doska-prihodyat ul:empty::before { content: '—'; color: var(--text-2); }
.doska-chasy .doska-chasy-stroka { color: var(--text); font-weight: 400; font-size: clamp(14px, 1.9vh, 17px); }
.doska-chasy b { font-size: clamp(22px, 3.4vh, 34px); color: var(--accent, #D4AF37); font-variant-numeric: tabular-nums; }
.doska-podpis { margin: 0; font-size: 12.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.doska-kak { display: inline; }
.doska-kak summary { display: inline-block; min-height: 44px; padding: 12px 4px; box-sizing: border-box; line-height: 20px; cursor: pointer; color: var(--accent-tekst, var(--accent)); text-decoration: underline dotted; list-style: none; } /* tap-cel 44 px */
.doska-kak summary::-webkit-details-marker { display: none; }
.doska-kak-telo { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.doska-kak-telo p { margin: 0 0 6px; }
.doska-ocenka { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doska-ocenka td { padding: 1px 10px 1px 0; }
.doska-src { margin: clamp(8px, 1.6vh, 14px) 0 0; font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.doska[data-zhivo="da"] .lenta-tochka { opacity: 1; }
@media (max-width: 760px) {
  .doska { padding: 14px; border-radius: 12px; }
  .doska-dve { grid-template-columns: 1fr; gap: 12px; }
  .doska-chislo { font-size: 38px; }
  .doska-stroki { font-size: 14px; }
}

/* ---------- 20.2. Экран 4 — «Куда идти»: четыре карточки, строка остальных, кнопка ---------- */
.kuda-karty.grid--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 18px); }
.kuda-karty .card { padding: clamp(12px, 2vh, 20px); }
.kuda-karty .card h3 { font-size: clamp(16px, 2.1vh, 19px); margin: 0 0 6px; }
.kuda-karty .card p { font-size: clamp(13px, 1.7vh, 15px); line-height: 1.45; margin: 0 0 8px; }
.kuda-esche { margin: clamp(10px, 2vh, 18px) 0 0; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.kuda-esche a { color: var(--text-2); text-decoration: underline dotted; }
.kuda-esche a:hover { color: var(--accent-tekst, var(--accent)); }
@media (max-width: 980px) { .kuda-karty.grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kuda-karty.grid--4 { grid-template-columns: 1fr; } }

/* ---------- 20.3. Экран 5 — три цифры и кнопка; за ним короткий подвал ---------- */
/* Экран 5 делит окно с подвалом (п.1 файла владельца: «цифры и короткий
   подвал»): его высота — окно минус шапка минус место под подвал. */
.ekran--cifry { min-height: calc(100vh - var(--hdr-h, 60px) - var(--pdv-korotkiy-h, 360px)); }
@supports (height: 100dvh) { .ekran--cifry { min-height: calc(100dvh - var(--hdr-h, 60px) - var(--pdv-korotkiy-h, 360px)); } }
.ekran--cifry .figs.figs--3 { max-width: 900px; margin: 0 auto; }
.ekran--cifry .fig-v { font-size: clamp(30px, 5vh, 52px); }
.ekran--cifry .src, .ekran--cifry .cifry-src { font-size: 12px; }
@media (max-width: 760px) { .ekran--cifry { min-height: 0; } }

/* ---------- 20.4. Девиз на первом экране (п.4: «космос и счётчик парка с девизом») ---------- */
.ekran-niz .ekran-deviz {
  pointer-events: auto; margin: 0 0 2px; max-width: 92vw;
  font-size: 13px; line-height: 1.4; letter-spacing: .03em; text-align: center;
  color: var(--accent, #D4AF37); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 760px) { .ekran-niz .ekran-deviz { font-size: 12px; white-space: normal; } }
/* девиз в шапке чата — тот же узел .vhod-deviz (§19), теперь внутри .vhod-zag */
.ekran--chat .vhod-zag .vhod-deviz { margin: 4px auto 0; }
.ekran--chat.ekran--dialog .vhod-zag .vhod-deviz { display: none; }

/* ---------- 21. Короткий подвал главной (п.1) ---------- */
/* Скелет тот же (проба подвала держит один на всю витрину); на компьютере
   восемь групп ссылок свёрнуты за одной строкой «все разделы» — раскрытие
   держит первая группа; на телефоне группы и так свёрнуты (details). */
.pdv.pdv--korotkiy { padding-top: 12px; }
.pdv--korotkiy .container { padding-top: 0; }
.pdv--korotkiy .pdv-cols { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 6px; }
.pdv--korotkiy .pdv-col { flex: 0 0 auto; }
.pdv--korotkiy .pdv-col details { border-bottom: 0; }
.pdv--korotkiy .pdv-col details:not([open]) > ul { display: none; }
.pdv--korotkiy .pdv-col summary { cursor: pointer; font-size: 11.5px; letter-spacing: .08em; color: var(--text-2); min-height: 44px; min-width: 44px; padding: 0 4px; margin: 0; } /* tap-cel 44 px (matrica sostoyaniy, palec) */
.pdv--korotkiy .pdv-col details[open] > ul { position: absolute; z-index: 5; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, #0e0f12); }
.pdv--korotkiy .pdv-col { position: relative; }
.pdv--korotkiy .pdv-slovo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 20px; align-items: start; }
.pdv--korotkiy .pdv-slovo p { margin: 2px 0; font-size: 12px; line-height: 1.4; }
/* dva dlinnyh abzaca tihogo slova (pdv-pay, pdv-dver) v korotkom podvale ne stoyat — oni est na kazhdoy dlinnoy stranice; ostayutsya brend, rasshifrovka imeni, deviz i stroka svyazi */
.pdv--korotkiy .pdv-pay, .pdv--korotkiy .pdv-dver { display: none; }
.pdv--korotkiy .pdv-slovo { grid-template-columns: 1fr 1fr; }
.pdv--korotkiy .pdv-bottom { margin-top: 8px; padding-top: 8px; padding-bottom: calc(var(--mcta-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)); font-size: 11.5px; gap: 4px 12px; }
@media (max-width: 760px) {
  .pdv--korotkiy .pdv-cols { gap: 0 12px; }
  .pdv--korotkiy .pdv-col summary { min-height: 44px; font-size: 11px; }
  .pdv--korotkiy .pdv-slovo { grid-template-columns: 1fr; gap: 0; }
  .pdv--korotkiy .pdv-slovo p { font-size: 11.5px; line-height: 1.35; }
  .pdv--korotkiy .pdv-bottom { font-size: 11px; gap: 2px 10px; }
}

/* ---------- 22. Карточка контакта в чате (п.3: заявка без формы) ---------- */
.vhod-zayavka-ryad { margin: 0; text-align: right; }
.vhod-zayavka-ryad[hidden] { display: none; }
.vhod-zayavka-knopka {
  background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer; /* tap-cel 44 px */
  font: inherit; font-size: 12.5px; color: var(--text-2); text-decoration: underline dotted;
}
.vhod-zayavka-knopka:hover { color: var(--accent-tekst, var(--accent)); }
.vhod-karta--zayavka { display: grid; gap: 8px; }
.vhod-karta--zayavka[hidden] { display: none; }
.vhod-zayavka-pole { display: grid; gap: 3px; font-size: 13px; color: var(--text-2); }
.vhod-zayavka-pole input {
  font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2, transparent); color: var(--text);
}
.vhod-zayavka-pole input:focus { outline: 2px solid var(--accent, #D4AF37); outline-offset: 1px; }
.vhod-zayavka-soglasie { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); }
.vhod-zayavka-soglasie input { margin-top: 3px; }
.vhod-zayavka-sost { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--accent-tekst, var(--accent)); }
.vhod-zayavka-sost:empty { display: none; }

/* Кнопка «Повторить» под сорвавшимся ответом (задача 2044, п.10). Высота 44 px
   — палец на телефоне берёт её без промаха; это та же мерка, что у значков
   ленты (.vhod-doc-dely--ocenka). */
.vhod-povtor {
  margin: 10px 0 0; font: 14px var(--font); color: var(--text);
  background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 10px; padding: 0 16px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.vhod-povtor:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vhod-povtor[disabled] { opacity: .55; cursor: default; }