/* ===== Гигакарта — вид «Аксонометрия плана» =================================
   Объём рисует Планировщик (zone-iso.js) своими цветами, поэтому здесь нет
   ни одной заливки геометрии: только панель, карточка и подсветка выбора.
   Имена — с префиксом .gax__, чтобы не спорить с .gm__ (схема связей),
   .gmx__ (пространственная карта) и классами оболочки .cw-*.
   ========================================================================= */

.gax { position: relative; display: flex; flex-direction: column; height: calc(100vh - 250px); min-height: 560px; border: 1px solid #dfe8ed; border-radius: 14px; overflow: hidden; background: #fdfefe; }

/* ---------- панель инструментов ---------- */
.gax__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid #e6eef2; background: #fff; }
.gax__spacer { flex: 1 1 auto; }

.gax__seg { display: inline-flex; border: 1px solid #dfe8ed; border-radius: 8px; overflow: hidden; }
.gax__seg button { border: 0; background: #fff; padding: 6px 12px; cursor: pointer; font: 500 12.5px/1.2 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; }
.gax__seg button + button { border-left: 1px solid #dfe8ed; }
.gax__seg button:hover { background: #f2f7f9; }
.gax__seg button.is-on { background: #3d7e9c; color: #fff; }

.gax__btn { border: 1px solid #dfe8ed; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: 500 12.5px/1.2 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gax__btn:hover { background: #f2f7f9; }

.gax__legend { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #8fa7b6; flex-wrap: wrap; }
.gax__legend i { display: inline-block; margin-left: 8px; }
.gax__legend i:first-child { margin-left: 0; }
.gax__band { width: 20px; height: 7px; border-radius: 4px; background: #d8e0e4; border-top: 2px dashed #7f8f98; }
.gax__dot { width: 9px; height: 9px; border-radius: 50%; }
/* Маркер зоны: тот же кружок, что на полотне, — иначе легенда не читается. */
.gax__badge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #9aa6ac; background: #fff; font: 600 9px/1 var(--cw-font-body, system-ui, sans-serif); color: #3f474c; font-style: normal; }

/* ---------- полотно ---------- */
.gax__stage { position: relative; flex: 1 1 auto; overflow: hidden; background: #fdfefe; cursor: grab; }
.gax__stage.is-drag { cursor: grabbing; }
.gax__svg { display: block; width: 100%; height: 100%; user-select: none; }

/* ---------- разметка поверх объёма ----------
   Маршрут, люди и номера зон — пояснения, а не элементы управления.
   Указатель они не перехватывают: иначе клик по предмету, рядом с которым
   стоит номер зоны или проходит линия, попадал бы в накладку. */
.gax__route, .gax__people, .gax__labels { pointer-events: none; }

/* ---------- объём Планировщика ----------
   Геометрию красит zone-iso.js; здесь только реакция на выбор. Ширины —
   в единицах полотна (миллиметры проекции), иначе обводка была бы невидима:
   у Планировщика рабочая ширина ~8,5 таких единиц. */
.gax__iso [data-item] { cursor: pointer; }
.gax__iso [data-item]:hover { stroke: #b8891f; }
.gax__iso [data-item].is-sel { stroke: #c99a2e; stroke-width: 16; }

/* Пятно предмета нужно только клавиатуре: мышью предмет выбирается по своим
   граням. Контур пятна и есть фокус-рамка. */
.gax__furn { outline: none; }
.gax__furn:focus .gax__hit { stroke: #b8891f; stroke-width: 16; }
.gax__furn.is-sel .gax__hit { stroke: #c99a2e; stroke-width: 16; }

/* Слой пояснений Планировщика (размер высоты) гасится тумблером «Подписи». */
.gax__hidden { display: none; }

/* ---------- карточка предмета ---------- */
.gax__card { position: absolute; right: 12px; top: 12px; width: 292px; max-height: calc(100% - 24px); overflow: auto; padding: 14px 15px 15px; background: rgba(255, 255, 255, .95); border: 1px solid #e3ebef; border-radius: 12px; box-shadow: 0 6px 18px rgba(95, 125, 145, .07); }
.gax__card[hidden] { display: none; }
.gax__close { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 18px; line-height: 1; color: #9db3bf; cursor: pointer; padding: 4px 6px; }
.gax__close:hover { color: #4c6474; }
.gax__kicker { font: 700 10.5px/1.2 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .9px; color: #9db3bf; margin: 0 24px 4px 0; }
.gax__head { font: 700 15px/1.25 var(--cw-font-body, system-ui, sans-serif); color: #35566b; margin: 0 24px 4px 0; }
.gax__kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; margin: 10px 0 0; font: 400 12.5px/1.45 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gax__kv dt { color: #9db3bf; }
.gax__kv dd { margin: 0; }
.gax__note { font: 400 12px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; background: #f5f9fb; border-left: 3px solid #d3e2ea; border-radius: 6px; padding: 8px 10px; margin: 10px 0 0; }
.gax__open { display: block; width: 100%; margin-top: 10px; border: 0; background: #2f6f4f; color: #fff; border-radius: 8px; padding: 9px 12px; cursor: pointer; font: 600 13px/1.2 var(--cw-font-body, system-ui, sans-serif); }
.gax__open:hover { background: #265c41; }

/* ---------- параметры проекта (есть только у места хранения) ---------- */
.gax__props { margin-top: 10px; padding-top: 9px; border-top: 1px solid #eef3f6; }
.gax__props[hidden] { display: none; }
.gax__propscap { font: 600 11px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #9db3bf; }
/* Подписи параметров длиннее геометрических («Вместимость под молоко»),
   поэтому колонка шире: иначе каждая строка ломается на две. */
.gax__kv--props { margin-top: 7px; gap: 5px 10px; grid-template-columns: 150px 1fr; }
.gax__basis { font: 400 11.5px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; margin: 6px 0 0; }
/* .gax__open задаёт display:block, поэтому атрибут hidden сам по себе
   вторую кнопку не спрячет. */
.gax__open[hidden] { display: none; }
.gax__open--second { background: #eef4f1; color: #2f6f4f; border: 1px solid #cfe0d6; }
.gax__open--second:hover { background: #e2ede7; }

.gax__empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center; }
.gax__empty p { max-width: 460px; margin: 0; font: 400 13.5px/1.6 var(--cw-font-body, system-ui, sans-serif); color: #8fa7b6; }

/* ---------- паспорт плана и перечень зон ----------
   Числа те же, что в объёме: контур, стены, высота, площадь и площади
   помещений. Считаются из документа плана, в разметке их нет. */
.gax__zones { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 7px 12px; border-top: 1px solid #e6eef2; background: #fff; font: 400 11.5px/1.4 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; }
.gax__passport { color: #8fa7b6; }
.gax__zonelist { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.gax__zone { display: inline-flex; align-items: center; gap: 5px; }
.gax__zone i { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #9aa6ac; background: #fff; font: 600 9px/1 var(--cw-font-body, system-ui, sans-serif); color: #3f474c; font-style: normal; }
.gax__zone b { font-weight: 500; color: #9db3bf; }

@media (max-width: 900px) {
  .gax { height: calc(100vh - 220px); }
  .gax__legend { display: none; }
  /* Карточка стала выше (параметры проекта + второе действие). На узком
     экране она занимает высоту полотна: иначе до кнопок нужно прокручивать
     вслепую. Внутренняя прокрутка остаётся, × закрывает. */
  .gax__card { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; max-height: calc(100% - 24px); }
}