/* Главная и формы обратной связи: второй заход редизайна (29.08.2026).
 *
 * Классы с приставкой r2- намеренно свои: тема и redesign.css правят
 * общие имена (.btn, .content, .cat2__*), и пересечение имён здесь
 * стоило бы дороже пары лишних байт.
 *
 * Цвета взяты из уже работающего редизайна каталога (--c-accent 406ae2),
 * чтобы главная и разделы были одного тона.
 */

/* переменные на :root, а не на .r2: формы стоят и внутри рельса раздела,
 * куда обёртка .r2 не заходит */
:root {
	--r2-accent: #406ae2;
	--r2-accent-dark: #284fb9;
	--r2-deep: #0d2a63;
	--r2-deep2: #123a86;
	--r2-ink: #282828;
	--r2-muted: #6f7b88;
	--r2-line: #e2e6ec;
	--r2-soft: #f4f6fa;
	--r2-soft2: #eef2fd;
	--r2-green: #17924f;
}

.r2 * { box-sizing: border-box; }
.r2 img { max-width: 100%; }

/* Ширина одна на весь сайт: 1440 и отступы по 24, как у рядов шапки.
 * До 29.08 их было три — 1440 у шапки, 1380 у витрины и 1241 у контента
 * страниц, и это било в глаза на первом же экране. */
.r2-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

.r2-h2 {
	font-size: 27px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0 0 6px;
	color: var(--r2-ink);
}

.r2-sub {
	margin: 0 0 22px;
	color: var(--r2-muted);
	font-size: 15px;
}

/* только сверху и снизу: короткая запись padding сбрасывала боковые
 * отступы .r2-wrap, и блоки ниже первого экрана были на 60px шире */
.r2-section { padding-top: 34px; padding-bottom: 34px; }

.r2-btn {
	display: inline-block;
	border: 0;
	border-radius: 4px;
	padding: 13px 20px;
	background: var(--r2-accent);
	color: #fff;
	font: 700 14.5px/1.2 inherit;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}

.r2-btn:hover { background: var(--r2-accent-dark); color: #fff; }
.r2-btn:disabled { opacity: .55; cursor: default; }
.r2-btn--ghost { background: var(--r2-soft2); color: var(--r2-accent-dark); }
.r2-btn--ghost:hover { background: #dfe7fb; color: var(--r2-accent-dark); }
.r2-btn--white { background: #fff; color: var(--r2-accent-dark); }
.r2-btn--white:hover { background: #eef2fd; color: var(--r2-accent-dark); }

/* ---------- первый экран со слайдером ---------- */

.r2-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(118deg, #061a4a 0%, #0b3fa8 58%, #1257e0 100%);
	color: #fff;
}

.r2-hero::before {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -140px;
	width: 420px;
	height: 420px;
	border: 46px solid rgba(255, 255, 255, .05);
	border-radius: 50%;
}

.r2-hero .r2-wrap { position: relative; padding-top: 28px; padding-bottom: 22px; }

.r2-slides { display: grid; }

.r2-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: 30px;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}

.r2-slide.is-on { opacity: 1; visibility: visible; }
/* Графика задаёт высоту первого экрана: с 460px подбор уходил ниже
 * сгиба на ноутбучных 768px. */
.r2-slide .r2-art { max-width: 470px; margin-left: auto; }

.r2-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8fb6ff;
	margin-bottom: 14px;
}

.r2-hero h1,
.r2-hero .r2-slide-title {
	font-size: 40px;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.025em;
	color: #fff;
	margin: 0 0 14px;
}

.r2-lead {
	color: #d3e2ff;
	font-size: 16.5px;
	margin: 0 0 18px;
	max-width: 52ch;
}

.r2-hchips { display: flex; flex-wrap: wrap; gap: 8px; }

.r2-hchip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	border-radius: 4px;
	padding: 9px 13px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.r2-hchip i { font-style: normal; font-size: 12px; color: #9dbcff; font-family: monospace; }
.r2-hchip:hover { background: #fff; color: var(--r2-accent-dark); border-color: #fff; }
.r2-hchip:hover i { color: var(--r2-accent); }

.r2-art { width: 100%; height: auto; display: block; }
.r2-art .disk { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; }
.r2-art .hole { fill: rgba(4, 20, 58, .55); stroke: #cfe0ff; stroke-width: 1.6; }
/* Элементы чертежа — ссылки: станция, форма отверстия, хвостовик ведут
 * в свою подборку. Поэтому и курсор, и подсветка всей группы. */
.r2-art a { cursor: pointer; }
.r2-art a:hover .hole,
.r2-art a:hover .shape,
.r2-art a:hover .metal { fill: #fff; }
.r2-art a:hover .sheet { fill: rgba(255, 255, 255, .55); }
.r2-art a:hover .lb,
.r2-art a:hover .cnt { fill: #fff; }
.r2-art a:hover .dim line, .r2-art a:hover .dim { stroke: #fff; }
.r2-art a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.r2-art .lb { fill: #cfe0ff; font-size: 18px; font-weight: 700; text-anchor: middle; }
.r2-art .cnt { fill: #9dbcff; font-size: 13.5px; font-weight: 600; text-anchor: middle; font-family: monospace; }
.r2-art .ax { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.r2-art .note { fill: #9dbcff; font-size: 13px; font-family: monospace; }
.r2-art .metal { fill: rgba(255, 255, 255, .14); stroke: #cfe0ff; stroke-width: 1.4; }
.r2-art .sheet { fill: rgba(159, 196, 255, .30); stroke: #cfe0ff; stroke-width: 1.2; }
.r2-art .shape { fill: rgba(4, 20, 58, .55); stroke: #cfe0ff; stroke-width: 1.5; }
.r2-art .dim { stroke: #7fa8f5; stroke-width: .8; fill: none; }

.r2-nav { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.r2-dots { display: flex; gap: 8px; }

.r2-dot {
	width: 30px;
	height: 4px;
	border: 0;
	border-radius: 2px;
	padding: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, .28);
}

.r2-dot[aria-current="true"] { background: #fff; }

.r2-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.r2-arrow:hover { background: #fff; color: var(--r2-accent-dark); }
.r2-slidename { margin-left: auto; font: 600 13px/1 monospace; color: #9dbcff; }

/* ---------- подбор по станку внутри первого экрана ---------- */

.r2-pickbox {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 6px;
	background: rgba(4, 20, 58, .45);
}

.r2-picklbl {
	margin-bottom: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9dbcff;
}

.r2-picker {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 10px;
	align-items: end;
}

.r2-pickfield { display: grid; gap: 5px; margin: 0; }
.r2-pickfield span { font-size: 12px; color: #a9c6ff; }

.r2-pickfield select {
	width: 100%;
	padding: 11px 12px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font: 14.5px/1.2 inherit;
}

.r2-pickfield select option { color: #171b22; }
.r2-pickfield select:disabled { opacity: .55; }

.r2-pickgo { height: 42px; align-self: end; white-space: nowrap; }

.r2-pickhint { margin: 12px 0 0; font-size: 13.5px; color: #a9c6ff; }

.r2-pickhint a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	text-decoration: none;
}

/* ---------- плитки под первым экраном ---------- */

.r2-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 22px;
}

.r2-tile {
	border-radius: 6px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--r2-line);
	box-shadow: 0 1px 2px rgba(23, 27, 34, .05), 0 6px 20px rgba(23, 27, 34, .06);
}

.r2-tile b { display: block; font-size: 17.5px; line-height: 1.25; margin-bottom: 6px; }
.r2-tile span { display: block; color: var(--r2-muted); font-size: 14px; }
.r2-tile a { display: inline-block; margin-top: 8px; color: var(--r2-accent); font-weight: 600; font-size: 14px; }
.r2-tile--accent { background: var(--r2-soft2); border-color: #dbe4fb; }

/* ---------- блоки разделов ---------- */

.r2-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.r2-sec {
	background: #fff;
	border: 1px solid var(--r2-line);
	border-radius: 6px;
	padding: 22px 24px;
	display: grid;
	grid-template-columns: 1fr 152px;
	gap: 18px;
	box-shadow: 0 1px 2px rgba(23, 27, 34, .05), 0 6px 20px rgba(23, 27, 34, .06);
}

.r2-sec h3 { font-size: 19px; line-height: 1.2; font-weight: 800; text-transform: uppercase; margin: 0 0 12px; }
.r2-sec ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.r2-sec li { padding: 3px 0 3px 12px; border-left: 2px solid #dde8fb; }
.r2-sec li a { color: var(--r2-ink); text-decoration: none; }
.r2-sec li a:hover { color: var(--r2-accent); }
.r2-sec .r2-more { display: inline-block; margin-top: 12px; color: var(--r2-accent); font-weight: 600; font-size: 14px; }
.r2-sec .r2-pic { display: grid; align-content: center; gap: 8px; }
.r2-sec img { width: 152px; height: 152px; object-fit: contain; background: #fff; border-radius: 4px; }
.r2-sec .r2-cnt { font: 600 12.5px/1 monospace; color: var(--r2-muted); text-align: center; }

/* ---------- карточки позиций ---------- */

.r2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; }

.r2-card {
	background: #fff;
	border: 1px solid var(--r2-line);
	border-radius: 6px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 1px 2px rgba(23, 27, 34, .05), 0 6px 20px rgba(23, 27, 34, .06);
}

.r2-card .r2-ph { height: 156px; background: #fff; border-radius: 4px; display: grid; place-items: center; }
.r2-card .r2-ph img { max-width: 88%; max-height: 140px; object-fit: contain; }
.r2-card h4 { font-size: 14.5px; line-height: 1.4; font-weight: 600; margin: 0; }
.r2-card h4 a { color: var(--r2-ink); text-decoration: none; }
.r2-card h4 a:hover { color: var(--r2-accent); }
.r2-card .r2-spec { display: flex; flex-wrap: wrap; gap: 5px; }
.r2-card .r2-spec span { font: 600 11px/1 monospace; background: var(--r2-soft); border: 1px solid var(--r2-line); border-radius: 3px; padding: 5px 7px; color: var(--r2-muted); }
.r2-card .r2-bottom { margin-top: auto; display: grid; gap: 8px; }
.r2-card .r2-art-id { font: 12px/1 monospace; color: var(--r2-muted); }

/* ---------- марки станков ---------- */

.r2-brands { display: flex; flex-wrap: wrap; gap: 10px; }

.r2-brand {
	background: #fff;
	border: 1px solid var(--r2-line);
	border-radius: 4px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 700;
	color: #414b57;
	text-decoration: none;
}

.r2-brand span { display: block; font: 500 12px/1 monospace; color: var(--r2-muted); margin-top: 4px; }
.r2-brand:hover { border-color: var(--r2-accent); color: var(--r2-accent-dark); }

/* ---------- цифры ---------- */

.r2-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.r2-num { background: var(--r2-soft2); border: 1px solid #dbe4fb; border-radius: 6px; padding: 24px; }
.r2-num b { display: block; font-size: 38px; line-height: 1; font-weight: 800; color: var(--r2-accent-dark); letter-spacing: -.03em; }
.r2-num span { display: block; margin-top: 10px; color: #414b57; font-size: 14.5px; }

/* ---------- справочник ---------- */

.r2-kb { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }

.r2-kb a {
	background: #fff;
	border: 1px solid var(--r2-line);
	border-radius: 6px;
	padding: 20px;
	display: block;
	text-decoration: none;
	color: var(--r2-ink);
	box-shadow: 0 1px 2px rgba(23, 27, 34, .05), 0 6px 20px rgba(23, 27, 34, .06);
}

.r2-kb a:hover { border-color: var(--r2-accent); }
.r2-kb b { display: block; font-size: 16.5px; line-height: 1.3; margin-bottom: 8px; }
.r2-kb span { display: block; color: var(--r2-muted); font-size: 14px; }
.r2-kb .r2-go { display: block; margin-top: 12px; color: var(--r2-accent); font-weight: 600; font-size: 14px; }

/* ---------- таблица совместимости ---------- */

.r2-tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--r2-line); border-radius: 6px; }
.r2-tbl { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 14.5px; }
.r2-tbl th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--r2-muted); padding: 14px 18px; border-bottom: 1px solid var(--r2-line); background: var(--r2-soft2); }
.r2-tbl td { padding: 13px 18px; border-bottom: 1px solid var(--r2-line); }
.r2-tbl tr:last-child td { border-bottom: 0; }
.r2-tbl .sys { font: 600 13.5px/1 monospace; color: #414b57; }
.r2-tbl a { color: var(--r2-accent); font-weight: 600; white-space: nowrap; text-decoration: none; }

/* ---------- частые вопросы ---------- */

.r2-faq { column-count: 2; column-gap: 20px; }

.r2-faq details {
	background: #fff;
	border: 1px solid var(--r2-line);
	border-radius: 6px;
	padding: 2px 18px;
	margin: 0 0 12px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.r2-faq summary { cursor: pointer; list-style: none; padding: 15px 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.r2-faq summary::-webkit-details-marker { display: none; }
.r2-faq summary::before { content: "+"; color: var(--r2-accent); font: 700 18px/1 monospace; margin-right: 12px; }
.r2-faq details[open] summary::before { content: "\2013"; }
.r2-faq p { margin: 0 0 16px 26px; color: #414b57; font-size: 14.5px; }

/* ---------- формы обратной связи ---------- */

.r2-form { display: grid; gap: 10px; }
.r2-form .r2-fields { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

.r2-form input[type="text"],
.r2-form input[type="tel"],
.r2-form textarea {
	width: 100%;
	min-width: 0;
	padding: 12px 13px;
	border-radius: 4px;
	border: 1px solid var(--r2-line);
	background: var(--r2-soft);
	color: var(--r2-ink);
	font: 14.5px/1.4 inherit;
}

.r2-form textarea { min-height: 76px; resize: vertical; }

.r2-form .r2-agree {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	font-size: 12.5px;
	color: var(--r2-muted);
	line-height: 1.45;
	margin: 0;
}

.r2-form .r2-agree input { margin: 2px 0 0; }
.r2-form .r2-agree a { color: var(--r2-accent); }
.r2-form .r2-btn { width: 100%; }

.r2-form--row { grid-template-columns: 1fr auto; align-items: start; }
.r2-form--row .r2-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r2-form--row .r2-agree { grid-column: 1 / -1; }
.r2-form--row .r2-btn { width: auto; padding: 13px 22px; }

.r2-form--dark input[type="text"],
.r2-form--dark input[type="tel"],
.r2-form--dark textarea {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .22);
	color: #fff;
}

.r2-form--dark input::placeholder, .r2-form--dark textarea::placeholder { color: #b9cdf5; }
.r2-form--dark .r2-agree { color: #b9cdf5; }
.r2-form--dark .r2-agree a { color: #fff; }

/* ---------- поле «прикрепить чертёж» ---------- */

.r2-file {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	cursor: pointer;
	position: relative;
}

/* input прячем, но оставляем в потоке фокусируемым: клавиатурой поле
 * должно открываться так же, как мышью */
.r2-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.r2-file-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px dashed var(--r2-line);
	border-radius: 4px;
	background: #fff;
	color: var(--r2-accent-dark);
	font-size: 13.5px;
	font-weight: 600;
}

.r2-file-btn:before { content: "+"; font-size: 15px; line-height: 1; }
.r2-file-name { font-size: 12.5px; color: var(--r2-muted); }
.r2-file.is-set .r2-file-btn { border-style: solid; border-color: var(--r2-accent); }
.r2-file.is-set .r2-file-name { color: var(--r2-accent-dark); }
.r2-file.is-bad .r2-file-name { color: #c0392b; }
.r2-file input[type="file"]:focus-visible + .r2-file-btn { outline: 2px solid var(--r2-accent); outline-offset: 2px; }

.r2-form--dark .r2-file-btn {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .30);
	color: #fff;
}

.r2-form--dark .r2-file-name { color: #b9cdf5; }
.r2-form--dark .r2-file.is-set .r2-file-btn { border-color: #fff; }

.r2-askbox { background: var(--r2-soft2); border: 1px solid #dbe4fb; border-radius: 6px; padding: 20px 22px; }
.r2-askbox h3 { font-size: 17px; line-height: 1.25; font-weight: 800; margin: 0 0 6px; }
.r2-askbox p { margin: 0 0 14px; color: #414b57; font-size: 14px; }

.r2-askbanner {
	background: var(--r2-deep2);
	color: #fff;
	border-radius: 6px;
	padding: 24px 26px;
	display: grid;
	grid-template-columns: 1fr minmax(0, 460px);
	gap: 24px;
	align-items: center;
}

.r2-askbanner h3 { font-size: 21px; line-height: 1.2; font-weight: 800; margin: 0 0 8px; color: #fff; }
.r2-askbanner p { margin: 0; color: #cfe0ff; font-size: 14.5px; }

/* форма в рельсе раздела повторяет вид соседних блоков рельса */
.rail__group .r2-form { margin-top: 10px; }
.rail__group .r2-form input { font-size: 14px; padding: 10px 12px; }

/* ---------- липкая полоса на телефоне ---------- */

.r2-mobilebar { display: none; }

@media (max-width: 1040px) {
	.r2-sections { grid-template-columns: 1fr; }
	.r2-slide { grid-template-columns: 1fr; }
	.r2-slide .r2-art { display: none; }
	.r2-tiles { grid-template-columns: 1fr; }
	.r2-askbanner { grid-template-columns: 1fr; }
	.r2-faq { column-count: 1; }
	.r2-hero h1, .r2-hero .r2-slide-title { font-size: 30px; }
	.r2-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.r2-pickgo { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.r2-wrap { padding-left: 16px; padding-right: 16px; }
	/* подпись слайда на телефоне переносилась в три строки и ломала ряд */
	.r2-slidename { display: none; }
	.r2-form--row { grid-template-columns: 1fr; }
	.r2-form--row .r2-fields { grid-template-columns: 1fr; }
	.r2-form--row .r2-btn { width: 100%; }
	.r2-sec { grid-template-columns: 1fr; }
	.r2-sec img { justify-self: center; }
	.r2-h2 { font-size: 22px; }
	.r2-hero h1, .r2-hero .r2-slide-title { font-size: 26px; }
	.r2-picker { grid-template-columns: minmax(0, 1fr); }
	.r2-pickbox { padding: 14px; }

	body { padding-bottom: 68px; }

	.r2-mobilebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		padding: 10px 12px;
		background: #fff;
		border-top: 1px solid var(--r2-line);
		box-shadow: 0 -6px 20px rgba(23, 27, 34, .10);
	}

	.r2-mobilebar .r2-btn { width: 100%; }
}

/* ---------- перебиваем стили темы ----------
 * Разделы и карточки товара выводятся внутри .content, а там у темы свои
 * правила: text-align: justify, свои цвета заголовков и ссылок. Без этих
 * строк заголовок синей врезки оставался тёмным, а текст растягивался
 * по ширине с дырами между словами.
 */

/* выравнивание задаётся самим абзацам: у темы правило .content p стоит
 * прямо на p, и наследование от контейнера его не перебивает */
.content .r2,
.content .r2-askbox,
.content .r2-askbanner,
.content .r2 p,
.content .r2 span,
.content .r2 label,
.content .r2-askbox p,
.content .r2-askbanner p,
.rail__group .r2-note,
.content .r2-file,
.content .r2-file span,
.rail__group .r2-form label { text-align: left; }

.content .r2-askbanner h3 { color: #fff; margin: 0 0 8px; }
.content .r2-askbanner p { color: #cfe0ff; margin: 0; }
.content .r2-askbox h3 { color: var(--r2-ink); margin: 0 0 6px; }
.content .r2-askbox p { color: #414b57; margin: 0 0 14px; }
.content .r2-form--dark .r2-agree,
.content .r2-form--dark .r2-agree span { color: #cfe0ff; }
.content .r2-form--dark .r2-agree a { color: #fff; }
.content .r2-form .r2-btn { color: #fff; text-decoration: none; }
.content .r2-form input[type="submit"] { border: 0; }

.rail__group .r2-note { margin: 0 0 10px; font-size: 14px; color: var(--r2-muted); }
.rail__group .r2-form textarea { min-height: 62px; }

/* ---------- чертежи в технической информации ----------
 * Векторы, а не картинки: страница справочника читается и с телефона,
 * где растровый чертёж превращается в кашу. Геометрия — в
 * deploy/seo/techdraw.py и drawlib.py, здесь только вид линий.
 *
 * Толщины взяты по чертёжной логике: контур толстый, размерные и
 * выносные — тонкие, ось — штрихпунктир. Иначе чертёж читается как
 * схема, а не как чертёж.
 */

.pgd { margin: 24px 0 28px; }
.pgd-scroll { overflow-x: auto; }

.pgd-svg {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
	border: 1px solid var(--r2-line);
	border-radius: 6px;
}

.pgd figcaption,
.content .pgd figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--r2-muted);
	text-align: left;
}

/* контур детали и вспомогательные линии */
.pgd-out   { stroke: #35435c; stroke-width: 1.8; }
.pgd-thin  { stroke: #35435c; stroke-width: .9; fill: none; }
.pgd-ext   { stroke: #8492a8; stroke-width: .8; }
.pgd-cl    { stroke: #8492a8; stroke-width: .9; stroke-dasharray: 18 4 3 4; }
.pgd-plate { stroke: #46587c; stroke-width: 14; fill: none; stroke-linejoin: round; stroke-linecap: round; }

/* размеры */
.pgd-dim     { stroke: #1e50c8; stroke-width: 1; fill: none; }
.pgd-dimtext { fill: #1e50c8; font: 600 14px/1 inherit; }

/* выноски и подписи */
.pgd-lead { stroke: #4b5b74; stroke-width: .9; }
.pgd-dot  { fill: #4b5b74; }
.pgd-txt  { fill: #35435c; font: 14px/1 inherit; }
.pgd-hl   { fill: var(--r2-ink); font: 700 15px/1 inherit; }
.pgd-note { fill: #8b96a3; font: 13px/1 inherit; }

/* выносной вид */
.pgd-detail    { stroke: #1e50c8; stroke-width: 1; stroke-dasharray: 7 4; }
.pgd-detail-bg { fill: #fff; }

/* разделитель панелей — не осевая, поэтому линия своя */
.pgd-sep { stroke: #dfe4ec; stroke-width: 1.2; }

@media (max-width: 720px) {
	/* На телефоне чертёж ужимается до нечитаемого — даём ему прокрутку
	   и минимальную ширину, а подписи внутри рисунка делаем крупнее.
	   Правила идут по классам: у .pgd-txt и соседей размер задан явно,
	   и общий селектор text их уже не перебивает. */
	.pgd-svg { min-width: 640px; }
	.pgd-svg .pgd-txt,
	.pgd-svg .pgd-dimtext { font-size: 15px; }
	.pgd-svg .pgd-hl { font-size: 16px; }
	.pgd-svg .pgd-note { font-size: 14px; }
}