/* Оформление страницы расчёта раскроя листа.
 *
 * ## Что здесь есть и чего здесь нет
 *
 * Палитра, гарнитура, кегли, поля, кнопки, таблицы и справка живут в общем
 * листе `ax-oblik.css`, перенесённом из ProfileCut Optimizer (документ
 * «Облик…» от 19.08.2026). Здесь — только то, чего у соседа нет: карта
 * раскроя, правимая ведомость, листы по раскроям, правовые страницы, подвал
 * приложения.
 *
 * **Своих цветов не заводится.** Всё берётся переменными общего листа. Прежний
 * фон `#F4F6F8` и зелёный `#1F6B3A` были вне палитры сайта, причём зелёный не
 * совпадал и с `--ax-color-success` (`#3D8B5F`): за указатель состояния он не
 * читался.
 *
 * **Насыщенности не существует.** У гарнитуры OpenGost Type B одно начертание;
 * `font-weight: 600` заставлял браузер подделывать полужирный утолщением
 * контура, и на тонком чертёжном шрифте это расплывалось. Выделение —
 * разрядкой, цветом и кеглем. Стережётся проверкой `check_look.py`.
 *
 * Стандарт справочной системы, ТРЕБОВАНИЕ 1.1.2: подсказка держится до
 * закрытия и переставляется при прокрутке — она не всплывающая по наведению.
 * Наведение непригодно: на сенсорном экране его нет, а читать длинный текст,
 * удерживая указатель, неудобно.
 */

/* --- Ссылка обхода ------------------------------------------------------
 *
 * «Перейти к основному содержимому» — первая ссылка шапки сайта. Она для
 * клавиатуры и чтения с экрана: нажал Tab, попал сразу к работе, минуя меню.
 * Указателем по ней не ходят, и **видна она быть не должна**.
 *
 * Правила скрытия не оказалось ни у нас, ни в `app.css` образца: оно живёт в
 * собственных стилях темы сайта, которых мы не подключаем. Разметка от сайта
 * пришла, стиль — нет, и ссылка встала посреди страницы.
 *
 * ## Почему не `display: none`
 *
 * Скрытая так ссылка исчезает и для чтения с экрана — то есть перестаёт
 * делать то единственное, ради чего заведена. Требование проекта сайта (2.2 их
 * ответа) — чтобы она работала, а не чтобы её не было видно.
 *
 * Приём: ссылка уводится за верхний край окна и возвращается при получении
 * клавиатурного внимания. Для чтения с экрана она всё это время на месте.
 *
 * ## Имя класса названо сайтом 21.08.2026
 *
 * `ax-visually-hidden`. Прежде правило писалось по трём общепринятым именам
 * сразу и по признаку адреса перехода — своё имя было неизвестно.
 *
 * **Угаданные имена оставлены**, и это не небрежность: разметку отдаёт сайт, и
 * при следующей правке темы класс может смениться. Признак по адресу
 * (`a[href="#ax-main-content"]`) сработает при любом имени — он и есть
 * настоящий заслон, а перечень имён лишь делает правило точнее.
 */
.ax-visually-hidden,
.skip-link,
.screen-reader-text,
.ax-header__skip,
a[href="#ax-main-content"] {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ax-visually-hidden:focus,
.skip-link:focus,
.screen-reader-text:focus,
.ax-header__skip:focus,
a[href="#ax-main-content"]:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ax-color-text);
  color: var(--ax-color-bg);
  border-radius: var(--ax-radius-base);
  text-decoration: none;
}

/* --- Шапка приложения --------------------------------------------------
 *
 * Это шапка ПРОГРАММЫ, а не сайта. Шапка сайта (`ax-header`) живёт в теме, и
 * сюда она ещё не надета: разметка запрошена у проекта сайта. Пока её нет,
 * название программы стоит первым в рабочей колонке.
 *
 * Правило `header` из общего листа делает шапку липкой полосой во всю ширину —
 * это шапка соседа, с переключателем языка и отметкой редакции. У нас в ней
 * заголовок и подзаголовок, и липкость им не нужна: они уезжают вместе со
 * страницей.
 */
/* Шапка приложения — правила ПЕРЕНЕСЕНЫ, здесь только то, чего в заготовке
 * нет.
 *
 * Выравнивание, кегли, отступы и место номера редакции задаёт общий слой
 * (раздел «ШАПКА ПРИЛОЖЕНИЯ» заготовки редакции 5). Повторять их здесь
 * значило бы завести второе место для одной величины: правка у составителя
 * пришла бы переносом, а наша осталась бы поверх и тихо взяла верх.
 */
.intro {
  padding: 14px 0 4px;
}

/* Условия расчёта — строка в ТЕЛЕ страницы, над карточкой работы.
 *
 * Прежде стояла четвёртой строкой шапки под именем `.intro__terms`. Решением
 * Правообладателя от 23.08.2026 условия из шапки вынесены: шапка называет
 * программу и её назначение, и только их.
 *
 * Имя своё, не `intro__*`: строка перестала быть частью общей шапки, и носить
 * её имя значило бы обещать, что заготовка ею занимается. Она ею не
 * занимается и не будет.
 */
.условия-расчёта {
  margin: 0 auto 14px;
  max-width: var(--pco-work-max);
  font-size: 17px;
  text-align: center;
  color: var(--text-muted);
}

/* Заголовок ВНУТРЕННЕЙ страницы — оферта, тарифы, реквизиты, библиотека.
 *
 * Общая шапка приложения (`.intro`) — только у главной: она называет
 * программу и её назначение. У внутренних страниц заголовок свой, с
 * крошками, и выравнивать его по середине незачем — читают его как заголовок
 * раздела, а не как имя изделия.
 *
 * Правило возвращено отдельно 23.08.2026: до этого дня оно звалось `.шапка` и
 * служило обоим случаям разом. Разведя их, легко было бы оставить внутренние
 * страницы без отступов и с кеглем `body` — незаметно, потому что отказа
 * такое не даёт.
 */
.шапка {
  position: static;
  display: block;
  padding: 14px 0 4px;
  background: transparent;
}
.шапка h1 { margin: 0; font-size: 28px; letter-spacing: .03em; line-height: 1.2; }

/* Строчный девиз: кегль ТОТ ЖЕ, что у назначения программы.
 *
 * Требование заготовки относительное — «тот же, что у `.intro__lead`». Теперь
 * оба берут одно и то же выражение, и связь эта записана, а не держится на
 * совпадении чисел.
 */
.ax-shell__motto-inline { font-size: clamp(20px, 2.6vw, 28px); }

.карта { max-width: var(--pco-work-max); margin-inline: auto; }

section + section { margin-top: 22px; }

/* --- Поля ---------------------------------------------------------------
 *
 * `.поле` — это `label`, обнимающая подпись и поле ввода. Правило общего листа
 * красит `label` приглушённым: подпись так и задумана, а введённое значение
 * обязано быть в основном цвете, иначе оно читается хуже подписи к нему.
 */
/* Поля соразмерны содержимому, а не растянуты поровну (решение 24.08.2026).
 *
 * Прежде всякое поле тянулось `flex: 1 1 190px` — то есть занимало равную
 * долю строки независимо от того, что в него вводят. Число «5» получало ту же
 * ширину, что марка материала, и строка выглядела разлаженной: короткие поля
 * пустовали, длинные жались.
 *
 * Теперь ширина задаётся классом по роду величины. Умолчание оставлено
 * прежним: поле без класса ведёт себя как раньше, и ни одна страница не
 * ломается от того, что класс ей не проставили.
 */
/* Строка выравнивается по НИЖНЕЙ линии окон ввода, а не по верху подписей
 * (решение Правообладателя от 02.09.2026).
 *
 * Подписи полей бывают в одну строку и в две — «Зазор между деталями, мм»
 * переносится, «Поля листа, мм» нет. При выравнивании по верху окна ввода
 * оказывались на разной высоте, и строка выглядела ступенчатой.
 *
 * `flex-end` ставит поля так, чтобы совпали их низы: подписи растут вверх,
 * а окна стоят на одной линии. Это и есть та линия, по которой человек
 * читает форму. */
.строка {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Подпись прижата к низу своего места: между нею и окном ввода остаётся
 * постоянный просвет независимо от числа строк в подписи. */
.поле > span {
  display: flex;
  align-items: flex-end;
  min-height: 2.6em;
}
.поле { flex: 1 1 190px; margin-bottom: 12px; }

/* Число в миллиметрах: пять знаков и запас. */
.поле.число { flex: 0 0 118px; }
/* Перечисление: ширина по самому длинному названию. */
.поле.перечень { flex: 1 1 220px; }
/* Редакция: в названии цена и число контуров — самое длинное на форме. */
.поле.широкое { flex: 1 1 320px; }
/* Прежнее правило подписи снято: оно ставило `display: block` и перебивало
 * выравнивание по нижней линии. Отступ задан просветом в `.поле > span`. */
.поле > span { margin-bottom: 4px; gap: 6px; }
.поле input, .поле select { color: var(--text-main); }
.поле small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 14px; }
.поле.узкое { max-width: 130px; }

.флажки { gap: 22px; }
.флажок { display: flex; align-items: center; gap: 8px; }
.флажок span { color: var(--text-main); }

/* Значок на золотой кнопке: рамка и знак графитом. Приглушённый серый общего
   листа на золоте не читается. */
.знак.светлый {
  border-color: rgba(39, 51, 65, .45);
  background: transparent;
  color: var(--ax-color-text);
}

.действия { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.счётчик { color: var(--text-muted); font-size: 15px; }

/* Строка состояния разбора: сообщение о ходе работы, а не результат. Золотая
   грань слева связывает её с прочими выделениями страницы. */
.разбор-состояние {
  margin: 12px 0 0;
  padding: 8px 12px;
  background: rgba(220, 165, 48, .12);
  border-left: 3px solid var(--accent);
  border-radius: var(--ax-radius-base);
  font-size: 16px;
}

/* --- Правимая ведомость ------------------------------------------------ */

.сводка { color: var(--text-muted); margin: 4px 0 10px; }

.спец-всем {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 12px 0 18px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--ax-radius-base);
}
.спец-всем-подпись { align-self: center; letter-spacing: .04em; }
.спец-всем .поле { margin-bottom: 0; }

.спец-таблица th { white-space: nowrap; }

/* Ровные цифры: столбцы размеров и количества читаются сверкой сверху вниз, и
   разнобой в ширине знаков этому мешает. */
.спец-таблица .число,
.раскрои-таблица .число {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.спец-таблица tr:hover td { background: var(--bg-soft); }

/* Поля правки в таблице. Ширина задана ЧИСЛОМ ЗНАКОВ, которое обязано в них
   поместиться: в толщину пять («1250,5»), в количество четыре, в марку
   восемь («09Г2С-15»). Поднимется кегль таблицы — эти числа обязаны
   подняться вместе с ним, иначе текст перестанет помещаться, причём молча.
   Соразмерность стережётся проверкой `check_look.py`. */
.спец-таблица input.правка,
.раскрои-таблица input.лист { width: 82px; }
.спец-таблица input.правка-марка { width: 118px; }

/* Источник величины. Пометка стоит рядом со значением, а не отдельным
   столбцом: столбец пришлось бы читать, а знак виден сам.
   Вес не задаётся — жирного начертания у гарнитуры нет; выделение разрядкой. */
.источник { margin-left: 5px; cursor: help; }
.источник-умолчание {
  /* Цвет внимания, а не опасности.
   *
   * Замечание Правообладателя от 24.08.2026: «что за непонятные красные знаки
   * вопроса?». Пометка означает «в имени файла не указано — принято по
   * умолчанию»: это осторожность, а не ошибка. Красный — цвет опасности, и
   * человек читает его как отказ, которого нет.
   *
   * Величина при этом правильная и расчёт пойдёт; сказать надо лишь, что взята
   * она не из чертежа. */
  color: var(--ax-color-accent);
  letter-spacing: .06em;
}
.источник-вами { color: var(--success); }

/* Прежние пометки ведомости (до правимых полей). Оставлены: разметка отказов
   и старые снимки на них ссылаются. */
.по-умолчанию, .не-определена { color: var(--danger); cursor: help; }

.раскрои-таблица { margin-top: 8px; }

/* --- Итог: варианты мер успеха ---------------------------------------- */

.варианты { display: flex; gap: 16px; flex-wrap: wrap; }

.вариант {
  flex: 1 1 340px;
  border: 1px solid var(--border);
  border-radius: var(--ax-radius-base);
  padding: 16px 18px;
  background: var(--bg-panel);
}
.вариант h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: .04em; }
.вариант .кому { color: var(--text-muted); font-size: 15px; margin: 0 0 12px; }
.вариант dl {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  margin: 0 0 14px; font-size: 16px;
}
.вариант dt { color: var(--text-muted); }
.вариант dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.вариант .главная { width: 100%; }

/* Заголовок раскроя показывается, только когда раскроев больше одного: при
   одном он был бы шумом. Раскрои разной марки или толщины — разные задания на
   станок, и путать их нельзя. */
.раскрой-заголовок { margin: 22px 0 6px; font-size: 20px; letter-spacing: .04em; }

/* Лист называется у самой карты: раскроев несколько, листы у них разные, и
   размер из раздела 2 к этой карте может не относиться вовсе. */
.лист-подпись { margin: 4px 0 10px; color: var(--text-muted); font-size: 16px; }

.оборвано { color: var(--warning); font-size: 16px; margin: 0 0 10px; }
.сноска { color: var(--text-muted); font-size: 15px; margin-bottom: 0; }

.отказ { border-color: var(--danger); }
.отказ h2 { color: var(--danger); }
.отказ li { margin-bottom: 8px; }
.отказ .знак { border-color: var(--danger); color: var(--danger); }

.скрыто { display: none; }

/* --- Подсказка --------------------------------------------------------
 *
 * Пузырь оформлен общим листом: тёмная плашка, видимая золотая черта,
 * `position: fixed`. Здесь — только то, чего у соседа в разметке нет: кнопка
 * закрытия и предел высоты расширенной части.
 *
 * Расширенная часть набирается с сохранением переводов строк: статьи справки
 * разбиты на абзацы, и склеенные в один поток они читаются простынёй.
 */
.подсказка .краткая { padding-right: 18px; }
.подсказка .расширенная {
  white-space: pre-line;
  max-height: 340px;
  overflow-y: auto;
  font-size: 15px;
}
.подсказка .закрыть {
  position: absolute; top: 4px; right: 7px;
  border: 0; background: none; font-size: 20px; line-height: 1;
  color: var(--ax-color-bg); cursor: pointer;
}

/* --- Карта раскроя ----------------------------------------------------
 *
 * Тёмная подложка листа выбрана не для вида: на ней различимы и контуры
 * деталей, и наложения, если они появятся. На белом фоне тонкая линия поверх
 * другой такой же незаметна, и дефект раскладки прошёл бы мимо глаза.
 *
 * Цвета — из палитры: лист графитом, деталь ватманом, обводка золотом.
 * Наложение двух деталей даёт видимую золотую линию поперёк светлого поля —
 * то самое свойство, ради которого подложка и делалась тёмной. Прежние цвета
 * (`#2a3340`, `#1f6b3a`, `#57d98a`) в палитре сайта не значатся вовсе.
 */
.лист-карта { margin: 0 0 12px; }
.лист-карта figcaption {
  margin-top: 4px;
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
}

.карта-раскроя { width: 100%; height: auto; display: block; }
.карта-раскроя .лист {
  fill: var(--ax-color-text);
  stroke: rgba(242, 239, 230, .35);
  stroke-width: 1.5;
}
.карта-раскроя .полезная {
  fill: none;
  stroke: rgba(242, 239, 230, .45);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}
.карта-раскроя .остаток {
  fill: rgba(220, 165, 48, .14);
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 8 4;
}
.карта-раскроя .деталь {
  fill: var(--ax-color-bg);
  stroke: var(--accent);
  stroke-width: 1.1;
}
.карта-раскроя .отверстие {
  fill: var(--ax-color-text);
  stroke: var(--accent);
  stroke-width: .9;
}

/* Деталь, нарушающая правила размещения (Ф-4.2.12-бис).
 *
 * Отличается ТРЕМЯ признаками разом: цветом обводки, заливкой и штриховым
 * пунктиром. Одного цвета мало — человек с нарушением цветовосприятия
 * (а это каждый двенадцатый мужчина) красное от зелёного не отличит, и
 * нарушение осталось бы для него невидимым.
 *
 * Пунктир виден всем и переживает чёрно-белую печать цехового листа. */
.карта-раскроя .деталь.нарушение {
  fill: color-mix(in srgb, var(--danger) 22%, transparent);
  stroke: var(--danger);
  stroke-width: 1.8;
  stroke-dasharray: 5 3;
}

.огрубление { margin: 4px 0 12px; font-size: 15px; color: var(--text-muted); }

/* Нарушения размещения и причина отсутствия остатка.
 *
 * Строка нарушений заметна, но не кричит: это не отказ, а сведение. Расчёт
 * состоялся, карта верна, и человеку решать, мириться ли с недобором.
 *
 * Строка об отсутствии остатка — приглушённая: она объясняет пустоту, а не
 * сообщает о беде. */
.нарушения {
  margin: 8px 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 15px;
}
/* Доводка вручную: деталь берётся мышью.
 *
 * Указатель-«рука» — единственный знак того, что карту можно править. Без
 * него правка остаётся тайной: человек не станет тянуть картинку, если ничто
 * не намекнуло, что она тянется. */
.карта-раскроя.правится .деталь.подвижная {
  cursor: grab;
}
.карта-раскроя.правится .деталь.подвижная:active {
  cursor: grabbing;
}
.о-правке {
  margin: 6px 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
  font-size: 15px;
}
.о-правке.беда {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
/* Форма оплаты выдачи.
 *
 * Раскрывается в карточке выбранного варианта, а не отдельной страницей:
 * человек только что смотрел на карту и обязан видеть, за что платит. */
.оплата {
  margin: 14px 0 4px;
  padding: 14px;
  border: 1px solid var(--ax-color-border);
  border-radius: 6px;
  background: var(--ax-color-surface);
}
.оплата h4 { margin: 0 0 8px; font-size: 17px; }
.оплата-цена { margin: 0 0 12px; font-size: 17px; }
.оплата .согласие {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.4;
}
.оплата-отказ {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 15px;
}
/* Заголовки габаритов в две строки: имя сверху, ось снизу.
   Столбец меряется по ширине числа, а не по ширине заголовка. */
.загол-верх, .загол-низ { display: block; line-height: 1.15; }
/* Ось выделяется НЕ весом: у OpenGost Type B единственное начертание, и
   всякий иной вес подставится чужой гарнитурой — буквы поедут посреди
   таблицы. Выделяем цветом, он у гарнитуры один на все веса. */
.загол-низ { color: var(--text-main); }

/* Действия над строкой спецификации: значки без рамки, чтобы не спорить с
   полями ввода в той же строке. */
.действия { white-space: nowrap; }
.значок {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 2px 5px;
  color: var(--text-muted);
}
.значок:hover { color: var(--text-main); }
/* Копия строки помечается: человек должен видеть, что это не отдельный
   чертёж, а дубль. */
tr.копия td:first-child { color: var(--accent); }

.подборы {
  margin: 6px 0 10px;
  font-size: 15px;
  color: var(--text-muted);
}
.нет-остатка {
  margin: 6px 0 4px;
  font-size: 15px;
  color: var(--text-muted);
}

/* --- Состояние очереди ------------------------------------------------
 *
 * Строка появляется между заданием и результатом — там, где пользователь
 * смотрит после нажатия «рассчитать». Она обязана быть заметной без крика:
 * человек уже ждёт, и мигающее пятно на минуту ожидания раздражает.
 *
 * Ровные цифры не украшение: число заданий впереди меняется при каждом
 * опросе, и строка не должна дёргаться по ширине.
 */
.ожидание {
  max-width: var(--pco-work-max);
  margin: 12px auto 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ожидание-справка {
  max-width: var(--pco-work-max);
  margin: 8px auto 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Отказ от ожидания — второстепенное действие, и выглядеть должно
   второстепенно: оформлено как `ghost` общего листа. Золотой, как «главная»,
   оно соперничало бы с расчётом за нажатие. */
.снять:hover { border-color: var(--danger); color: var(--danger); }

/* --- Правовые страницы -------------------------------------------------
 *
 * Оферта, тарифы и реквизиты обязаны быть доступны без входа: банк проверяет
 * сайт перед заключением договора эквайринга, и отсутствие этих страниц —
 * прямое основание для отказа.
 */
.крошки { margin: 0 0 8px; font-size: 16px; color: var(--text-muted); }
.крошки a { color: var(--accent); text-decoration: none; }
.крошки a:hover { text-decoration: underline; }
.редакция { margin: 4px 0 0; font-size: 16px; color: var(--text-muted); }

.правовой { max-width: var(--pco-work-max); margin-inline: auto; }
.правовой h2 { margin: 26px 0 10px; font-size: 18px; letter-spacing: .04em; }
.правовой h2:first-child { margin-top: 0; }
.правовой p { margin: 0 0 10px; text-align: justify; }

.реквизиты, .тарифы { margin: 8px 0 16px; }
.реквизиты th, .тарифы th, .тарифы td { vertical-align: top; }
.реквизиты th { width: 34%; }

.примечание {
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--ax-radius-base);
  font-size: 16px;
}

/* --- Подвал приложения ------------------------------------------------
 *
 * Подвал сайта (`ax-footer`) живёт в теме и сюда ещё не надет. Этот — свой, с
 * правовыми ссылками, без которых банк не заключает договор эквайринга.
 */
.подвал {
  max-width: var(--pco-work-max);
  margin: 0 auto;
  padding: 22px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  color: var(--text-muted);
}
.подвал-строка { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 8px; }
.подвал a { color: var(--accent); text-decoration: none; }
.подвал a:hover { text-decoration: underline; }
.подвал .приглушённая { font-size: 15px; }

/* --- Исключение детали и правка набора листов (выпуск 21) -------------- */

.спец-таблица td.середина,
.раскрои-таблица td.середина { text-align: center; }

/* Исключённая деталь остаётся видимой, но приглушена: вернуть её должно быть
   так же просто, как исключить, а видно это должно быть с одного взгляда. */
.спец-таблица tr.исключена td { opacity: .45; }
.спец-таблица tr.исключена input.правка { text-decoration: line-through; }
.спец-таблица tr.исключена input.правка-участие { opacity: 1; }

/* Кнопки правки набора листов. Мелкие и без заливки: действие частое, но
   второстепенное — соперничать с «Рассчитать» им незачем. */
.лист-кнопка {
  width: 26px;
  height: 26px;
  margin: 0 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--ax-radius-base);
  background: var(--bg-panel);
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.лист-кнопка:hover { border-color: var(--accent); color: var(--accent); }
.лист-кнопка.убрать:hover { border-color: var(--danger); color: var(--danger); }

/* --- Параметрическая библиотека (выпуск 23) ---------------------------- */

.чертёж-детали {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--ax-radius-base);
  min-height: 120px;
}

/* Деталь ватманом по графиту — тем же приёмом, что и карта раскроя: на
   тёмном поле видны и контур, и наложения, если они появятся. Здесь
   наложений быть не должно вовсе, но приём тот же, чтобы человек узнавал
   деталь на обеих страницах. */
/* Чертёж детали: тело, обводка, кромка отверстий.
 *
 * С поставкой 2 разметка переменилась: тело детали рисуется ОДНИМ узлом
 * `<path>` с чётно-нечётным правилом, и отверстия в нём — настоящие дыры, а
 * не пятна цвета фона. Прежние правила накрыли бы их: обводка заливалась
 * `--ax-color-bg` и ложилась поверх тела.
 *
 * Правила ниже написаны нами, а не пришли с поставкой: приложенный к ней лист
 * добавляет сетку и штриховую окружность, а `.тело` и `.кромка-отверстий` не
 * объявляет вовсе. Замерено разбором разметки: отрисовка даёт три узла,
 * лист знал об одном. Проекту библиотеки сообщено.
 *
 * `<path>` без правила заливки в SVG **чёрен по умолчанию** — то есть
 * недостающее правило дало бы не бледную деталь, а чёрное пятно.
 */
.деталь-чертёж { max-width: 100%; height: auto; }
.деталь-чертёж .тело path {
  fill: var(--bg-panel);
  stroke: none;
}
.деталь-чертёж .контур polygon {
  fill: none;
  stroke: var(--ax-color-text);
  stroke-width: 1.4;
}
.деталь-чертёж .кромка-отверстий polygon {
  fill: none;
  stroke: var(--ax-color-text);
  stroke-width: 1.1;
}
.деталь-чертёж .выноска {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.деталь-чертёж .размер {
  font-size: 13px;
  fill: var(--text-muted);
}

/* Отказ построения показывается ВМЕСТО чертежа: годная деталь на экране
   рядом с сообщением об ошибке читается как «ошибка не про эту деталь». */
.отказ-строка {
  margin: 12px 0 0;
  padding: 8px 12px;
  background: rgba(178, 58, 46, .10);
  border-left: 3px solid var(--danger);
  border-radius: var(--ax-radius-base);
  color: var(--danger);
}


/* ============================================================================
   ВОСПОЛНЕНИЕ ОБЩЕГО СЛОЯ — СНЯТО 23.08.2026
   ============================================================================

   Здесь лежали правила выпуска 36: объявление трёх переменных, карточка блока
   перехода, порог девиза 1322 вместо 1687, снятие наложения и разведение
   липкости.

   **Все они сняты**, потому что редакция 5 заготовки закрыла причину, а не
   следствие: применяются объявленные имена переменных, а выравнивание
   названия по середине задано самой заготовкой и потому перестало быть
   предположением.

   Держать восполнение дольше нужного нельзя — два листа, правящих одно,
   расходятся. Проверка `check_look` сторожит, что применяемые переменные
   объявлены; после переноса они объявлены в общем слое, и наше объявление
   стало бы вторым.

   ЧТО ИЗ ТОГО ВЫПУСКА ОСТАЛОСЬ И ПОЧЕМУ:

   · разведение липкости — девиз уезжает, блок перехода остаётся. Указание
     Правообладателя от 23.08.2026; в заготовке редакции 5 обе колонки
     по-прежнему липкие одним правилом. Оставлено у нас и сообщено составителю;
   · переход в библиотеку — наш, к общему облику отношения не имеет.
   ---------------------------------------------------------------------------- */

/* ============================================================================
   ВРЕМЕННЫЕ ВОСПОЛНЕНИЯ ОБЩЕГО СЛОЯ — СНЯТЫ 23.08.2026
   ============================================================================

   Здесь лежали три правила выпусков 36 и 39:

     · объявление трёх переменных оформления;
     · опора наложенного девиза и назначение ему ячейки сетки;
     · разведение липкости — девиз уезжает, блок перехода остаётся.

   **Все три вошли в общий слой**: первое редакцией 5 заготовки, второе и
   третье — редакцией 7. Держать восполнение дольше нужного нельзя: два листа,
   правящих одно, расходятся, и разойдутся молча.

   Разведение липкости было НАШЕЙ надстройкой; составитель принял её и сделал
   общей. Довод, который мы приводили, записан теперь в самой заготовке: при
   внесении следующей редакции девиз прилипнет снова, а ОТСУТСТВИЕ правила
   прочтётся как «об этом не думали».

   ЧТО ОСТАЛОСЬ НАШИМ И ПОЧЕМУ:

   · условия расчёта — вынесены из шапки в тело страницы решением
     Правообладателя от 23.08.2026. Общим их не делают: шапка называет два
     текста, а третий сделал бы шапки разными;
   · отступ `.intro` — наш, заготовка его не задаёт;
   · переход в параметрическую библиотеку — к общему облику отношения не
     имеет.
   ---------------------------------------------------------------------------- */

/* Переход в параметрическую библиотеку у поля выбора файлов. Приглушён: это
   запасной путь, а не основной, и спорить с полем он не должен. */
.к-библиотеке {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}
.к-библиотеке a { color: var(--text); }

/* ПРАВКА К ОБЩЕМУ ФАЙЛУ app/static/style.css
 *
 * Библиотека, поставка 2. Дописать в конец раздела стилей библиотеки.
 * Файл общий (основная сессия), поэтому передаётся текстом, а не заменой.
 *
 * Что добавляется: сетка эскизов на шаге выбора фигуры и штриховая
 * окружность расположения отверстий на чертеже.
 */

/* --- Вкладки групп ---------------------------------------------------- */

.вкладки-групп {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.вкладка-группы {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.вкладка-группы.выбрана {
  border-color: var(--ax-color-accent);
}

.вкладка-группы .счётчик {
  opacity: .6;
  font-size: .85em;
}

/* --- Сетка эскизов ---------------------------------------------------- */
/*
 * Ширина клетки задана НИЖНИМ пределом, а не числом клеток в ряду: сколько
 * их поместится, решает экран. Задай мы «четыре в ряд», на телефоне клетка
 * стала бы шириной в палец, и эскиз в ней перестал бы читаться — а он и есть
 * весь смысл сетки.
 */
.сетка-фигур {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.клетка-фигуры {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.клетка-фигуры:hover,
.клетка-фигуры:focus-visible {
  border-color: var(--ax-color-accent);
}

.клетка-фигуры__эскиз svg {
  width: 100%;
  height: auto;
  max-height: 170px;
  display: block;
}

.клетка-фигуры__подпись {
  font-size: .82em;
  line-height: 1.25;
  opacity: .85;
}

.страницы {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

/* --- Выбранная фигура -------------------------------------------------- */

.выбранная {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.выбранная__эскиз svg {
  width: 150px;
  height: auto;
  display: block;
}

.выбранная__название {
  margin: 0 0 4px;
}

/* --- Штриховая окружность расположения отверстий ----------------------- */
/*
 * Дефект, найденный осмотром чертежа 23.08.2026: подпись «⌀M» ставилась, а
 * самой окружности не рисовалось — подпись указывала в пустоту и читалась
 * как обозначение ближайшего болтового отверстия.
 *
 * Штрих-пунктир — чертёжная норма для осевых и вспомогательных линий.
 */
.деталь-чертёж .ось-отверстий {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 8 4 2 4;
  opacity: .7;
}

/* --- Перечень добавленного за приход ---------------------------------- */
/*
 * Что человек добавил в задание, не уходя со страницы. Ошибка в толщине
 * должна быть видна в тот миг, когда сделана, а не после перехода к расчёту.
 */
.добавленное {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.добавленное ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: .85em;
}

.добавленное li { line-height: 1.4; }

/* --- Эскиз детали в строке спецификации ------------------------------- */
/*
 * Клетка узкая и постоянной ширины: столбец, гуляющий по строкам, ломает
 * сверку чисел сверху вниз — а ради неё таблица и заведена.
 *
 * Разметку рисует та же `svg_детали`, что и чертёж на странице построения;
 * узлы у неё те же три, и правила ниже повторяют чертёжные, различаясь лишь
 * толщиной линий: на пятидесяти точках чертёжные 1,4 залили бы деталь
 * сплошной обводкой.
 */
.эскиз-клетка {
  width: 58px;
  padding: 2px 4px;
  text-align: center;
}
.деталь-эскиз {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
.деталь-эскиз .тело path {
  /* Полупрозрачный тон чернил из палитры — НЕ цвет фона.
   *
   * Дефект выпуска 45: тело заливалось `--bg-panel`, то есть тем же цветом,
   * что и панель под таблицей. Тело сливалось с фоном, отверстие прозрачно —
   * и дыра была неотличима от тела. Проступало это лишь на строке под
   * указателем, где фон меняется на `--bg-soft`.
   *
   * Заливка цветом фона — не дыра, а заплата: ровно то, за что мы правили
   * поставку библиотеки, и повторено нами же через день.
   *
   * Тон обязан отличаться от ОБОИХ фонов строки — покойного и наведённого, —
   * иначе деталь пропадает в одном из двух состояний. Полупрозрачный
   * `--ax-color-border` (чернила при 16 %) ложится поверх любого из них и
   * остаётся виден на обоих; отверстие показывает тот фон, что под ним, и
   * потому читается дырой всегда.
   */
  fill: var(--ax-color-border);
  stroke: none;
}
.деталь-эскиз .контур polygon {
  fill: none;
  stroke: var(--ax-color-text);
  stroke-width: 2.2;
}
.деталь-эскиз .кромка-отверстий polygon {
  fill: none;
  stroke: var(--ax-color-text);
  stroke-width: 1.8;
}

/* Пояснение к пометкам источника под таблицей спецификации. */
.пояснение-пометок {
  margin: 8px 0 0;
  font-size: .9em;
  color: var(--text-muted);
}
.пояснение-пометок .источник { margin-left: 0; margin-right: 2px; }