/* Карточка объекта: строка хода работы, липкая навигация, колонка раздела.
   Переменные и базовая типографика берутся из app.css — он не трогается. */

/* --- Ход работы ------------------------------------------------------- */

.steps {
    margin: 20px 0 8px;
}

.steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps-item {
    flex: 1 1 0;
    min-width: 120px;
}

.steps-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--ink-soft);
    text-decoration: none;
    border-top: 2px solid var(--line);
}

.steps-link:hover,
.steps-link:focus-visible {
    color: var(--ink);
}

.steps-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
}

.steps-title {
    font-size: 14px;
    line-height: 1.3;
}

/* Номер шага в кружке и подсказка мельче: шаг читается с одного взгляда */
.steps-num {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--ink-soft);
}

.steps-text {
    display: flex;
    flex-direction: column;
}

.steps-hint {
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink-soft);
}

.steps-done .steps-link {
    border-top-color: var(--clay);
    color: var(--ink-soft);
}

.steps-done .steps-dot {
    background: var(--clay);
}

.steps-done .steps-num {
    border-color: var(--clay);
    color: var(--clay);
}

.steps-active .steps-link {
    border-top-color: var(--ink);
    color: var(--ink);
    font-weight: 600;
}

.steps-active .steps-dot {
    background: var(--ink);
}

.steps-active .steps-num {
    border-color: var(--ink);
    color: var(--ink);
}

/* Свёрнутый вид для узкого экрана — показывается вместо полного списка */
.steps-mobile {
    display: none;
    margin: 16px 0 4px;
}

.steps-mobile > summary {
    padding: 10px 0;
    font-weight: 600;
    cursor: pointer;
}

/* --- Шапка карточки: факты бывшего «Обзора» и главное действие --------- */

/* Одна строка вместо отдельного раздела «Обзор»: значения через « · »,
   бледнее заголовка — факты читаются, но не кричат */
.card-facts-line {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Главное действие карточки — как .btn-primary на сайте. Сюда сведён
   .queue-action из app.css: построчно различались только white-space: nowrap
   у очереди, hover только на устройствах с hover и аутлайн фокуса вместо
   затемнения — эти отличия остались в app.css */
.card-btn-primary,
.queue-action {
    display: inline-block;
    padding: 8px 16px;
    background: var(--clay);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.card-btn-primary:hover,
.card-btn-primary:focus-visible {
    opacity: 0.9;
}

/* --- Под-вкладки внутри шага ------------------------------------------- */

.card-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

.card-tab {
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
}

.card-tab:hover,
.card-tab:focus-visible {
    color: var(--ink);
}

.card-tab-current {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--clay);
}

/* --- Свёрнутая история на шаге «Клиенту» ------------------------------- */

.card-history {
    margin-top: 24px;
}

.card-history summary {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
    cursor: pointer;
}

/* --- Шаг «Клиенту»: раздатка и копирование ссылки ---------------------- */

.handoff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.copy-field {
    display: flex;
    gap: 8px;
    align-items: center;
}

.copy-field code {
    font-size: 13px;
}

@media (max-width: 960px) {
    .handoff-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Раскладка -------------------------------------------------------- */

.card-body {
    /* Боковой навигации по разделам больше нет (карточка в четыре шага),
       поэтому содержимое шага занимает всю ширину */
    display: block;
    margin-top: 24px;
}

.card-nav {
    position: sticky;
    top: 24px;
}

.card-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line);
}

.card-nav-link {
    display: block;
    padding: 8px 0 8px 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.35;
}

.card-nav-link:hover,
.card-nav-link:focus-visible {
    color: var(--ink);
}

.card-nav-current .card-nav-link {
    border-left-color: var(--ink);
    color: var(--ink);
    font-weight: 600;
}

.card-content {
    min-width: 0;
}

.card-section-title {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 1.2;
}

/* --- Обзор ------------------------------------------------------------ */

.card-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 0;
}

.card-fact {
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.card-fact dt {
    margin: 0 0 4px;
    color: var(--ink-soft);
    font-size: 13px;
}

.card-fact dd {
    margin: 0;
    font-size: 17px;
}

/* --- Конструктор ------------------------------------------------------ */

.cons-param {
    display: grid;
    grid-template-columns: 1fr auto 9em auto;
    align-items: baseline;
    /* Без зазора значение, единица, источник и действия слипаются в кашу */
    column-gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.cons-param-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.cons-param-source {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.cons-param-off {
    color: var(--ink-soft);
    text-decoration: line-through;
}

.cons-param-actions {
    white-space: nowrap;
}

.cons-action {
    background: none;
    border: none;
    font-size: 13px;
    line-height: 1.4;
    color: var(--clay);
    text-decoration: underline;
    padding: 0 4px;
    cursor: pointer;
}

.cons-total {
    background: var(--clay-tint);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.cons-total-sum {
    font-weight: 600;
}

#constructor-totals .cons-total {
    font-size: 18px;
    line-height: 1.3;
}

/* Заголовок раздела внутри конструктора — обычная строка, а не акцент:
   цветом и жирностью здесь выделяются только суммы */
.cons-section .card-stage {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    margin-top: 32px;
}

.cons-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
    margin-bottom: 16px;
}

.cons-controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* --- Полоса доли ------------------------------------------------------ */

.share-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.share-bar {
    height: 100%;
    background-color: var(--clay-tint);
    border-radius: 4px;
}

/* --- Адаптив ---------------------------------------------------------- */

@media (max-width: 900px) {
    .card-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-nav {
        position: static;
    }

    .card-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 4px;
        border-left: 0;
    }

    .card-nav-link {
        padding: 6px 12px;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 14px;
    }

    .card-nav-current .card-nav-link {
        border-color: var(--ink);
    }
}

@media (max-width: 560px) {
    .steps,
    .tkp-print {
        display: none;
    }

    .steps-mobile {
        display: block;
    }

    .card-section-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .cons-param {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px;
    }
    
    .cons-param-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
}

@media (hover: hover) {
    .cons-action:hover,
    .wz-sub-apply:hover {
        text-decoration: none;
    }
}

/* --- План и слои ------------------------------------------------------ */

.plan-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

.plan-tab {
    padding: 8px 0;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    line-height: 1.4;
}

.plan-tab-current {
    color: var(--ink);
    border-bottom-color: var(--clay);
    font-weight: 600;
}

.plan-tab-disabled {
    color: var(--ink-soft);
    cursor: default;
}

.plan-layers {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
}

.plan-layers label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Шаг «Размеры»: сводка объёмов и встроенная 3D-проверка ------------ */

/* Строка статуса шага: точка-индикатор — глина, пока есть что чинить,
   зелёная, когда стены на всех этажах и высоты подтверждены */
.dim-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.4;
}

.dim-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clay);
}

.dim-status-ok .dim-dot {
    /* Зелёный без переменной из app.css: спокойный, не сигнальный */
    background: #2e7d32;
}

/* Таблица объёмов по этажам: строки через линию, числа — табличные */
.dim-table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
}

.dim-table th,
.dim-table td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}

.dim-table thead th {
    color: var(--ink-soft);
    font-weight: 400;
    font-size: 13px;
}

.dim-table td {
    font-variant-numeric: tabular-nums;
}

.dim-table tfoot td {
    font-weight: 600;
    border-bottom: none;
}

/* Краткая таблица итогов у 3D-проверки: две колонки, без лишней ширины */
.dim-table-brief {
    width: auto;
    min-width: 16em;
}

.dim-table-brief th {
    font-weight: 400;
}

/* Встроенная 3D-модель: высота — рабочая область без прокрутки страницы */
.model-embed {
    display: block;
    width: 100%;
    height: 560px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* Слои фундамента и кровли: по строке на слой, действия рядом */
.dim-layers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.5;
}

.dim-layer {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Мастер вопросов (вкладка «Мастер» шага «Размеров»): плитки повторяют
   вид плиток главной, но с префиксом wz- — home.css сюда не тащим --------- */

/* Счётчик оставшихся вопросов: первая строка экрана */
.wz-head {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

/* Заголовки этажа и разделов экрана: мельче секционного, крупнее карточки */
.wz-storey-title,
.wz-section-title {
    margin: 24px 0 8px;
    font-size: 17px;
    line-height: 1.3;
}

/* Группа стен или вопрос-выбор: строки через линию, как в конструкторе */
.wz-group {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

/* Шапка группы: заголовок слева, объём кладки прижат вправо */
.wz-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 12px;
}

.wz-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.wz-volume {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 13px;
    color: var(--ink-soft);
}

/* Ряд плиток одного вида слоя */
.wz-row {
    margin-top: 12px;
}

.wz-row-title {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ink-soft);
}

/* Сетка плиток: от 120px на колонку, сколько влезет — на главной сетка
   жёстко в три колонки, здесь состав справочника другой */
.wz-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

/* Плитка берёт общий вид из app.css (.tile/.wz-tile): здесь только отступы
   мастера — теснее плитки главной, чтобы столбец вопросов не разъезжался */
.wz-tile {
    gap: 6px;
    padding: 10px 8px;
}

/* Пиктограмма декоративная: contain — белая подложка картинки не обрезается */
.wz-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
}

.wz-text {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
}

/* Кнопка применения: отступ от последнего ряда плиток */
.wz-group .card-btn-primary {
    margin-top: 16px;
}

/* Разброс толщин роли похож на шум распознавания: предупреждение цветом
   глины, ссылка ведёт в редактор этажа */
.wz-noisy {
    margin: 4px 0 8px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--clay);
}

/* Свёрнутый список «по толщинам» под формой роли */
.wz-sub {
    margin-top: 12px;
}

.wz-sub summary {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
    cursor: pointer;
}

/* Таблица подгрупп компактная: 13 px, строки через линию */
.wz-sub table {
    width: 100%;
    margin: 8px 0 0;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.4;
}

.wz-sub th,
.wz-sub td {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.wz-sub th {
    color: var(--ink-soft);
    font-weight: 400;
}

/* Действие строки подгруппы — маленькая текстовая кнопка, как .cons-action */
.wz-sub-apply {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--clay);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

/* --- Технико-коммерческое предложение --------------------------------- */

.tkp {
    max-width: 900px;
}

.tkp-head {
    margin-bottom: 32px;
}

.tkp-hero {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
    margin-top: 16px;
}

.tkp-thumb {
    width: 31%;
    margin-right: 2%;
    border-radius: 8px;
}

.tkp-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.tkp-row-sum {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tkp-summary {
    font-size: 16px;
    line-height: 1.6;
}

/* Дисклеймер обязателен и не должен теряться: отделяем рамкой */
.tkp-disclaimer {
    margin-top: 32px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* --- Роадмап сроков ---------------------------------------------------- */

.roadmap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roadmap-row {
    display: grid;
    grid-template-columns: minmax(140px, 16em) 1fr auto;
    align-items: center;
    gap: 16px;
}

.roadmap-track {
    display: block;
    height: 12px;
    border-radius: 12px;
    background: var(--sand);
    border: 1px solid var(--line);
}

/* Полоса показывает не дату, а долю срока: точных дат у нас нет */
.roadmap-bar {
    display: block;
    height: 100%;
    border-radius: 12px;
    background: var(--clay);
    min-width: 4px;
}

.roadmap-weeks {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .roadmap-row {
        grid-template-columns: 1fr auto;
    }

    .roadmap-track {
        grid-column: 1 / -1;
        order: 3;
    }
}


/* --- Печать предложения ------------------------------------------------ */

@media print {
    .crm-nav,
    .card-back,
    .obj-nav,
    .steps,
    .tkp-print {
        display: none;
    }

    .tkp {
        max-width: none;
    }

    /* Полосы долей и роадмапа печатаются серым, если принтер без цвета */
    .share-bar,
    .roadmap-bar {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .card-section {
        break-inside: avoid;
    }
}

/* --- Галерея рендеров (шаг «Размеры») --------------------------------- */

/* Галерея рендеров: четыре превью в ряд, на узком экране — по два с переносом */
.render-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.render-gallery-item {
    flex: 1 1 150px;
    max-width: 24%;
    margin: 0;
    text-align: center;
}

.render-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Строки «отрендерено …» и «рендеров ещё нет» занимают всю строку */
.render-gallery > p {
    flex-basis: 100%;
    margin: 0;
}

@media (max-width: 600px) {
    .render-gallery-item { max-width: 48%; }
}

/* Поля «Кровля»: в ряд с переносом, под каждым полем — источник значения */
.roof-params-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 8px 0;
}

.roof-param {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roof-param input,
.roof-param select {
    max-width: 12em;
}

/* --- Развёртки стен: таблицы ------------------------------------------ */

/* Развёртки: таблицы прокручиваются вбок на узком экране */
#elevations h2 { font-size: 1.1rem; margin: 0.5rem 0 0.3rem; }
#elevations details { margin: 0.4rem 0; }
#elevations summary { cursor: pointer; }
#elevations .dim-scroll { overflow-x: auto; }