/*
 * rooms-v3.css — экран «Комнаты и замеры» (rooms-v3.js).
 *
 * Разметка использует компоненты дизайн-системы v3 (design/README.md: .k-field, .k-chip, .k-segment, .k-acc,
 * .k-metric, .k-btn, .k-note, .k-empty) плюс свои классы rooms-*. Вид компонентов и темы — design/*.css
 * (подключены после этого файла); здесь только раскладка экрана: сетки, отступы, липкий итог, схема «Плана»
 * и редкие уточнения компонентов внутри экрана (селекторы из двух классов — важнее базового компонента).
 * Цвета только через переменные: --rooms-* берут --k-* из design/tokens.css (запасные значения — для
 * старых страниц без токенов).
 * Телефон (360–390 px) первичен: один столбец, цели нажатия не меньше 48 px, итог открытой комнаты прилипает
 * над нижними панелями (высоту панелей rooms-v3.js пишет в --rooms-dock).
 */
:root{
 --rooms-ink:var(--k-ink,var(--ui-ink,#193630));--rooms-muted:var(--k-ink-2,var(--ui-muted,#4f5f55));
 --rooms-line:var(--k-line,var(--ui-line,#d5ddd3));--rooms-line-strong:var(--k-line-strong,#9fb3a6);
 --rooms-surface:var(--k-surface,#fff);--rooms-soft:var(--k-surface-2,var(--ui-accent-soft,#eef4ec));
 --rooms-accent:var(--k-primary,#274f3f);--rooms-on-accent:var(--k-on-primary,#fff);--rooms-selected:var(--k-selected,var(--rooms-accent));--rooms-on-selected:var(--k-on-selected,var(--rooms-on-accent));
 --rooms-danger:var(--k-danger,#b42318);--rooms-warn-bg:var(--k-warning-soft,#fff4e5);--rooms-warn-ink:var(--k-ink,#5f3000);
 --rooms-radius:var(--k-r-lg,14px);--rooms-radius-sm:var(--k-r-md,12px);--rooms-h:var(--k-h-md,48px);
 --rooms-shadow:var(--k-shadow-1,0 2px 14px rgb(29 59 47 / 8%));--rooms-num:var(--k-font-num,inherit);--rooms-dock:0px
}

.rooms-setup{margin:8px 0 12px}
.rooms-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.rooms-head h2{margin:0}
.rooms-totals{margin:0;font-size:13px}
.rooms-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.rooms-own{display:flex;align-items:flex-end;gap:8px;margin:4px 0 10px}
.rooms-own .rooms-field{flex:1;margin:0}
.rooms-own button{width:auto;margin:0;white-space:nowrap}
.rooms-sets{align-items:center}
.rooms-sets .rooms-chip{text-align:left}
.rooms-sets .rooms-chip small{display:block;font-weight:400;font-size:12px;color:var(--rooms-muted);margin-top:2px}
.rooms-sets.is-compact .rooms-chip small{display:none}
.rooms-chips.is-compact{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px;margin-inline:-4px;padding-inline:4px}
.rooms-chips.is-compact>*{flex:none}
.rooms-list{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
.rooms-card{margin:0;padding:0;min-width:0;font-size:inherit}
.rooms-card-head{cursor:pointer}
.rooms-list>.rooms-card+.rooms-card{margin-top:0}
.rooms-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rooms-card-line{font-size:14px;line-height:1.35;color:var(--rooms-muted)}
.rooms-card-sum{color:var(--rooms-ink)}
.rooms-card-sum b{font-family:var(--rooms-num);font-variant-numeric:tabular-nums}
.rooms-card-body>*+*,.rooms-main>*+*,.rooms-side>*+*{margin-top:14px}
.rooms-seg{margin-top:4px}
.rooms-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rooms-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.rooms-field{min-width:0;margin:0}
.rooms-error[hidden]{display:none}
.rooms-link{margin-top:6px}
.rooms-hint{margin:8px 0 0;font-size:13px;line-height:1.4}
.rooms-block h4,.rooms-more h4{margin:0 0 8px}
.rooms-subhead{font:var(--k-fw-strong,700) var(--k-fs-md,16px)/1.3 var(--k-font-sans,inherit);color:var(--rooms-ink)}
.rooms-more h4{margin-top:14px}
.rooms-more{margin-top:16px;padding:0;border-block:0;font-size:inherit}
.rooms-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0 0 10px;padding:10px;border:1px solid var(--rooms-line);border-radius:var(--rooms-radius-sm);background:var(--rooms-soft)}
.rooms-row-name{grid-column:1;width:100%;margin:0}
.rooms-row>.rooms-row-remove{grid-column:2;grid-row:1}
.rooms-row-fields{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.rooms-row-remove{width:var(--rooms-h);min-width:var(--rooms-h);min-height:var(--rooms-h);margin:0;padding:0;text-align:center}
.rooms-walls{list-style:none;margin:0;padding:0}
.rooms-wall{margin:0 0 10px;padding:10px;border:1px solid var(--rooms-line);border-radius:var(--rooms-radius-sm)}
.rooms-wall .rooms-row{background:var(--rooms-surface);margin-top:8px}
.rooms-wall .rooms-chips{margin:8px 0 0}
.rooms-wall .rooms-chip{min-height:44px;padding-block:6px;font-size:var(--k-fs-sm,14px)}
.rooms-wall-line{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}
.rooms-wall-line>.rooms-field{flex:1 1 120px}
.rooms-angle-chips{margin:0;flex-wrap:nowrap}
.rooms-add-line{width:100%;margin:0}
.rooms-plan{padding:8px;border:1px solid var(--rooms-line);border-radius:var(--rooms-radius-sm);background:var(--rooms-soft)}
.rooms-plan svg{display:block;width:100%;max-height:260px}
.rooms-plan-wall{stroke:var(--rooms-ink);stroke-width:3;stroke-linecap:round}
.rooms-plan-close{stroke:var(--rooms-accent);stroke-width:2.5;stroke-dasharray:6 5}
.rooms-plan-fill{fill:var(--rooms-surface);stroke:none}
.rooms-plan-start{fill:var(--rooms-accent)}
.rooms-plan-label{font-size:12px;font-weight:800;fill:var(--rooms-ink);paint-order:stroke;stroke:var(--rooms-surface);stroke-width:4px}
.rooms-plan-status{margin:6px 4px 2px;font-size:13px;color:var(--rooms-ink)}
.rooms-result{position:sticky;bottom:calc(var(--rooms-dock) + 8px);z-index:2;margin-inline:-6px;padding:10px 12px;border:1px solid var(--rooms-line);border-radius:var(--rooms-radius-sm);background:var(--rooms-surface);box-shadow:var(--rooms-shadow)}
.rooms-result-more{margin:6px 0 0;font-size:13px}
/* Итог комнаты — три площади в одну строку и на телефоне: липкая полоса не должна закрывать поля. */
.rooms-result .k-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rooms-result .k-metric{padding:6px 8px}
/* Цифры итога: размер токена темы уменьшается локально, чтобы «33,81 м²» помещалось в треть ширины телефона. */
.rooms-result{--k-fs-num:clamp(18px,5.2vw,26px)}
.rooms-own[hidden]{display:none}
.rooms-result.is-empty{position:static;box-shadow:none}
.rooms-warn{margin:6px 0 0}
.rooms-card-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.rooms-card-tools .rooms-rename{flex:1 1 180px}
.rooms-card-tools button{width:auto;margin:0}
.rooms-settings{margin-top:20px}
.rooms-settings h3{margin:0 0 4px}
.rooms-settings-openings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:8px}
.rooms-settings fieldset{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:8px 10px 10px;border:1px solid var(--rooms-line);border-radius:var(--rooms-radius-sm)}
.rooms-settings legend{padding:0 4px;font-size:13px;font-weight:700}
/* Прежняя сетка мастера (две колонки при открытой панели замеров) не применяется; прежняя кнопка «Копировать выбранную комнату» (order-manager.js) не нужна — копирование в карточке. */
.room-wizard.rooms-stage>#projectRoomSetup,.room-wizard.rooms-stage>#projectRoomCards{grid-column:auto;grid-row:auto}
.room-wizard.rooms-stage>#copyRoom{display:none}
/* «Уточнить» — подзаголовок карточки, а не раздел страницы (темы иначе делают его крупнее «Двери и окна»). */
.rooms-card .rooms-more .k-acc__title{font:var(--k-fw-strong,650) var(--k-fs-md,16px)/1.3 var(--k-font-sans,inherit);text-transform:none;letter-spacing:normal}
@media (min-width:761px){
 /* Стена в одну строку: длина и удаление слева, фишки проёмов справа; проёмы стены — строками ниже. */
 .rooms-wall{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:8px 12px;align-items:end}
 .rooms-wall>.rooms-wall-line{grid-column:1}
 .rooms-wall>.rooms-chips{grid-column:2;grid-row:1;margin:0;align-self:end}
 .rooms-wall>.rooms-row{grid-column:1/-1;margin:0}
 /* «План»: длина, угол, быстрые углы и удаление — в одну строку. */
 .rooms-wall-line>.rooms-field{flex:0 1 170px}
}
@media (max-width:760px){
 .rooms-card-tools .rooms-rename{flex-basis:100%}
 .rooms-card-tools button{flex:1}
 .rooms-card-body{padding-inline:12px}
 .rooms-result{margin-inline:-4px}
}
@media (min-width:1100px){
 /* Две колонки открытой карточки: слева способ и размеры, справа двери, окна и «Уточнить»; итог и название — на всю ширину. */
 .rooms-card.is-open>.rooms-card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 28px;align-items:start}
 .rooms-card.is-open>.rooms-card-body>*+*{margin-top:0}
 .rooms-card.is-open>.rooms-card-body>.rooms-result,.rooms-card.is-open>.rooms-card-body>.rooms-card-tools{grid-column:1/-1}
}
}
/* Прежняя графика форм внутри новых раскрывающихся комнат. */
.rooms-method .room-shape-options{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0;gap:8px}
.rooms-method .room-shape-options button{font:inherit;font-size:12px;min-height:76px;background:var(--k-surface);color:var(--k-ink)}
.rooms-method .room-shape-options span{white-space:normal;text-align:center}
.rooms-method .room-shape-options button[aria-pressed=true]{background:var(--k-selected-soft,var(--k-surface-2));border-color:var(--k-primary)}
.rooms-method .room-shape-preview{margin-bottom:14px;min-width:0}
.rooms-method .room-shape-preview svg{width:100%;height:auto;max-height:320px}
.rooms-method .shape-unit{display:flex;align-items:center;gap:6px}
.rooms-method .shape-unit select{min-width:58px;width:auto;min-height:44px}
.rooms-method .rooms-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1100px){.rooms-method .room-shape-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* A обозначает полную ширину вдоль верхней стены, включая выступы. */
.rooms-method .room-full-width line,.rooms-method .room-dimension-line line{stroke:var(--k-ink-2);stroke-width:1;vector-effect:non-scaling-stroke}

/* Поля над схемой используют те же ключи размеров, что и нижняя форма. */
.rooms-method .room-editable-plan{position:relative;aspect-ratio:3/2;margin:12px 0 8px;isolation:isolate}
.rooms-method .room-editable-plan>svg{display:block;width:100%;height:100%;max-height:none}
.rooms-method .shape-inline-dimension{position:absolute;left:clamp(34px,var(--shape-x),calc(100% - 34px));top:var(--shape-y);transform:translate(-50%,-50%);width:68px;min-height:40px;display:flex;align-items:center;gap:2px;padding:2px 5px;box-sizing:border-box;margin:0;border:1px solid var(--k-line);border-radius:9px;background:var(--k-surface);color:var(--k-ink);z-index:1;box-shadow:var(--k-shadow-1)}
.rooms-method .shape-inline-dimension:focus-within{z-index:2;border-color:var(--k-primary);outline:2px solid var(--k-primary)}
.rooms-method .shape-inline-dimension input{width:100%;min-width:0;min-height:32px;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;font-size:16px;text-align:center;outline:none}
.rooms-method .shape-inline-dimension span{font-size:11px;flex:none;color:var(--k-ink-2)}
@media(pointer:coarse){.rooms-method .shape-inline-dimension{min-height:44px}.rooms-method .shape-inline-dimension input{min-height:38px}}
/* Настройки наборов: порядок управляется кнопками и доступен на телефоне. */
#roomSetEditor{margin-top:18px;padding:16px;border:1px solid var(--k-line);border-radius:12px;background:var(--k-surface-2)}
#roomSetEditor textarea{display:block;width:100%;box-sizing:border-box;padding:12px;font:inherit;min-height:140px;border:1px solid var(--k-line);border-radius:8px;background:var(--k-surface);color:var(--k-ink)}
#roomSetError{color:var(--k-danger)}
.room-set-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 0;border-bottom:1px solid var(--k-line)}
.room-set-description{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.room-set-description p{margin:4px 0 0;color:var(--k-ink-2)}
.room-set-actions{display:flex;flex-wrap:wrap;gap:6px}
.room-set-actions button{min-height:44px}
@media(max-width:760px){#roomSetEditor{padding:12px}.room-set-actions{width:100%}.room-set-actions button{flex:1 1 calc(50% - 6px)}}