/* =====================================================================
   07 · ЗАЯВКА — «квитанционная книжка», перенесено из preview-form/b.*
   05.09.2026. Прежний бланк отвергнут («не в нашем стиле и слишком
   просто») и остался лежать в preview-form/index.html + form.css.

   Все правила уже ограничены сценой .stage--formB — при переносе
   ничего скоблить не пришлось, голых правил ноль. Это первый блок за
   день, с которым так.
   ===================================================================== */

/* =====================================================================
   07 · ЗАЯВКА · ВАРИАНТ B — «БЛАНК В ДВУХ ЭКЗЕМПЛЯРАХ, ЧЕРЕЗ КОПИРКУ»

   ┌─ УСТРОЙСТВО ЛИСТА ─────────────────────────────────────────────────┐
   │ Слева на бумаге лежит квитанционная книжка: верхний бланк, под ним  │
   │ второй экземпляр со сдвигом, по верхней кромке перфорация, у обеих  │
   │ бумаг своя тень. Справа кадр, под ним прямые каналы графами.        │
   │ Сквозная красная линия ныряет ПОД книжку и выходит снизу.           │
   └─────────────────────────────────────────────────────────────────────┘

   ВСЕ СЕЛЕКТОРЫ ОГРАНИЧЕНЫ СВОЕЙ СЦЕНОЙ (.stage--formB / .scene--formB).
   Голые имена дважды ломали сайт: правило `.shot:hover { z-index: 30 }`
   из архива задевало «Повод». Здесь под сцену убрано ВСЁ, включая .pad,
   .g и .svc, которые сами по себе выглядят безобидно.

   ЦВЕТ. Только палитра проекта: #eeeeee бумага, #000000 чернила,
   #e03342 / #d8303e / #7a1c24 красное, #ffffff на красном. Ни одного
   нового оттенка. Все «серые» здесь — это чернила под opacity, а не
   серый цвет: серых плашек на сайте нет ни одной, плашка бывает только
   красной (кнопка).

   БУМАГА КНИЖКИ — ТА ЖЕ, ЧТО У ЛИСТА (--bg). Белую (#ffffff) взять
   нельзя: белым на этом сайте отличается фотобумага в футере, и это её
   единственное отличие. Предметом книжку делают не цвет, а тень, сдвиг
   второго экземпляра, перфорация и то, что фактура бумаги (.paper)
   лежит ПОД ней — значит на ней фактуры нет, и она ровно на столько
   чище листа, на сколько свежий бланк чище стола.

   ЧТО НЕ ИСПОЛЬЗУЕТСЯ: скругления, размытия, 3D, градиенты кроме
   красного из кита, стрелки, штампы-рамки (такого знака в языке сайта
   нет — его уже удаляли из блока 06).

   ДВИЖЕНИЯ ДО ДЕЙСТВИЯ ЧЕЛОВЕКА НЕТ ВОВСЕ. Ни одной анимации при
   загрузке, ни одного opacity: 0 в исходном состоянии, ни одного
   наблюдателя. Двигается ровно одно и ровно один раз: оторванный бланк,
   когда его оторвали.
   ===================================================================== */

/* Высоту держит соотношение сторон плюс min-height в vw — страховка для
   браузеров, где aspect-ratio не сработал. Формулу calc(--scene-h * --k)
   сюда ставить нельзя: Safari её не применяет и секция получает нулевую
   высоту, страница обрывается. */
.scene--formB {
  aspect-ratio: 1440 / 900;
  min-height: calc(100vw * 900 / 1440);
}

.stage--formB {
  --field: 73px;            /* левое и правое поле — общие для всех листов */

  --svc-fs: 13px;           /* служебная строка: колонтитул */
  --svc-lh: 18px;
  --svc-o: 0.62;

  --pad-w: 860px;           /* ширина книжки */
  --copy-off: 15px;         /* сдвиг второго экземпляра вправо и вниз */

  --key-fs: 16px;           /* название графы — напечатано, полная сила.
                               Кегль подписей кита (--caption-fs): своих
                               кеглей на листе нет ни одного. */
  --key-lh: 21px;
  --in-fs: 16px;            /* то, что пишет человек. Было 20 — сравнялось
                               с --key-fs: напечатанное и вписанное теперь
                               одного кегля, и рознят их только начертание
                               и цвет. */
  --in-lh: 22px;
  --in-ls: 0.04em;          /* трекинг ввода; им же набраны вкладыши в 06 */
  --par-fs: 12px;           /* скобка под линейкой графы */
  --par-lh: 16px;

  /* Линейка бланка. Была 0.62 — рядом с архивом лист читался блёклым:
     у соседа сверху разграфка идёт в полную силу чернил. Ниже 0.8 не
     опускаем и выше не поднимаем: сплошная чернота из линеек делает из
     бланка сетку. */
  --ink-line: rgba(0, 0, 0, 0.78);   /* разграфка бланка */
  --rule: var(--ink-line);           /* цвет линейки графы; краснеет под рукой */
  --ink-faint: rgba(0, 0, 0, 0.30);  /* линейки второго экземпляра */
  --carbon: 0.62;           /* плотность копирки: она бьёт слабее пера.
                               0.46 было честнее физически и нечитаемо на
                               глаз — проверено снимком. */

  /* Тень бумаги, лежащей на бумаге, — та же, что в архиве и в футере.
     Длинная добавляется только верхнему бланку: под ним не стол, а ещё
     несколько листов, и она показывает толщину книжки. */
  --lay-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
  --deep-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Фактуры привязаны процентами, а не прибитыми цифрами: высота сцены
   ещё может меняться, фактура обязана расти с ней. */
.stage--formB .paper { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
.stage--formB .grain {
  left: 18px; top: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
}

/* base.css обнуляет поля только у ПРЯМЫХ детей сцены. Внутри книжки
   браузер по-прежнему разводит абзацы своими отступами — вертикальный
   ритм бланка считается вручную, поэтому сбрасываем. */
.stage--formB p,
.stage--formB h3,
.stage--formB form { margin: 0; }

/* ---------------------------------------------------------------------
   КОЛОНТИТУЛ
   Пара «номер раздела слева / служебное слово справа» — та же, что в
   блоках 06 и 08. Три соседних листа с одинаковым колонтитулом читаются
   как разворот одной книги, а не как три документа рядом.
   --------------------------------------------------------------------- */
.stage--formB .fb-folio {
  left: var(--field);
  top: 60px;
  font-size: var(--svc-fs);
  line-height: var(--svc-lh);
  opacity: var(--svc-o);
  z-index: 20;
}

/* Выключка вправо, а не left: auto с расчётом: при правке слова строка
   иначе поедет от края. */
.stage--formB .fb-folio--right {
  left: auto;
  right: var(--field);
  text-align: right;
}

/* ---------------------------------------------------------------------
   СКВОЗНАЯ КРАСНАЯ ЛИНИЯ

   Приходит сверху по левому полю, уходит вправо и НЫРЯЕТ ПОД КНИЖКУ,
   а у нижней её кромки выныривает обратно к полю и уходит в футер.
   Она не обводит предмет и не украшает его — она просто идёт под ним,
   потому что нарисована маркером по бумаге, а книжку положили сверху.
   Это самый дешёвый способ показать, что предмет ЛЕЖИТ НА листе, и
   единственное, чем этот бланк отличается от бланка блока 06: тот
   напечатан на самой странице, и линия обходит его слева.

   z-index 2 — ниже книжки (6) и ниже кадра.
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   ШАПКА ЛИСТА

   56/62 с трекингом 0.04em — ровно тот кегль, которым набрана шапка
   «Опросного листа» в блоке 06. Прежний вариант заявки ставил здесь 84
   в две строки: заголовок съедал двести пикселей пустой бумаги и сам
   становился главным предметом листа. Здесь главный предмет — книжка,
   и шапка обязана быть ей соразмерна.
   --------------------------------------------------------------------- */
/* РУКОПИСНЫМ, а не моношириной. Сперва был поставлен синтетический курсив
   (Mono скошенным), Оксана показала, что имела в виду настоящую рукопись —
   ту же, которой написано «спросите ещё» в блоке 06. Поэтому здесь класс
   .hand, а не .mono: гарнитура, разрядка и цвет приходят оттуда, прописные
   сняты — рукопись прописными не пишут. */
.stage--formB .fb-head {
  /* Ушла из левого поля в пустой угол над кадром: 92 → 61 (в полтора
     раза мельче), координата своя, а не --field. Строка «расскажите,
     что будем праздновать» осталась на прежнем месте у левого поля —
     её Оксана двигать не просила. */
  left: 684px;               /* +20 вправо, +15 вниз по просьбе Оксаны */
  top: 55px;
  z-index: 20;               /* поверх кадра и книжки */
  font-size: 54px;
  line-height: 58px;
  /* Красная и с наклоном — как вся рукопись на сайте («отвечаю сам»,
     «спросите ещё», «и это не всё»): это не заголовок листа, а помета
     от руки, и цвет у неё маркерный. */
  color: var(--red-hand);
  transform: rotate(6deg);
  transform-origin: 0 50%;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: none;
}

/* Строка под шапкой набрана как НАЗВАНИЕ БЛОКА 06 («о чём спрашивают»):
   прописные, разрядка моно, полная плотность чернил. Решение Оксаны 05.09.
   Прежняя связка «казённое прописными / живое строчными» этим снята
   намеренно — соседние листы теперь набраны одинаково. */
.stage--formB .fb-live {
  left: var(--field);
  /* 92 — ОБЩИЙ РИТМ ЛИСТА: колонтитул на 60, название блока на 92,
     ровно как .folio / .cap--all в архиве и событиях. Стояло 168 —
     от той поры, когда над строкой была крупная шапка; шапка ушла
     вправо, и под колонтитулом осталась дыра в сто пикселей. */
  top: 92px;
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--ink);
}

/* =====================================================================
   КНИЖКА БЛАНКОВ — ГЛАВНЫЙ ПРЕДМЕТ ЛИСТА
   ===================================================================== */
.stage--formB .pad {
  /* БЛАНК БЕЛЫЙ, А НЕ СЕРЫЙ. Лист сайта — #eee, и бланк того же цвета
     сливался с ним: предмет читался пятном, а не бумагой, положенной
     сверху. Белый отделяет его от листа и без обводки. Цвет собран в
     одну переменную — все четыре бумажки книжки берут её отсюда.
     Правка Оксаны 06.09, для обоих размеров. */
  --pad-paper: #ffffff;
  left: var(--field);
  /* 150 — сразу под названием блока (92 + строка). Стояло 222, от той
     поры, когда над бланком была крупная шапка в две строки; шапка ушла
     вправо, и между строкой и книжкой висела пустая бумага. */
  top: 150px;
  width: var(--pad-w);
  z-index: 6;
}

/* --- ОСТАЛЬНАЯ КНИЖКА -------------------------------------------------
   Ещё два листа под двумя верхними: без них предмет читается «двумя
   бумажками», а не книжкой бланков, и «взять новый бланк» на копии
   становится пустым словом — брать было бы неоткуда. Оба листа
   декоративные, в разметке их нет: рисовать пустую бумагу элементами
   незачем, а псевдоэлементы стоят ноль строк доступности.
   Тень им box-shadow, а не drop-shadow: clip-path на них не стоит. --- */
.stage--formB .pad::before,
.stage--formB .pad::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--pad-paper);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
}

.stage--formB .pad::before { z-index: 0; transform: translate(37px, 30px); }
.stage--formB .pad::after  { z-index: 0; transform: translate(27px, 23px); }

/* --- ВТОРОЙ ЭКЗЕМПЛЯР -------------------------------------------------
   Лежит НИЖЕ верхнего бланка и со сдвигом вправо-вниз, поэтому из-под
   него видны две кромки. Высоту берёт от верхнего (min-height: 100%),
   но расти вниз ему не запрещено: после отрыва на нём появляется
   служебный абзац и кнопка «взять новый бланк».

   Тень даётся drop-shadow, а не box-shadow: у оторванных кромок стоит
   clip-path, а clip-path режет box-shadow вместе с бумагой. Тем же
   способом сделаны вкладыши в блоке 06 и оборот отпечатка в 08. ----- */
.stage--formB .pad__copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--pad-paper);
  transform: translate(var(--copy-off), var(--copy-off));
  filter: drop-shadow(var(--lay-shadow));
}

/* Верхний бланк ушёл — копия стала верхней и получает его длинную тень. */
.scene--formB[data-state="sent"] .pad__copy {
  filter: drop-shadow(var(--lay-shadow)) drop-shadow(var(--deep-shadow));
}

/* Фокус на копию переводит скрипт, чтобы человек с клавиатуры оказался
   там, где теперь всё содержание. Обводку при этом НЕ рисуем: копия не
   интерактивна, а рамка вокруг половины листа читается как ошибка (так и
   выглядело на первом снимке состояния «оторвано»). Понятно и без неё:
   содержимое сменилось, role=status его озвучил, следующая табуляция
   попадает на кнопку «взять новый бланк». */
.stage--formB .pad__copy:focus,
.stage--formB .pad__copy:focus-visible { outline: none; }

/* --- ВЕРХНИЙ БЛАНК ----------------------------------------------------
   Две тени: короткая — контакт бумаги с бумагой, длинная — то, что под
   ним лежит вторая бумага, а не стол. Одна тень этого не показывает:
   либо предмет липнет к листу, либо висит в воздухе.

   Фильтр стоит на обёртке, а не на корешке и отрывной части по
   отдельности. Так до отрыва они читаются одним листом (шва между ними
   нет), а после отрыва тень уезжает вместе с улетающей частью: фильтр
   применяется к уже сложенному результату, включая её transform. ---- */
.stage--formB .pad__top {
  position: relative;
  z-index: 2;
  filter: drop-shadow(var(--lay-shadow)) drop-shadow(var(--deep-shadow));
}

/* --- КОРЕШОК КНИЖКИ ---------------------------------------------------
   Узкое поле над перфорацией — то, что остаётся в книжке обрывком.
   На нём НИЧЕГО не напечатано, и это не экономия: печатать на отрывном
   поле нечего, а главное — после отрыва обрывок ложится точно на корешок
   копии, и любые надписи на обоих встали бы друг на друга (так и было на
   первом снимке состояния «оторвано»).

   Служебные надписи стоят теперь В САМОМ БЛАНКЕ, сразу под перфорацией.
   Вполсилы: у них нет своего предмета, они говорят не факт, а какой это
   лист. Цифр в них нет намеренно — печатная форма соблазняет дописать
   номер бланка и тираж, а выдумывать нам нечего. --------------------- */
.stage--formB .pad__strip {
  position: relative;
  height: 16px;
  background: var(--pad-paper);
}

.stage--formB .pad__svcline {
  position: absolute;
  left: 30px;
  top: 14px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  opacity: 0.5;
}

.stage--formB .pad__svcline--right {
  left: auto;
  right: 30px;
  text-align: right;
}

/* --- ПЕРФОРАЦИЯ -------------------------------------------------------
   Ряд ПРОБИТЫХ ОТВЕРСТИЙ, а не пунктирная линейка: по нему видно, где
   бумага порвётся, ещё до того, как её порвали. Дырки нарисованы
   радиальным градиентом с шагом 10px — так их ровно столько, сколько
   влезает в ширину книжки, и при правке ширины они не пересчитываются.
   --------------------------------------------------------------------- */
.stage--formB .pad__perf {
  display: block;
  height: 4px;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0.55) 1.25px, transparent 1.35px);
  background-size: 10px 4px;
  background-repeat: repeat-x;
  opacity: 0.72;
  transition: opacity 0.25s ease;
}

/* Кнопка и линия отрыва — одно действие: наводишь на кнопку, перфорация
   наливается. Это и подсказка, что именно произойдёт. */
.stage--formB .pad__top:has(.pad__go:hover) .pad__perf,
.stage--formB .pad__top:has(.pad__go:focus-visible) .pad__perf { opacity: 1; }

/* --- ОТРЫВНАЯ ЧАСТЬ --------------------------------------------------- */
.stage--formB .pad__body {
  position: relative;
  background: var(--pad-paper);
  padding: 46px 30px 30px;   /* сверху — место под служебную строку листа */
  transform-origin: 30% 0;
  transition:
    transform 0.62s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.48s ease 0.14s,
    visibility 0s linear 0.62s;
}

/* ---------------------------------------------------------------------
   ГРАФЫ

   Название графы НАПЕЧАТАНО и потому набрано в полную силу чернил;
   скобка под линейкой — вполсилы: она поясняет графу, а не называет её.
   Плейсхолдеров внутри полей нет вовсе: в печатной форме их не бывает,
   подсказка исчезает ровно тогда, когда начинаешь писать, а любой
   пример номера пришлось бы выдумать.
   --------------------------------------------------------------------- */
.stage--formB .g-row {
  display: flex;
  gap: 40px;
  margin-bottom: 4px;
}

/* Общая высота у всех граф: иначе строка с двумя графами разъезжается,
   когда у одной есть скобка, а у другой нет. */
.stage--formB .g {
  flex: 1 1 0;
  min-width: 0;
  min-height: 104px;
}

.stage--formB .g--wide { flex: 1 1 100%; }
.stage--formB .g--two  { min-height: 132px; }

.stage--formB .g__key {
  display: block;
  margin-bottom: 5px;
  font-size: var(--key-fs);
  line-height: var(--key-lh);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Линейка, по которой пишут. Толщина 2px и чернильный цвет, а не
   тонкая серая: так выглядит линованный бланк, а не поле ввода.
   Толщина при фокусе НЕ меняется — меняется только цвет, иначе строка
   подпрыгивает на пиксель под рукой у печатающего. */
.stage--formB .g__line {
  display: block;
  position: relative;
  height: 34px;
  border-bottom: 2px solid var(--rule);
  transition: border-color 0.2s ease;
}

/* --- ГРАФА В ДВЕ ЛИНЕЙКИ ----------------------------------------------
   Линейки нарисованы фоном самой графы, а не границами: их две, они
   идут через всю ширину и текст ложится ровно на них (шаг фона равен
   межстрочному в поле). Поле поверх прозрачное — пишут по бумаге. --- */
.stage--formB .g__lines {
  display: block;
  position: relative;
  min-height: 68px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 32px,
    var(--rule) 32px 34px
  );
}

.stage--formB .g__area {
  height: 68px;              /* две линейки; дальше растёт по набранному */
  padding: 0 2px;
  line-height: 34px;
  resize: none;
  overflow: hidden;          /* полосы прокрутки внутри бумаги не бывает —
                                вместо неё графа отращивает третью линейку,
                                см. b.js, «графа в две линейки» */
  display: block;
}

/* ШАГ СТРОКИ РАВЕН ШАГУ ЛИНЕЕК, И ЭТО ОБЯЗАТЕЛЬНО. У .g__area он стоит
   правильный (34px), но .g__in идёт в файле НИЖЕ и тем же весом сбивал его
   на общеполевой --in-lh: 22px. Набранный текст шёл шагом 22 по линейкам с
   шагом 34 и переползал их — со второй строки уже поперёк. Правило ниже
   держит именно многострочную графу и весом (два класса) сильнее обоих. */
.stage--formB textarea.g__area { line-height: 34px; }

.stage--formB .g__in {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 2px 5px;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--in-fs);
  line-height: var(--in-lh);
  letter-spacing: var(--in-ls);
  text-transform: none;
  color: var(--ink);
  /* Курсор — красный: маркер, которым на этом сайте пишут по бумаге. */
  caret-color: var(--red);
}

/* Автозаполнение Chrome заливает поле своим голубым и красит текст
   своим синим — обе краски чужие. Возвращаем бумагу и чернила. */
.stage--formB .g__in:-webkit-autofill,
.stage--formB .g__in:-webkit-autofill:hover,
.stage--formB .g__in:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--red);
  transition: background-color 9999s;
}

/* Графа, в которой пишут прямо сейчас: линейка и её название краснеют.
   Это тот же красный маркер, что ведёт человека по всему сайту, — он
   показывает, на какой строке рука. */
.stage--formB .g:focus-within { --rule: var(--red); }
.stage--formB .g:focus-within .g__key { color: var(--red); }

/* Видимый фокус. Обводка обязана быть: смены цвета линейки для этого
   мало (красный светлее чернил, и на контрасте это не выигрыш). Взят
   КРАСНЫЙ, а не чернильный: тогда весь показ фокуса — один жест того же
   маркера, который ведёт человека по сайту, а не чужая рамка поля ввода.
   #e03342 на #eeeeee даёт около 4:1 — выше требуемых 3:1 для нетекстовых
   элементов. */
.stage--formB .g__in:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 6px;
}

.stage--formB .g__par {
  display: block;
  margin-top: 5px;
  font-size: var(--par-fs);
  line-height: var(--par-lh);
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.58;
  white-space: normal;   /* .mono набран nowrap — многострочному включаем сами */
}

/* Ошибка стоит на месте скобки и того же кегля: место под неё
   зарезервировано всегда (min-height), поэтому бланк не дёргается,
   когда она появляется. */
.stage--formB .g__err {
  display: block;
  margin-top: 2px;
  min-height: 16px;
  font-size: var(--par-fs);
  line-height: var(--par-lh);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--red);
  white-space: normal;
}

.stage--formB .g[data-error] { --rule: var(--red); }

/* Ловушка для роботов. display: none её выдаёт, поэтому поле честно
   существует и просто вынесено за пределы листа. */
.stage--formB .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   ОБЩАЯ ОШИБКА, СОГЛАСИЕ, ПОДВАЛ БЛАНКА
   --------------------------------------------------------------------- */
.stage--formB .fb-sum {
  min-height: 18px;
  margin-top: 2px;
  font-size: var(--svc-fs);
  line-height: var(--svc-lh);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--red);
  white-space: normal;
}

/* Согласие — печатная оговорка формы, а не мелочь под кнопкой сайта:
   стоит над подвалом, там, где в бланке стоят условия перед подписью. */
.stage--formB .fb-consent {
  flex: 0 1 auto;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0;
  opacity: 0.6;
  white-space: normal;   /* .ui тоже nowrap */
}

.stage--formB .pad__rule {
  display: block;
  height: 1px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.26);
}

.stage--formB .pad__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 16px;
}

/* --- СЛУЖЕБНАЯ ЗОНА ---------------------------------------------------
   В печатной форме всегда есть часть, которую заполняет не заявитель.
   Она стоит пустой и ОБЯЗАНА стоять пустой: ничего ещё не принято, и
   выдумывать отметку о приёме мы не будем — канала отправки не
   существует. Линейка здесь ЧЕРНИЛЬНАЯ, а не красная: красным на этом
   сайте помечен неизвестный нам факт, а тут просто незаполненная графа.
   Это же место повторено на втором экземпляре — на вашей копии отметки
   о приёме нет ровно так же.
   --------------------------------------------------------------------- */
.stage--formB .svc { flex: 0 0 300px; padding-top: 2px; }

.stage--formB .svc__head {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.18em;
  opacity: 0.5;
}

.stage--formB .svc__row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
  font-size: var(--svc-fs);
  line-height: var(--svc-lh);
  opacity: 0.7;
}

.stage--formB .svc__line {
  width: 150px;
  height: 12px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--ink-faint);
}

/* --- КНОПКА -----------------------------------------------------------
   Красная плашка кита (та же заливка, что у углового блока, нижних
   полос и штемпеля в футере) — но названа ДЕЙСТВИЕМ С ВЕЩЬЮ: не
   «отправить заявку», а то, что человек делает руками с бумагой.
   Стрелок внутри нет — запрет проекта.

   Отклик на наведение сделан не подменой цвета (нового красного в
   палитре нет, а --red-deep для наведения слишком тёмный), а тем, что
   плашка чуть подаётся и наливается перфорация над ней. Нажатие —
   --red-deep, тёмный конец нашего же градиента.
   --------------------------------------------------------------------- */
.stage--formB .pad__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-w);
  height: 56px;
  padding: 0 28px;
  border: 0;
  background: var(--red);
  color: var(--on-red);
  font-size: var(--nav-fs);
  line-height: var(--nav-lh);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.15s ease;
}

.stage--formB .pad__go:hover { transform: translateY(-1px); }
.stage--formB .pad__go:active { background: var(--red-deep); transform: none; }
.stage--formB .pad__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.stage--formB .pad__go[disabled] { opacity: 0.55; cursor: default; transform: none; }

/* =====================================================================
   ВТОРОЙ ЭКЗЕМПЛЯР: НАБОР

   Копирка переносит только НАПИСАННОЕ — отсюда --carbon на значениях:
   они пробиты через бумагу и потому вполсилы. Названия граф на копии
   напечатаны в типографии вместе с книжкой, но это служебный экземпляр
   и печать на нём слабее. Значения набраны строчными и трекингом ввода:
   это отпечаток того, что писали, а не типографский набор формы.
   ===================================================================== */
/* Копия ростом с бланк, а набора на ней меньше: кнопки и согласия тут
   нет. Разницу забирает НИЖНИЙ отступ, а не межстрочные — графы стоят
   там же, где на бланке, а подвал прижат к нижней кромке бумаги.
   Иначе внизу копии оставалась пустая треть листа. */
.stage--formB .cb {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 46px 30px 30px;
}

.stage--formB .cb__foot { margin-top: auto; }

.stage--formB .cb__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 20px;
  font-size: var(--key-fs);
  line-height: var(--key-lh);
  opacity: 0.58;
}

.stage--formB .cb__k { flex: 0 0 150px; }

/* Линейка тянется до правого края: слово встанет на её место, ничего
   не сдвинув. Значение сидит НА линейке, как написанное по ней. */
.stage--formB .cb__v {
  flex: 1 1 auto;
  min-height: 24px;
  padding: 0 2px 3px;
  border-bottom: 1px solid var(--ink-faint);
  font-size: var(--in-fs);
  line-height: var(--in-lh);
  letter-spacing: var(--in-ls);
  text-transform: none;
  color: var(--ink);
  opacity: var(--carbon);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage--formB .cb__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 24px;
}

.stage--formB .cb__side { flex: 0 0 300px; }
.stage--formB .svc--cb { flex: none; }

.stage--formB .cb__keep {
  margin-top: 26px;
  white-space: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.18em;
  opacity: 0.5;
}

/* --- ЧТО НАПЕЧАТАНО НА КОПИИ ПОСЛЕ ОТРЫВА ---------------------------- */
.stage--formB .cb__after { flex: 1 1 auto; min-width: 0; }

.stage--formB .cb__title {
  font-size: var(--mono-fs);
  line-height: var(--mono-lh);
}

.stage--formB .cb__dev {
  max-width: 620px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0;
  opacity: 0.62;
  white-space: normal;
}

.stage--formB .cb__dev code {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* «Взять новый бланк» — не плашка: плашка на листе одна, и она уже
   потрачена на действие. Это строка, по которой кликают. */
.stage--formB .cb__again {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--svc-fs);
  line-height: var(--svc-lh);
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1.6px solid var(--red);
  cursor: pointer;
}

.stage--formB .cb__again:hover { color: var(--red); }
.stage--formB .cb__again:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* =====================================================================
   ОТРЫВ — ЕДИНСТВЕННОЕ СОБЫТИЕ ЛИСТА

   Перфорация гаснет (она стала разрывом), у корешка появляется рваная
   нижняя кромка, у отрывной части — рваная верхняя, и она уходит вниз
   вправо с лёгким доворотом. Под ней остаётся второй экземпляр.

   Кромки нарисованы clip-path по точкам: зубцы неровные и не совпадают
   по шагу с перфорацией — рвут бумагу рукой, а не по линейке.
   ===================================================================== */
.scene--formB[data-state="sent"] .pad__top .pad__perf { opacity: 0; }

.scene--formB[data-state="sent"] .pad__strip {
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 1px), 96% calc(100% - 5px), 93% calc(100% - 2px),
    90% calc(100% - 6px), 87% 100%, 84% calc(100% - 4px),
    81% calc(100% - 3px), 78% calc(100% - 6px), 75% 100%,
    72% calc(100% - 5px), 69% calc(100% - 1px), 66% calc(100% - 6px),
    63% calc(100% - 2px), 60% calc(100% - 4px), 57% 100%,
    54% calc(100% - 5px), 51% calc(100% - 1px), 48% calc(100% - 7px),
    45% calc(100% - 3px), 42% calc(100% - 6px), 39% 100%,
    36% calc(100% - 4px), 33% calc(100% - 2px), 30% calc(100% - 6px),
    27% 100%, 24% calc(100% - 5px), 21% calc(100% - 1px),
    18% calc(100% - 7px), 15% calc(100% - 2px), 12% calc(100% - 4px),
    9% 100%, 6% calc(100% - 5px), 3% calc(100% - 1px), 0 calc(100% - 6px)
  );
}

.scene--formB[data-state="sent"] .pad__body {
  clip-path: polygon(
    0 6px, 3% 1px, 6% 5px, 9% 0, 12% 4px, 15% 2px, 18% 7px, 21% 1px,
    24% 5px, 27% 0, 30% 6px, 33% 2px, 36% 4px, 39% 0, 42% 6px, 45% 3px,
    48% 7px, 51% 1px, 54% 5px, 57% 0, 60% 4px, 63% 2px, 66% 6px, 69% 1px,
    72% 5px, 75% 0, 78% 6px, 81% 3px, 84% 4px, 87% 0, 90% 6px, 93% 2px,
    96% 5px, 100% 1px,
    100% 100%, 0 100%
  );
  transform: translate(58px, 104px) rotate(2.6deg);
  opacity: 0;
  /* visibility снимает ушедший бланк и с клавиатуры, и из дерева
     доступности: прозрачная форма всё ещё ловит табуляцию. */
  visibility: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   КАДР

   Единственная фотография листа. Ч/б, как все на сайте; цвет наливается
   под курсором — это язык проекта, а не анимация блока.

   УХОДИТ ПОД ПРАВЫЙ ОБРЕЗ (1046 + 394 = 1440) — приём блоков 02, 04 и 08.
   Стоял в поле 73, как всё остальное, и правая половина листа читалась
   выставкой в рамке: бланк слева, кадр справа, между ними воздух. Обрез
   тяжелит правый край и не даёт листу распасться на две колонки.
   Прямые каналы под кадром обреза НЕ знают и держат поле 73: обрезается
   изображение, а не набор.

   ВЕРХ КАДРА ВЫШЕ ВЕРХА КНИЖКИ (106 против 226) намеренно. Правый верх
   листа оставался пустой бумагой в четверть разворота, а кадр вровень с
   книжкой читался как вторая колонка в паре. Пропорция 394×590 — родная
   для этого снимка (1199×1800), кадрировать ничего не пришлось.
   --------------------------------------------------------------------- */
.stage--formB .fb-shot {
  /* ПРАВЫЙ КРАЙ ДЕРЖИТСЯ КРОМКИ БУМАГИ. Кадр стоял до 1440, а бумага
     кончается на 1422 — он вылезал на белое поле страницы. Заодно ужат
     в 1.19 раза (394×590 → 330×494) при той же пропорции: колонка под
     ним поднимается и вся правая половина влезает в лист.
     1092 + 330 = 1422. */
  left: 1037px;
  top: 106px;
  width: 330px;
  height: 494px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  z-index: 5;
}

.stage--formB .fb-shot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.55s ease;
}

/* ОТКЛИКА НА НАВЕДЕНИЕ У ЭТОГО КАДРА НЕТ, И ЭТО НЕ ЗАБЫТО.

   Здесь стояло общее правило «цвет наливается под курсором», как у всех
   фотографий сайта. Но кадр `couple-umbrella-bw.jpg` чёрно-белый в самом
   файле — измеренная насыщенность 0.00, и у исходника в _original тоже.
   Проявлять нечего: правило срабатывало, а на листе не менялось ничего,
   и кадр притворялся живым. Оксана решила кадр оставить (06.09), значит
   правило уходит.

   Поставишь сюда цветную фотографию — верни отклик, он на месте у всех
   остальных кадров. */

/* Подпись прижата к нижней кромке кадра — по системе подписей выноска
   ей не нужна. Называет предмет, значит без слэша и в полную силу. */
.stage--formB .fb-cap {
  left: 1037px;
  top: 614px;
  width: 330px;              /* ширина колонки: строка переносится, а не лезет за кромку */
  white-space: normal;
  font-size: var(--caption-fs);
  line-height: var(--caption-lh);
}

/* ---------------------------------------------------------------------
   ПРЯМЫЕ КАНАЛЫ

   Набраны графами, как на обороте отпечатка в футере: это один язык.
   Обе линейки КРАСНЫЕ и пустые — правило проекта: непроверенное стоит
   пустым местом на красной линейке и помечено data-verify. Ни номера,
   ни ника у нас нет, и на листе их не будет, пока их не назовёт
   Валентин. Линейка тянется до правого края колонки, поэтому его слово
   встанет на место, ничего не сдвинув.
   --------------------------------------------------------------------- */
.stage--formB .fb-dir {
  left: 1037px;
  top: 658px;
  width: 330px;
}

.stage--formB .fb-dir__head {
  font-size: var(--svc-fs);
  line-height: var(--svc-lh);
  opacity: var(--svc-o);
  margin-bottom: 12px;
}

.stage--formB .fb-dir__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-height: 20px;
  margin-bottom: 12px;
  font-size: var(--key-fs);
  line-height: var(--key-lh);
}

.stage--formB .fb-dir__k { flex: 0 0 104px; }

.stage--formB .fb-slot {
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  margin-bottom: 4px;
  border-bottom: 1.6px solid var(--red);
}

html[data-dev] .stage--formB .fb-slot::after {
  content: attr(data-verify);
  position: absolute;
  left: 0;
  bottom: -14px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   РУКОПИСЬ
   Denistina комментирует и никогда ничего не подписывает — та же роль,
   что у «и это не всё» в архиве и «дальше — ваш вечер» в футере.
   Два слова, и факта в них нет ни одного.
   --------------------------------------------------------------------- */
/* СОЦСЕТИ И СНОСКА под прямыми каналами. */
.stage--formB .fb-soc {
  display: flex;
  gap: 34px;
  margin: 6px 0 0;           /* висели оторванно от заголовка */
}

.stage--formB .fb-soc a { text-decoration: none; }

/* Под рукой ссылка подчёркивается — красным, как всё, что на этом сайте
   проведено маркером. Толщина и отступ подобраны так, чтобы черта читалась
   пометкой поверх бумаги, а не типографским подчёркиванием. */
.stage--formB .fb-soc a:hover,
.stage--formB .fb-soc a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.6px;
  text-underline-offset: 5px;
}

.stage--formB .fb-fine {
  margin: 14px 0 0;
  font-size: var(--fine-fs);
  line-height: 15px;
  opacity: var(--svc-o);
  white-space: normal;
}

/* СЛУЖЕБНАЯ ЗОНА ГОВОРИТ ЧЕЛОВЕЧЕСКИМ ГОЛОСОМ. Было «ПРИНЯТО ____» —
   графа с пустой линейкой под отметку о приёме. Стало обещание, и
   линейка снята вместе с ним: вписывать в неё больше нечего.
   Строчными намеренно: по языку листа прописные — казённое, строчные —
   живое, а это живое. */
.stage--formB .svc__say {
  font-size: var(--key-fs);
  line-height: var(--key-lh);
  text-transform: none;
}

.stage--formB .fb-note {
  /* Переехала наверх, правее строки «форма» и над соцсетями: внизу она
     висела сама по себе, оторванная от того, что комментирует. Мельче
     (46 → 30) — это помета в углу колонки, а не подпись под ней. */
  left: 1197px;
  top: 642px;
  font-size: 30px;
  line-height: 1.3;
  color: var(--red-hand);
  white-space: nowrap;
  z-index: 14;
  transform: rotate(-8deg);
  transform-origin: 0 50%;
}

/* Нижние полосы — тот же приём, что закрывает блоки 02, 03, 04 и 06. */
.stage--formB .bar--formB  { left: 0;   top: 844px; width: 560px; height: var(--stripe-h); }
.stage--formB .bar--formB2 { left: 592px; top: 844px; width: 122px; height: var(--stripe-h); }

/* =====================================================================
   СПОКОЙНЫЙ РЕЖИМ

   Отрыв остаётся событием — без него человек не поймёт, что заявка
   ушла, — но происходит без движения: бланк просто снимается, копия
   остаётся. Цвет под курсором НЕ выключается: «кадр наливается цветом
   под рукой» это язык сайта, а не анимация, и человек с включённой
   настройкой должен видеть спокойный сайт, а не урезанный.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stage--formB .pad__body,
  .stage--formB .pad__perf,
  .stage--formB .pad__go,
  .stage--formB .g__line,
  .stage--formB .g__key { transition: none; }

  .scene--formB[data-state="sent"] .pad__body { transform: none; }
  .stage--formB .pad__go:hover { transform: none; }
}



/* --- КОПИЯ СКВОЗНОЙ ЛИНИИ, ЛЕЖАЩАЯ ПОД КНИЖКОЙ --------------------- */
.stage--formB .thread-under {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 912px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}


/* ОТОРВАННЫЙ ЛИСТ НЕ ЛОВИТ МЫШЬ. После отрыва .pad__top улетает, но
   остаётся в разметке и лежит поверх копии — а на копии стоит «взять
   новый бланк». Клик уходил в улетевший лист, и кнопка не работала:
   проверено `elementFromPoint` по её середине, сверху оказывался
   pad__top. До отрыва лист трогать нельзя — это и есть форма, которую
   заполняют, поэтому правило висит на состоянии. */
.scene--formB[data-state="sent"] .pad__top { pointer-events: none; }


/* СЛУЖЕБНАЯ ЗОНА НА ВЕРХНЕМ ЛИСТЕ — ТОЛЬКО ПОСЛЕ ОТПРАВКИ.

   «Заполняется ведущим · я скоро с вами свяжусь» — это ответ на уже
   отправленную заявку. На пустом бланке он стоял обещанием того, чего
   ещё не случилось: человек ничего не написал, а лист уже отвечает.
   На копии (.svc--cb) зона остаётся всегда — копия и существует затем,
   чтобы на ней этот ответ прочитали после отрыва. */
.scene--formB:not([data-state="sent"]) .stage--formB .pad__top .svc { visibility: hidden; }