@import 'colors.css';
@import 'typography.css';
@import 'dimensions.css';
@import 'motion.css';
@import 'reset.css';
@import 'icons.css';
@import 'reconnect-overlay.css';
@import 'markdown.css';
@import 'card-symbols.css';

html.scroll-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
	/* Backstop for iOS rubber-band: the page must not overscroll while a dialog is open. */
	overscroll-behavior: none;
}

/* .control-actions — единый ряд кнопок-действий для диалогов И форм, чисто на flex, без условий.
   Минимальная ширина кнопки — всегда 50% (базис calc(50% - половина зазора), flex-shrink:0):
   две кнопки помещаются ровно в одну строку и тянутся поровну на всю ширину; когда подписи не
   влезают в строку, кнопки переносятся (flex-wrap) и каждая растягивается на всю свою строку.
   white-space:nowrap — текст на кнопках не переносится. Один класс на все диалоги и формы. */
.control-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-small);
}

.control-actions > * {
	flex: 1 0 calc(50% - var(--spacing-small) / 2);
	white-space: nowrap;
}

/* .reorder-content — левый блок строки <Reorder>: контент (иконка, имя, код) пакуется
   слева и растягивается (flex:1), отжимая кнопки действий к правому краю строки.
   Глобальный примитив (как .control-actions), чтобы scope не отрезал правило от обёртки. */
.reorder-content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

/* Имя/код в строке Reorder — максимум 2 строки, далее эллипсис (line-clamp). min-width:0
   нужен, чтобы flex-айтем мог ужиматься ниже content-минимума. */
.reorder-content > .label {
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* На мобилке убираем код/мету (второй .label) — он не критичен в списке и доступен в
   редактировании; имя остаётся во всю ширину строки. */
@media (max-width: 600px) {
	.reorder-content > .label + .label {
		display: none;
	}
}

/* Контент строки <Reorder> для атрибутов: две строки одна под другой — название + мета
   (Ключ · Тип · N опций) сверху, флаги (Обязательный/Фильтр/Вариант-ключ) снизу. flex:1
   отжимает кнопки действий вправо. Глобально (не scoped) — как .reorder-content выше. */
.attr-reorder-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
}

.attr-reorder-line {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-small);
	min-width: 0;
}

/* Form layout utilities — mirror Tournament's .block / .fields / .actions
   pattern so consumers don't reinvent it per page. Pair with <Page Width="Narrow">
   for a centered form column. Кнопки действий формы — общий класс .control-actions. */
.form-block {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	align-items: stretch;
	width: 100%;
}

.form-block.narrow {
	max-width: 400px;
	margin-inline: auto;
}

.form-fields {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

/* Shared layout and width for wide create/edit dialog forms. Global so every dialog
   that opts in shares one width and spacing without duplicating scoped CSS. */
.dialog-extended {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
	width: min(600px, calc(100vw - 72px));
}

/* Тело тултипа кнопки info на карточке оффера — таблица «имя | значение» (имя обычным, значение
   жирнее). Глобально (не scoped): popup.js портирует тело тултипа в body-портал, куда scoped-CSS
   компонента не достаёт — тот же приём, что у .reorder-content выше. */
.seller-offer-details-table {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--spacing-small);
	row-gap: var(--spacing-tiny);
}