/*
 * Деньги на первом экране регистрации: лента выплат, рекорд, три числа.
 *
 * Отдельным файлом, а не строками в entry.css: тот уже перерос порог из
 * CLAUDE.md, и дописывать в него — увеличивать нарушение.
 *
 * Главная задача этого файла не в оформлении, а в том, чтобы на телефоне
 * блок влез между заголовком и формой и НЕ вытолкнул форму за первый
 * экран. Раньше поле почты начиналось на 867 пикселе при высоте экрана
 * 812 — человек видел фото и заголовок и не догадывался, что ниже есть
 * форма. Поэтому здесь всё узкое: мелкий кегль, плотные отступы, три
 * суммы вместо шести.
 *
 * Одного этого файла не хватило, и в entry.css пришлось тронуть три
 * числа. Вот они и вот зачем, чтобы не пришлось искать:
 *
 *   .entry__photo / .entry__veil — полоса снимка на телефоне 420 → 280.
 *     С блоком выплат поле почты уезжало на 1007-й пиксель; после правки
 *     оно на 750-м и целиком помещается в экран 812. Кадр не портится:
 *     лицо и деньги в верхней части снимка, обрезается низ со штативом.
 *
 *   .entry__wrap margin-top −132 → −88 — наезд содержимого на снимок
 *     пропорционально короче, иначе марка съезжает на светлую его часть.
 *
 *   .entry__panel-head svg — сердечко над словом «Регистрация» на
 *     телефоне убрано. Украшение ценой в сорок пикселей высоты, и это
 *     ровно те сорок, которых не хватало. На широком экране оно осталось.
 */

.entry__proof {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
}

/* ── Лента ──────────────────────────────────────────────────────── */

.entry__tick {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	padding: 13px 0;
}

.entry__tick-lab {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--entry-muted);
	margin-bottom: 9px;
}

.entry__tick-row { display: flex; gap: 7px; flex-wrap: wrap; }

.entry__sum {
	font-size: 13.5px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: var(--entry-title);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transition: opacity 240ms ease;
}

/* Короткое затухание при подмене суммы: мгновенная замена читается как
   дёрганье, и глаз ловит её как ошибку отрисовки. */
.entry__sum--out { opacity: 0; }

.entry__record { margin-top: 10px; font-size: 12px; color: var(--entry-muted); }

.entry__record b {
	font-size: 14px;
	font-weight: 800;
	color: #ffc2dd;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── Три числа ──────────────────────────────────────────────────── */

.entry__facts { display: flex; gap: 22px; flex-wrap: wrap; }

.entry__fact { display: flex; flex-direction: column; gap: 2px; }

/* 22, а не 19: это доказательство, а не подпись — на широком экране
   числа читаются раньше доводов внизу. */
.entry__fact-v {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--entry-title);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.entry__fact-k { font-size: 11px; line-height: 1.3; color: var(--entry-muted); }

/* Одна и та же подпись двумя длинами: на широком экране «обработанный
   платёж», на телефоне просто «перевод» — там третье число стоит в ряд с
   двумя другими, и длинная подпись ломает строку. */
.entry__fact-k--narrow, .entry__fact-v--narrow { display: none; }

@media (max-width: 900px) {

	.entry__proof { gap: 10px; margin-top: 14px; }
	.entry__tick { padding: 10px 0; }
	.entry__tick-lab { font-size: 9.5px; margin-bottom: 7px; }
	.entry__sum { font-size: 12.5px; padding: 4px 9px; }
	.entry__record { margin-top: 7px; font-size: 11px; }
	.entry__record b { font-size: 13px; }

	.entry__facts { gap: 14px; }
	.entry__fact-v { font-size: 15px; }
	.entry__fact-k { font-size: 10px; }

	/* Короткие подписи: три пары должны встать в ОДНУ строку. Перенос на
	   вторую стоит двадцати пикселей, а именно их не хватает полю почты,
	   чтобы целиком попасть в первый экран. */
	.entry__fact-k--wide, .entry__fact-v--wide { display: none; }
	.entry__fact-k--narrow, .entry__fact-v--narrow { display: inline; }

	/* Четвёртая и последующие суммы прячутся: в ленте на телефоне их три.
	   Шесть занимают две строки и уводят форму за край экрана — ровно то,
	   ради чего этот файл и написан. Скрипт подменяет только видимые. */
	.entry__sum:nth-child(n + 4) { display: none; }

	/* Числа и подписи в одну строку: на телефоне три пары друг под другом
	   съедали сто пикселей, а форма должна попасть в первый экран. */
	.entry__fact { flex-direction: row; align-items: baseline; gap: 5px; }
}

/* На 375 пикселях трёх сумм по-прежнему хватает: они короткие, а ленту из
   двух читать не за что — она перестаёт выглядеть лентой. */
@media (max-width: 380px) {
	.entry__facts { gap: 10px; }
	.entry__fact-v { font-size: 14px; }
	.entry__fact-k { font-size: 9.5px; }
}

/* Выключены анимации — лента стоит. Скрипт это тоже проверяет; правило
   здесь на случай, если скрипт не загрузился, а класс уже проставлен. */
@media (prefers-reduced-motion: reduce) {
	.entry__sum { transition: none; }
	.entry__sum--out { opacity: 1; }
}