/* ==========================================================================
   14. Схемы в теле статьи (.ds-sheet)
   --------------------------------------------------------------------------
   Раньше это были картинки: чертёжный «лист» 1200 px, отрисованный в PNG.
   В колонке 74ch он показывался с масштабом ~0,63, на телефоне ~0,3 — кегль
   12,5 px превращался в 4–8 px и не читался. Здесь тот же лист собран
   разметкой: текст остаётся текстом, слушается зума и системного шрифта,
   таблицы на узком экране разворачиваются в карточки.

   Акцент берётся из data-accent на самом блоке — правила для светлой и
   тёмной схемы уже заданы в разделе 1.
   ========================================================================== */

.ds-sheet {
	margin: 2em 0;
	padding: clamp(16px, 2.6vw, 26px) clamp(14px, 2.6vw, 26px);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	/* Миллиметровки тут намеренно нет: под сплошным текстом клетка лезет
	   между строк и мешает читать. Лист опознаётся фоном, рамкой и
	   акцентной полосой слева. */
	background-color: var(--surface);
	font-size: var(--step-0);
	line-height: 1.55;
}

/* Внутри листа свой вертикальный ритм: правило `.entry-content > * + *`
   до вложенных элементов не достаёт. */
.ds-sheet > * + * { margin-top: 1em; }

.ds-sheet__tag {
	display: block;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-ink);
}

.entry-content .ds-sheet__title {
	margin-top: 0.35em;
	font-family: var(--serif);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1.22;
	text-wrap: balance;
}

.ds-sheet__sub {
	color: var(--ink-2);
	max-width: 62ch;
}

.ds-sheet__stamp {
	margin-top: 1.3em;
	padding-top: 0.8em;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-3);
}

.ds-sheet__stamp b { color: var(--ink-2); font-weight: 400; }

/* ---- таблица ---- */

.ds-tw { overflow-x: auto; }

.ds-sheet .ds-tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step-0);
	line-height: 1.45;
}

.ds-sheet .ds-tbl th {
	padding: 0 0.9em 0.55em 0;
	border-bottom: 2px solid var(--rule-strong);
	font-family: var(--mono);
	font-size: var(--step--1);
	font-weight: 400;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
	vertical-align: bottom;
}

.ds-sheet .ds-tbl td {
	padding: 0.62em 0.9em 0.62em 0;
	border-bottom: 1px solid var(--rule);
	color: var(--ink-2);
	vertical-align: top;
}

.ds-sheet .ds-tbl tr td:first-child { color: var(--ink); font-weight: 700; }
.ds-sheet .ds-tbl tr:last-child td { border-bottom: 0; }
.ds-sheet .ds-tbl .ds-num { font-variant-numeric: tabular-nums; }

/* На узком экране таблица разворачивается в карточки: колонка становится
   строкой «подпись — значение». Подпись берётся из data-label. */
@media (max-width: 640px) {
	.ds-sheet .ds-tbl,
	.ds-sheet .ds-tbl tbody,
	.ds-sheet .ds-tbl tr,
	.ds-sheet .ds-tbl td { display: block; width: 100%; }

	.ds-sheet .ds-tbl thead { display: none; }

	.ds-sheet .ds-tbl tr {
		padding: 0.75em 0;
		border-bottom: 1px solid var(--rule);
	}

	.ds-sheet .ds-tbl tr:last-child { border-bottom: 0; }

	.ds-sheet .ds-tbl td {
		padding: 0.2em 0;
		border-bottom: 0;
	}

	.ds-sheet .ds-tbl td:first-child {
		font-size: var(--step-1);
		line-height: 1.3;
		margin-bottom: 0.15em;
	}

	.ds-sheet .ds-tbl td:first-child::before { content: none; }

	.ds-sheet .ds-tbl td::before {
		content: attr(data-label) ': ';
		font-family: var(--mono);
		font-size: var(--step--1);
		letter-spacing: 0.06em;
		color: var(--ink-3);
	}
}

/* ---- карточки ---- */

.ds-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}

.ds-card {
	padding: 0.9em 1em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
}

.ds-card__n {
	display: block;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.3em;
}

.entry-content .ds-card h4 {
	margin-top: 0;
	font-family: var(--sans);
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.25;
	color: var(--ink);
}

.ds-card p,
.ds-card ul { margin-top: 0.45em; color: var(--ink-2); }

.entry-content .ds-card ul { padding-left: 1.2em; }

/* ---- шаги ---- */

.entry-content .ds-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
	padding-left: 0;
	list-style: none;
	counter-reset: ds-step;
}

.entry-content .ds-steps > li {
	margin-top: 0;
	padding: 0.9em 1em;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--paper);
	counter-increment: ds-step;
}

.entry-content .ds-steps > li + li { margin-top: 0; }

.entry-content .ds-steps > li::before {
	content: 'Шаг ' counter(ds-step);
	display: block;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.3em;
}

.entry-content .ds-steps h4 {
	margin-top: 0;
	font-family: var(--sans);
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.25;
	color: var(--ink);
}

.ds-steps p { margin-top: 0.4em; color: var(--ink-2); }

/* ---- полосы сравнения ---- */

.ds-bars { display: flex; flex-direction: column; gap: 0.7em; }

.ds-bar {
	display: grid;
	grid-template-columns: minmax(9em, 15em) 1fr minmax(6em, 12em);
	align-items: center;
	gap: 0.8em;
}

.ds-bar__name { font-weight: 700; }

.ds-bar__track {
	display: block;
	height: 1.5em;
	border: 1px solid var(--rule);
	background: var(--paper);
}

.ds-bar__fill {
	display: block;
	height: 100%;
	background: var(--accent-wash);
	border-right: 2px solid var(--accent);
}

.ds-bar__val {
	font-family: var(--mono);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
}

@media (max-width: 640px) {
	.ds-bar {
		grid-template-columns: 1fr auto;
		gap: 0.2em 0.8em;
	}

	.ds-bar__track { grid-column: 1 / -1; }
}

/* ---- так надо / так нельзя ---- */

.ds-dd {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}

.ds-dd__col {
	padding: 0.9em 1em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
}

.ds-dd__col--good { border-left: 3px solid #3f6b3a; }
.ds-dd__col--bad { border-left: 3px solid #a8431c; }

.ds-dd__h {
	display: block;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.4em;
}

.ds-dd__col--good .ds-dd__h { color: #3f6b3a; }
.ds-dd__col--bad .ds-dd__h { color: #a8431c; }

:root[data-theme='dark'] .ds-dd__col--good { border-left-color: #7aa872; }
:root[data-theme='dark'] .ds-dd__col--bad { border-left-color: #e0703f; }
:root[data-theme='dark'] .ds-dd__col--good .ds-dd__h { color: #8fbb63; }
:root[data-theme='dark'] .ds-dd__col--bad .ds-dd__h { color: #e0703f; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .ds-dd__col--good { border-left-color: #7aa872; }
	:root:not([data-theme='light']) .ds-dd__col--bad { border-left-color: #e0703f; }
	:root:not([data-theme='light']) .ds-dd__col--good .ds-dd__h { color: #8fbb63; }
	:root:not([data-theme='light']) .ds-dd__col--bad .ds-dd__h { color: #e0703f; }
}

.entry-content .ds-dd__col ul { padding-left: 1.2em; }
.ds-dd__col li { color: var(--ink-2); }

/* ---- плитки с цифрами ---- */

.ds-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	border: 1px solid var(--rule);
	background: var(--rule);
}

.ds-kpi {
	padding: 0.85em 1em;
	background: var(--paper);
}

.ds-kpi__k {
	display: block;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.ds-kpi__v {
	display: block;
	margin: 0.12em 0 0.2em;
	font-family: var(--serif);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1.1;
	color: var(--accent-ink);
	font-variant-numeric: tabular-nums;
}

.ds-kpi__d { display: block; color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; }

/* ---- врезка ---- */

.ds-note {
	padding: 0.8em 1em;
	border-left: 3px solid var(--rule-strong);
	background: var(--accent-wash);
	color: var(--ink-2);
}

.ds-note b { color: var(--ink); font-weight: 700; }

@media print {
	.ds-sheet { break-inside: avoid; }
	.ds-cards,
	.ds-steps,
	.ds-dd { grid-template-columns: 1fr 1fr; }
}

/* Подпись, доставшаяся от figcaption заменённой картинки. */
.ds-sheet__cap {
	margin-top: 1.1em;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-3);
}

/* Таблица на пять и больше колонок в колонку статьи не помещается — часть
   уезжает за край, а горизонтальную прокрутку внутри текста никто не ищет.
   Такие показываем карточками на любой ширине. */
.ds-sheet .ds-tbl--wide,
.ds-sheet .ds-tbl--wide tbody,
.ds-sheet .ds-tbl--wide tr,
.ds-sheet .ds-tbl--wide td { display: block; width: 100%; }

.ds-sheet .ds-tbl--wide thead { display: none; }

.ds-sheet .ds-tbl--wide tr {
	padding: 0.8em 0;
	border-bottom: 1px solid var(--rule);
}

.ds-sheet .ds-tbl--wide tr:last-child { border-bottom: 0; }

.ds-sheet .ds-tbl--wide td {
	padding: 0.18em 0;
	border-bottom: 0;
}

.ds-sheet .ds-tbl--wide td:first-child {
	font-size: var(--step-1);
	line-height: 1.3;
	margin-bottom: 0.2em;
}

.ds-sheet .ds-tbl--wide td:first-child::before { content: none; }

.ds-sheet .ds-tbl--wide td::before {
	content: attr(data-label) ": ";
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

/* Широкая таблица в две колонки карточек, когда места хватает. */
@media (min-width: 900px) {
	.ds-sheet .ds-tbl--wide tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.4em;
	}

	.ds-sheet .ds-tbl--wide td:first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Узкий экран: лист выходит на всю ширину колонки.
   Боковые поля складывались втрое — отступ .wrap, поле листа и поле карточки
   внутри, — и от 360 px под текст оставалось меньше 290. Строки в карточках
   рвались по два слова. Здесь лист компенсирует отступ обёртки и ужимает
   собственные поля, а вложенные блоки идут в одну колонку.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.ds-sheet {
		margin-inline: calc(-1 * var(--pad));
		padding-inline: 12px;
		border-radius: 0;
		border-right: 0;
	}

	.ds-card,
	.ds-dd__col,
	.entry-content .ds-steps > li { padding: 0.75em 0.8em; }

	.ds-kpi,
	.ds-note { padding: 0.7em 0.8em; }

	.ds-cards,
	.ds-dd,
	.entry-content .ds-steps { grid-template-columns: 1fr; }

	.ds-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}