/*
 * Infrastructure designed for the workload — Figma 748:43368, 748:46932–748:47009, y 9441–10234 (паттерн
 * baserd/workload): разделитель (divider.css) и заголовок секции (section-heading.css), график продуктов
 * по скорости и контролю. Ряд цифр и выручка, которые до макета 30.09 шли здесь следом, — секция
 * Our result in numbers (numbers.css), она стоит после сетки продуктов.
 * Координаты ниже — от узлов макета. Уже 1440 графики остаются по центру; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора, ядра и отступы потока.
 */

/* Последний блок секции — график: его отступ снизу остаётся внутри секции, и линии сетки доходят до сетки продуктов. */
.baserd-workload.has-grid-lines {
	display: flow-root;
}

/*
 * Разделитель 748:43369 с y 9441 заходит на 12 в нижнее поле 72 индустрий (748:43541, до 9453; ряд в рамке
 * кончается на 9381): звёзды на 9452–9488. Слой секции ниже по странице рисуется поверх.
 */
.baserd-industries + .baserd-workload {
	margin-top: -12px;
}

/*
 * График 748:46932: поле 408 × 408 по центру секции, сразу под заголовком. Слева подписи шкалы (748:46988) и
 * название оси (748:47008), снизу подписи (748:46998) и название оси (748:47007), справа легенда (748:47009).
 * До сетки продуктов ниже — 72 от названия нижней оси.
 */
.baserd-workload .baserd-workload__chart {
	position: relative;
	width: 408px;
	height: 472px;
	margin: 0 auto var(--wp--preset--spacing--72);
	color: var(--wp--preset--color--muted);
}

.baserd-workload .baserd-workload__chart p {
	margin: 0;
}

/*
 * Сетка поля: рамка 1px белый 10% внутрь и линии через 24 по обеим осям. Верхняя линия в макете лежит поверх
 * рамки (748:46933), левой и правой линии нет (748:46969, 748:46952 без обводки) — здесь так же.
 */
.baserd-workload .baserd-workload__field {
	position: relative;
	box-sizing: border-box;
	width: 408px;
	height: 408px;
	padding-left: 24px;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast-10);
	background:
		linear-gradient(var(--wp--preset--color--contrast-10) 0 1px, transparent 1px) 0 0 / 100% 24px repeat-y padding-box,
		linear-gradient(90deg, var(--wp--preset--color--contrast-10) 0 1px, transparent 1px) 0 0 / 24px 100% repeat-x content-box;
}

/* Поле отступом слева 24 убирает левую вертикальную линию; точки считаются от угла поля. */
.baserd-workload .baserd-workload__points {
	position: absolute;
	inset: 0;
}

/*
 * Точка 748:46970–748:46987: подпись 14/20 чёрным на заливке цвета продукта, поля 0 и 4; под ней линия 1 × 10
 * того же цвета и ключ — ромб 9.6 в обводке 2 px цвета продукта, смешанного с фоном 30 на 70. Центр ключа
 * (--x, --y) — от левого верхнего угла поля, в узлах сетки. Подпись и линия — две заливки фона абзаца,
 * ключ — ::before (::after блока в редакторе занят рамкой выделения).
 */
.baserd-workload .baserd-workload__point {
	--point: var(--wp--preset--color--contrast);
	position: absolute;
	top: calc(var(--y) - 36px);
	left: var(--x);
	padding: 0 var(--wp--preset--spacing--4) 10px;
	transform: translateX(-50%);
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	white-space: nowrap;
	color: var(--wp--custom--chart--ink);
	background:
		linear-gradient(var(--point), var(--point)) 0 0 / 100% 20px no-repeat,
		linear-gradient(var(--point), var(--point)) 50% 100% / 1px 10px no-repeat;
}

.baserd-workload .baserd-workload__point::before {
	content: "";
	position: absolute;
	top: calc(100% + 6px - 3.389px);
	left: calc(50% - 3.389px);
	width: 6.778px;
	height: 6.778px;
	transform: rotate(45deg);
	background-color: var(--point);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--point) 30%, var(--wp--preset--color--base));
}

.baserd-workload .baserd-workload__point.is-cloud {
	--point: var(--wp--preset--color--accent);
	--x: 264px;
	--y: 168px;
}

.baserd-workload .baserd-workload__point.is-vibe {
	--point: var(--wp--preset--color--primary);
	--x: 216px;
	--y: 72px;
}

.baserd-workload .baserd-workload__point.is-dedicated {
	--x: 360px;
	--y: 96px;
}

/* Шкалы Space Mono 12/16 muted: слева столбец 33 по правому краю через 48 от 16, снизу ряд через 32 от 40. */
.baserd-workload :is(.baserd-workload__y, .baserd-workload__x) {
	position: absolute;
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--size-12);
	line-height: var(--wp--custom--line-height--size-12);
	color: var(--wp--preset--color--muted);
}

.baserd-workload .baserd-workload__y {
	top: 16px;
	left: -45px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
	width: 33px;
	text-align: right;
}

.baserd-workload .baserd-workload__x {
	top: 420px;
	left: 40px;
	gap: var(--wp--preset--spacing--32);
}

/* Названия осей 14/20 белым: нижнее под подписями, левое повёрнуто, читается снизу вверх и стоит по центру поля. */
.baserd-workload :is(.baserd-workload__axis-x, .baserd-workload__axis-y) {
	position: absolute;
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

.baserd-workload .baserd-workload__axis-x {
	top: 452px;
	left: 144px;
}

.baserd-workload .baserd-workload__axis-y {
	top: 204px;
	left: -81px;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
}

/* Легенда 748:47009: через 48 справа от поля, по центру его высоты; строки через 12, ромб 12 и через 12 название. */
.baserd-workload .baserd-workload__legend {
	position: absolute;
	top: 204px;
	left: calc(100% + 48px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	list-style: none;
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

.baserd-workload .baserd-workload__legend li {
	--point: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	margin: 0;
}

.baserd-workload .baserd-workload__legend li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--point);
	-webkit-mask: url("../icons/diamond.svg") center / 12px 12px no-repeat;
	mask: url("../icons/diamond.svg") center / 12px 12px no-repeat;
}

.baserd-workload .baserd-workload__legend .is-cloud {
	--point: var(--wp--preset--color--accent);
}

.baserd-workload .baserd-workload__legend .is-vibe {
	--point: var(--wp--preset--color--primary);
}

/*
 * Режим высокой контрастности: заливки точек и ромбы легенды браузер закрасил бы цветом фона — они системного
 * цвета текста. Сетка — украшение, её браузер вправе убрать.
 */
@media (forced-colors: active) {
	.baserd-workload .baserd-workload__point:is(.is-cloud, .is-vibe, .is-dedicated) {
		--point: CanvasText;
		forced-color-adjust: none;
		color: Canvas;
	}

	.baserd-workload .baserd-workload__legend li::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/*
 * Телефон и планшет — front#808 и front#938, сверены с кадрами 846:29132 и 875:37832 (ниже, front#1047).
 * График нарисован в пикселях макета
 * (408 × 472), поэтому на узком экране уменьшается целиком (zoom), а не перестраивается. Легенда
 * уже 1024 встаёт под графиком: справа от него ей нет места.
 *
 * Текст графика zoom не уменьшает: размер шрифта и межстрочный делятся на тот же коэффициент
 * (--baserd-workload-zoom), и на экране подписи 14/20, как на 1440 (эпик backend#1586: текст не мельче 14).
 * Числа шкал уже 1440 тоже 14, а не 12, как в макете (iPad Pro в альбоме — 1366, front#949); каждое стоит
 * по центру своей клетки 48 по оси, и от ширины цифр место числа не зависит. Название оси Y — через 16 левее
 * самого широкого числа («100», 3 знака Space Mono 14 — 26 на экране).
 */
@media (max-width: 1439px) {
	.baserd-workload .baserd-workload__chart {
		--baserd-workload-zoom: 1;
		height: calc(436px + 40px / var(--baserd-workload-zoom));
	}

	.baserd-workload .baserd-workload__chart :is(.baserd-workload__y, .baserd-workload__x, .baserd-workload__axis-x, .baserd-workload__axis-y, .baserd-workload__legend) {
		font-size: calc(var(--wp--preset--font-size--size-14) / var(--baserd-workload-zoom));
		line-height: calc(var(--wp--custom--line-height--size-14) / var(--baserd-workload-zoom));
	}

	.baserd-workload .baserd-workload__y {
		top: 0;
		right: calc(100% + 12px);
		left: auto;
		gap: 0;
		width: auto;
	}

	.baserd-workload .baserd-workload__y > * {
		line-height: 48px;
	}

	.baserd-workload .baserd-workload__x {
		left: 24px;
		gap: 0;
	}

	.baserd-workload .baserd-workload__x > * {
		width: 48px;
		text-align: center;
	}

	.baserd-workload .baserd-workload__axis-x {
		top: calc(436px + 20px / var(--baserd-workload-zoom));
		left: 204px;
		transform: translateX(-50%);
	}

	.baserd-workload .baserd-workload__axis-y {
		right: calc(100% + 28px + 26px / var(--baserd-workload-zoom));
		left: auto;
	}
}

/*
 * Кадр 846:29132 (768) ставит по центру само поле 408 (x 180), а не поле вместе с подписями оси Y слева,
 * поэтому сдвига у поля нет, и легенда под ним тоже по центру страницы.
 */
@media (max-width: 1023px) {
	/*
	 * Кадры 846:28072 и 851:34242: разделитель заходит на ряд индустрий так, что его линия ложится на нижнюю рамку
	 * ряда (у индустрий нижнего поля нет): 24 до линии и 1 — сама рамка, она за краем панели.
	 */
	.baserd-industries + .baserd-workload {
		margin-top: -25px;
	}

	/*
	 * Кадр 846:29132 (768): заголовок кончается линией во всю ширину окна (188 вместе с ней), поле графика — через 48
	 * под ней, легенда — через 20 под графиком. Через 48 под легендой — линия разделителя bento: его разделитель
	 * заходит сюда на 24, поэтому своё поле под легендой — 24. Линия выведена за колонку картинкой рамки
	 * с outset, как у ряда индустрий: в прокрутку она не входит.
	 */
	.baserd-workload .baserd-section-heading {
		padding-bottom: calc(var(--wp--preset--spacing--48) - 1px);
		border-bottom: 1px solid var(--wp--preset--color--line);
		border-image: linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) 1 / 0 0 1px / 0 100vw;
	}

	.baserd-workload .baserd-workload__chart {
		margin-top: var(--wp--preset--spacing--48);
		margin-bottom: calc(20px + var(--wp--custom--line-height--size-14) + var(--wp--preset--spacing--24));
	}

	.baserd-workload .baserd-workload__legend {
		top: calc(100% + 20px);
		left: 50%;
		flex-direction: row;
		gap: var(--wp--preset--spacing--24);
		transform: translateX(-50%);
	}
}

/*
 * Телефон. Подписи точек 14 на уменьшенном поле не помещаются над точками: Vibe Hosting AI и Dedicated Servers
 * стоят через 24 по высоте и налезли бы друг на друга. Поэтому над точкой остаётся только Vibe, подписи Cloud
 * и Dedicated — под своими точками, а Dedicated ещё и прижата к правому краю поля (её точка в 48 от края):
 * за поле вправо не выходит ничего, и график сдвинут вправо на половину того, что висит слева.
 * Легенда — столбиком, ромбы и отступы в ней тоже без уменьшения.
 * Ширина графика на экране — 436 × zoom + 46 (числа и название оси Y): 0.85 помещается в поля 16 с 449,
 * 0.7 — с 384, 0.6 — с 340, 0.55 — с 318.
 */
@media (max-width: 767px) {
	/* Кадр 875:37832 (375): линии под заголовком нет, поле 24 под ним, и график начинается сразу. */
	.baserd-workload .baserd-section-heading {
		padding-bottom: var(--wp--preset--spacing--24);
		border-bottom: 0;
		/* border-image с шириной 1px рисуется и при нулевой рамке. */
		border-image: none;
	}

	.baserd-workload .baserd-workload__chart {
		--baserd-workload-zoom: 0.85;
		margin-top: 0;
		left: calc(14px + 23px / var(--baserd-workload-zoom));
		margin-bottom: calc((var(--wp--preset--spacing--48) + 84px) / var(--baserd-workload-zoom) + var(--wp--preset--spacing--24));
		zoom: var(--baserd-workload-zoom);
	}

	.baserd-workload .baserd-workload__point {
		top: calc(var(--y) - 16px - var(--wp--custom--line-height--size-14) / var(--baserd-workload-zoom));
		padding: 0 calc(var(--wp--preset--spacing--4) / var(--baserd-workload-zoom)) 10px;
		background-size: 100% calc(var(--wp--custom--line-height--size-14) / var(--baserd-workload-zoom)), 1px 10px;
		font-size: calc(var(--wp--preset--font-size--size-14) / var(--baserd-workload-zoom));
		line-height: calc(var(--wp--custom--line-height--size-14) / var(--baserd-workload-zoom));
	}

	.baserd-workload .baserd-workload__point:is(.is-cloud, .is-dedicated) {
		top: calc(var(--y) + 6px);
		padding-top: 10px;
		padding-bottom: 0;
		background-position: 0 100%, 50% 0;
	}

	.baserd-workload .baserd-workload__point:is(.is-cloud, .is-dedicated)::before {
		top: calc(-6px - 3.389px);
	}

	.baserd-workload .baserd-workload__point.is-dedicated {
		right: 0;
		left: auto;
		transform: none;
		background-position: 0 100%, right 47.5px top 0;
	}

	.baserd-workload .baserd-workload__point.is-dedicated::before {
		right: calc(48px - 3.389px);
		left: auto;
	}

	.baserd-workload .baserd-workload__legend {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--wp--preset--spacing--12) / var(--baserd-workload-zoom));
	}

	.baserd-workload .baserd-workload__legend li {
		gap: calc(var(--wp--preset--spacing--12) / var(--baserd-workload-zoom));
	}

	.baserd-workload .baserd-workload__legend li::before {
		width: calc(16px / var(--baserd-workload-zoom));
		height: calc(16px / var(--baserd-workload-zoom));
		-webkit-mask-size: calc(12px / var(--baserd-workload-zoom));
		mask-size: calc(12px / var(--baserd-workload-zoom));
	}
}

@media (max-width: 479px) {
	.baserd-workload .baserd-workload__chart {
		--baserd-workload-zoom: 0.7;
	}
}

@media (max-width: 383px) {
	.baserd-workload .baserd-workload__chart {
		--baserd-workload-zoom: 0.6;
	}
}

@media (max-width: 339px) {
	.baserd-workload .baserd-workload__chart {
		--baserd-workload-zoom: 0.55;
	}
}