/**
 * Калькулятор обустройства скважины.
 * Цвета, отступы, радиусы и тени взяты из макета.
 */

.vrc {
	--vrc-black: #17212b;
	--vrc-secondary: #738496;
	--vrc-stroke: rgba(203, 217, 229, 0.8);
	--vrc-gray: #eef3f8;
	--vrc-white: #ffffff;

	--vrc-white-gradient: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	--vrc-blue-gradient: linear-gradient(106.39deg, #1f8ce0 0%, #176fcb 100%);
	--vrc-green-gradient: linear-gradient(103.58deg, #21ae5b 0%, #1d9650 100%);
	--vrc-teal-gradient: linear-gradient(149.62deg, #228be6 0%, #139f91 100%);
	--vrc-stage-gradient: linear-gradient(121.45deg, #228be6 0%, #139f91 100%);

	--vrc-card-shadow: 0 18px 24px rgba(19, 44, 70, 0.08);
	--vrc-teal-shadow: 0 16px 18px rgba(18, 132, 151, 0.24);
	--vrc-btn-shadow: 0 10px 10px rgba(14, 46, 76, 0.08);

	--vrc-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--vrc-font-cond: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

	--vrc-radius-card: 20px;
	--vrc-radius: 12px;

	font-family: var(--vrc-font);
	color: var(--vrc-black);
	line-height: 1.25;
	-webkit-text-size-adjust: 100%;

	/*
	 * Ширина, до которой калькулятор расширяется на десктопе (см. ниже).
	 * --vrc-max    ширина по макету;
	 * --vrc-gutter суммарный зазор от краёв окна, с запасом на полосу
	 *              прокрутки — её 100vw не учитывает.
	 */
	--vrc-max: 1420px;
	--vrc-gutter: 48px;
}

/*
 * Контейнер сайта уже, чем нужно макету (980 против 1420), а менять его
 * глобально нельзя — поедут все страницы. Поэтому калькулятор выходит за
 * пределы контейнера сам, отрицательными полями, и центрируется по его
 * середине — то есть по центру экрана. Остальная вёрстка не затрагивается.
 *
 * max(100%, …) не даёт блоку стать УЖЕ контейнера, а рамка в 1024px
 * держит приём на десктопе: на планшетах и телефонах ничего не меняется.
 *
 * Чтобы отключить — удалите этот блок. Чтобы сузить — поменяйте --vrc-max.
 */
@media (min-width: 1024px) {
	.vrc {
		--vrc-width: max(100%, min(var(--vrc-max), calc(100vw - var(--vrc-gutter))));

		width: var(--vrc-width);
		margin-inline: calc((100% - var(--vrc-width)) / 2);
	}
}

/*
 * Раскладка переключается по ширине САМОГО БЛОКА, а не окна браузера:
 * калькулятор может стоять в узкой колонке шаблона, и тогда при широком
 * окне места всё равно мало.
 *
 * Контейнер объявлен на внутренней обёртке, а не на .vrc: container-type
 * включает containment, а он делает элемент точкой отсчёта для
 * position: fixed. Модальное окно лежит снаружи обёртки и центрируется
 * по экрану, как и задумано.
 */
.vrc__body {
	container-type: inline-size;
	container-name: vrc;
}

.vrc *,
.vrc *::before,
.vrc *::after {
	box-sizing: border-box;
}

/*
 * Атрибут hidden слабее любого правила с display, а скрываем мы много чего
 * (условные поля, строки расчёта, кнопки шагов). Одно правило вместо
 * россыпи точечных [hidden] у каждого класса.
 */
.vrc [hidden] {
	display: none !important;
}

/* ── Раскладка ──────────────────────────────────────────────────────── */

.vrc__layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

/*
 * Пропорции из макета: форма 980 + отступ 40 + расчёт 400 = 1420.
 * Базисы 620/400 подобраны так, что при 1420px колонки встают ровно по
 * макету, а в более узком блоке (например, 980px — ширина контейнера
 * сайта) ужимаются пропорционально, а не ломаются.
 */
.vrc__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 620px;
	min-width: 0;
}

.vrc__aside {
	flex: 0 1 400px;
	min-width: 320px;
	max-width: 400px;
	position: sticky;
	top: 20px;
}

/* ── Служебная строка для администратора ────────────────────────────── */

.vrc__admin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.vrc__notice-admin {
	flex: 1 1 320px;
	padding: 12px;
	border: 1px solid #f1e1b4;
	border-radius: var(--vrc-radius);
	background: linear-gradient(180deg, #fff8ea 0%, #fff3d7 100%);
	color: #7a5300;
	font-size: 14px;
}

.vrc__settings-link {
	font-size: 14px;
	font-weight: 700;
	color: #1d9650;
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}

/* ── Карточка ───────────────────────────────────────────────────────── */

.vrc-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	background: var(--vrc-white);
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius-card);
	box-shadow: var(--vrc-card-shadow);
}

.vrc-card__title {
	margin: 0;
	font-family: var(--vrc-font-cond);
	font-weight: 700;
	font-stretch: 75%;
	font-size: 24px;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--vrc-black);
}

.vrc-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.vrc-row[hidden] {
	display: none;
}

/* Разделительная линия между строками, как в макете. */
.vrc-row:not([hidden]) ~ .vrc-row:not([hidden]) {
	padding-top: 20px;
	border-top: 1px solid var(--vrc-stroke);
}

/* ── Поле ───────────────────────────────────────────────────────────── */

.vrc-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.vrc-field[hidden] {
	display: none;
}

.vrc-field--half {
	flex: 0 1 calc(50% - 12px);
}

.vrc-field--full {
	flex: 1 1 100%;
}

.vrc-field--pills,
.vrc-field--switch {
	gap: 12px;
}

.vrc-field__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	width: 100%;
}

.vrc-field__label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vrc-black);
	/* Длинные названия разделов не должны вылезать за колонку. */
	overflow-wrap: anywhere;
}

.vrc-field__hint {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1.25;
	color: var(--vrc-secondary);
	opacity: 0.6;
	white-space: nowrap;
}

/* ── Поле ввода ─────────────────────────────────────────────────────── */

/* Вес селектора поднят намеренно: правила шаблона вида input[type="text"]
   весят больше одного класса и перебили бы высоту, отступы и фон. */
.vrc .vrc-input {
	width: 100%;
	height: 44px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.25;
	color: var(--vrc-black);
	background: var(--vrc-white-gradient);
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius);
	appearance: none;
}

.vrc .vrc-input::placeholder {
	color: var(--vrc-secondary);
	opacity: 1;
}

.vrc-input:focus-visible,
.vrc-select__button:focus-visible,
.vrc-pill:focus-visible,
.vrc-stage:focus-visible,
.vrc-btn:focus-visible,
.vrc-summary__more:focus-visible,
.vrc-select__option:focus-visible,
.vrc-switch-row__input:focus-visible + .vrc-switch,
.vrc-check input:focus-visible + .vrc-switch {
	outline: 2px solid #1f8ce0;
	outline-offset: 2px;
}

/* ── Выпадающий список ──────────────────────────────────────────────── */

.vrc-select {
	position: relative;
	width: 100%;
}

.vrc-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 44px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.25;
	text-align: left;
	color: var(--vrc-black);
	background: var(--vrc-white-gradient);
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius);
	cursor: pointer;
}

.vrc-select__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vrc-select__value.is-placeholder {
	color: var(--vrc-secondary);
}

.vrc-select__arrow {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: center / 11px 6px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 10.25 5.875' fill='none'%3E%3Cpath d='M9.5 0.75L5.125 5.125L0.75 0.75' stroke='%2317212B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.15s ease;
}

.vrc-select.is-open .vrc-select__arrow {
	transform: rotate(180deg);
}

.vrc-select__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 268px;
	overflow-y: auto;
	background: var(--vrc-white-gradient);
	border-radius: var(--vrc-radius);
	box-shadow: var(--vrc-card-shadow);
}

.vrc-select__panel[hidden] {
	display: none;
}

.vrc-select__option {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: var(--vrc-black);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.vrc-select__option + .vrc-select__option {
	border-top: 1px solid var(--vrc-stroke);
}

.vrc-select__option:hover,
.vrc-select__option.is-selected {
	background: var(--vrc-gray);
}

/* ── Кнопки-варианты ────────────────────────────────────────────────── */

.vrc-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vrc-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px 8px 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: var(--vrc-secondary);
	background: var(--vrc-gray);
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius);
	cursor: pointer;
}

.vrc-pill__marker {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.vrc-pill__marker::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 16px;
	height: 16px;
	border: 1.5px solid #1f8ce0;
	border-radius: 50%;
}

.vrc-pill.is-active .vrc-pill__marker::before {
	border-width: 1px;
}

.vrc-pill.is-active .vrc-pill__marker::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vrc-blue-gradient);
}

/* ── Переключатели ──────────────────────────────────────────────────── */

.vrc-switches {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vrc-switch-row {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.vrc-switch-row__input,
.vrc-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vrc-switch {
	position: relative;
	flex: 0 0 32px;
	width: 32px;
	height: 20px;
	border-radius: 10px;
}

.vrc-switch::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 28px;
	height: 16px;
	border-radius: 8px;
	background: var(--vrc-gray);
	transition: background 0.18s ease;
}

.vrc-switch::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vrc-blue-gradient);
	transition: left 0.18s ease, background 0.18s ease;
}

.vrc-switch-row__input:checked + .vrc-switch::before,
.vrc-check input:checked + .vrc-switch::before {
	background: var(--vrc-blue-gradient);
}

.vrc-switch-row__input:checked + .vrc-switch::after,
.vrc-check input:checked + .vrc-switch::after {
	left: 16px;
	background: var(--vrc-white);
}

.vrc-switch-row__text {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vrc-black);
}

/* ── Шаги на мобильном ──────────────────────────────────────────────── */

.vrc__stepper {
	display: none;
	gap: 4px;
}

.vrc-stage {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 16px;
	font-family: var(--vrc-font-cond);
	font-weight: 700;
	font-stretch: 75%;
	font-size: 20px;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	color: var(--vrc-black);
	background: var(--vrc-white);
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius);
	cursor: pointer;
}

.vrc-stage.is-active {
	color: var(--vrc-white);
	background: var(--vrc-stage-gradient);
	border-color: transparent;
	box-shadow: var(--vrc-teal-shadow);
}

.vrc-card--nav {
	display: none;
	flex-direction: row;
	gap: 12px;
}

.vrc-card--nav .vrc-btn {
	flex: 1 1 0;
	min-width: 0;
}

.vrc-card--nav .vrc-btn[hidden] {
	display: none;
}

/* ── Кнопки ─────────────────────────────────────────────────────────── */

.vrc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 24px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	border: 0;
	border-radius: var(--vrc-radius);
	cursor: pointer;
}

.vrc-btn--primary {
	color: var(--vrc-white);
	background: var(--vrc-green-gradient);
	box-shadow: var(--vrc-btn-shadow);
}

.vrc-btn--secondary {
	color: var(--vrc-white);
	background: var(--vrc-blue-gradient);
	box-shadow: var(--vrc-btn-shadow);
}

.vrc-btn--tertiary {
	color: var(--vrc-black);
	background: var(--vrc-gray);
}

.vrc-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ── Боковая карточка расчёта ───────────────────────────────────────── */

.vrc-summary {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px;
	background: var(--vrc-white);
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius-card);
	box-shadow: var(--vrc-card-shadow);
}

.vrc-summary__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vrc-summary__total {
	padding: 20px 20px 16px;
	color: var(--vrc-white);
	background: var(--vrc-teal-gradient);
	border-radius: var(--vrc-radius);
	box-shadow: var(--vrc-teal-shadow);
}

.vrc-summary__total-label {
	font-size: 14px;
	line-height: 1.25;
}

.vrc-summary__total-value {
	font-family: var(--vrc-font-cond);
	font-weight: 700;
	font-stretch: 75%;
	font-size: 40px;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
}

.vrc-summary__box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--vrc-stroke);
	border-radius: var(--vrc-radius);
}

.vrc-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vrc-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	line-height: 1.25;
	color: var(--vrc-secondary);
}

.vrc-summary__row[hidden] {
	display: none;
}

.vrc-summary__row:not([hidden]) ~ .vrc-summary__row:not([hidden]) {
	padding-top: 12px;
	border-top: 1px solid var(--vrc-stroke);
}

.vrc-summary__row-label {
	flex: 1 1 auto;
	min-width: 0;
}

.vrc-summary__row-value {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

.vrc-summary__row--empty {
	justify-content: center;
	text-align: center;
}

.vrc-summary__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px 0 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: #1d9650;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--vrc-stroke);
	cursor: pointer;
}

.vrc-summary__more[hidden] {
	display: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.vrc-summary__more > span:first-child {
		background: linear-gradient(140.92deg, #21ae5b 0%, #1d9650 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.vrc-summary__more-arrow {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: center / 11px 6px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 10.25 5.875' fill='none'%3E%3Cpath d='M9.5 0.75L5.125 5.125L0.75 0.75' stroke='%231D9650' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.15s ease;
}

.vrc-summary__more[aria-expanded="true"] .vrc-summary__more-arrow {
	transform: rotate(180deg);
}

.vrc-summary__foot {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vrc-notice {
	padding: 12px;
	font-size: 14px;
	line-height: 1.25;
	text-align: center;
	color: #7a5300;
	background: linear-gradient(180deg, #fff8ea 0%, #fff3d7 100%);
	border: 1px solid #f1e1b4;
	border-radius: var(--vrc-radius);
}

.vrc-summary__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vrc-summary__disclaimer {
	margin: 0;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	color: var(--vrc-secondary);
}

/* ── Модальное окно заявки ──────────────────────────────────────────── */

.vrc-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.vrc-modal[hidden] {
	display: none;
}

.vrc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(19, 44, 70, 0.55);
}

.vrc-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px;
	background: var(--vrc-white);
	border-radius: var(--vrc-radius-card);
	box-shadow: var(--vrc-card-shadow);
}

.vrc-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	font-size: 22px;
	line-height: 1;
	color: var(--vrc-secondary);
	background: var(--vrc-gray);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.vrc-modal__title {
	padding-right: 40px;
	font-family: var(--vrc-font-cond);
	font-weight: 700;
	font-stretch: 75%;
	font-size: 24px;
	line-height: 1.25;
	text-transform: uppercase;
}

.vrc-modal__text {
	font-size: 14px;
	line-height: 1.35;
	color: var(--vrc-secondary);
}

.vrc-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vrc-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.vrc-check .vrc-switch {
	margin-top: 2px;
}

.vrc-check b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.vrc-check i {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-style: normal;
	line-height: 1.35;
	color: var(--vrc-secondary);
}

.vrc-form__message {
	padding: 12px;
	font-size: 14px;
	border-radius: var(--vrc-radius);
	background: var(--vrc-gray);
}

.vrc-form__message[hidden] {
	display: none;
}

.vrc-form__message.is-error {
	color: #a11b2e;
	background: #fdecef;
}

.vrc-form__message.is-success {
	color: #1d9650;
	background: #e9f7ee;
}

/* ── Узкая колонка: расчёт уходит под форму ─────────────────────────── */

/*
 * Ниже этой ширины две колонки уже не вмещают два поля в ряд плюс расчёт
 * (нужно примерно 584 + 24 + 320), поэтому расчёт уходит под форму,
 * а поля пока остаются по два в ряд.
 */
@container vrc (max-width: 939.98px) {
	.vrc__layout {
		flex-direction: column;
		gap: 20px;
	}

	.vrc__main {
		width: 100%;
	}

	.vrc__aside {
		position: static;
		flex: 1 1 auto;
		/* min-width сбрасываем обязательно: иначе на 320px карточка расчёта
		   распирает страницу и появляется горизонтальная прокрутка. */
		min-width: 0;
		max-width: none;
		width: 100%;
	}
}

/* ── Мобильная раскладка: одна колонка и шаги ───────────────────────── */

@container vrc (max-width: 619.98px) {
	.vrc__layout,
	.vrc__main {
		gap: 16px;
	}

	.vrc__stepper {
		display: flex;
	}

	.vrc-card--nav {
		display: flex;
	}

	/* Виден только текущий шаг. */
	.vrc-card[data-vrc-card-stage]:not(.is-current) {
		display: none;
	}

	.vrc-row {
		flex-direction: column;
		gap: 16px;
	}

	.vrc-row:not([hidden]) ~ .vrc-row:not([hidden]) {
		padding-top: 16px;
	}

	.vrc-field--half,
	.vrc-field--full {
		flex: 1 1 auto;
		width: 100%;
	}

	.vrc-card__title {
		font-size: 20px;
	}

	.vrc-field__label,
	.vrc-switch-row__text {
		font-size: 14px;
	}

	.vrc-field__hint {
		font-size: 12px;
	}

	/* Размер шрифта у полей ввода оставляем 16px: Safari на iOS зумит
	   страницу при фокусе на поле с текстом мельче. Уменьшаем только
	   высоту и подписи. */
	.vrc-input,
	.vrc-select__button {
		height: 42px;
	}

	.vrc-select__option {
		font-size: 14px;
	}

	.vrc-pill {
		font-size: 12px;
	}

	.vrc-btn {
		padding: 16px 20px;
		font-size: 14px;
	}

	.vrc-summary__total-value {
		font-size: 32px;
	}

	.vrc-summary__row,
	.vrc-notice {
		font-size: 12px;
	}

	.vrc-summary__more {
		font-size: 14px;
	}

	.vrc-summary__disclaimer {
		font-size: 10px;
	}
}

/*
 * Запасной вариант для браузеров без контейнерных запросов: там раскладка
 * переключается по окну, как раньше. Современные браузеры сюда не заходят.
 */
@supports not (container-type: inline-size) {
	@media (max-width: 1023.98px) {
		.vrc__layout {
			flex-direction: column;
			gap: 16px;
		}

		.vrc__main {
			gap: 16px;
			width: 100%;
		}

		.vrc__aside {
			position: static;
			flex: 1 1 auto;
			max-width: none;
			width: 100%;
		}

		.vrc__stepper,
		.vrc-card--nav {
			display: flex;
		}

		.vrc-card[data-vrc-card-stage]:not(.is-current) {
			display: none;
		}

		.vrc-row {
			flex-direction: column;
			gap: 16px;
		}

		.vrc-field--half,
		.vrc-field--full {
			flex: 1 1 auto;
			width: 100%;
		}

		.vrc-card__title {
			font-size: 20px;
		}

		.vrc-field__label,
		.vrc-switch-row__text,
		.vrc-input,
		.vrc-select__button,
		.vrc-btn {
			font-size: 14px;
		}

		.vrc-summary__total-value {
			font-size: 32px;
		}
	}
}

/* На печать уходит только расчёт. */
@media print {
	.vrc__admin,
	.vrc__stepper,
	.vrc-card--nav,
	.vrc-summary__actions,
	.vrc-modal {
		display: none !important;
	}

	.vrc__layout {
		display: block;
	}

	.vrc-card,
	.vrc-summary {
		box-shadow: none;
		break-inside: avoid;
	}

	/* Браузеры не печатают фоны, поэтому белый текст на градиенте пропал бы
	   вместе с ним — а это как раз итоговая сумма. Печатаем её тёмным. */
	.vrc-summary__total {
		background: none;
		border: 1px solid var(--vrc-black);
	}

	.vrc-summary__total-label,
	.vrc-summary__total-value {
		color: var(--vrc-black);
	}

	/* Подпись раскрытия набрана прозрачным текстом с градиентной заливкой —
	   на бумаге её просто нет. Все строки и так печатаются развёрнутыми. */
	.vrc-summary__more {
		display: none !important;
	}

	.vrc .vrc-summary__row[hidden] {
		display: flex !important;
	}
}