/* ============================================================
   Кнопки, поля, ссылки.
   Пока только то, без чего страница нечитаема на тёмном фоне.
   Карточки, окно загрузки и плитки комплекта — на стадии возможностей.
   ============================================================ */

a {
  color: var(--c-accent-text);
  text-underline-offset: 0.18em;
}

/* Видимая рамка фокуса обязательна: по сайту ходят и с клавиатуры, а на
   тёмном фоне браузерная рамка по умолчанию почти не видна. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* ---------- поля ---------- */

input, textarea, select, button { font: inherit; }

:where(input:not([type="submit"]):not([type="button"]), textarea, select) {
  background: var(--c-surface);
  color: var(--c-text);
  border: var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}

::placeholder { color: var(--c-muted); opacity: 1; }

/* ---------- кнопки ---------- */

:where(button, input[type="submit"], input[type="button"], .button) {
  background: var(--c-accent);
  color: var(--c-accent-in);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

:where(button, input[type="submit"], input[type="button"], .button):hover {
  filter: brightness(1.08);
}

/* ============================================================
   Окно загрузки
   ============================================================ */

.pa-lede { max-width: 54ch; margin-block-end: var(--s-7); }

.pa-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-4);
}

/*
 * Отступ под заголовком больше, чем над ним.
 *
 * Было одинаково: 16 пикселей после надзаголовка в 12 пикселей и столько же
 * после заголовка в 56. Один зазор для крошечной строки и для огромной —
 * отсюда ощущение, что текст слипся. Воздух обязан считаться от роста того,
 * за чем он идёт.
 *
 * Надзаголовок остаётся прижатым: он подпись к заголовку, а не отдельная
 * мысль, и отодвинуть его значило бы разорвать пару.
 */
.pa-lede__title { font-size: var(--t-hero); margin: 0 0 var(--s-5); }

.pa-lede__sub {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-lg);
  max-width: var(--w-text);
}

/* ---------- зона броска ---------- */

.pa-drop {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.pa-drop:hover { background: var(--c-hover); }

/* Поле спрятано от глаза, но не от клавиатуры и не от чтеца: display:none
   выкинул бы его из порядка обхода, и зона перестала бы открываться с
   клавиатуры вовсе. */
.pa-drop__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pa-drop:focus-within {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.pa-drop.is-over {
  border-color: var(--c-accent-text);
  border-style: solid;
  background: var(--c-hover);
}

.pa-drop__mark {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background: var(--c-accent);
  flex: none;
}

.pa-drop__text { display: flex; flex-direction: column; gap: var(--s-1); }
.pa-drop__text b { font-weight: var(--fw-semi); }

.pa-drop__hint {
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.pa-drop__cta {
  margin-inline-start: auto;
  background: var(--c-accent);
  color: var(--c-accent-in);
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-semi);
  font-size: var(--t-sm);
  white-space: nowrap;
}

/* ---------- что вышло ---------- */

@keyframes pa-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
}

/*
 * Отступ снизу — не украшение. Без него сообщение об ошибке прилипает к
 * первому полю формы, и «That email and password do not match» читается как
 * подпись к полю «Your email». Так было на странице регистрации с самого
 * начала, просто ошибку там до сих пор никто не видел.
 */
.pa-error {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border-inline-start: 3px solid var(--c-error);
  color: var(--c-text);
  max-width: var(--w-text);
}

@media (max-width: 720px) {
}

.pa-note {
  margin: 0 0 var(--s-5);
  color: var(--c-ok);
  font-size: var(--t-sm);
  max-width: 46ch;
}

.pa-actions { margin: 0; }

/* ---------- кнопка ---------- */

/* Отдельным классом, а не только через :where(button).
   У :where() специфичность ноль, и правило родительской темы его перебивает —
   кнопка выходила серой, хотя цвет был задан. Наши кнопки носят этот класс. */
.pa-button {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-accent-in);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-body);
  font-weight: var(--fw-semi);
  font-size: var(--t-sm);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--dur-fast) var(--ease);
}

.pa-button:hover { filter: brightness(1.08); }
.pa-button:active { filter: brightness(0.94); }

/*
 * Кольцо фокуса — контуром, а не тенью: у крупной кнопки тень уже занята
 * приподнятостью, и вторая её затёрла бы. Видно только при переходе клавишей,
 * мышью не мелькает.
 */
.pa-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  outline-offset: 3px;
}

/* На телефоне зона броска складывается столбиком: в строку она не влезает —
   заголовок рвётся посреди слова, а кнопка отжимает подсказку в узкую колонку.
   Телефон здесь не запасной случай, а основной: товар снимают им же. */
@media (max-width: 560px) {
  .pa-drop {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-5);
  }

  .pa-drop__mark { align-self: flex-start; }

  .pa-drop__cta {
    margin-inline-start: 0;
    text-align: center;
    padding-block: var(--s-4);
  }
}

/* ---------- ход работы ---------- */

/* ---------- готовый комплект ---------- */

.pa-set { margin-block-start: var(--s-6); }

/* Плитки разной формы, и это правда о содержимом: комплект и состоит из
   разных форм. Ровная сетка квадратов сказала бы неправду. */
/* Второстепенное действие рядом с главным: не кнопка, чтобы не спорить с ней. */
.pa-plain {
  background: none;
  border: 0;
  color: var(--c-muted);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  cursor: pointer;
  padding: var(--s-3) var(--s-2);
  margin-inline-start: var(--s-3);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pa-plain:hover { color: var(--c-text); }

/* ---------- подхват брошенной работы и кошелёк ---------- */

.pa-purse {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.pa-error__text { margin: 0; }
.pa-error .pa-actions { margin-block-start: var(--s-4); }

/* ---------- форма ---------- */

.pa-form { max-width: var(--w-form); margin-block-end: var(--s-6); }

.pa-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
}

.pa-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.pa-input {
  inline-size: 100%;
  background: var(--c-surface);
  color: var(--c-text);
  border: var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-base);
}

.pa-hint { font-size: var(--t-sm); color: var(--c-muted); }

/* ---------- выбор фона ---------- */

/*
 * Два в ряд на телефоне, четыре на широком экране.
 *
 * Не `auto-fit`: он растягивает последний ряд, и когда служба вернула три фона
 * вместо четырёх, третий становится вдвое шире соседей — человек читает это
 * как «этот главный».
 */
@media (min-width: 48rem) {
}

/* Выбранный остаётся ярким, пока остальные гаснут: видно, что нажалось. */
@media (prefers-reduced-motion: reduce) {
}

/* ---------- выбранный фон крупно ---------- */

/*
 * Ограничено по высоте окна, а не только по ширине.
 *
 * Квадрат в 640 точек на широком экране вытесняет обе кнопки за нижний край, и
 * человек, которому предложили посмотреть и решить, видит картинку без решения.
 */
/*
 * Ширина считается и от высоты окна тоже.
 *
 * Сначала я ограничил только высоту картинки — и квадрат встал в широкой
 * коробке между двух чёрных полей. Образец квадратный, значит и место под него
 * должно быть квадратным: ширина берётся наименьшей из трёх — предела в 30
 * рем, половины высоты окна и ширины полосы. Тогда на низком экране кнопки
 * остаются на виду, а полей не появляется никогда.
 */
/* ---------- форма обратной связи ---------- */

/*
 * Форма на всю ширину полосы, а не в узкую колонку: у неё есть поле, в которое
 * пишут абзацами, и в колонке шириной с поле ввода оно выглядит как щель.
 */
.pa-form--wide { max-width: min(46rem, 100%); }

/*
 * Имя и почта рядом, когда есть место. Оба короткие, и в столбик они растягивают
 * форму вдвое без всякой пользы. Ниже 40rem — обратно в столбик: два поля в ряд
 * на телефоне становятся двумя щелями.
 */
.pa-form__row { display: grid; gap: 0 var(--s-4); }

@media (min-width: 40rem) {
  .pa-form__row { grid-template-columns: 1fr 1fr; }
}

.pa-textarea {
  min-block-size: 9lh;
  resize: vertical;
  line-height: 1.6;
}

.pa-label__soft { color: var(--c-muted); font-weight: var(--fw-reg); }

/*
 * Поле-приманка.
 *
 * Не `display: none` и не `hidden`: часть рассылающих машин именно так его и
 * ищет — заполняют то, что спрятано самым очевидным способом. Здесь поле
 * уносится за край окна, то есть остаётся настоящим полем, просто его не видно.
 *
 * `left: -9999px` вместо `translate`: смещение трансформацией не выносит
 * элемент из потока, и страница получает горизонтальную прокрутку.
 */
.pa-trap {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.pa-rule {
  border: 0;
  border-block-start: var(--border);
  margin-block: var(--s-6);
}

/*
 * Строка с галочкой.
 *
 * Не `.pa-field`: там подпись стоит над полем, а у галочки она обязана стоять
 * рядом — иначе непонятно, к чему галочка относится, когда их в форме две.
 *
 * `align-items: start` вместо `center`: подпись из двух строк на узком экране
 * иначе съезжает относительно квадратика, и строка выглядит сломанной.
 */
.pa-check {
  display: flex;
  align-items: start;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
}

.pa-check__box {
  /* Размер задаётся явно: по умолчанию браузеры рисуют галочку кеглем
     наследуемого шрифта, и в форме с крупным вводом она выходит крошечной. */
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.15rem;
  flex: none;
  accent-color: var(--c-accent);
}

.pa-check__label {
  font-size: var(--t-sm);
  color: var(--c-muted);
  cursor: pointer;
}

.pa-note-plain {
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-width: var(--w-text);
}

/* Сообщение о подтверждении — на видном месте, но не тревожное. */
.pa-said {
  margin-block-end: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-inline-start: 3px solid var(--c-ok);
  max-width: var(--w-text);
}

/*
 * Между абзацами внутри рамки нужен просвет, а после последнего — нет.
 *
 * Раньше стоял ноль на все: рамка задумывалась однострочной. С двумя абзацами
 * они слипаются в сплошной кусок, и второй читается как продолжение первого
 * предложения.
 */
.pa-said p { margin: 0 0 var(--s-3); }
.pa-said p:last-child { margin-block-end: 0; }
.pa-said.is-warn { border-inline-start-color: var(--c-error); }

/* ---------- история работ ---------- */

/* ---------- цены ---------- */

.pa-prices {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  min-inline-size: 560px;
}

.pa-prices th,
.pa-prices td {
  text-align: start;
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--border);
  vertical-align: baseline;
}

.pa-prices thead th {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-sunk);
}

.pa-prices tbody th {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--t-lg);
  white-space: nowrap;
}

.pa-prices tbody tr:last-child th,
.pa-prices tbody tr:last-child td { border-block-end: 0; }

.pa-prices .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pa-off {
  display: inline-block;
  margin-inline-start: var(--s-2);
  color: var(--c-ok);
  font-size: var(--t-xs);
}

.scroller { overflow-x: auto; border: var(--border); margin-block-end: var(--s-5); }

/* ---------- юридические документы ---------- */

/*
 * Правовые страницы идут во всю ширину полосы, а не колонкой слева.
 *
 * Раньше стояло ограничение в 65 знаков — читаемая длина строки. Владелец
 * попросил шире: столбик в левой части при пустой правой половине выглядит
 * недоделкой. Здесь текст занимает всю ширину, которую даёт оболочка.
 *
 * Плата известна и названа: на широком экране строка выходит длинной, и взгляд
 * тяжелее находит начало следующей. Поэтому вместе с шириной чуть увеличены
 * межстрочный просвет и отступ между абзацами — на длинной строке они и держат
 * глаз на месте.
 */
.pa-legal { max-width: none; }

.pa-legal__body {
  line-height: 1.75;
  max-inline-size: none;
}

.pa-legal__body > p { max-inline-size: none; }

.pa-legal__head { margin-block-end: var(--s-6); }

.pa-legal__title {
  font-size: var(--t-3xl);
  margin: var(--s-3) 0 0;
}

.pa-legal__lede {
  font-size: var(--t-lg);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}

.pa-legal__body h2 {
  font-size: var(--t-xl);
  margin-block: var(--s-7) var(--s-4);
}

.pa-legal__body p { margin-block: 0 var(--s-5); }

.pa-legal__body ul {
  margin-block: 0 var(--s-4);
  padding-inline-start: var(--s-5);
}

.pa-legal__body li { margin-block-end: var(--s-3); }

.pa-legal__body b { color: var(--c-text); font-weight: var(--fw-semi); }

/*
 * Абзац, который сам признаётся, что не дописан.
 *
 * Отмечен видимо и нарочно: правовая страница, где одно место ещё не улажено,
 * обязана показывать это место, а не прятать среди ровного текста. Читатель,
 * наткнувшийся на такой абзац, узнаёт ровно то, что есть.
 *
 * Цвет не красный: это не ошибка и не опасность, а честная незавершённость.
 */
.pa-legal__body .pa-legal__flag {
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--c-accent);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text);
}

/*
 * Место, которое заполнит форма настроек.
 *
 * Пунктиром и словом, что именно сюда встанет. Видно только владельцу и только
 * пока реквизиты пусты; как только они заполнены, на этом месте стоит обычный
 * текст и никакой пометки не остаётся.
 */
.pa-blank {
  font-family: var(--f-mono);
  font-size: 0.85em;
  color: var(--c-accent-text);
  border: 1px dashed var(--c-accent);
  border-radius: var(--r-sm);
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

.pa-legal__foot {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.pa-legal__foot p { margin: 0; }

/* ---------- «кому это нужно» ---------- */

/*
 * Карточки со случаями, для кого сервис. Не решётка из ячеек, как были
 * шаги на первой странице: там четыре шага одного вида, здесь пять разных
 * положений, и каждое должно читаться отдельным.
 *
 * Три в ряд при 1200: пятое и шестое место остаются пустыми, и последние две
 * карточки стоят парой, а не сиротой в конце длинного ряда.
 */
.pa-who {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Ровно три в ряд: шесть карточек встают двумя полными рядами. При
     auto-fit пятая и шестая оставались бы в ряду с пустым местом справа —
     ряд читался бы недоделанным. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .pa-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .pa-who { grid-template-columns: 1fr; }
}

.pa-who li {
  position: relative;
  background: var(--c-surface);
  border: var(--border);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

/*
 * Значок вместо малиновой черты.
 *
 * Черта была одинаковой у всех шести и говорила только «здесь начинается
 * отдельная мысль». Значок говорит, о ком мысль, — и по ряду карточек глаз
 * теперь идёт, не читая: витрина, гончарный круг, растущий склад, коробка,
 * разнобой, четыре рамки.
 *
 * Плитка под значком — акцент в одну десятую. Полный акцент здесь спорил бы с
 * кнопкой: на странице должен быть один самый яркий предмет, и это не значок.
 */
.pa-who__mark {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  color: var(--c-accent-text);
  flex: none;
}

.pa-who__mark svg {
  inline-size: 24px;
  block-size: 24px;
}

.pa-who h3 {
  margin: var(--s-2) 0 0;
  font-size: var(--t-base);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
}

.pa-who p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.pa-who li:hover {
  background: var(--c-hover);
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .pa-who li:hover { transform: none; }
}

/* ============================================================
   Скругление и поверхности

   Владелец попросил округлить углы у кнопок, рамок и таблиц и
   развести цвета: страница выглядела «очень тёмной».

   Радиус берётся по размеру предмета, а не один на всё: у поля
   ввода в 44 точки и у панели в 400 одинаковый угол выглядит
   ошибкой — на маленьком он съедает угол, на большом теряется.
   ============================================================ */

/* Крупное: зона загрузки, таблица цен. */
.pa-drop,
.scroller {
  border-radius: var(--r-lg);
}

/* Карточки и панели. `.pa-plain` сюда не входит: это текстовая ссылка, а не
   карточка. Скругление вместе с верхней гранью рисовало над ней обрезанную
   дугу — на первом экране она читалась как сломанная кнопка. */
.pa-error,
.pa-purse,
.pa-said,
.pa-who li {
  border-radius: var(--r-lg);
}

/* Мелкое. */
.pa-off {
  border-radius: var(--r-sm);
}

/* Изображение внутри скруглённой рамки обязано скругляться вместе с ней,
   иначе угол картинки торчит из-под угла рамки. */
/*
 * Тонкая светлая грань по верхнему краю карточек.
 *
 * На тёмном фоне тень не работает — её попросту не видно. Свет по верхнему
 * ребру делает ту же работу: предмет читается лежащим на странице, а не
 * вырезанным в ней. Держим на 6 %: выше — и грань превращается в полоску.
 */
/* ---------- таблица цен ---------- */

/*
 * Шапка была утопленной — темнее самой таблицы, и таблица от этого казалась
 * ямой. Теперь наоборот: шапка приподнята, строки чередуются, и таблица
 * читается сверху вниз без линейки.
 */
.pa-prices thead th {
  background: var(--c-raised);
  color: var(--c-text);
}

.pa-prices tbody tr:nth-child(even) th,
.pa-prices tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--c-raised) 55%, transparent);
}

.pa-prices tbody tr {
  transition: background var(--dur-base) var(--ease);
}

.pa-prices tbody tr:hover th,
.pa-prices tbody tr:hover td {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

/* Внутренние линии тоньше внешней рамки: сетка не должна спорить с краем. */
.pa-prices th,
.pa-prices td {
  border-block-end: 1px solid var(--c-line-soft);
}

/*
 * Панели с цветной гранью слева — предупреждение, ошибка — скругляются только
 * справа. Скруглённая слева, грань превращается в дугу и перестаёт читаться
 * линией: у неё вся работа в том, чтобы быть прямой и цветной.
 */
.pa-said,
.pa-error,
.pa-purse {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ---------- цвет в таблице ---------- */

/*
 * Розовая нить под шапкой. Одна линия на всю таблицу вместо розовой обводки
 * каждой ячейки: цвет появляется там, где таблица делится на «что означают
 * столбцы» и «сами числа», то есть работает, а не украшает.
 */
.pa-prices thead th {
  border-block-end: 2px solid color-mix(in srgb, var(--c-accent) 70%, transparent);
}

/* Верхняя грань карточки — рамкой, а не подсветкой внутрь. На тёмном белая
   линия читалась как свет сверху; на бумаге светлое на светлом не видно
   вовсе, а тёмное внутрь выглядит грязью по краю. */
/* Светлая грань по верхнему ребру карточек — тоже тёплая, а не серая. */
.pa-drop,
.pa-purse,
.pa-who li {
  border-block-start: var(--border);
}

/* ============================================================
   Страница «About»

   Единственная страница сайта, выключенная по центру. Владелец
   попросил, и для неё это верно: она не рабочий экран, где глаз
   идёт по левому полю сверху вниз, а текст, который читают подряд.

   По центру стоят заголовки и колонки. Сами абзацы остались с
   ровным левым краем: выключка по центру на длинном тексте
   заставляет заново искать начало каждой строки.
   ============================================================ */

.pa-about { text-align: center; }

/*
 * Колонки шире, чем на остальном сайте.
 *
 * Владелец попросил растянуть текст: рядом с широкими рядами примеров узкая
 * колонка посреди пустого поля смотрелась потерянной, и это правда.
 *
 * Растянуто не до конца полотна. Обмерено в браузере: 84ch дают колонку в
 * 857 точек и около 99 знаков в строке. Во всю ширину (1200) вышло бы под 140,
 * а на такой длине глаз, дойдя до правого края, перестаёт попадать на начало
 * следующей строки и перечитывает ту же самую.
 *
 * 99 — уже больше привычных 65–75, то есть выбор в сторону просьбы владельца,
 * а не в сторону правил. Но 140 — это уже не «шире», а «неудобно читать».
 *
 * Кегль поднят с 16 до 17: та же строка в знаках занимает больше места,
 * то есть колонка становится шире, не удлиняясь для глаза.
 */
.pa-about .pa-lede,
.pa-about .pa-sec__head {
  margin-inline: auto;
  max-inline-size: 70ch;
}

.pa-about .pa-lede__sub {
  max-inline-size: 62ch;
  margin-inline: auto;
}

/* Абзацы — единственное, что не центрируется. */
.pa-about .pa-prose {
  margin-inline: auto;
  max-inline-size: 84ch;
  text-align: start;
  font-size: 1.0625rem;
}

.pa-about .pa-prose p { line-height: 1.75; }

/*
 * Раздел «где это сейчас» убран, и закрывающая ссылка переехала в конец
 * предыдущего раздела. Своей секции у неё больше нет — значит и поля сверху
 * взять неоткуда, оно ставится здесь.
 */
.pa-about .pa-note-plain {
  text-align: center;
  margin-block-start: var(--s-7);
}

/*
 * Зелёная черта над заголовком висела у левого края блока. Раз блок по
 * центру — черта тоже.
 *
 * Оговорка `:not(:has(.pa-eyebrow))` здесь не для отбора, а ради веса. Общее
 * правило лежит в `home.css`, который грузится позже, и весит ровно столько
 * же; при равном весе побеждала более поздняя запись, и черта уезжала влево.
 * Измерено: начало 0 вместо 50%. Теперь вес выше, и порядок файлов ничего
 * не решает.
 */
.pa-about .pa-sec__head:not(:has(.pa-eyebrow)) h2::before,
.pa-about .pa-lede h1::before {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/*
 * Последний раздел внутри плиты не носит своего нижнего поля: у плиты есть
 * своё, и вместе они давали провал в полтораста точек — замерено.
 */
.pa-slab__pad > .pa-sec:last-child { margin-block-end: 0; }

/* Карточки «кому это нужно» — текст внутри читается, а не разглядывается. */
.pa-about .pa-who li,
.pa-about .pa-half { text-align: start; }

/* ---------- один снимок в, комплект наружу ---------- */

/*
 * Один снимок в, четыре наружу — всё в одну строку.
 *
 * Сперва правый столбец был сеткой два на два, и целиком показ не помещался в
 * экран: приходилось листать, чтобы увидеть, что получилось. Владелец сказала
 * верное — расположить складнее и уменьшить, чтобы было видно сразу всё.
 *
 * Теперь пять предметов в ряд: исходник, стрелка, четыре выхода. Читается
 * слева направо ровно как действие, и весь показ помещается на один экран.
 */
/*
 * Исходник устроен так же, как выход: подпись, картинка, пояснение — и все три
 * полосы встают на одну высоту с соседями. Пока подпись у него была в одну
 * строку, а у выходов в две, его снимок начинался выше остальных и выпадал
 * из ряда.
 */
/* Стрелка вбок на телефоне не работает: столбцы встают друг под друга,
   и указывать вправо ей больше некуда. */
@media (max-width: 900px) {
}

/* ============================================================
   Комплект, показанный по местам

   Ряд из четырёх кадров в настоящем масштабе показывал разницу
   в размерах честно, но по нему всё равно не читалось, что
   именно делает сайт: четыре снимка одной бутылки говорят «вот
   четыре снимка», а не «вот витрина, вот лента, вот сторис».

   Теперь каждый файл лежит внутри своего места. Макеты нарочно
   обобщённые — ни названий площадок, ни логотипов, ни фирменных
   цветов: иначе сайт заявлял бы связь с чужой компанией.
   ============================================================ */

/*
 * Два ряда по два, а не четыре в строку.
 *
 * В строку они лезли по 280 точек на макет — телефон в такую ширину читается
 * с трудом, — и вдобавок ряд выходил рваным: макеты разной высоты и разной
 * ширины, отчего и промежутки казались разными. Владелец сказал прямо:
 * выровнять или разбить на два ряда. Разбиваем — заодно каждый макет
 * становится вдвое крупнее.
 */
/*
 * Три полосы: подпись, макет, пояснение. Средняя тянется, поэтому подписи
 * стоят на одной высоте сверху, пояснения — на одной снизу, а макеты плавают
 * между ними по середине. Их собственная высота при этом остаётся честной:
 * сторис правда выше баннера, просто это больше не перекашивает ряд.
 */
/*
 * Подпись, макет и пояснение стоят одним столбиком по середине ячейки: подпись
 * ровно над картинкой, а не у левого края ячейки, где она читалась сама по
 * себе. Ширина у всех троих одна — макета, — поэтому столбик держится вместе.
 */
/* Пояснению не даём стать уже читаемого: у телефона макет в 200 точек, и
   строка в такую ширину рвётся на четыре слова. */
/* ---------- общее для макетов ---------- */

/* Кружок вместо аватара и полоски вместо строк текста: макет должен
   читаться как макет, а не притворяться настоящей страницей. */
/* ---------- витрина магазина ---------- */

/* ---------- пост в ленте ---------- */

/* ---------- сторис в телефоне ---------- */

/*
 * Телефон нарисован рамкой, а не картинкой: одна лишняя загрузка ради
 * прямоугольника со скруглением — плохая сделка, а на любом экране он
 * останется чётким.
 */
/* ---------- баннер на чужой странице ---------- */

/* На телефоне два столбца не встают: витрина с кнопкой в 160 точек шириной
   нечитаема. Один столбец, макеты во всю ширину. */
@media (max-width: 700px) {
}

/*
 * Внутри показа «один в, четыре наружу» макеты стоят вчетвером в ряд и мельче,
 * чем на первой странице: там у них половина полотна на каждый, здесь — пятая
 * часть. Телефон ещё уже прочих, чтобы его высота не тянула строку вверх.
 */
@media (min-width: 1000px) {
  /*
   * Все пять картинок — члены одной сетки, а не двух вложенных.
   *
   * Выходы лежат в обёртке, под которой стоит ещё и общее пояснение, поэтому
   * обёртка выше самих макетов — и столбец исходника, растянутый на её высоту,
   * опускал своё пояснение ниже соседних. Подпирать это отступами значило бы
   * подгонять числа, которые разойдутся от любой правки текста.
   *
   * `display: contents` снимает обёртки из раскладки, не трогая разметку:
   * исходник и четыре выхода становятся соседями в одной сетке, и три их
   * полосы — подпись, картинка, пояснение — совпадают по устройству, а не по
   * подгонке. Общее пояснение уходит на свою строку во всю ширину.
   */
  /*
   * Здесь макеты прижаты к верху, а не выключены по середине.
   *
   * На первой странице они стоят по два в ряд и середина им идёт: полосы
   * широкие, разница в высоте гуляет мягко. Здесь их пять в строку рядом с
   * исходником, и середина разводит верхние края на полсотни точек — ряд
   * перестаёт читаться рядом. Владелец сказала прямо: поставить первую
   * картинку на одну линию с остальными.
   *
   * Нижние края при этом расходятся, и это честно: сторис правда выше баннера.
   * А пояснения всё равно стоят на одной высоте — они в своей полосе.
   */
}

/* Ниже тысячи строка в пять предметов не встаёт: исходник ужимается до
   полоски. Столбцы расходятся, показ читается сверху вниз. */
@media (max-width: 999px) {
}

/* ---------- пачка документов ---------- */

.pa-batch-wrap { margin-block-start: var(--s-6); }

.pa-batch {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  border-block-start: var(--border);
}

.pa-batch__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-4);
  align-items: center;
  padding-block: var(--s-3);
  border-block-end: var(--border);
  font-size: var(--t-sm);
}

.pa-batch__name {
  overflow-wrap: anywhere;
  font-weight: var(--fw-semi);
}

.pa-batch__facts,
.pa-batch__state {
  grid-column: 1;
  margin: 0;
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.pa-batch__row.is-rejected .pa-batch__state {
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  border-inline-start: 3px solid var(--c-error);
  padding-inline-start: var(--s-3);
}

.pa-batch__row.is-paid .pa-batch__state { color: var(--c-ok); }

.pa-batch__row .pa-plain {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

.pa-batch__total {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.pa-batch__note {
  margin: var(--s-3) 0 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-width: var(--w-text);
}

/* Неактивная кнопка: сказать глазом, что нажать нельзя, и не мигать под мышью. */
.pa-button:disabled {
  opacity: 0.45;
  cursor: default;
  filter: none;
}

/* ============================================================
   Части строя.

   Приёмы взяты у apex — шаблона, на котором стоит проект: черта
   перед надстрочной строкой, курсивный сериф одним словом,
   пилюли, карточки внахлёст, пунктирный рельс.
   ============================================================ */

/*
 * Черта перед надстрочной строкой. Стоит только там, где в разметке есть <i>,
 * поэтому прежние надстрочные строки на других страницах не трогаются.
 */
.pa-eyebrow { display: flex; align-items: center; gap: var(--s-3); }

.pa-eyebrow i {
  display: block;
  inline-size: 40px;
  block-size: 1px;
  background: var(--c-accent);
}

/* Слово другим шрифтом внутри заголовка: один курсивный сериф посреди
   гротеска даёт заголовку голос, не меняя всей типографики. */
.pa-ser {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: var(--fw-body);
  letter-spacing: -0.01em;
}

/*
 * Сцена: бумага внахлёст на таблицу.
 *
 * Отступ слева освобождает место чеку. Меньше — и чек закрывает колонки, из-за
 * чего «оригинал рядом со строкой» читается как «бумажка поверх таблицы». Это
 * уже случилось на макете и правилось.
 */
/* Плашка стоит ниже строк, а не поверх той, которую объясняет: на макете она
   закрывала ровно ту строку, про которую написана. */
@media (max-width: 900px) {
}

/* Карточка с таблицей. */
/* Рельс: пунктир и точки. У apex тем же приёмом показан ход работы. */
.pa-rail {
  position: relative;
  list-style: none;
  margin: var(--s-5) 0 0;
  padding-inline-start: var(--s-7);
}

.pa-rail::before {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  inset-block: var(--s-2);
  border-inline-start: 1px dashed var(--c-edge);
}

.pa-rail li { position: relative; padding-block-end: var(--s-5); }

.pa-rail li::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--s-7) * -1);
  inset-block-start: 7px;
  inline-size: 13px;
  block-size: 13px;
  border-radius: var(--r-dot);
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-bg);
}

.pa-rail b { display: block; font-size: var(--t-lg); }

.pa-rail p {
  margin: var(--s-1) 0 0;
  max-inline-size: 46ch;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/* ---------- сцена первого экрана ---------- */

@media (max-width: 980px) {
}

/* Строки таблицы в сцене. Числа моноширинным и столбцом: колонка сумм обязана
   стоять столбцом, а не плясать по ширине цифры. */
/* Строка, не прошедшая сверку. Помечается и остаётся: выбросить чужой счёт мы
   не вправе, а промолчать хуже всего. */
/*
 * Карточки внутри тёмной плиты возвращаются к бумажной палитре целиком.
 * Без этого они получают светлый текст на светлой поверхности: плита затеняет
 * --c-text, и карточка послушно им красится. Так уже случилось.
 */
/* Две таблицы рядом: документы и операции выписки. */
@media (max-width: 900px) {
}

/* На светлой плите карточке глубокая тень не нужна: она не парит над тёмным,
   а лежит на бумаге. */
/* Раздел «как это идёт»: слева заголовок, справа рельс. Несимметрично, как у
   apex: колонка со словами уже той, где идёт перечисление. */
.pa-flowgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--s-7);
  align-items: start;
}

@media (max-width: 900px) {
  .pa-flowgrid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Где документ в этот миг и во что обходится шаг. */
.pa-rail__where {
  margin-block-start: var(--s-2) !important;
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
}

/* Центрованный заголовок раздела — приём apex для вопросов и цен: узкая мера
   посередине ломает однообразие левого края. */
.pa-sec__head--centre {
  margin-inline: auto;
  max-inline-size: 46ch;
  text-align: center;
}

.pa-sec__head--centre .pa-eyebrow { justify-content: center; }

/*
 * Огромный бледный знак за содержимым тёмной плиты, уезжающий за край.
 * У apex тем же приёмом подложен гигантский значок в пять процентов яркости.
 * Цвет не задаётся: знак берёт цвет плиты и гасится прозрачностью.
 */
.pa-slab__glyph {
  position: absolute;
  inset-inline-end: -0.1em;
  inset-block-start: -0.3em;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: 32rem;
  line-height: 1;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Нарисованные примеры: книга Excel и бумаги.

   Цвета здесь — цвета изображённых предметов: чужого окна
   таблиц, бумаги, печати. Не лицо сайта, и потому не из
   токенов. То же исключение, что у чека.
   ============================================================ */

.pa-xl {
  inline-size: 100%;
  max-inline-size: 640px;
  background: #fff;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-lift);
  font-family: var(--f-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pa-xl__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: #f3f3f1;
  border-block-end: 1px solid #d8d8d4;
}

.pa-xl__dots { display: flex; gap: 5px; }
.pa-xl__dots i { inline-size: 9px; block-size: 9px; border-radius: var(--r-dot); background: #d3d3cf; display: block; }
.pa-xl__name { font-size: 11px; color: #5c5c58; }

.pa-xl__cols,
.pa-xl__row { display: grid; grid-template-columns: 28px repeat(6, 1fr); }

.pa-xl__cols {
  background: #f7f7f5;
  border-block-end: 1px solid #d8d8d4;
  color: #8a8a84;
  font-size: 10px;
}

.pa-xl__cols div { padding: 4px 8px; text-align: center; border-inline-end: 1px solid #e6e6e2; }

.pa-xl__row { border-block-end: 1px solid #ececE8; }

.pa-xl__row > div {
  padding: 7px 8px;
  border-inline-end: 1px solid #ececE8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pa-xl__n { background: #f7f7f5; color: #8a8a84; text-align: center; font-size: 10px; }
.pa-xl__row .num { text-align: end; }
.pa-xl__row.is-head > div:not(.pa-xl__n) { background: #e8f0e9; font-weight: 500; color: #2b3d2f; }

/* Строка, не прошедшая сверку, помечается и в выгрузке — она не теряется. */
.pa-xl__row.is-doubt > div:not(.pa-xl__n) { background: #fdf0ee; }

.pa-xl__tabs { display: flex; background: #f3f3f1; border-block-start: 1px solid #d8d8d4; padding-inline: var(--s-2); }

.pa-xl__tabs span,
.pa-xl__tabs label {
  padding: 7px 14px;
  font-size: 10.5px;
  color: #6b6b66;
  border-inline-end: 1px solid #e2e2de;
  border-block-start: 2px solid transparent;
}

.pa-xl__tabs label { cursor: pointer; }

.pa-xl__tabs span.is-on {
  background: #fff;
  color: #19201A;
  font-weight: 500;
  border-block-start-color: var(--c-accent);
}

/* ============================================================
   Книга с двумя рабочими листами

   Раздел «Two tables, one book» утверждает, что наборы колонок
   у документов и у выписки разные. Словами это читается как
   отговорка, нажатием — видно сразу.

   Переключает пара радиокнопок и соседние селекторы: скрипта
   нет, значит нечему не загрузиться, а с клавиатуры листы
   ходят стрелками, как и положено радиокнопкам.
   ============================================================ */

/*
 * Книга здесь во всю ширину раздела, а не в 720 px по центру: с полями по
 * бокам в две сотни точек раздел читался недожатым, а строки — мелкими.
 */
.pa-book { margin-block-start: var(--s-7); }

.pa-book .pa-xl { max-inline-size: none; }

/*
 * Узкая страница не сжимает книгу, а прокручивает её: при 293 px ширины
 * обрезалась тридцать одна ячейка — ни поставщика, ни сумм не прочесть.
 * Прокрутка своя, страница вбок не едет.
 */
.pa-book__scroll { overflow-x: auto; }
.pa-book__scroll .pa-xl { min-inline-size: 560px; }

/* Радиокнопка не спрятана display:none — иначе её не поймает клавиатура. */
.pa-book__pick {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.pa-book__leaf--bank { display: none; }

.pa-book__pick--bank:checked ~ .pa-book__scroll .pa-book__leaf--doc,
.pa-book__pick--bank:checked ~ .pa-book__legend .pa-book__chips--doc { display: none; }

.pa-book__pick--bank:checked ~ .pa-book__scroll .pa-book__leaf--bank { display: block; }
.pa-book__pick--bank:checked ~ .pa-book__legend .pa-book__chips--bank { display: flex; }

/* Выписка: колонок пять, и «назначение платежа» шире прочих. */
.pa-book__leaf--bank .pa-xl__cols,
.pa-book__leaf--bank .pa-xl__row { grid-template-columns: 28px 1fr 2.1fr 1fr 1fr 1fr; }

.pa-book__leaf--bank .is-in { color: #2b6b3f; }
.pa-book__leaf--bank .is-out { color: #8a4038; }

.pa-book__pick--doc:checked ~ .pa-book__scroll .pa-xl__tabs label[for="pa-sheet-doc"],
.pa-book__pick--bank:checked ~ .pa-book__scroll .pa-xl__tabs label[for="pa-sheet-bank"] {
  background: #fff;
  color: #19201A;
  font-weight: 500;
  border-block-start-color: var(--c-accent);
}

/* Обвод по клавиатуре рисуется на ярлыке: сама кнопка размером в точку. */
.pa-book__pick--doc:focus-visible ~ .pa-xl .pa-xl__tabs label[for="pa-sheet-doc"],
.pa-book__pick--bank:focus-visible ~ .pa-xl .pa-xl__tabs label[for="pa-sheet-bank"] {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.pa-book__legend {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  align-items: start;
  margin-block-start: var(--s-5);
}

.pa-book__what {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-accent-text);
}

.pa-book__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-book__chips--bank { display: none; }

.pa-book__chips li {
  padding: 5px 12px;
  border: var(--border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text);
}

.pa-book__note {
  grid-column: 2;
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-inline-size: 60ch;
}

@media (max-width: 720px) {
  .pa-book__legend { grid-template-columns: minmax(0, 1fr); }
  .pa-book__note { grid-column: 1; }
}

/* ---------- бумаги ---------- */

/*
 * Бумаги стоят рядом и по центру, во всю ширину раздела. Прежде они лежали в
 * левой колонке под рельсом, и справа оставалось пустое поле — владелец
 * сказала, что расположены странно.
 */
.pa-papers {
  display: flex;
  gap: var(--s-7);
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-block-start: var(--s-8);

  /*
   * Запас снизу — под тень, а не под воздух. Плита режет по краю
   * (`overflow: hidden`), тень бумаги уходит на 56 точек вниз, и при
   * меньшем зазоре она срезалась ровной линией: бумага выглядела
   * упёршейся в край, хотя до края оставалось сорок точек.
   */
  margin-block-end: var(--s-6);
}

.pa-doc {
  flex: 1 1 280px;
  max-inline-size: 380px;
  background: #FDFCF7;
  color: #2a2a28;
  border-radius: 3px;
  padding: var(--s-5) var(--s-4);
  box-shadow: var(--sh-lift);
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/*
 * Ровная пара смотрелась приклеенной. Лист лежит на столе не по линейке:
 * наклон разный и один сдвинут ниже другого. Сдвиг задан margin, а не
 * transform, чтобы он попадал в замер высоты и не наезжал на подвал плиты.
 */
.pa-doc--invoice   { transform: rotate(-2deg); }
.pa-doc--statement { transform: rotate(1.6deg); margin-block-start: var(--s-6); }

.pa-doc__brand { margin: 0; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.pa-doc__meta  { margin: 0 0 var(--s-4); color: #6b6b66; }
.pa-doc__title { margin: 0 0 var(--s-3); }
.pa-doc__title b { display: block; }

.pa-doc table { inline-size: 100%; border-collapse: collapse; }
.pa-doc th {
  padding: 4px 0;
  border-block-end: 1px solid #cfccc3;
  color: #6b6b66;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: start;
  text-transform: uppercase;
}
.pa-doc td { padding: 4px 0; border-block-end: 1px solid #eceae3; vertical-align: top; }
.pa-doc .num { text-align: end; white-space: nowrap; }
.pa-doc .is-out { color: #a03a30; }
.pa-doc .is-in  { color: #2c7742; }

.pa-doc__sum { display: flex; justify-content: space-between; margin: 3px 0 0; }
.pa-doc__sum.is-total {
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid #cfccc3;
  font-size: 12.5px;
  font-weight: 700;
}
.pa-doc__page { margin: var(--s-3) 0 0; color: #8a8a84; font-size: 8.5px; text-align: center; }

/* Левая колонка раздела «как это идёт»: слова и бумаги под ними. */
.pa-flowgrid__words { min-inline-size: 0; }

/* Перечень того, что принимается: две колонки, чтобы пять строк не тянулись
   одной узкой лентой во всю ширину плиты. */
.pa-takes {
  columns: 2;
  column-gap: var(--s-8);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

/*
 * Метка вместо точки списка: короткая зелёная черта, та же, что стоит перед
 * надстрочником раздела. Точка браузера здесь ничего не говорила, а черта
 * повторяет знак, которым на сайте отмечено «это про нас».
 */
.pa-takes li {
  break-inside: avoid;
  margin-block-end: var(--s-4);
  padding-inline-start: var(--s-5);
  position: relative;
}

.pa-takes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 14px;
  block-size: 2px;
  background: var(--c-accent);
}

/*
 * Отказ отделён от перечня чертой: он говорит обратное тому, что над ним,
 * и пятым пунктом в списке «принимаем» читался неверно.
 */
.pa-takes__no {
  margin: var(--s-6) 0 0;
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  color: var(--c-muted);
  max-inline-size: 72ch;
}

@media (max-width: 760px) {
  .pa-takes { columns: 1; }
  .pa-doc--statement { margin-block-start: 0; }
}

/* ============================================================
   Первый экран в движении: чек — стрелка — книга Excel.

   Всё лежит в одном светлом окне. Прежде эти три предмета
   лежали на тёмной плите порознь и спорили и с фоном, и друг
   с другом; собранные в карточку, они читаются как один
   предмет — приём подсмотрен у соседей по рынку, вёрстка своя.

   Цикл семь секунд, всё на CSS: скрипта нет, значит нечему не
   загрузиться. Движение выключается настройкой «уменьшить
   движение» — см. конец блока.
   ============================================================ */

/*
 * Белой карточки вокруг нет нарочно. Она рисовала рамку внутри тёмной плиты —
 * рамка в рамке, и предметы внутри выглядели мельче, чем есть. Теперь чек и
 * книга лежат прямо на плите, каждый со своей тенью.
 */
.pa-demo {
  --pa-beat: 5s;
}

/*
 * Чек узкий нарочно. Со счётом рядом книга сжималась до полутора сотен
 * пикселей и обрезала колонки — проверено макетом. Счёт показан в разделе
 * «что принимаем», где ему просторно.
 */
.pa-demo__body {
  display: grid;
  grid-template-columns: 176px 24px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
}

.pa-demo__papers { inline-size: 100%; }

.pa-demo__papers svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.26));
}

.pa-demo__arrow { display: grid; place-items: center; color: var(--c-accent); }

.pa-demo__sheet {
  background: #fff;
  color: var(--c-text-paper);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-lift);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.pa-demo__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  background: #f3f3f1;
  border-block-end: 1px solid #d8d8d4;
  font-size: 10.5px;
  color: #5c5c58;
}

.pa-demo__x {
  display: grid;
  place-items: center;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 3px;
  background: var(--c-accent);
  color: #fff;
  font: 700 9px var(--f-display);
}

.pa-demo__r { display: grid; grid-template-columns: 26px 1.2fr .8fr .65fr .85fr; border-block-end: 1px solid #ececE8; }
.pa-demo__r > span { padding: 6px 8px; border-inline-end: 1px solid #ececE8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-demo__r .n { background: #f7f7f5; color: #8a8a84; text-align: center; font-size: 9.5px; padding-inline: 2px; }
.pa-demo__r .num { text-align: end; }
.pa-demo__r.is-cols { background: #f7f7f5; color: #8a8a84; font-size: 9.5px; }
.pa-demo__r.is-cols > span { text-align: center; }
.pa-demo__r.is-head > span:not(.n) { background: #e8f0e9; font-weight: 500; color: #2b3d2f; }
.pa-demo__r.is-doubt > span:not(.n) { background: #fdf0ee; }

.pa-demo__tabs { display: flex; background: #f3f3f1; border-block-start: 1px solid #d8d8d4; padding-inline: var(--s-2); }
.pa-demo__tabs span { padding: 6px 11px; font-size: 10px; color: #6b6b66; border-inline-end: 1px solid #e2e2de; }
.pa-demo__tabs span.is-on { background: #fff; color: var(--c-text-paper); font-weight: 500; border-block-start: 2px solid var(--c-accent); }

/* Слова слева, окно справа. */
/*
 * Доли и разрыв подобраны замером, а не на глаз: при 0.85/1.25 или разрыве в
 * --s-8 заголовок первого экрана ломался на три строки и «out.» оставалось
 * одно. Здесь книга получает 372 px при окне 1280 и заголовок держится в две.
 */
.pa-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: var(--s-6);
  align-items: center;
}

@media (max-width: 900px) {
  .pa-hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/*
 * На телефоне содержимое окна складывается столбиком: в строку книга получала
 * 170 px и обрезала колонки — измерено при окне 420.
 */
@media (max-width: 560px) {
  .pa-demo__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
  }

  .pa-demo__papers { inline-size: 132px; }
  .pa-demo__arrow { transform: rotate(90deg); }
  .pa-demo__sheet { inline-size: 100%; }

  /*
   * Кегль книги вернулся к прежнему: на широком экране он поднят, чтобы
   * движение было видно, а в 271 px ширины (измерено при окне 375) от него
   * обрезались и «Kaffee Nord», и номера документов.
   */
  .pa-demo__sheet { font-size: 10px; }
  .pa-demo__r { grid-template-columns: 22px 1.1fr .95fr .6fr .8fr; }
  .pa-demo__r > span { padding: 5px 5px; }
  .pa-demo__r .n,
  .pa-demo__r.is-cols { font-size: 8.5px; }
}

/* ---------- само движение ---------- */

@media (prefers-reduced-motion: no-preference) {
  .pa-scan { animation: pa-scan var(--pa-beat) infinite; }

  .pa-hl { opacity: 0; }
  .pa-hl1 { animation: pa-flash var(--pa-beat) infinite 0.35s; }
  .pa-hl2 { animation: pa-flash var(--pa-beat) infinite 0.7s; }
  .pa-hl3 { animation: pa-flash var(--pa-beat) infinite 1.05s; }

  .is-pop { opacity: 0; animation: pa-pop var(--pa-beat) infinite; }
  .p1 { animation-delay: 1.35s; }
  .p2 { animation-delay: 1.55s; }
  .p3 { animation-delay: 1.8s; }
  .p4 { animation-delay: 2s; }
  .p5 { animation-delay: 2.45s; }
  .p6 { animation-delay: 2.8s; }

  .pa-demo__arrow { opacity: 0; animation: pa-show var(--pa-beat) infinite 1.15s; }
}

/* Кому движение мешает — всё показано сразу и неподвижно. */
@media (prefers-reduced-motion: reduce) {
  .pa-scan { display: none; }
}

/*
 * Доли пересчитаны под круг в 5 с так, чтобы сама полоса шла с прежней
 * скоростью: 26% от семи секунд и 36% от пяти — это одни и те же 1.8 с.
 * Короче стал только хвост, где раньше три секунды ничего не происходило.
 */
@keyframes pa-scan {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 1; }
  36%  { transform: translateY(390px); opacity: 1; }
  44%, 100% { transform: translateY(390px); opacity: 0; }
}

@keyframes pa-flash {
  0%, 3% { opacity: 0; }
  8%, 70% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

@keyframes pa-pop {
  0%   { opacity: 0; transform: translateY(5px); }
  6%   { opacity: 1; transform: translateY(0); }
  72%  { opacity: 1; }
  84%, 100% { opacity: 0; }
}

@keyframes pa-show {
  0%, 4% { opacity: 0; }
  10%, 72% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

/* ============================================================
   Вход и регистрация

   Обе страницы лежали голыми на линованной бумаге, пока весь
   остальной сайт собран из плит, и белые поля ввода на кремовом
   читались дырами в фоне, а не местом, куда пишут.

   Теперь это плита: на регистрации слева обещание, справа форма,
   между ними волосяная линия; на входе — одна колонка поуже,
   потому что тому, кто уже купил, обещать нечего.
   ============================================================ */

.pa-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.pa-gate--narrow {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: var(--w-form);
  margin-inline: auto;
}

/* Линия делит колонки, но не обводит их. */
.pa-gate__form { border-inline-start: var(--border); padding-inline-start: var(--s-8); }
.pa-gate--narrow .pa-gate__form { border-inline-start: 0; padding-inline-start: 0; }

.pa-gate h1 {
  font-size: var(--t-3xl);
  margin: 0 0 var(--s-4);
}

.pa-gate__head { margin-block-end: var(--s-6); }

.pa-gate__sub {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-lg);
  max-inline-size: 40ch;
}

/*
 * Что человек получает — тремя строками с той же зелёной чертой, что
 * в перечне «что принимаем». Точка списка здесь ничего не говорила.
 */
.pa-gate__gets {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border);
  padding-block-start: var(--s-5);
}

.pa-gate__gets li {
  position: relative;
  padding-inline-start: var(--s-5);
  margin-block-end: var(--s-4);
  color: var(--c-muted);
}

.pa-gate__gets li:last-child { margin-block-end: 0; }

.pa-gate__gets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 14px;
  block-size: 2px;
  background: var(--c-accent);
}

/* Форма занимает свою колонку целиком: предел в 520 px её тут только сужает. */
.pa-gate__form .pa-form { max-width: none; }
.pa-gate__form .pa-button--big { inline-size: 100%; }

/*
 * На узкой странице колонки идут одна под другой, и вертикальная линия
 * оказалась бы слева у формы — становится горизонтальной сверху.
 */
@media (max-width: 860px) {
  .pa-gate { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }

  .pa-gate__form {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: var(--border);
    padding-block-start: var(--s-7);
  }
}

/* ============================================================
   Страница цен

   Лежала голой на линованной бумаге, а таблица сидела в коробке
   с рамкой и скруглением — то же самое, что убрали с главной.
   Теперь плита, а внутри одни волосяные линии.
   ============================================================ */

/* Прокрутка без рамки: коробку рисует плита, а не сама таблица. */
.scroller--bare {
  border: 0;
  border-radius: 0;
  margin-block-end: var(--s-7);
}

.pa-prices { background: transparent; }

/*
 * На таблице сошлись три приёма сразу: полосатые строки, вертикальные линии
 * между колонками (их рисует родительская тема) и подсветка строки под
 * курсором. Каждый по отдельности помогает читать, вместе — спорят. Осталась
 * одна волосяная линия между строками и зелёная нить под шапкой.
 *
 * Подсветка убрана ещё и потому, что строка не нажимается: она обещала
 * нажатие, которого нет. Тот же довод, что у ступеней на главной.
 */
.pa-prices thead th { background: transparent; }

.pa-prices tbody tr:nth-child(even) th,
.pa-prices tbody tr:nth-child(even) td { background: transparent; }

.pa-prices tbody tr:hover th,
.pa-prices tbody tr:hover td { background: transparent; }

.pa-prices th,
.pa-prices td { border-inline: 0; }

/*
 * Шаг, на который показывает главная, отмечен и здесь — тем же языком:
 * цветом числа и чертой слева, без заливки. Две страницы, говорящие об одном
 * разными способами, выглядят как два разных поставщика.
 */
.pa-prices tbody tr.is-pick th[scope="row"] {
  color: var(--c-accent-text);
  box-shadow: inset 2px 0 0 var(--c-accent);
}

/* Подписи к таблице: рядом, а не столбиком, и у каждой своё имя. */
.pa-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5) var(--s-7);
  margin: 0 0 var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
}

.pa-notes dt {
  margin: 0 0 var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.pa-notes dd {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/* Страница кончалась серой строчкой; теперь — тем же действием, что и везде. */
.pa-pricing__end {
  padding-block-start: var(--s-6);
  border-block-start: var(--border);
}

.pa-pricing__end p { margin: 0 0 var(--s-5); color: var(--c-muted); }
.pa-pricing__end .pa-actions { margin: 0; }

/* ============================================================
   Контакты

   Форма слева, справка справа. Прежде всё шло одной колонкой во
   всю ширину плиты: строки по сто с лишним знаков, а «кому вы
   пишете» весило столько же, сколько сама форма, хотя это
   справка при ней.
   ============================================================ */

.pa-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.pa-contact__side {
  border-inline-start: var(--border);
  padding-inline-start: var(--s-8);
}

/* Справка тише формы: мельче кеглем и приглушена цветом. */
.pa-contact__side .pa-legal__body { font-size: var(--t-sm); }

.pa-contact__side .pa-legal__body h2 {
  font-size: var(--t-base);
  margin-block: var(--s-6) var(--s-2);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
}

.pa-contact__side .pa-legal__body > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.pa-contact__side .pa-legal__body p { color: var(--c-muted); }

/* Внутри плиты полотну незачем тянуться на всю ширину. */
.pa-contact .pa-legal__lede,
.pa-contact .pa-legal__body > p { max-inline-size: 62ch; }
.pa-contact .pa-form--wide { max-width: none; }
.pa-contact .pa-hint { display: block; max-inline-size: 62ch; }

@media (max-width: 900px) {
  .pa-contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }

  .pa-contact__side {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: var(--border);
    padding-block-start: var(--s-7);
  }
}

/* Оглавление правовых документов: список, а не коробки. */
.pa-docs {
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  max-inline-size: 62ch;
  border-block-start: var(--border);
}

.pa-docs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-block-end: var(--border);
}

.pa-docs a { font-size: var(--t-lg); font-weight: var(--fw-semi); }

.pa-docs__when {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* ============================================================
   Правовые документы

   Текст шёл одной колонкой во всю ширину плиты: 120 знаков в
   строке при удобных 45–75, измерено при окне 1440. Глаз,
   дочитав строку, не находил начала следующей.

   Теперь у текста своя ширина, а справа оглавление. Оно липкое:
   в условиях восемнадцать разделов, и лист длиной в семь тысяч
   точек без него листают наугад.
   ============================================================ */

.pa-deed__grid {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

/* Предел ширины был снят нарочно; он и есть то, чего здесь не хватало. */
.pa-deed .pa-legal__body,
.pa-deed .pa-legal__body > p,
.pa-deed .pa-legal__lede { max-inline-size: 68ch; }

/* Раздел отделён линией: восемнадцать заголовков подряд сливались в один текст. */
.pa-deed .pa-legal__body h2 {
  margin-block: var(--s-8) var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  scroll-margin-block-start: var(--s-6);
}

.pa-deed .pa-legal__body > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.pa-deed__toc {
  position: sticky;
  inset-block-start: var(--s-5);
  font-size: var(--t-sm);
}

.pa-deed__toc-head {
  margin: 0 0 var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.pa-deed__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pa-toc;
  border-block-start: var(--border);
}

.pa-deed__toc li {
  counter-increment: pa-toc;
  border-block-end: var(--border);
}

.pa-deed__toc a {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-2);
  color: var(--c-muted);
  text-decoration: none;
}

.pa-deed__toc a::before {
  content: counter(pa-toc);
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-edge);
}

.pa-deed__toc a:hover { color: var(--c-accent-text); }

/* Дата внизу — подпись, а не абзац наравне с текстом. */
.pa-deed .pa-legal__foot {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-inline-size: 68ch;
}

.pa-deed .pa-legal__foot p { margin: 0; }

@media (max-width: 1100px) {
  /*
   * Оглавление уходит наверх и перестаёт быть липким: в узкой колонке оно
   * заняло бы половину экрана и закрыло то, к чему ведёт.
   */
  .pa-deed__grid { grid-template-columns: minmax(0, 1fr); }

  .pa-deed__toc {
    position: static;
    order: -1;
    margin-block-end: var(--s-6);
  }
}

/* ============================================================
   Экран загрузки

   Лежал голым на линованной бумаге во всю ширину плиты: список
   файлов тянулся на 1150 точек, зона перетаскивания читалась
   полосой уведомления, а строка файла складывалась столбиком,
   оставляя две трети ширины пустыми.
   ============================================================ */

.pa-work__col {
  max-inline-size: 820px;
  margin-inline: auto;
}

/* ---------- куда кладут ---------- */

/*
 * Зона высокая и по центру. Полосой в одну строку она не читалась местом,
 * куда что-то кладут, — а это единственное действие на экране.
 */
.pa-work .pa-drop {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
  min-block-size: 220px;
  padding: var(--s-7) var(--s-6);
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
}

.pa-work .pa-drop__text { align-items: center; gap: var(--s-2); }
.pa-work .pa-drop__text b { font-size: var(--t-lg); }
.pa-work .pa-drop__cta { margin-inline-start: 0; border-radius: var(--r-pill); }

/*
 * Метка была зелёным квадратиком в четырнадцать точек. Здесь она нарисована
 * листом с загнутым углом: экран про бумаги, и знак про них же.
 */
.pa-work .pa-drop__mark {
  position: relative;
  inline-size: 44px;
  block-size: 56px;
  background: var(--c-surface);
  border: 1px solid var(--c-edge);
  border-radius: 3px;
  box-shadow: var(--sh-card);
}

.pa-work .pa-drop__mark::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 14px;
  block-size: 14px;
  background: var(--c-bg);
  border-inline-start: 1px solid var(--c-edge);
  border-block-end: 1px solid var(--c-edge);
}

/* Строки текста на нарисованном листе — три черты, последняя короче. */
.pa-work .pa-drop__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 24px;
  inset-inline: 9px;
  block-size: 2px;
  background: var(--c-edge);
  box-shadow: 0 7px 0 var(--c-edge), 0 14px 0 var(--c-accent);
}

.pa-drop__takes {
  margin: var(--s-4) 0 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  text-align: center;
  max-inline-size: 62ch;
  margin-inline: auto;
}

/* ---------- что положили ---------- */

.pa-work .pa-batch-wrap { margin-block-start: var(--s-8); }

/*
 * Имя слева, счёт справа, состояние строкой ниже. Прежде всё три стояли
 * столбиком в первой колонке: строка выходила втрое выше, чем нужно, а
 * справа оставалось пустое поле.
 */
.pa-work .pa-batch__row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
}

.pa-work .pa-batch__name { grid-area: 1 / 1; }
.pa-work .pa-batch__facts { grid-area: 1 / 2; text-align: end; }
.pa-work .pa-batch__state { grid-area: 2 / 1 / auto / span 2; }
.pa-work .pa-batch__row .pa-plain { grid-area: 1 / 3 / span 2; align-self: center; }

/* Состояние оплаченной строки отмечено тем же приёмом, что и отказ, — гранью
   слева. Прежде отказ имел черту, а оплата только цвет, и два состояния
   одного рода выглядели разнородно. */
.pa-work .pa-batch__row.is-paid .pa-batch__state {
  border-inline-start: 3px solid var(--c-accent);
  padding-inline-start: var(--s-3);
}

/* ---------- сколько и «поехали» ---------- */

.pa-work .pa-batch__total {
  margin: 0;
  font-size: var(--t-lg);
  color: var(--c-text);
}

.pa-work .pa-batch-wrap .pa-actions { margin: 0; }

/*
 * Итог и кнопка — одной полосой под чертой: сумма слева, действие справа.
 * Прежде они шли друг под другом и терялись в потоке строк.
 */
.pa-work .pa-batch__total,
.pa-work .pa-batch-wrap .pa-actions {
  display: inline-flex;
  align-items: center;
}

.pa-work .pa-batch-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.pa-work .pa-batch { margin-block-end: 0; }

.pa-work .pa-batch-wrap .pa-actions,
.pa-work .pa-batch__total {
  grid-row: 2;
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
}

.pa-work .pa-batch__total { grid-column: 1; justify-self: start; }
.pa-work .pa-batch-wrap .pa-actions { grid-column: 1; justify-self: end; }
.pa-work .pa-batch__note { grid-row: 3; margin-block-start: var(--s-3); }

/* Строка «оплачено и ждёт чтения» — сообщение, а не мелкая подпись. */
.pa-work .pa-purse {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
  border-inline-start: 3px solid var(--c-accent);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-6);
}

@media (max-width: 560px) {
  .pa-work .pa-batch__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pa-work .pa-batch__facts { grid-area: 2 / 1; text-align: start; }
  .pa-work .pa-batch__state { grid-area: 3 / 1 / auto / span 2; }
  .pa-work .pa-batch__row .pa-plain { grid-area: 1 / 2 / span 3; }
}

/*
 * Зона у гостя: та же форма, другое поведение. Она ссылка, поэтому не
 * подсвечивается при перетаскивании и не притворяется мишенью — но показывает,
 * куда попадут бумаги, и этого владелец и хотела.
 */
.pa-drop--shut {
  text-decoration: none;
  color: inherit;
  border-style: solid;
  border-color: var(--c-edge);
}

.pa-drop--shut .pa-drop__hint { max-inline-size: 46ch; }

/* ============================================================
   Какие бумаги берём

   Прежде типы документов стояли на главной только надстрочником
   первого экрана — три слова через точку, которые глаз не читает
   как список. Теперь четыре вида названы и у каждого сказано,
   что из него выходит: это отвечает на «а мою бумагу возьмёте?»
   раньше, чем человек успеет спросить.
   ============================================================ */

/* Подпись над каждым из двух перечней: их два и они про разное. */
.pa-takes__k {
  margin: var(--s-7) 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.pa-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s-5) var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-kinds li {
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--c-accent);
}

/*
 * В промежутке между широким экраном и телефоном решётка сама ставила три
 * колонки и один вид уезжал вниз один — ряд 3+1 читается как «четвёртый
 * лишний». Два на два ровнее и говорит то же самое.
 */
@media (min-width: 620px) and (max-width: 1080px) {
  .pa-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pa-kinds b {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--t-lg);
  font-weight: var(--fw-semi);
}

.pa-kinds p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/*
 * Что выходит — моноширинным: это уже колонки таблицы, а не проза.
 *
 * Селектор длиннее нужного нарочно: правило выше задаёт всем `p` внутри
 * приглушённый цвет, и перебить его можно либо весом, либо `!important`.
 * Второе однажды придётся перебивать ещё раз, и никто уже не разберёт, какое
 * правило победило.
 */
.pa-kinds li .pa-kinds__out {
  margin-block-start: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text);
}

/*
 * Значок бумаги внутри вида. Цвет берётся у текста вокруг, поэтому значок
 * приглушён ровно настолько же, насколько подпись под ним, и не спорит с
 * зелёной чертой над названием.
 */
.pa-mark {
  display: block;
  margin-block-end: var(--s-3);
  color: var(--c-edge);
}

.pa-mark svg {
  display: block;
  block-size: 58px;
  inline-size: auto;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.08));
}

/* ============================================================
   Полоса первого захода

   Не окошко согласия: соглашаться не с чем, печений сайт не
   ставит вовсе — проверено запросами. Полоса говорит это и
   ведёт к документу.

   Прижата к низу окна, не к низу страницы: человек должен
   увидеть её сразу, а не долистав до подвала.
   ============================================================ */

/*
 * Прижата к правому нижнему углу, а не растянута во всю ширину.
 *
 * Во всю ширину она накрывала «Start free» на первом экране — измерено на
 * живом сайте при окне 1000×700: полоса 24…976 по x, кнопка 54…215, и они
 * пересекались. Главное действие страницы не должно быть закрыто сообщением,
 * которое ничего не требует.
 *
 * Слева теперь чисто: там стоят кнопки на всех тёмных плитах.
 */
.pa-note {
  position: fixed;
  inset-inline-end: var(--s-gap);
  inset-block-end: var(--s-gap);
  z-index: 40;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);

  inline-size: min(560px, calc(100% - var(--s-gap) * 2));
  padding: var(--s-4) var(--s-5);

  background: var(--c-ink);
  color: var(--c-on-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lift);
}

.pa-note__text {
  margin: 0;
  font-size: var(--t-sm);
  max-inline-size: 78ch;
}

.pa-note__text b { color: var(--c-on-ink); }
.pa-note__text a { color: var(--c-accent-ink); }

.pa-note__ok {
  flex: none;
  padding: var(--s-3) var(--s-6);
  background: var(--c-accent);
  color: var(--c-accent-in);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: var(--fw-semi);
  font-size: var(--t-sm);
  cursor: pointer;
}

.pa-note__ok:hover { background: var(--c-accent-ink); }

.pa-note__ok:focus-visible {
  outline: 2px solid var(--c-on-ink);
  outline-offset: 2px;
}

/*
 * Выезд снизу — движением, а не переключением класса.
 *
 * Сперва было так: скрипт снимает `hidden`, затем через `requestAnimationFrame`
 * вешает класс, который сдвигает полосу на место. Оказалось хрупко: `rAF` не
 * срабатывает в невидимой вкладке, и полоса оставалась сдвинутой вниз — то
 * есть невидимой. Поймано замером: полоса показана, а класса нет.
 *
 * Теперь появление не зависит от скрипта: правило висит на самом отсутствии
 * `hidden`. Скрипт решает только, показывать ли, и закрывать ли.
 */
/*
 * Выезда при появлении нет — намеренно, и это не лень.
 *
 * Он был, и дважды оказывался опаснее, чем красивее. Движение, которое ещё не
 * доиграло, применяет свой первый кадр — то есть держит полосу за краем окна;
 * а в невидимой или придушенной вкладке часы движения стоят, и «ещё не
 * доиграло» длится вечно. Поймано замером на живом сайте: `currentTime` шёл
 * `0 → 0` при состоянии «идёт».
 *
 * У полосы одна работа — быть увиденной. Ставить эту работу в зависимость от
 * того, отрисовывает ли браузер вкладку, ради двух десятых секунды не стоит.
 *
 * Уход по нажатию остался: там человек уже смотрит на экран, вкладка заведомо
 * живая, и если движение не пойдёт — полоса просто исчезнет по часам.
 */
@media (prefers-reduced-motion: no-preference) {
  .pa-note.is-out { transform: translateY(120%); transition: transform var(--dur-base) var(--ease); }
}

@media (max-width: 560px) {
  .pa-note { inset-inline: var(--s-gap); flex-direction: column; align-items: stretch; }
  .pa-note__ok { inline-size: 100%; }
}

/* ------------------------------------------------------------------ */
/* Таблица прочитанного                                                */
/*                                                                     */
/* Читается как ведомость, а не как карточки: человек сверяет её с      */
/* бумагой глазами, и ему нужны ровные столбцы, а не красивые плашки.   */
/* Отсюда моноширинные числа и одна тонкая линия между строк.           */

.pa-sheet__count,
.pa-sheet__note {
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
}

.pa-sheet__count { margin-block-end: var(--s-4); }
.pa-sheet__note  { margin-block-start: var(--s-4); }

/*
 * Прокручивается таблица, а не страница.
 *
 * `tabindex` на этой же коробке нарочно: прокручиваемая область, до которой
 * нельзя добраться с клавиатуры, для половины людей просто обрезана справа.
 */
.pa-sheet__scroll {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.pa-sheet__scroll:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.pa-sheet {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.pa-sheet th,
.pa-sheet td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  vertical-align: baseline;
  white-space: nowrap;
}

.pa-sheet thead th {
  position: sticky;
  inset-block-start: 0;
  background: var(--c-raised);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pa-sheet tbody tr + tr > * { border-block-start: 1px solid var(--c-line-soft); }

/*
 * Имя документа — единственное, что переносится: оно длинное и своё у каждого.
 *
 * Селектор нарочно через `.pa-sheet th`, а не просто по классу. Выше стоит
 * `.pa-sheet th, .pa-sheet td { white-space: nowrap }` — класс сам по себе
 * этому проигрывает, и имя не переносилось, а налезало на соседний столбец.
 * Тот же изъян в этом проекте ловится третий раз: правило по классу против
 * правила «класс плюс тег» проигрывает всегда, как бы очевидно ни выглядело
 * намерение. Проверять глазами, а не рассуждением.
 */
.pa-sheet th.pa-sheet__doc {
  font-weight: var(--fw-semi);
  max-inline-size: 22ch;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pa-sheet__page {
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-body);
}

/* Числа вправо и моноширинно: так столбец сверяется одним движением глаз. */
.pa-sheet .pa-sheet__num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Прочерк вместо числа — приглушённый: его не складывают. */
.pa-sheet__none { color: var(--c-muted); }

/*
 * Строка с сомнением помечена, но не закрашена тревожным.
 *
 * Сомнение — не ошибка документа и не наша: это «посмотрите сами». Красная
 * строка сказала бы, что счёт негоден, а он годен.
 */
.pa-sheet__row--unsure > * { background: color-mix(in srgb, var(--c-raised) 55%, transparent); }

.pa-sheet .pa-sheet__why > td {
  border-block-start: 0;
  padding-block-start: 0;
  white-space: normal;
}

.pa-sheet__doubt {
  color: var(--c-muted);
  display: inline-block;
  font-size: var(--t-xs);
  margin-inline-end: var(--s-4);
}

.pa-sheet__doubt::before {
  color: var(--c-accent-text);
  /* Короткое тире: длинное на сайте не встречается больше нигде. */
  content: "– ";
}

.pa-sheet__empty {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-6);
}

.pa-sheet__empty span { color: var(--c-muted); }

@media (max-width: 560px) {
  .pa-sheet th,
  .pa-sheet td { padding: var(--s-2) var(--s-3); }
  .pa-sheet th.pa-sheet__doc { max-inline-size: 14ch; }
}

/* Правка строки на месте */

.pa-sheet .pa-sheet__do {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-align: end;
}

.pa-sheet__do a { color: var(--c-muted); }
.pa-sheet__do a:hover { color: var(--c-accent-text); }

/* Открытая на правку строка приподнята: видно, где ты находишься. */
.pa-sheet .pa-sheet__row--open > * { background: var(--c-surface); }

.pa-sheet__field {
  background: var(--c-surface);
  border: 1px solid var(--c-edge);
  border-radius: var(--r-sm);
  font: inherit;
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--s-1) var(--s-2);
}

/*
 * Ширина поля — по смыслу столбца, а не одна на всех.
 *
 * Без этого поле даты (а браузер рисует к ней ещё и значок календаря) растягивало
 * свой столбец вдвое, таблица уезжала вбок, и кнопка «Save» оказывалась за краем
 * — то есть строку можно было открыть на правку и не найти, чем её сохранить.
 */
.pa-sheet__field[name="date"]     { inline-size: 14ch; }
.pa-sheet__field[name="number"]   { inline-size: 12ch; }
.pa-sheet__field[name="currency"] { inline-size: 7ch; }
.pa-sheet__field--num             { inline-size: 10ch; }

.pa-sheet__field:focus-visible {
  border-color: var(--c-focus);
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.pa-sheet__field--num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Кем поправлено — подписью, а не значком: значок пришлось бы объяснять. */
.pa-sheet__mine {
  color: var(--c-accent-text);
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-body);
}

/* Кнопки правки — во всю ширину полосы, всегда на виду. */
.pa-sheet__save {
  align-items: center;
  display: inline-flex;
  gap: var(--s-4);
  margin-block-start: var(--s-2);
}

.pa-sheet__save a { color: var(--c-muted); font-size: var(--t-xs); }

/*
 * Оговорка про пометку — тем же серым, что и сами сомнения, но с отступом:
 * это ответ на вопрос, который человек задаёт ровно в это мгновение.
 */
.pa-sheet__doubt--said { font-style: italic; }

/* Только для читающих вслух: подписи полей и заголовок столбца с кнопками. */
.pa-hidden {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.pa-button--small {
  font-size: var(--t-xs);
  padding: var(--s-1) var(--s-3);
}

/* Когда прочитано — приглушённо и моноширинно: это подпись, а не содержание. */
.pa-sheet .pa-sheet__when {
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
}