#configurator-container{
    height: 100%;
    width: 100%;
    min-height: 100%;
    display: block;
}

/* Высота поля - до первой раскладки. Затем ее ставит отрисовщик (Drawer, updateFieldHeight):
   два этажа секций с просветом и равные полосы сверху и снизу под подпись края поля и
   присоединения на верхней и нижней грани секции (клапан, гибкая вставка). Обе высоты
   совпадают: по facility-field отрисовщик центрирует этажи, droppable-field - видимая рамка поля. */
#droppable-field{
    height: 20rem;
    width: 100%;
    position: relative;
}

#facility-field{
    position: relative;
    height: 20rem;
    width: 70%;
    left: 15%;
 }

#components-field{
    width: 100%;
    position: relative;
    margin-bottom: 0.625rem;
    text-align: center;
}

.component-image{
    padding: 0.625rem;
    display: inline-block;
    background-color: white;
}

.img-thumbnail{
    float: left;
    border: none;
    height: 3.875rem;
}

/* Подписи краев поля сборки: чем является верх и низ картинки при выбранной
   ориентации установки (см. Drawer.setBuildOrientation). */
#droppable-field .orientation-mark {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #c3cbd4;
    pointer-events: none;
    z-index: 0;
}

#droppable-field .orientation-mark-top {
    top: 0;
}

#droppable-field .orientation-mark-bottom {
    bottom: 0;
}

#droppable-field .orientation-mark span {
    position: absolute;
    font-size: 0.6875rem;
    line-height: 1.25rem;
    color: #8b96a3;
    white-space: nowrap;
    background: #fff;
    padding: 0 0.25rem;
}

/* подпись верхнего края - под линией, нижнего - над линией, обе внутри поля */
#droppable-field .orientation-mark-top span {
    top: 0.0625rem;
}

#droppable-field .orientation-mark-bottom span {
    top: -1.3125rem;
}

#droppable-field .orientation-mark-side {
    left: -0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

#droppable-field .orientation-mark-depth {
    right: -0.25rem;
}

/* Ориентация установки в шапке конфигуратора: дубль поля опросного листа. */
#build-orientation-bar {
    display: flex;
    align-items: center;
    margin-left: 0.9375rem;
    font-size: 0.8125rem;
    color: #55606c;
    white-space: nowrap;
}

#build-orientation-bar select {
    height: 1.875rem;
    /* ширина под самый длинный вариант («Горизонтальная» и переименования компаний) */
    min-width: 11.25rem;
    padding: 0 0.375rem;
    font-size: 0.8125rem;
    margin-left: 0.375rem;
}

/* Название установки в шапке конфигуратора: дубль поля опросного листа (после ориентации). */
#build-name-bar {
    display: flex;
    align-items: center;
    margin-left: 0.9375rem;
    font-size: 0.8125rem;
    color: #55606c;
    white-space: nowrap;
}

#build-name-bar label {
    margin: 0;
    font-weight: normal;
}

#build-name-bar input {
    height: 1.875rem;
    width: 15rem;
    padding: 0 0.375rem;
    font-size: 0.8125rem;
    margin-left: 0.375rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Ритм блоков страницы конфигуратора: шапка - лента конфигураций - поле сборки -
   строка объединения - палитра секций - кнопки - опросный лист. Между видимым содержимым
   соседних блоков один шаг 1rem (у палитры в него входит собственный отступ картинок
   0.625rem), опросный лист - новый раздел, перед его заголовком 2rem. Строка объединения
   держит высоту кнопок (min-height) и отстоит от поля на те же 0.625rem, что палитра от нее:
   подсказка и кнопки стоят ровно посередине между полем и палитрой. */
#configurator-toolbar {
    padding: 0.5rem 0;
}

.build-glider-wrap {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.build-glider-wrap .glider-prev,
.build-glider-wrap .glider-next {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}

#components-field {
    padding-top: 0;
    margin-bottom: 0;
}

#components-field .component-image {
    vertical-align: top;
}

#configurator-actions {
    margin-top: 0.375rem;
}

#configurator-actions .badge {
    margin-top: 0.5rem !important;
}

#censusPaperBody {
    margin-top: 0.875rem;
}

/* Окно «Код установки» (Configurator.showBuildCode): код целиком и расшифровка по потокам. */
#build-code-modal .modal-content {border: 0;border-radius: 16px;background: var(--ui-panel, #fff);color: var(--ui-text, #1a1a1c);box-shadow: 0 20px 48px rgba(20, 22, 30, 0.26);}
#build-code-modal .modal-header {border-bottom-color: var(--ui-line, #e9eaee);}
#build-code-modal .modal-title {font-weight: bold;font-size: 1.125rem;}
#build-code-modal .close {color: var(--ui-text, #1a1a1c);}
.build-code__raw {display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;}
.build-code__text {align-self: stretch;min-width: 0;max-height: 16rem;overflow: auto;margin: 0;padding: 0.625rem 0.75rem;font: 0.8125rem/1.5 SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;color: var(--ui-text, #1a1a1c);white-space: pre-wrap;background: var(--ui-fill, #eceef2);border-radius: 10px;user-select: all;}
.build-code__copy {flex: 0 0 auto;}
.build-code__part {white-space: nowrap;}
.build-code__note {margin-top: 0.75rem;font-size: 0.875rem;color: var(--ui-text-2, #55606c);}
.build-code__streams {display: flex;flex-wrap: wrap;gap: 1rem 2rem;margin-top: 1rem;}
.build-code__stream {flex: 1 1 18rem;min-width: 0;}
.build-code__title {margin-bottom: 0.375rem;font-weight: bold;font-size: 0.9375rem;}
.build-code__subtitle {margin-top: 0.5rem;font-size: 0.8125rem;color: var(--ui-text-2, #55606c);}
.build-code__empty {font-size: 0.875rem;color: var(--ui-muted, #8b8e97);}
.build-code__sections {margin: 0;padding-left: 1.5rem;font-size: 0.875rem;line-height: 1.6;}
.build-code__externals {margin: 0 0 0.125rem;padding-left: 1rem;list-style: none;color: var(--ui-text-2, #55606c);}
.build-code__externals li::before {content: "+ ";color: var(--ui-muted, #8b8e97);}
.build-code__side {color: var(--ui-text-2, #55606c);}
.build-code__guid {margin-left: 0.5rem;font: 0.75rem SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;color: var(--ui-muted, #8b8e97);}
.build-code__joins {margin-top: 1rem;font-size: 0.875rem;}
.build-code__joins ol {margin: 0;padding-left: 1.5rem;line-height: 1.6;}
.build-code__clipboard {position: fixed;top: 0;left: -9999px;}
.build-code__copy.btn {padding: 0.375rem 0.875rem;color: var(--ui-text, #1a1a1c);background: var(--ui-fill, #eceef2);border: 1px solid transparent;border-radius: var(--ui-radius, 10px);box-shadow: none;}
.build-code__copy.btn:hover {background: var(--ui-fill-strong, #dcdfe6);}

/* Объединение секций (Drawer): кружок выделения в углу секции и моноблока, подсказка под кнопками. */
#droppable-field .unit-marker {position: absolute;box-sizing: border-box;background: var(--ui-panel, #fff);border: 1.5px solid var(--ui-check-line, #9aa3b5);border-radius: 50%;cursor: pointer;transition: border-color 0.12s, background-color 0.12s;}
#droppable-field .unit-marker:hover {border-color: #335599;}
#droppable-field .unit-marker.is-selected {background: #f0a000;border-color: #f0a000;box-shadow: inset 0 0 0 2px #fff;}
#droppable-field.is-dragging .unit-marker {display: none;}

/* Переход к параметрам секции в опросном листе (Drawer.refreshSectionJumps, js/configurator/section-jump.js): значок
   в левом верхнем углу секции. Пока опросный лист строится - неактивен. */
#droppable-field .section-jump {position: absolute;display: flex;align-items: center;justify-content: center;box-sizing: border-box;margin: 0;padding: 0;line-height: 1;color: var(--ui-accent, #223f81);background: var(--ui-panel, #fff);border: 1px solid var(--ui-line-strong, #cfd2d9);border-radius: 50%;cursor: pointer;transition: background-color 0.12s, border-color 0.12s, opacity 0.12s;}
#droppable-field .section-jump:hover {color: var(--ui-on-primary, #1a1a1c);background: var(--ui-primary, #ffdb4d);border-color: var(--ui-primary, #ffdb4d);}
#droppable-field .section-jump:focus {outline: none;box-shadow: 0 0 0 2px var(--ui-focus-ring-strong, rgba(26, 26, 28, 0.14));}
#droppable-field .section-jump i {font-size: 0.5625rem;}
#droppable-field .section-jump.is-hidden {display: none;}
#droppable-field .section-jump.is-disabled,
#droppable-field .section-jump.is-disabled:hover {opacity: 0.4;cursor: progress;color: var(--ui-accent, #223f81);background: var(--ui-panel, #fff);border-color: var(--ui-line-strong, #cfd2d9);}
#droppable-field.is-dragging .section-jump {display: none;}
/* блок опросного листа, к которому перешли: строка - свой контекст наложения, слой подсветки под подписью и полями
   (z-index -1), высота слоя - до низа плавающего содержимого (section-jump.js) */
.section-jump-row {position: relative;z-index: 0;}
.section-jump-flash {position: absolute;z-index: -1;top: 0;left: 0;right: 0;border-radius: var(--ui-radius, 10px);pointer-events: none;animation: section-jump-flash 2s ease-out forwards;}
@keyframes section-jump-flash {
    0%, 40% {background-color: var(--ui-select, #fff6d1);box-shadow: 0 0 0 2px var(--ui-select-line, #f0b000);}
    100% {background-color: transparent;box-shadow: 0 0 0 2px transparent;}
}

/* Место секции при переносе (Drawer.updateDropMarks): подкрашенный этаж и полоса в зазоре, куда встанет секция;
   красная - сюда поставить нельзя (закроет клапан или ГВ сверху/снизу другой секции). Полоса - поверх
   переносимой секции: курсор обычно как раз над местом вставки. */
#droppable-field .drop-marks {position: absolute;top: 0;left: 0;width: 0;height: 0;pointer-events: none;}
#droppable-field .drop-marks__floor {position: absolute;background: rgba(240, 160, 0, 0.07);border-radius: 6px;}
#droppable-field .drop-marks__slot {position: absolute;z-index: 100001;background: #f0a000;border-radius: 2px;box-shadow: 0 0 0 2px rgba(240, 160, 0, 0.25);}
#droppable-field .drop-marks.is-blocked .drop-marks__floor {background: rgba(217, 48, 37, 0.06);}
#droppable-field .drop-marks.is-blocked .drop-marks__slot {background: #d93025;box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.25);}
/* строка объединения под полем: высота постоянная, чтобы палитра не прыгала при выделении */
#join-bar {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 0.5rem;min-height: 2.25rem;margin: 0.625rem 0 0;font-size: 0.8125rem;color: var(--ui-text-2, #55606c);}
#join-bar .join-bar__btn {padding: 0.25rem 0.875rem;font-size: 0.8125rem;line-height: 1.4;color: var(--ui-text, #1a1a1c);background: var(--ui-fill, #eceef2);border: 1px solid transparent;border-radius: var(--ui-radius, 10px);box-shadow: none;}
#join-bar .join-bar__btn:hover {background: var(--ui-fill-strong, #dcdfe6);}
#join-bar .join-bar__btn:disabled {color: var(--ui-muted, #8b8e97);background: var(--ui-fill-disabled, #f5f6f8);cursor: default;}
/* очистка конфигуратора необратима - при наведении красная, как сброс значения в окне настроек поля */
#join-bar .join-bar__btn[data-action="clear-all"]:hover {color: var(--ui-danger, #d93025);background: var(--ui-danger-bg, #fce8e6);}

/* Опросный лист пустого конфигуратора (buildCensusPaper с пустым кодом): вместо формы - пояснение. */
#censusPaperBody .census-empty {margin: 0.5rem 0 1rem;padding: 1.5rem 1.25rem;text-align: center;background: var(--ui-tint-hover, #f5f6f8);border-radius: var(--ui-radius-panel, 16px);}
#censusPaperBody .census-empty__title {font-weight: bold;font-size: 1.125rem;color: var(--ui-text, #1a1a1c);}
#censusPaperBody .census-empty__text {margin-top: 0.375rem;font-size: 0.9375rem;color: var(--ui-text-2, #55606c);}

/* ID и серия установки в строке конструктора (рядом с кнопкой закрытия) */
#configurator-build-info {display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 0.375rem;}
#configurator-build-info .badge {padding: 0.25rem 0.5rem;font-size: 0.8125rem;font-weight: normal;white-space: nowrap;color: var(--ui-text-2, #55606c);background: var(--ui-fill, #eceef2);border-radius: 6px;}