/* Дорожный калькулятор. Стили отдельным файлом и подключаются со страницы:
   правки styles.css у Битрикса доезжают не всегда (объединение файлов).

   Оформление — как на остальном сайте (шаблон lin7), не «своё красивое»:
     рамки        1px #c4c4c4, скругление 5px
     контролы     высотой 40px, размер 16px, letter-spacing .04em
     кнопки       белые; наведение — текст #f9a973, фон #f5f5f5
     заголовки    #192033, вес 600
   Заглавными не пишем ничего: сайт так оформляет только крупные заголовки
   разделов, а в плотном интерфейсе с десятком подписей читать капслок тяжело.
     фокус        outline 2px #0064a2 (как в форме входа)
     ошибка       #e53935
   Шрифт не задаём вовсе: пусть наследуется от страницы (Qanelas / Istok Web),
   иначе калькулятор будет выделяться среди остального текста.

   Переменные объявлены на самом блоке, чтобы шкурку можно было переопределить
   во фрейме на сайте производителя. */
.lc {
    --lc-ink: #192033;        /* заголовки и тёмные плашки сайта */
    --lc-text: #000;
    --lc-muted: #6b6b6b;
    --lc-accent: #f9a973;     /* фирменный оранжевый: наведение и выбор */
    --lc-line: #c4c4c4;
    --lc-line-2: #ededed;
    --lc-grey: #f5f5f5;
    --lc-sand: #f9e8d6;
    --lc-focus: #0064a2;
    --lc-ok: #2e7d32;
    --lc-bad: #e53935;

    margin: 30px 0 10px;
    color: var(--lc-text);
    /* Шрифт сайта задаём явно. На страницах расчётов он объявлен у отдельных
       селекторов (.b-section p и другие), а не у body, поэтому по наследству
       калькулятору доставался шрифт браузера — и блок выбивался из страницы. */
    font-family: Qanelas, "Istok Web", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.04em;
}
.lc *, .lc *::before, .lc *::after { box-sizing: border-box; }
/* Атрибут hidden должен побеждать наши display: класс весит больше правила
   браузера, и скрытые блоки оставались на виду (ссылка на карточку каталога
   висела на отдельной странице, где каталога нет). */
.lc [hidden] { display: none; }
/* Форма слева, результат справа. Колонка формы сжимается до 300px: при
   жёстких 400px вёрстка складывалась в одну колонку уже на 1000px, и на
   ноутбуке с шириной содержимого 960px результат уезжал на 1200px вниз —
   человек видел длинную форму и решал, что расчёт никуда не выводится
   (замечание с созвона 30.09.2026). */
.lc__cols { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 20px; align-items: start; }

/* --- шаги --- */
.lc-step { border: 1px solid var(--lc-line); border-radius: 5px; background: #fff; margin-bottom: 12px; }
.lc-step__h { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 15px; cursor: pointer; }
.lc-step__n { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--lc-line); color: #fff; font-size: 15px; }
.lc-step.is-open .lc-step__n { background: var(--lc-ink); }
.lc-step__t { font-weight: 600; font-size: 16px; color: var(--lc-ink); }
.lc-step__v { margin-left: auto; min-width: 0; max-width: 58%; color: var(--lc-muted); font-size: 14px;
    text-align: right; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-step__b { display: none; padding: 16px 15px 18px; border-top: 1px solid var(--lc-line-2); }
.lc-step.is-open .lc-step__b { display: block; }

/* --- поля --- */
.lc-fld { display: block; font-size: 14px; color: var(--lc-muted); margin-bottom: 14px; }
.lc-fld input, .lc-fld select { display: block; width: 100%; margin-top: 5px; height: 40px; padding: 0 12px;
    border: 1px solid var(--lc-line); border-radius: 5px; background: #fff;
    font: inherit; font-size: 16px; color: var(--lc-text); }
.lc-fld input:focus, .lc-fld select:focus { outline: 2px solid var(--lc-focus); outline-offset: 1px; }
.lc-row1 { display: block; }
.lc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lc-row2[hidden], .lc-row1[hidden] { display: none; }
.lc .lc-hint { margin: 8px 0 0; color: var(--lc-muted); font-size: 14px; line-height: 1.5; }

/* --- переключатели частей улицы ---
   Тот же вид, что у выбора расчёта на соседней странице: белая плашка с
   рамкой, выбранная — серый фон и оранжевый текст. */
.lc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lc-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 5px 18px;
    border: 1px solid var(--lc-line); border-radius: 5px; background: #fff;
    font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
    color: var(--lc-text); cursor: pointer; }
.lc-chip:hover { color: var(--lc-accent); background: var(--lc-grey); }
.lc-chip.is-on { background: var(--lc-grey); color: var(--lc-accent); border-color: var(--lc-line); }
.lc-chip.is-fixed { cursor: default; color: var(--lc-muted); }
.lc-chip.is-fixed:hover { color: var(--lc-muted); background: var(--lc-grey); }
.lc-chip:focus-visible { outline: 2px solid var(--lc-focus); outline-offset: 1px; }

/* --- кнопки, как на сайте --- */
.lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
    padding: 5px 35px; border: 1px solid var(--lc-line); border-radius: 5px; background: #fff;
    font: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.04em;
    color: var(--lc-text); text-decoration: none; cursor: pointer; }
.lc-btn:hover { color: var(--lc-accent); background: var(--lc-grey); text-decoration: none; }
.lc-btn:focus-visible { outline: 2px solid var(--lc-focus); outline-offset: 1px; }
/* Главное действие — тёмная плашка цвета шапки и подвала: на сайте нет
   залитых акцентом кнопок, а «Рассчитать» должна читаться первой. */
.lc-btn--main { background: var(--lc-ink); border-color: var(--lc-ink); color: #fff; }
.lc-btn--main:hover { background: var(--lc-ink); border-color: var(--lc-ink); color: var(--lc-accent); }
.lc-btn--wide { width: 100%; min-height: 50px; font-size: 18px; }
.lc-btn[disabled] { background: #fff; border-color: var(--lc-line); color: #b4b4b4; cursor: default; }
.lc-btn[disabled]:hover { background: #fff; color: #b4b4b4; }
.lc-run { position: sticky; bottom: 0; padding-top: 12px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%); }

/* --- карточка светильника --- */
.lc-lum { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 14px; }
.lc-lum__img { width: 80px; height: 80px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--lc-line-2); border-radius: 5px; background: #fff; }
.lc-lum__img img { max-width: 100%; max-height: 100%; }
/* Названия исполнений — длинные и без пробелов: «…У1(827/D/X/RAL7040/…)».
   Без переноса по любому знаку такая строка вылезает за карточку, а
   min-width: 0 нужен, чтобы текстовая колонка вообще могла сжиматься:
   у флекс-элемента ширина по умолчанию не меньше содержимого. */
.lc-lum__text { min-width: 0; }
.lc-lum__name { font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--lc-ink);
    overflow-wrap: anywhere; }
.lc-lum__meta { overflow-wrap: anywhere; }
.lc-lum__meta { color: var(--lc-muted); font-size: 14px; margin-top: 5px; }
.lc-lum__link { display: inline-block; margin-top: 5px; color: var(--lc-text); font-size: 14px; text-decoration: underline; }
.lc-lum__link:hover { color: var(--lc-accent); }

/* --- результат --- */
.lc__result { border: 1px solid var(--lc-line); border-radius: 5px; background: #fff; padding: 20px; min-height: 340px; }
.lc-placeholder b { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600;
    color: var(--lc-ink); }
.lc .lc-placeholder p { margin: 0; color: var(--lc-muted); font-size: 16px; line-height: 1.7; max-width: 62ch; }

/* План помещения (промышленный расчёт). Показывается до расчёта и живёт
   дальше рядом с результатом: раскладка светильников понятнее числами не
   объясняется. */
.lc-plan { margin-bottom: 20px; }
.lc-plan svg { display: block; width: 100%; height: auto; background: var(--lc-grey);
    border: 1px solid var(--lc-line); border-radius: 5px; }
.lc-plan__room { fill: #fff; stroke: var(--lc-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lc-plan__axis { stroke: var(--lc-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.lc-plan__lum { fill: var(--lc-accent); stroke: #e0863c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc .lc-plan__note { margin: 8px 0 0; color: var(--lc-muted); font-size: 14px; }

.lc-sum { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.lc-sum > div { flex: 1; min-width: 150px; padding: 12px 15px; border: 1px solid var(--lc-line); border-radius: 5px; background: var(--lc-grey); }
.lc-sum span { display: block; color: var(--lc-muted); font-size: 13px; }
.lc-sum b { font-size: 24px; font-weight: 600; color: var(--lc-ink); }
.lc-sum b.is-bad { color: var(--lc-bad); }
.lc-sum b.is-ok { color: var(--lc-ok); }

.lc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.lc-tab { min-height: 40px; padding: 5px 20px; border: 1px solid var(--lc-line); border-radius: 5px; background: #fff;
    font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
    color: var(--lc-text); cursor: pointer; }
.lc-tab:hover { color: var(--lc-accent); background: var(--lc-grey); }
/* Выбранная вкладка — как отмеченная вкладка в форме входа: белым по серому. */
.lc-tab.is-on { background: var(--lc-line); border-color: var(--lc-line); color: #fff; }
.lc-tab:focus-visible { outline: 2px solid var(--lc-focus); outline-offset: 1px; }

.lc-sect { margin-bottom: 22px; }
.lc-sect__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
    font-size: 16px; font-weight: 600; color: var(--lc-ink); }
.lc-sect__h em { font-style: normal; font-weight: 400; color: var(--lc-muted);
    font-size: 13px; margin-left: auto; }
.lc-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.lc-tbl td { padding: 9px 8px; border-top: 1px solid var(--lc-line-2); }
.lc-tbl tr:first-child td { border-top: 1px solid var(--lc-line); }
.lc-tbl td.v { font-weight: 600; text-align: right; width: 84px; }
.lc-tbl td.n { color: var(--lc-muted); text-align: right; width: 72px; }
.lc-tbl td.s { width: 34px; text-align: center; font-weight: 600; }
.lc-tbl td.s.is-ok { color: var(--lc-ok); }
.lc-tbl td.s.is-bad { color: var(--lc-bad); }
.lc-tbl tr.is-bad td.v { color: var(--lc-bad); }

.lc-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lc-maps figure { margin: 0; }
.lc-maps img { width: 100%; border: 1px solid var(--lc-line); border-radius: 5px; background: #fff; }
.lc-maps figcaption { margin-top: 8px; color: var(--lc-muted); font-size: 14px; text-align: center; }
.lc-empty { padding: 32px 16px; text-align: center; color: var(--lc-muted); font-size: 16px; }

.lc-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lc-line-2); }
.lc .lc-note { margin: 12px 0 0; color: var(--lc-muted); font-size: 14px; line-height: 1.5; }

/* --- выбор светильника --- */
.lc-modal { position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center;
    background: rgba(25, 32, 51, .6); }
.lc-modal[hidden] { display: none; }
.lc-modal__box { width: min(620px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 5px; padding: 20px; }
.lc-modal__head { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.lc-modal__head b { flex: 1; min-width: 0; font-size: 18px; font-weight: 600;
    color: var(--lc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Возврат от исполнений к списку серий. */
.lc-modal__back { flex: none; margin-right: 12px; padding: 4px 10px; border: 1px solid var(--lc-line);
    border-radius: 5px; background: #fff; font: inherit; font-size: 13px; color: var(--lc-ink-2, #435267);
    cursor: pointer; }
.lc-modal__back:hover { color: var(--lc-accent); background: var(--lc-grey); }
.lc-modal__back[hidden] { display: none; }
.lc-modal__search[hidden] { display: none; }
.lc-modal__close { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--lc-line); cursor: pointer; }
.lc-modal__close:hover { color: var(--lc-accent); }
.lc-modal__search { width: 100%; height: 40px; padding: 0 15px; border: 1px solid var(--lc-line); border-radius: 5px;
    font: inherit; font-size: 16px; margin-bottom: 14px; }
.lc-modal__search:focus { outline: 2px solid var(--lc-focus); outline-offset: 1px; }
.lc-modal__list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.lc-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid var(--lc-line-2);
    border-radius: 5px; background: #fff; cursor: pointer; text-align: left; font: inherit; letter-spacing: 0.04em; }
.lc-item:hover { border-color: var(--lc-line); background: var(--lc-grey); }
.lc-item img, .lc-item i { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; background: #fff; }
.lc-item span { min-width: 0; }
.lc-item b { display: block; font-size: 15px; font-weight: 600; color: var(--lc-ink); overflow-wrap: anywhere; }
.lc-item em { display: block; font-style: normal; font-size: 13px; color: var(--lc-muted); }

/* Ниже 880px вторая колонка становится уже 350px: таблицы и карты в ней уже
   не читаются, поэтому складываемся в одну колонку — но результат ставим
   первым. */
@media (max-width: 880px) {
    .lc__cols { grid-template-columns: 1fr; }
    .lc-maps { grid-template-columns: 1fr; }
    .lc-run { position: static; }
    /* В одну колонку результат встаёт ПЕРВЫМ: под формой в полтора экрана
       высотой его попросту не находят. */
    .lc__result { order: -1; }
}

/* Телефон. Заголовок шага переносит подпись на свою строку, поля идут в один
   столбец: иначе строка «2+2 полос · 2 тротуара» распирает блок вбок. */
@media (max-width: 560px) {
    .lc { font-size: 15px; }
    .lc-step__h { flex-wrap: wrap; }
    .lc-step__v { width: 100%; max-width: none; margin: 2px 0 0 38px; text-align: left; }
    .lc-row2 { grid-template-columns: 1fr; }
    .lc-btn { padding: 5px 18px; font-size: 15px; }
    .lc-chip { padding: 5px 12px; font-size: 13px; }
    .lc-sum > div { min-width: 100%; }
    .lc__result { padding: 15px; }
    .lc-tbl { font-size: 14px; }
    .lc-tbl td { padding: 8px 4px; }
}

/* Печать: только итог, без формы и служебных кнопок. */
/* Печать самой страницы: отчёт открывается отдельным окном (кнопка «Отчёт»),
   но если человек всё же печатает страницу, форма и вкладки на бумаге не нужны. */
@media print {
    .lc__cols { display: block; }
    .lc__form, .lc-tabs, .lc-acts, .lc-modal { display: none !important; }
    .lc__result { border: 0; padding: 0; }
    .lc-panel[hidden] { display: block !important; }
    .lc-maps, .lc-metrics { break-inside: avoid; }
}

/* Показатели с нормами — главный ответ калькулятора, поэтому они не во
   вкладке, а всегда под картой. */
.lc-metrics { margin-top: 18px; }

/* --- кривая силы света --- */
.lc-lum__tabs { display: flex; gap: 8px; margin-top: 12px; }
.lc-lum__tabs .lc-tab { min-height: 34px; padding: 4px 14px; font-size: 13px; }
.lc-lum__panel { margin-top: 12px; }
.lc-kss { display: block; width: 100%; max-width: 260px; margin: 0 auto; }
.lc-kss__grid { fill: none; stroke: var(--lc-line-2); stroke-width: 1; }
.lc-kss__c0 { fill: none; stroke: var(--lc-ink); stroke-width: 2; }
.lc-kss__c90 { fill: none; stroke: var(--lc-accent); stroke-width: 2; stroke-dasharray: 5 4; }
.lc-kss__cap { fill: var(--lc-muted); font-size: 11px; }
.lc-kss__legend { display: flex; justify-content: center; gap: 16px; font-size: 12.5px; color: var(--lc-muted); }
.lc-kss__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-kss__legend span::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--lc-ink); }
.lc-kss__legend .is-c90::before { border-top: 2px dashed var(--lc-accent); }

/* Анимация загрузки.
   Пока движок считает, на местах будущих чисел лежат серые плашки с бегущим
   бликом. Это спокойнее, чем показывать прикидку и через секунду переписывать
   её настоящими числами: человек видит, что идёт работа, и ничего не прыгает. */
.lc-skel {
  display: inline-block;
  min-width: 64px;
  height: 1em;
  vertical-align: middle;
  border-radius: 4px;
  background: #ececec linear-gradient(90deg, #ececec 0%, #f7f7f7 40%, #ececec 80%);
  background-size: 300% 100%;
  animation: lc-skel 1.4s ease-in-out infinite;
}
.lc-skel--wide { min-width: 120px; }
.lc-plan.is-loading { min-height: 220px; border-radius: 8px; }
.lc-plan.is-loading svg,
.lc-plan.is-loading p { display: none; }

@keyframes lc-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Движение отвлекает и мешает тем, кто его не переносит: если в системе
   выключены анимации, плашки просто серые. */
@media (prefers-reduced-motion: reduce) {
  .lc-skel { animation: none; }
}

/* --- отчёт ---------------------------------------------------------------
   Слой поверх страницы: новое окно браузеры режут даже после щелчка. На
   печати правило по прямым детям body оставляет на бумаге только его. */
/* Переменные объявлены на .lc, а слой лежит в body — повторяем те, что нужны
   ему самому, иначе кнопки в шапке остаются без цвета и рамок. */
.lc-rep { position: fixed; inset: 0; z-index: 2000; overflow: auto;
    --lc-ink: #192033; --lc-text: #000; --lc-muted: #6b6b6b; --lc-accent: #f9a973;
    --lc-line: #c4c4c4; --lc-line-2: #ededed; --lc-grey: #f5f5f5; --lc-focus: #0064a2;
    background: var(--lc-grey);
    font-family: Qanelas, "Istok Web", Arial, sans-serif; color: var(--lc-ink); }
.lc-rep__bar { position: sticky; top: 0; z-index: 1; display: flex; gap: 10px;
    padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--lc-line); }
.lc-rep__body { padding: 16px 0 32px; }
.lc-rep__page { position: relative; box-sizing: border-box; width: 210mm; min-height: 297mm;
    margin: 0 auto 16px; padding: 18mm 16mm 22mm; background: #fff; border: 1px solid var(--lc-line); }
.lc-rep__h { margin: 0 0 12mm; font-size: 17px; letter-spacing: .04em; }
.lc-rep__page h3 { margin: 0 0 5mm; font-size: 15px; }
.lc-rep__tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8mm; }
.lc-rep__tbl th, .lc-rep__tbl td { padding: 6px 8px; border-bottom: 1px solid var(--lc-line-2);
    text-align: left; vertical-align: top; }
.lc-rep__tbl th { width: 55%; font-weight: 400; color: var(--lc-muted); }
.lc-rep__lum { display: flex; gap: 8mm; align-items: flex-start; margin-bottom: 8mm; }
.lc-rep__lum img { width: 70mm; height: auto; border: 1px solid var(--lc-line-2); border-radius: 5px; }
.lc-rep__fig { margin: 0 0 8mm; }
.lc-rep__fig img { width: 100%; height: auto; border: 1px solid var(--lc-line-2); border-radius: 5px; }
.lc-rep__foot { position: absolute; left: 16mm; right: 16mm; bottom: 12mm; display: flex;
    justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--lc-line-2);
    font-size: 11px; color: var(--lc-muted); }
/* Заголовок таблицы показателей внутри отчёта: подпись «расчёт / норма» уже
   есть в шапке страницы, дублировать её в каждом разделе незачем. */
.lc-rep .lc-sect__h em { display: none; }
.lc-rep .lc-maps figure { break-inside: avoid; }

@media (max-width: 760px) {
    .lc-rep__page { width: auto; min-height: 0; padding: 20px 16px 28px; }
    .lc-rep__foot { position: static; margin-top: 16px; }
    .lc-rep__lum { flex-direction: column; }
    .lc-rep__lum img { width: 100%; }
}

@media print {
    html.lc-report-open body > *:not(.lc-rep) { display: none !important; }
    .lc-rep { position: static; overflow: visible; background: #fff; }
    .lc-rep__bar { display: none; }
    .lc-rep__body { padding: 0; }
    .lc-rep__page { width: auto; margin: 0; border: 0; page-break-after: always; }
}