@layer reset, tokens, base, layouts, components, utilities;

@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/golos-text-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/golos-text-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	:where(html) {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		interpolate-size: allow-keywords;
	}

	:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
		margin: 0;
	}

	:where(ul, ol)[role="list"],
	:where(nav) :where(ul, ol) {
		list-style: none;
		padding: 0;
	}

	:where(img, svg, video) {
		display: block;
		max-inline-size: 100%;
	}

	:where(input, button, textarea, select) {
		font: inherit;
		color: inherit;
	}

	:where(table) {
		border-collapse: collapse;
	}
}

/*
 * Токены. Литералы цвета живут только здесь (.agents/rules/frontend.md).
 * Сцена: продавец или бухгалтер за рабочим ноутбуком днём — светлая тема
 * основная; тёмная — для тех, у кого система тёмная.
 */
@layer tokens {
	:root {
		color-scheme: light dark;

		--font: "Golos Text", system-ui, sans-serif;
		--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

		--bg: oklch(98.4% 0.004 255);
		--surface: oklch(100% 0 0);
		--surface-2: oklch(96.6% 0.006 255);
		--line: oklch(91.5% 0.008 255);
		--line-strong: oklch(84% 0.012 255);
		--text: oklch(23% 0.02 262);
		--text-2: oklch(46% 0.018 262);
		--accent: oklch(52% 0.2 263);
		--accent-strong: oklch(from var(--accent) calc(l - 0.07) c h);
		--accent-soft: oklch(95.5% 0.028 263);
		--on-accent: oklch(100% 0 0);

		--ok: oklch(50% 0.12 155);
		--ok-soft: oklch(95.5% 0.04 155);
		--warn: oklch(52% 0.12 65);
		--warn-soft: oklch(95.5% 0.05 85);
		--bad: oklch(51% 0.18 27);
		--bad-soft: oklch(95.5% 0.03 25);

		/* Макеты чужих интерфейсов в примере на лендинге: карточка
		   маркетплейса и запись реестра. Только там — DESIGN.md, «The
		   Mock Exception». */
		--mock-market: oklch(52% 0.23 336);
		--mock-market-soft: oklch(96% 0.03 336);
		--mock-registry: oklch(38% 0.07 252);
		--on-mock-registry: oklch(100% 0 0 / 0.92);

		--shadow-sm: 0 1px 2px oklch(25% 0.03 262 / 0.06);
		--shadow: 0 1px 2px oklch(25% 0.03 262 / 0.05), 0 8px 24px -6px oklch(25% 0.03 262 / 0.1);
		--shadow-lg: 0 2px 4px oklch(25% 0.03 262 / 0.05), 0 24px 48px -12px oklch(25% 0.03 262 / 0.18);

		--r-sm: 6px;
		--r-md: 8px;
		--r-lg: 12px;
		--r-xl: 20px;

		--s-1: 0.25rem;
		--s-2: 0.5rem;
		--s-3: 0.75rem;
		--s-4: 1rem;
		--s-5: 1.5rem;
		--s-6: 2rem;
		--s-7: 3rem;
		--s-8: 4.5rem;
		--s-9: 7rem;

		--measure: 68ch;
		--page: 72rem;
		--gutter: clamp(1rem, 4vw, 2rem);
		--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--bg: oklch(17.5% 0.014 262);
			--surface: oklch(21.5% 0.016 262);
			--surface-2: oklch(24.5% 0.017 262);
			--line: oklch(31% 0.018 262);
			--line-strong: oklch(40% 0.02 262);
			--text: oklch(94.5% 0.008 262);
			--text-2: oklch(74% 0.014 262);
			--accent: oklch(71% 0.15 265);
			--accent-strong: oklch(from var(--accent) calc(l + 0.06) c h);
			--accent-soft: oklch(30% 0.06 265);
			--on-accent: oklch(17% 0.03 265);

			--ok: oklch(76% 0.13 155);
			--ok-soft: oklch(29% 0.05 155);
			--warn: oklch(80% 0.12 80);
			--warn-soft: oklch(30% 0.05 75);
			--bad: oklch(74% 0.14 25);
			--bad-soft: oklch(30% 0.06 25);

			--mock-market: oklch(72% 0.18 336);
			--mock-market-soft: oklch(30% 0.07 336);
			--mock-registry: oklch(33% 0.05 252);

			--shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
			--shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 8px 24px -6px oklch(0% 0 0 / 0.45);
			--shadow-lg: 0 2px 4px oklch(0% 0 0 / 0.3), 0 24px 48px -12px oklch(0% 0 0 / 0.6);
		}
	}
}

@layer base {
	html {
		background: var(--bg);
		color: var(--text);
		font-family: var(--font);
		font-size: 100%;
		line-height: 1.55;
		accent-color: var(--accent);
		caret-color: var(--accent);
		scrollbar-color: var(--line-strong) transparent;
		-webkit-font-smoothing: antialiased;
	}

	body {
		min-block-size: 100dvh;
		display: grid;
		grid-template-rows: auto 1fr auto;
		/* minmax(0, …): широкая таблица прокручивается в своей обёртке, а
		   не раздвигает страницу шире экрана. */
		grid-template-columns: minmax(0, 1fr);
		padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
	}

	::selection {
		background: oklch(from var(--accent) l c h / 0.22);
	}

	:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
		border-radius: var(--r-sm);
	}

	h1,
	h2,
	h3,
	h4 {
		line-height: 1.2;
		letter-spacing: -0.015em;
		font-weight: 650;
		text-wrap: balance;
	}

	h1 {
		font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
		letter-spacing: -0.02em;
	}

	h2 {
		font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	}

	h3 {
		font-size: 1.0625rem;
	}

	p,
	li,
	dd {
		text-wrap: pretty;
	}

	p {
		max-inline-size: var(--measure);
	}

	a {
		color: var(--accent);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
		text-decoration-color: oklch(from var(--accent) l c h / 0.4);
		transition: color 0.15s, text-decoration-color 0.15s;

		&:hover {
			color: var(--accent-strong);
			text-decoration-color: currentColor;
		}
	}

	small {
		font-size: 0.875rem;
		color: var(--text-2);
	}

	strong {
		font-weight: 650;
	}

	code {
		font-family: var(--font-mono);
		font-size: 0.875em;
		padding: 0.1em 0.35em;
		border-radius: var(--r-sm);
		background: var(--surface-2);
	}

	/* Номера, даты и суммы стоят столбиком: табличные цифры везде, где они в
	   таблицах и определениях. */
	table,
	dl,
	time {
		font-variant-numeric: tabular-nums;
	}

	hr {
		border: 0;
		border-block-start: 1px solid var(--line);
		margin-block: var(--s-6);
	}
}

@layer layouts {
	.container {
		inline-size: min(100% - 2 * var(--gutter), var(--page));
		margin-inline: auto;
	}

	/* Страница приложения: заголовок, затем разделы с воздухом между ними. */
	main {
		inline-size: min(100% - 2 * var(--gutter), var(--page));
		margin-inline: auto;
		padding-block: var(--s-6) var(--s-8);
		display: flex;
		flex-direction: column;
		gap: var(--s-4);

		& > * {
			min-inline-size: 0;
		}

		& > section {
			margin-block-start: var(--s-5);
			display: flex;
			flex-direction: column;
			gap: var(--s-3);
		}

		& > p:first-child:has(> a.back) {
			font-size: 0.9375rem;
			margin-block-end: calc(-1 * var(--s-2));
		}
	}

	/* Узкая колонка: вход, регистрация, пароль, принятие документов. */
	main.narrow {
		inline-size: min(100% - 2 * var(--gutter), 28rem);
		padding-block-start: var(--s-7);
	}

	/* Текст документа: чтение, а не работа. */
	main.prose {
		inline-size: min(100% - 2 * var(--gutter), 46rem);

		& article {
			display: flex;
			flex-direction: column;
			gap: var(--s-3);
		}

		& article h1 {
			margin-block-end: var(--s-2);
		}

		& article h2 {
			font-size: 1.1875rem;
			margin-block-start: var(--s-5);
		}

		& article ul {
			display: flex;
			flex-direction: column;
			gap: var(--s-2);
			padding-inline-start: 1.25rem;
		}
	}
}

@layer components {
	/* Шапка */
	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: 10;
		background: var(--surface);
		border-block-end: 1px solid var(--line);

		& .container {
			display: flex;
			align-items: center;
			gap: var(--s-5);
			min-block-size: 4rem;
		}

		& nav {
			flex: 1;
			min-inline-size: 0;
		}

		& nav ul {
			display: flex;
			align-items: center;
			gap: var(--s-1);
			overflow-x: auto;
			scrollbar-width: none;
		}

		& nav a {
			display: block;
			padding: var(--s-2) var(--s-3);
			border-radius: var(--r-md);
			color: var(--text-2);
			text-decoration: none;
			font-weight: 500;
			white-space: nowrap;

			&:hover {
				color: var(--text);
				background: var(--surface-2);
			}

			&[aria-current="page"] {
				color: var(--text);
				background: var(--surface-2);
			}
		}

		& .account {
			display: flex;
			align-items: center;
			gap: var(--s-2);
			color: var(--text-2);
			font-size: 0.875rem;

			& form {
				display: contents;
			}

			& .button,
			& button {
				min-block-size: 2.25rem;
			}
		}

		/* Строка о доступе: остаток пробного периода, конец доступа. Тон
		   подтверждения, а не тревоги — красный принадлежит «негоден». */
		& .access-note {
			border-block-start: 1px solid var(--line);
			background: var(--accent-soft);
			font-size: 0.875rem;

			& .container {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
				gap: var(--s-1) var(--s-3);
				min-block-size: 0;
				padding-block: var(--s-2);
			}
		}

		/* Разделов у вошедшего до пяти: почта рядом с ними умещается только
		   на очень широком экране, без неё строка держится до 72rem, ниже
		   разделы — своей строкой под логотипом. */
		@media (width < 100rem) {
			&:has(nav.app) .email {
				display: none;
			}
		}

		@media (width < 72rem) {
			&:has(nav.app) .container {
				flex-wrap: wrap;
				gap: var(--s-2) var(--s-4);
				padding-block: var(--s-2);
			}

			& nav.app {
				order: 3;
				flex-basis: 100%;
				margin-inline: calc(-1 * var(--s-3));
			}

			& .account {
				margin-inline-start: auto;
			}
		}

		@media (width < 60rem) {
			& .email {
				display: none;
			}

			/* Гостю — логотип, «Войти» и «Попробовать» одной строкой. */
			& nav.guest {
				display: none;
			}

			&:has(nav.guest) .account {
				margin-inline-start: auto;
				gap: var(--s-1);
			}
		}

		/* Разделы прокручиваются вбок; край гаснет, чтобы обрезанный пункт
		   читался как «дальше есть ещё». */
		@media (width < 40rem) {
			& nav.app ul {
				mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
				padding-inline-end: var(--s-6);
			}
		}
	}

	.logo {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		color: var(--text);
		text-decoration: none;
		font-weight: 700;
		font-size: 1.125rem;
		letter-spacing: -0.02em;

		& svg {
			inline-size: 1.75rem;
			block-size: 1.75rem;
		}

		&:hover {
			color: var(--text);
		}
	}

	/* Подвал */
	.site-footer {
		border-block-start: 1px solid var(--line);
		background: var(--surface-2);
		color: var(--text-2);
		font-size: 0.875rem;
		padding-block: var(--s-6);

		& .container {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			justify-content: space-between;
			gap: var(--s-4);
		}

		& nav {
			display: flex;
			flex-wrap: wrap;
			gap: var(--s-2) var(--s-5);
		}

		& a {
			color: var(--text-2);
			text-decoration: none;

			&:hover {
				color: var(--text);
				text-decoration: underline;
			}
		}
	}

	/* Кнопки: основная — залитая; .secondary — контурная; .danger — для
	   необратимого. Ссылка-кнопка — класс .button. */
	button,
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s-2);
		min-block-size: 2.5rem;
		padding: 0 var(--s-4);
		border: 1px solid var(--accent);
		border-radius: var(--r-md);
		background: var(--accent);
		color: var(--on-accent);
		font-weight: 600;
		font-size: 0.9375rem;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		box-shadow: var(--shadow-sm);
		transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease-out);

		&:hover {
			background: var(--accent-strong);
			border-color: var(--accent-strong);
			color: var(--on-accent);
		}

		&:active {
			transform: translateY(1px);
		}

		&:disabled {
			opacity: 0.55;
			cursor: not-allowed;
		}

		&.secondary {
			background: var(--surface);
			border-color: var(--line-strong);
			color: var(--text);

			&:hover {
				background: var(--surface-2);
				border-color: var(--line-strong);
			}
		}

		&.ghost {
			background: transparent;
			border-color: transparent;
			box-shadow: none;
			color: var(--text-2);

			&:hover {
				background: var(--surface-2);
				color: var(--text);
			}
		}

		&.danger {
			background: var(--surface);
			border-color: oklch(from var(--bad) l c h / 0.45);
			color: var(--bad);

			&:hover {
				background: var(--bad-soft);
			}
		}

		&.large {
			min-block-size: 3rem;
			padding-inline: var(--s-5);
			font-size: 1rem;
			border-radius: var(--r-lg);
		}

		&[aria-busy="true"] {
			cursor: progress;
		}
	}

	/* Поля */
	label {
		font-weight: 550;
		font-size: 0.9375rem;
	}

	:where(p, div):has(> label + :is(input, textarea, select)) {
		display: flex;
		flex-direction: column;
		gap: var(--s-2);
	}

	input:where([type="text"], [type="email"], [type="password"], [type="search"], :not([type])),
	textarea,
	select {
		inline-size: 100%;
		min-block-size: 2.75rem;
		padding: var(--s-2) var(--s-3);
		border: 1px solid var(--line-strong);
		border-radius: var(--r-md);
		background: var(--surface);
		color: var(--text);
		transition: border-color 0.15s, box-shadow 0.15s;

		&::placeholder {
			color: oklch(from var(--text-2) l c h / 0.8);
		}

		&:hover {
			border-color: oklch(from var(--line-strong) calc(l - 0.08) c h);
		}

		&:focus-visible {
			outline: none;
			border-color: var(--accent);
			box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
		}

		&:user-invalid {
			border-color: var(--bad);
		}
	}

	textarea {
		resize: vertical;
		font-family: var(--font-mono);
		font-size: 0.875rem;
		line-height: 1.5;
	}

	select {
		inline-size: auto;
		padding-inline-end: var(--s-6);
	}

	/* Чекбокс и радио с подписью в строку. Не flex: в подписи текст и
	   ссылки, во flex каждый кусок стал бы своей колонкой. Поле — слева на
	   отступе, подпись переносится как обычный текст. */
	label:has(> input:is([type="checkbox"], [type="radio"])) {
		display: block;
		position: relative;
		padding-inline-start: calc(1.125rem + var(--s-3));
		font-weight: 450;
		cursor: pointer;

		& > input {
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: 0.2em;
			margin: 0;
			inline-size: 1.125rem;
			block-size: 1.125rem;
		}
	}

	fieldset {
		border: 0;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--s-3);

		& legend {
			font-weight: 650;
			margin-block-end: var(--s-3);
			padding: 0;
		}
	}

	form {
		display: flex;
		flex-direction: column;
		gap: var(--s-4);
		align-items: flex-start;

		& > p,
		& > fieldset {
			align-self: stretch;
		}
	}

	/* Форма из одной кнопки встаёт в строку с соседями. */
	form:has(> button:only-child) {
		display: inline-flex;
	}

	/* Поверхность: форма, блок настроек, результат проверки. */
	.panel {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		padding: var(--s-5);
		box-shadow: var(--shadow-sm);
	}

	main.narrow > form,
	main > section:has(> form) > form {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		padding: var(--s-5);
		box-shadow: var(--shadow-sm);
		align-self: stretch;
	}

	/* Ссылки со стрелкой: назад к разделу, дальше по списку. Стрелка — маска
	   из своего файла: data:-адрес маски CSP не пропускает. */
	a.back,
	a.next {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		text-decoration: none;

		&::before,
		&::after {
			inline-size: 1em;
			block-size: 1em;
			background: currentColor;
			mask: no-repeat center / contain;
		}
	}

	a.back {
		color: var(--text-2);

		&::before {
			content: "";
			mask-image: url("/icons/arrow-left.svg");
		}

		&:hover {
			color: var(--accent);
		}
	}

	a.next::after {
		content: "";
		mask-image: url("/icons/arrow-right.svg");
	}

	/* Номер документа переносится после точки или пробела, не на дефисе. */
	/* inline-block не получает подчёркивание ссылки-предка: наследуем явно. */
	.doc-number,
	.doc-number > span {
		text-decoration: inherit;
	}

	.doc-number > span {
		display: inline-block;
	}

	/* Ответ реестра на проверку номера: на главной и отдельной страницей. */
	.lookup-number {
		font-weight: 650;
		font-size: 1.0625rem;
		font-variant-numeric: tabular-nums;
	}

	.lookup-facts {
		padding: 0;
		border: 0;
		background: none;
		grid-template-columns: max-content 1fr;
		font-size: 0.9375rem;
	}

	.lookup-links {
		font-size: 0.9375rem;
	}

	/* Ответ по карточке: сначала сама карточка, затем WB и реестр рядом. */
	.lookup-card {
		display: flex;
		flex-direction: column;
		gap: var(--s-3);
	}

	.lookup-card-title {
		display: flex;
		flex-direction: column;
		gap: var(--s-1);
		font-weight: 600;

		& small {
			font-weight: 450;
		}
	}

	/* Расхождение — главное в ответе: текстом, не тревогой. */
	.lookup-delta {
		font-weight: 600;
		padding-inline-start: var(--s-3);
		border-inline-start: 3px solid var(--bad);
	}

	.doc-kind {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s-2) var(--s-3);
		color: var(--text-2);
		margin-block-start: calc(-1 * var(--s-2));
	}

	/* Сообщения: ошибка формы и уведомление после действия. */
	[role="alert"],
	p[role="status"] {
		padding: var(--s-3) var(--s-4);
		border-radius: var(--r-md);
		max-inline-size: none;
	}

	[role="alert"] {
		background: var(--bad-soft);
		color: var(--bad);
	}

	p[role="status"] {
		background: var(--accent-soft);
		color: var(--text);
	}

	/* Сбой не по вине посетителя — реестр молчит: не красным, красный только
	   у статуса «негоден». */
	[role="alert"].notice {
		background: var(--surface);
		color: var(--text);
		border: 1px solid var(--line);
	}

	/* Внутри ответа проверки рамка уже есть у самого ответа. */
	:is(.result, .panel) > [role="alert"].notice {
		border: 0;
		padding: 0;
		background: none;
	}

	/* Метка годности и вердиктов. */
	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		padding: 0.15em 0.6em;
		border-radius: 999px;
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.5;
		white-space: nowrap;
		background: var(--surface-2);
		color: var(--text-2);

		&::before {
			content: "";
			inline-size: 0.45em;
			block-size: 0.45em;
			border-radius: 50%;
			background: currentColor;
		}

		&.valid {
			background: var(--ok-soft);
			color: var(--ok);
		}

		&.doubtful {
			background: var(--warn-soft);
			color: var(--warn);
		}

		&.invalid {
			background: var(--bad-soft);
			color: var(--bad);
		}
	}

	/* Таблицы */
	.table-wrap {
		overflow-x: auto;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
		box-shadow: var(--shadow-sm);
	}

	table {
		inline-size: 100%;
		font-size: 0.9375rem;

		& th {
			text-align: start;
			font-weight: 600;
			font-size: 0.8125rem;
			color: var(--text-2);
			background: var(--surface-2);
			white-space: nowrap;
		}

		& th,
		& td {
			padding: var(--s-3) var(--s-4);
			vertical-align: top;
			border-block-end: 1px solid var(--line);
		}

		& tbody tr:last-child td {
			border-block-end: 0;
		}

		& tbody tr:hover {
			background: oklch(from var(--surface-2) l c h / 0.5);
		}

		& ul {
			list-style: none;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: var(--s-2);
		}

		& li {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--s-1) var(--s-2);
		}
	}

	main > table {
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		border-collapse: separate;
		border-spacing: 0;
	}

	/* Определения: реквизиты кабинета, документа. */
	dl {
		display: grid;
		grid-template-columns: minmax(9rem, max-content) 1fr;
		gap: var(--s-2) var(--s-5);
		padding: var(--s-4) var(--s-5);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);

		& dt {
			color: var(--text-2);
		}

		& dd {
			margin: 0;
			font-weight: 500;
		}
	}

	/* Раскрытие: «Документ не нужен?», «Не уведомлять». */
	details {
		& > summary {
			display: flex;
			align-items: center;
			gap: 0.35em;
			cursor: pointer;
			color: var(--accent);
			font-weight: 550;
			font-size: 0.9375rem;
			list-style: none;
			inline-size: fit-content;

			&::-webkit-details-marker {
				display: none;
			}

			&::before {
				content: "";
				flex: none;
				inline-size: 1em;
				block-size: 1em;
				background: currentColor;
				mask: url("/icons/chevron-right.svg") no-repeat center / contain;
				transition: rotate 0.2s var(--ease-out);
			}

			&:hover {
				color: var(--accent-strong);
			}
		}

		&[open] > summary {
			margin-block-end: var(--s-3);

			&::before {
				rotate: 90deg;
			}
		}
	}

	/* Списки строк: кабинеты, находки. */
	main > ul,
	main > section > ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
		box-shadow: var(--shadow-sm);

		& > li {
			padding: var(--s-4) var(--s-5);
			display: flex;
			flex-direction: column;
			gap: var(--s-2);

			& + li {
				border-block-start: 1px solid var(--line);
			}
		}
	}

	/* Находка: фраза, время, ссылки и заглушка. */
	.finding {
		display: flex;
		flex-direction: column;
		gap: var(--s-2);

		& > p:first-child {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			align-items: baseline;
			gap: var(--s-3);
			font-weight: 500;

			/* На телефоне метка над текстом: рядом с ней текст — колонка в
			   пару слов. */
			@media (width < 30rem) {
				grid-template-columns: minmax(0, 1fr);
				justify-items: start;
				gap: var(--s-2);
			}
		}
	}

	.finding-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2) var(--s-4);
		font-size: 0.9375rem;
	}

	/* Баннер cookie: внизу экрана, пока посетитель не выбрал. Не fixed, а
	   sticky последней строкой сетки body: на короткой странице он занимает
	   своё место и не накрывает форму входа, на длинной — доступен весь
	   текст над ним, если долистать. */
	.cookie-banner {
		position: sticky;
		inset-block-end: var(--gutter);
		z-index: 20;
		inline-size: min(100% - 2 * var(--gutter), 38rem);
		margin: var(--s-4) var(--gutter) var(--gutter) auto;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-lg);
		padding: var(--s-4) var(--s-5);
		animation: rise 0.5s var(--ease-out) both;

		& form {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--s-3);
		}

		& p {
			flex-basis: 100%;
			font-size: 0.9375rem;
		}
	}

	@keyframes rise {
		from {
			transform: translateY(12px);
			opacity: 0;
		}
	}
}

@layer utilities {
	.nowrap {
		white-space: nowrap;
	}

	.muted {
		color: var(--text-2);
	}

	.num {
		font-variant-numeric: tabular-nums;
	}

	@media (width < 30rem) {
		.wide-only {
			display: none;
		}
	}

	.visually-hidden {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			transition-duration: 0.01ms !important;
		}
	}
}