/* Продукт со своим входом: шапка без общего меню сайта и один светлый экран.
   Слева заголовок, материалы, одна яркая кнопка и одна цена. Справа кадр самого
   продукта: белый лист с примером, который считает движок. Оформление по правилам
   ИСКРИТ (ADR 0003): бумага, чернила, синий, линии 1px, без теней и скруглений.
   Всё, что нажимается, откликается: при наведении заливается, при нажатии садится. */

/* В шапке продукта нет дороги к списку инструментов и к описанию инструмента */
html[data-produkt] .topbar a.alltools,
html[data-produkt] .topbar a.opis { display: none; }

/* Экран занимает всю высоту между шапкой и подвалом */
body.pd-vhod-str { display: flex; flex-direction: column; }
body.pd-vhod-str > .pd-ekran { flex: 1 0 auto; }
/* Имя и меню на одной линии, как в расчётчиках */
.pd-vhod-str .topbar .brand { display: flex; align-items: center; }

.pd-ekran {
  --pd-list: #FFFFFF;
  /* Цвета позиций: синий палитры в четырёх насыщенностях, по одному на строку спецификации и её резы */
  --pd-c0: #0066FF; --pd-c1: #5C9DFF; --pd-c2: #A6C9FF; --pd-c3: #DCEAFF;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px 56px; align-items: center; align-content: center;
  padding: 20px 56px;
}
:root[data-theme="blueprint"] .pd-ekran { --pd-list: #1B1B1B; }
/* Тёмная тема пишет заголовок широким шрифтом: длинное слово не должно заходить на кадр */
:root[data-theme="blueprint"] .pd-zag { font-size: clamp(30px, 3.1vw, 84px); }
.pd-slova { min-width: 0; }
/* Заголовок в две строки: «Раскрой» и то, что кроят. Ширина в знаках моноширинного шрифта */
.pd-zag { margin: 0; max-width: 9.6ch; font-weight: normal; font-size: clamp(40px, 5.6vw, 96px); line-height: .94; letter-spacing: -.02em; text-transform: uppercase; }
.pd-pod { margin: 18px 0 0; max-width: 28em; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.3; color: var(--muted); text-wrap: balance; }

/* Нажимаемое садится на пиксель под пальцем */
.pd-ekran .cta, .pd-materialy button, .pd-stepper button, .pd-usl button, .pd-dobavit, .pd-dalshe {
  transition: transform .08s ease-out, background-color .12s, color .12s;
}
:is(.pd-ekran .cta, .pd-stepper button, .pd-usl button, .pd-dobavit, .pd-dalshe):active { transform: translateY(2px); }

/* Материалы: одна кнопка нажата, остальные ждут */
/* Материалы: полоса из шести ячеек над примером, нажатая залита чернилами */
.pd-materialy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); }
.pd-materialy button { min-width: 0; padding: 12px 4px; border: 0; border-right: 1px solid var(--ink); background: var(--pd-list); color: var(--ink); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.pd-materialy button:last-child { border-right: 0; }
.pd-materialy button:hover { background: var(--blue); color: #fff; }
.pd-materialy button[aria-pressed="true"] { background: var(--ink); color: var(--inverse); }

/* Две кнопки в строке: главная залита синим, вторая белая. Одиночной кнопки в строке нет */
.pd-knopki { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px; margin-top: 26px; }
/* Цена за человека стоит сразу под кнопками, цена на команду под ней */
.pd-slova { display: flex; flex-direction: column; }
.pd-slova > .pd-vse { order: 3; }
.pd-slova > .pd-vse[open] { order: 5; }
.pd-ekran .cta { margin: 0; justify-content: center; text-align: center; padding: 14px 20px; border: 1px solid var(--ink); background: var(--pd-list); color: var(--ink); }
.pd-ekran .cta:hover { background: var(--ink); color: var(--inverse); border-color: var(--ink); }
.pd-ekran .cta.pd-glavnaya { background: var(--blue); border-color: var(--blue); color: #fff; }
.pd-ekran .cta.pd-glavnaya:hover { background: var(--ink); border-color: var(--ink); color: var(--inverse); }

/* Цена на команду и оплата по счёту: для того, кто платит за цех */
.pd-pravo { max-width: 560px; margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
/* Цена: одно число, полный прайс и установка раскрываются по нажатию */
.pd-vse { margin-top: 10px; }
.pd-vse summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--muted); cursor: pointer; list-style: none; }
.pd-vse summary::-webkit-details-marker { display: none; }
/* Число мест в строке цены: кнопки и число одной полосой */
.pd-mesta { display: inline-grid; grid-template-columns: 36px 40px 36px; align-items: center; cursor: default; }
.pd-mesta button { height: 36px; border: 1px solid var(--ink); background: var(--pd-list); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.pd-mesta button:hover:not(:disabled) { background: var(--ink); color: var(--inverse); }
.pd-mesta button:disabled { opacity: .35; cursor: default; }
.pd-mest-chislo { display: grid; place-items: center; height: 36px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--pd-list); font-size: 18px; color: var(--ink); }
.pd-vse summary b { font-weight: normal; font-size: 28px; color: var(--ink); white-space: nowrap; }
.pd-vse summary u { color: var(--ink); text-underline-offset: 4px; }
.pd-vse summary:hover u { color: var(--blue); }
.pd-vse[open] summary u { text-decoration: none; opacity: .5; }
.pd-ceny { width: 100%; max-width: 560px; margin-top: 12px; border-collapse: collapse; font-size: 14px; line-height: 1.25; }
.pd-ceny td { padding: 7px 0; border-bottom: 1px solid var(--soft); }
.pd-ceny td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.pd-vse .pd-knopki { margin-top: 16px; }
.pd-knopki [hidden] { display: none; }
.pd-forma { max-width: 560px; margin-top: 16px; }
.pd-forma .pr-stroka { display: flex; gap: 12px; }
.pd-forma input[name="contact"] { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--ink); background: #fff; color: #1A1A1A; font-size: 15px; }
.pd-forma input[name="contact"]:focus, .pd-pole input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pd-forma .pr-med { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pd-forma .pr-otvet { margin: 8px 0 0; font-size: 14px; }

/* Кадр продукта: белый лист на бумаге */
.pd-primer { min-width: 0; border: 1px solid var(--ink); background: var(--pd-list); }
.pd-verh { display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 6fr); border-bottom: 1px solid var(--ink); }
.pd-vhod { min-width: 0; padding: 12px 0; border-right: 1px solid var(--ink); }
.pd-spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-spec td { padding: 4px 3px; }
.pd-spec td:first-child { padding-left: 16px; }
.pd-spec td:last-child { padding-right: 16px; }
.pd-spec td.pd-poz span { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 1px solid var(--ink); font-size: 14px; }
/* Что кроят: диаметр и класс выбирают из списка */
.pd-spec td.pd-chto { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pd-spec select, .pd-profil select { height: 36px; padding: 0 4px; border: 1px solid var(--ink); background: #fff; color: #1A1A1A; font: inherit; font-size: 14px; cursor: pointer; }
.pd-spec select:hover, .pd-profil select:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pd-spec select:focus, .pd-profil select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Профиль проката один на все строки: его типоразмер стоит над ними */
.pd-profil { display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; font-size: 14px; }
.pd-profil[hidden] { display: none; }
/* Крестик убирает строку, последнюю строку убрать нельзя */
.pd-spec td.pd-krest { width: 1%; padding-left: 0; }
.pd-krest button { width: 28px; height: 36px; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.pd-krest button:hover { color: #B00020; }
.pd-krest button:disabled { visibility: hidden; }
.pd-dobavit { margin: 6px 16px 0; padding: 7px 12px; border: 1px dashed var(--ink); background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; }
.pd-dobavit:hover { border-style: solid; background: var(--ink); color: var(--inverse); }
.pd-dobavit[hidden] { display: none; }
/* Поле: белое, единица измерения внутри него справа */
.pd-pole { display: flex; align-items: center; min-width: 0; height: 36px; border: 1px solid var(--ink); background: #fff; color: #1A1A1A; cursor: text; }
.pd-pole:hover { box-shadow: inset 0 0 0 1px var(--blue); border-color: var(--blue); }
.pd-pole input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; padding: 0 0 0 7px; border: 0; background: transparent; color: inherit; font-size: 15px; }
.pd-pole input:focus { outline-offset: 2px; }
.pd-pole span { padding: 0 6px 0 2px; font-size: 12px; color: #666; }
/* Количество меняют кнопками «− +» или клавишами */
/* Числу количества хватает места на четыре знака и единицу */
.pd-stepper { display: grid; grid-template-columns: 34px minmax(74px, 1fr) 34px; }
.pd-stepper .pd-pole { border-left: 0; border-right: 0; }
.pd-stepper button { height: 36px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.pd-stepper button:hover { background: var(--ink); color: var(--inverse); }
.pd-oshibka { margin: 8px 16px 0; font-size: 14px; color: #B00020; }

/* Главное: сколько хлыстов нужно, крупно, и итог словами. Сюда глаз попадает первым */
.pd-glav { display: grid; align-content: center; min-width: 0; padding: 12px 18px; }
.pd-glav b { font-weight: normal; font-size: clamp(52px, 5.6vw, 96px); line-height: .88; letter-spacing: -.03em; white-space: nowrap; color: var(--blue); }
.pd-glav span { margin-top: 4px; font-size: 18px; }
.pd-glav p { margin: 10px 0 0; font-size: 14px; line-height: 1.35; }
.pd-glav p span { display: block; margin: 0; font-size: inherit; }
.pd-glav p i { display: inline-block; font-style: normal; white-space: nowrap; }

/* Позиция красит свой номер в спецификации и свои резы на картах одним цветом */
.pd-p0 { background: var(--pd-c0); color: #fff; }
.pd-p1 { background: var(--pd-c1); color: #0E0E0E; }
.pd-p2 { background: var(--pd-c2); color: #0E0E0E; }
.pd-p3 { background: var(--pd-c3); color: #0E0E0E; }
.pd-p4 { background: #0A3D91; color: #fff; }
.pd-p5 { background: var(--pd-list); color: #0E0E0E; }

.pd-karty { padding: 12px 16px 10px; }
.pd-gruppa { margin: 0 0 5px; font-size: 13px; color: var(--muted); }
.pd-gruppa:not(:first-child) { margin-top: 10px; }
.pd-karta { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; align-items: center; margin-bottom: 4px; }
.pd-hlyst { display: flex; height: 30px; border: 1px solid var(--ink); overflow: hidden; }
.pd-hlyst i { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-right: 1px solid var(--ink); font-style: normal; font-size: 12px; line-height: 1; white-space: nowrap; }
.pd-hlyst i:last-child { border-right: 0; }
/* Хлыст режется слева направо, карты выходят по очереди: после каждого пересчёта заново */
.pd-hlyst { clip-path: inset(0 0 0 0); animation: pd-rez .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n) * 45ms); }
@keyframes pd-rez { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .pd-hlyst { animation: none; } }
/* Линейка хлыста: штрих на каждом метре */
.pd-lin { margin-bottom: 4px; }
.pd-shkala { position: relative; height: 18px; border-bottom: 1px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px var(--shag)) left bottom / 100% 5px no-repeat; }
.pd-shkala span { position: absolute; top: 0; font-size: 11px; line-height: 12px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.pd-shkala span:first-child { transform: none; }
.pd-shkala span:last-child { transform: translateX(-100%); }
.pd-hlyst .pd-uzk .pd-dl { display: none; }
:is(.pd-hlyst, .pd-legenda) .pd-ost { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--ink) 4px 5px); }
:is(.pd-hlyst, .pd-legenda) .pd-util { background: var(--ink); }
.pd-krat { font-size: 14px; text-align: right; white-space: nowrap; }
.pd-esche { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pd-legenda { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.pd-legenda i { display: inline-block; width: 22px; height: 12px; border: 1px solid var(--ink); }
.pd-legenda i:not(:first-child) { margin-left: 12px; }

.pd-niz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--ink); }
/* Условия расчёта: длину хлыста выбирают кнопкой, остальное показано как есть */
.pd-usl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pd-usl button { padding: 5px 9px; border: 1px solid var(--ink); background: var(--pd-list); color: var(--ink); font-size: 12px; cursor: pointer; }
.pd-usl button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.pd-usl button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--inverse); }
.pd-usl-tekst { flex: 1 1 100%; font-size: 11.5px; }
.pd-usl-tekst i { font-style: normal; white-space: nowrap; }
/* Переход в расчётчик это кнопка, а не строка текста */
.pd-dalshe { display: block; padding: 14px 18px; border-left: 1px solid var(--ink); background: var(--ink); color: var(--inverse); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.pd-dalshe:hover { background: var(--blue); color: #fff; }

/* Кадр актов: даты и галочки над листом акта */
.pd-krasn { color: #c62828 !important; }
.pd-akt-polya { padding: 12px 16px; }
.pd-daty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-data { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.pd-data input { height: 36px; min-width: 0; padding: 0 6px; border: 1px solid var(--ink); background: #fff; color: #1A1A1A; font: inherit; font-size: 14px; cursor: text; }
.pd-data input:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pd-data input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pd-data.pd-plohoe { color: #c62828; }
.pd-data.pd-plohoe input { border-color: #c62828; box-shadow: inset 0 0 0 1px #c62828; }
.pd-galki { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.pd-galka { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; cursor: pointer; }
.pd-galka input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.pd-galka:hover { color: var(--blue); }
.pd-zam { flex: none; max-height: 96px; overflow-y: auto; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--ink); list-style: none; font-size: 13px; line-height: 1.35; }
.pd-zam[hidden] { display: none; }
.pd-zam li + li { margin-top: 4px; }
.pd-zam-osh { color: #c62828; }
.pd-zam i { font-style: normal; color: var(--muted); white-space: nowrap; }
/* Лист акта: те же блоки, что идут в Word. Поменявшаяся строка выделена */
.pd-akt { display: block; font-size: 13px; line-height: 1.4; }
.pd-akt h3 { margin: 10px 0 4px; font-size: 14px; font-weight: normal; text-align: center; text-transform: uppercase; }
.pd-akt p { margin: 0 0 6px; padding: 1px 4px; }
.pd-akt p span { color: var(--muted); }
.pd-akt p b { font-weight: normal; color: var(--ink); }
.pd-akt .pd-a-nomer { display: flex; justify-content: space-between; }
.pd-akt .pd-a-nov { background: var(--pd-c3); outline: 1px solid var(--blue); }
.pd-akt .pd-a-pod { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--soft); }

/* Кадр лаборатории: пробы выработки, имя грунта, колонка и ведомость */
.pd-proby { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.pd-proby th { padding: 0 6px 4px; font-size: 12px; font-weight: normal; text-align: left; color: var(--muted); }
.pd-proby td { padding: 3px 6px; }
.pd-proby td:nth-child(-n+2) { color: var(--muted); }
.pd-proby tr[data-id] { cursor: pointer; }
.pd-proby tr.pd-vybrana td:first-child { box-shadow: inset 3px 0 0 var(--blue); color: var(--ink); }
.pd-proby input { width: 100%; height: 30px; min-width: 0; padding: 0 6px; border: 1px solid var(--ink); background: var(--pd-list); color: var(--ink); font: inherit; font-size: 14px; }
.pd-proby input:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pd-proby input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pd-verh:has(.pd-proby) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.pd-glav .pd-imya { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; letter-spacing: 0; white-space: normal; }
.pd-karty.pd-lab { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.pd-kolonka { min-width: 0; min-height: 0; }
.pd-kolonka svg { display: block; width: 100%; height: 100%; max-height: 100%; }
.pd-vedomost { min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; }
.pd-vedomost li { padding: 5px 0; border-bottom: 1px solid var(--soft); }
.pd-vedomost li:first-child { padding-top: 0; }
.pd-vedomost b { font-weight: normal; color: var(--muted); }
.pd-vedomost i { display: block; font-style: normal; font-size: 12px; }

/* Кадр Геодезии: смещения выбранной колонны и план колонн */
.pd-otkloneniya { padding: 12px 16px; }
.pd-otkloneniya .pd-profil { margin: 0 0 8px; }
.pd-otkl-setka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.pd-otkl { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.pd-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(64px, 1fr); gap: 10px; }
.pd-plan button { display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 0; border: 1px solid var(--ink); background: var(--pd-list); color: var(--ink); font: inherit; cursor: pointer; }
.pd-plan button b { font-weight: normal; font-size: clamp(15px, 1.4vw, 22px); }
.pd-plan button span { font-size: clamp(13px, 1.1vw, 17px); color: var(--muted); }
.pd-plan button:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pd-plan .pd-sverh { border-color: #c62828; box-shadow: inset 0 0 0 1px #c62828; color: #c62828; }
.pd-plan .pd-sverh span { color: #c62828; }
.pd-plan .pd-vybrana { background: var(--ink); color: var(--inverse); }
.pd-plan .pd-vybrana span { color: var(--inverse); }
.pd-plan .pd-sverh.pd-vybrana { background: #c62828; color: #fff; }
.pd-plan .pd-sverh.pd-vybrana span { color: #fff; }

/* Кадр Стройконтроля: завышение в рублях и строки работ хлыстами */
.pd-sv-itog { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)); flex: none; border-bottom: 1px solid var(--ink); }
.pd-sv-itog > div { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--ink); }
.pd-sv-itog > div:last-child { border-right: 0; }
.pd-sv-glav b { font-weight: normal; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; color: var(--blue); }
.pd-sv-yach b { font-weight: normal; font-size: 24px; line-height: 1; }
.pd-sv-itog span { font-size: 13px; color: var(--muted); }
.pd-sv-shapka, .pd-sv-stroka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) 112px 104px; gap: 10px; align-items: center; }
.pd-sv-shapka { flex: none; padding: 8px 16px 0; font-size: 12px; color: var(--muted); }
.pd-sverka { display: flex; flex-direction: column; padding-top: 4px; }
.pd-sv-stroka { flex: 1 1 36px; min-height: 36px; border-bottom: 1px solid var(--soft); }
.pd-sv-stroka:last-child { border-bottom: 0; }
.pd-sv-imya { overflow: hidden; font-size: 13px; line-height: 1.25; }
.pd-sv-imya i { font-style: normal; color: #c62828; }
.pd-sv-hlyst { display: flex; height: 16px; border: 1px solid var(--ink); overflow: hidden; }
.pd-sv-hlyst i { display: block; background: var(--pd-c1); }
.pd-sv-hlyst u { display: block; background: #c62828; }
.pd-sv-status { font-size: 12px; color: var(--muted); }
.pd-sv-plohaya .pd-sv-status { color: #c62828; }

/* Кадр Метрологии: результаты серии и карта Шухарта */
.pd-karta-sh { display: block; }
.pd-karta-sh { overflow: hidden; }
.pd-karta-sh svg { display: block; width: 100%; height: 100%; }
.pd-karta-sh text { font-size: 12px; fill: var(--muted); }
.pd-k-predel { stroke: #c62828; stroke-width: 1; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.pd-k-sred { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pd-k-hod { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pd-karta-sh circle { fill: var(--blue); stroke: var(--pd-list); stroke-width: 2; cursor: pointer; }
.pd-karta-sh circle:hover { stroke: var(--ink); }
.pd-karta-sh circle:focus { outline: none; stroke: var(--ink); }
.pd-karta-sh .pd-k-plohaya { fill: #c62828; }
.pd-karta-sh .pd-k-vybrana { stroke: var(--ink); stroke-width: 3; }

/* Кадр Участка: сам продукт на примере */
.pd-prilozhenie { display: block; flex: 1 1 0; width: 100%; min-height: 0; border: 0; background: var(--paper); }

/* Компьютер: кадр занимает всю высоту между шапкой и подвалом и не зависит от того, что в нём посчитано.
   Человек жмёт плюс, карт становится больше или меньше, а кадр и кнопка под пальцем стоят на месте.
   contain: size убирает содержимое кадра из расчёта высоты, её задаёт строка сетки. Хлысты делят
   свободное место между собой, а если их слишком много, прокручивается только этот участок */
@media (min-width: 1101px) {
  .pd-ekran { min-height: 640px; align-content: stretch; }
  .pd-primer { display: flex; flex-direction: column; align-self: stretch; contain: size; overflow: hidden; }
  .pd-materialy, .pd-verh, .pd-niz { flex: none; }
  .pd-karty { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
  .pd-karty.pd-plan { display: grid; }
  .pd-sv-itog { flex: none; }
  .pd-karty > .pd-karta:not(.pd-lin) { flex: 1 1 26px; min-height: 26px; max-height: 96px; }
  .pd-karty .pd-hlyst { height: auto; align-self: stretch; }
  .pd-gruppa, .pd-lin, .pd-esche { flex: none; }
  .pd-legenda { flex: none; margin-top: auto; padding-top: 10px; }
}
/* Низкий ноутбук: тот же экран мельче, чтобы кадр продукта не уходил под край */
@media (min-width: 1101px) and (max-height: 800px) { .pd-ekran { zoom: .85; } }
/* Большой монитор: тот же экран крупнее */
@media (min-width: 1800px) and (min-height: 970px) { .pd-ekran { zoom: 1.15; } }
@media (min-width: 2300px) and (min-height: 1200px) { .pd-ekran { zoom: 1.45; } }

@media (max-width: 1100px) {
  .pd-ekran { grid-template-columns: minmax(0, 1fr); padding: 24px 32px 28px; align-content: start; }
}
@media (max-width: 760px) {
  .pd-ekran { padding: 20px 20px 26px; gap: 22px; }
  .pd-knopki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-ekran .cta { padding-left: 8px; padding-right: 8px; white-space: normal; }
  .pd-verh { grid-template-columns: minmax(0, 1fr); }
  .pd-vhod { border-right: 0; border-bottom: 1px solid var(--ink); }
  /* Телефон: строка спецификации в две линии. Сверху номер, диаметр, класс и крестик, снизу длина и количество */
  .pd-spec, .pd-spec tbody { display: block; }
  .pd-spec tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.25fr) 26px; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--soft); }
  .pd-spec tr:last-child { border-bottom: 0; }
  .pd-spec td, .pd-spec td:first-child, .pd-spec td:last-child { padding: 0; }
  .pd-spec td.pd-krest { width: auto; grid-column: 4; grid-row: 1; }
  .pd-spec tr.pd-arm td.pd-chto { grid-column: 2 / 4; }
  .pd-spec tr.pd-arm td.pd-chto select { flex: 1 1 0; min-width: 0; }
  .pd-spec tr.pd-arm td.pd-dlina { grid-column: 1 / 3; grid-row: 2; }
  .pd-spec tr.pd-arm td.pd-kol { grid-column: 3 / 5; grid-row: 2; }
  .pd-spec select, .pd-profil select { height: 40px; }
  .pd-krest button { height: 40px; width: 24px; }
  .pd-materialy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-materialy button:nth-child(3) { border-right: 0; }
  .pd-materialy button:nth-child(-n+3) { border-bottom: 1px solid var(--ink); }
  /* На телефоне сайт держит кнопки не меньше 44 пикселей: колонки степпера той же ширины, иначе минус наезжал на поле */
  .pd-pole, .pd-stepper button { height: 44px; }
  .pd-karta-sh { height: 300px; }
  .pd-sv-itog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-sv-glav { grid-column: 1 / -1; border-right: 0 !important; border-bottom: 1px solid var(--ink); }
  .pd-sv-shapka { display: none; }
  .pd-sv-stroka { flex: none; min-height: 0; grid-template-columns: minmax(0, 1fr) 112px; padding: 8px 0; }
  .pd-sv-imya { grid-column: 1 / -1; }
  .pd-sv-status { grid-column: 1 / -1; }
  .pd-otkl-setka { grid-template-columns: minmax(0, 1fr); }
  .pd-plan { gap: 6px; grid-auto-rows: 64px; }
  .pd-prilozhenie { height: 620px; }
  .pd-proby th, .pd-proby td { padding-left: 2px; padding-right: 2px; }
  .pd-proby input { height: 44px; padding: 0 3px; font-size: 16px; }
  .pd-karty.pd-lab { grid-template-columns: minmax(0, 1fr); }
  .pd-verh:has(.pd-proby) { grid-template-columns: minmax(0, 1fr); }
  .pd-kolonka svg { height: auto; }
  .pd-daty { grid-template-columns: minmax(0, 1fr); }
  .pd-data input { height: 44px; font-size: 16px; }
  .pd-galka { min-height: 44px; }
  .pd-akt { max-height: 420px; overflow-y: auto; }
  .pd-mesta { grid-template-columns: 44px 44px 44px; }
  .pd-mesta button, .pd-mest-chislo { height: 44px; }
  .pd-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .pd-pole span { padding: 0 5px 0 2px; }
  .pd-pole input { padding-left: 6px; }
  .pd-glav { padding: 14px 12px; }
  .pd-karty { padding: 12px 12px 10px; }
  .pd-hlyst i:not(.pd-shir) .pd-dl { display: none; }
  .pd-niz { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-usl { padding: 10px 12px; }
  .pd-dalshe { border-left: 0; border-top: 1px solid var(--ink); white-space: normal; }
  .pd-forma .pr-stroka { flex-direction: column; }
}
/* Длинное имя продукта умещается в строке шапки на телефоне */
@media (max-width: 480px) { .pd-vhod-str .topbar .brand { font-size: 14px; letter-spacing: .04em !important; } }
/* Телефон: имя продукта, обратная связь и кабинет идут одной строкой. Раскрой без кнопки обратной связи */
@media (max-width: 480px) {
  :root[data-produkt]:not([data-produkt="raskroy"]) .pd-vhod-str .topbar { padding-left: 16px; padding-right: 16px; column-gap: 6px; }
  :root[data-produkt]:not([data-produkt="raskroy"]) .pd-vhod-str .topbar .brand a { font-size: 13px; letter-spacing: .02em !important; }
  :root[data-produkt]:not([data-produkt="raskroy"]) .pd-vhod-str .topbar .askbtn { width: 38px; }
}
/* Длинное имя продукта на узком телефоне: шапка всё равно в одну строку */
@media (max-width: 390px) {
  :root[data-produkt]:not([data-produkt="raskroy"]) .pd-vhod-str .topbar .brand a { font-size: 12px; letter-spacing: 0 !important; }
}
/* Поля примера в тёмной теме: общее правило темы красит только фон, число оставалось чёрным на чёрном */
:root[data-theme="blueprint"] :is(.pd-spec, .pd-profil, .pd-pole, .pd-data) :is(input, select) { background: #fff; color: #1A1A1A; }
/* Телефон: «+ строка» на всю ширину примера, с теми же полями, что у таблицы */
@media (max-width: 640px) { .pd-dobavit { width: calc(100% - 32px); box-sizing: border-box; } }
/* Самый узкий телефон: длинное слово заголовка («Исполнительная») не вылезает за край */
@media (max-width: 345px) { .pd-zag { font-size: 28px !important; } }