/* ============================================================
   ОФОРМЛЕНИЕ КОДА АВТОРИНГА
   Стили того, что добавляют задачи 001–008. Отдельный файл, чтобы
   правки нового кода не перемешивались с оформлением просмотрщика.
   Переменные темы берутся из studio-base.css — своих цветов здесь нет,
   иначе тёмная тема разъезжается.
   ============================================================ */

/* ---------- модальный диалог ---------- */
.dlg{
  width:min(380px,92vw);padding:0;border:0;border-radius:20px;
  background:var(--m-s-low);color:var(--text);box-shadow:var(--m-e3);
  font:inherit;
}
.dlg::backdrop{background:rgba(0,0,0,.4)}

.dlg-form{display:flex;flex-direction:column;gap:12px;padding:16px 18px}

.dlg-title{
  margin:0;
  font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

.dlg-field{display:flex;flex-direction:column;gap:4px;font-size:12px}
.dlg-field > span{color:var(--m-on-variant)}
.dlg-field input{
  height:32px;padding:0 10px;border-radius:8px;
  border:1px solid var(--m-outline-var);
  background:var(--m-surface);color:var(--text);font:inherit;font-size:13px;
}
.dlg-field input:focus{outline:2px solid var(--m-primary);outline-offset:-1px}
/* Поле с недопустимым значением: подсвечивается, пока «ОК» недоступна */
.dlg-field input.bad{border-color:#c5442f}

/* Место под подсказку занято всегда: иначе диалог прыгает по высоте,
   когда подсказка появляется и исчезает при вводе */
.dlg-hint{margin:0;min-height:16px;font-size:11.5px;color:#c5442f}

/* Текст вопроса и перечень в диалогах проекта (024) */
.dlg-text{margin:0;font-size:12.5px;line-height:1.4}
.dlg-list{
  margin:0;padding:0 0 0 18px;max-height:160px;overflow:auto;
  font-size:12px;color:var(--m-on-variant);
}

.dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.dlg-btn{
  height:34px;padding:0 18px;border:0;border-radius:17px;cursor:pointer;
  background:var(--m-s-cont);color:var(--text);font:inherit;font-size:13px;
}
.dlg-btn:hover{background:var(--m-s-high)}
.dlg-btn.primary{background:var(--m-primary);color:var(--m-on-primary)}
.dlg-btn.primary:hover{filter:brightness(1.08)}
.dlg-btn:disabled{opacity:.45;cursor:default}
.dlg-btn.primary:disabled:hover{filter:none}

/* ---------- кнопки ленты ---------- */
/* Недоступная кнопка вкладки: у просмотрщика таких не было, поэтому
   правило живёт здесь. Подсказка при наведении остаётся — она объясняет,
   чего кнопке не хватает, и pointer-events поэтому не снимаем. */
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover .pad{background:transparent}
.btn:disabled:hover{color:var(--m-on-variant)}

/* ---------- список уровней ---------- */
/* Пометка происхождения строки. Не должна отнимать место у имени:
   имя ужимается многоточием, а пометка короткая и не сжимается. */
.tree .leaf .tag{
  flex:none;font-size:11px;letter-spacing:.02em;
  color:var(--m-on-variant);opacity:.75;
}
.tree .leaf.cur .tag{color:inherit;opacity:.85}

/* ---------- ярус типа в дереве (задача 052-a) ---------- */
/* Строка типа — та же стрелка и скрытый флажок, что у раздела, но имя,
   а не заголовок: обычный шрифт, без капители. Счётчик и пометка «из
   файла» — как у листа. Выбранный тип подсвечивается как лист. */
.tree .node{
  display:flex;align-items:center;gap:8px;
  height:32px;padding:0 12px 0 14px;border-radius:16px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--text);
}
.tree .node:hover{background:var(--m-hover)}
.tree .node .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .node .name.muted{color:var(--m-on-variant);font-weight:400}
.tree .node .num{margin-left:auto;font-size:11.5px;opacity:.75}
.tree .node .tag{flex:none;font-size:11px;color:var(--m-on-variant);opacity:.75}
.tree li > input:checked + .node .arrow{transform:rotate(-90deg)}
.tree .node.cur{background:var(--m-secondary-c);color:var(--m-on-secondary-c)}
.tree .node.cur .arrow,.tree .node.cur .num,.tree .node.cur .tag{color:inherit;opacity:.85}

/* ---------- панель типа ---------- */
/* Поле и пометка «толщина оценена» в одной ячейке; ссылка «Тип…» рядом
   с выбором типа в панели стены — тем же контейнером */
.type-field{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.type-field .tag{font-size:11px;color:var(--m-on-variant);opacity:.85}
.type-field .tag[hidden]{display:none}
.prop-group .tag{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.75}

/* ---------- марки осей ---------- */
/* Слой марок лежит поверх холста и мышь не ловит: клик по холсту
   принадлежит выбору тел и режиму построения, и перехватывать его
   кружком нельзя. Устройство то же, что у флажков уровней в
   studio-workspace.css: текст элементом страницы, а не в сцене, — он
   остаётся чётким при любом зуме (задача 002). */
.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}

/* Кружок с именем. Начало координат — центр марки: рендерер выносит его
   за конец оси вдоль линии (057), и марка сдвигается на половину своего
   размера, чтобы стоять центром в этой точке. */
.grid-bubble{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  min-width:22px;height:22px;padding:0 4px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border:1.2px solid #3f51b5;border-radius:50%;
  background:var(--m-s-low);color:#3f51b5;
  font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;
  /* Марка ловит клик, как имя разреза: клик по ней выбирает ось (021) */
  pointer-events:auto;cursor:pointer;user-select:none;
}
#theme:checked ~ .app .grid-bubble{border-color:#8c9eff;color:#8c9eff}
/* Под курсором и у выбранной оси — бирюзовая, как выбранные стена и разрез */
.grid-bubble:hover,
.grid-bubble.selected{border-color:#1a9c90;color:#1a9c90}
#theme:checked ~ .app .grid-bubble:hover,
#theme:checked ~ .app .grid-bubble.selected{border-color:#4fd8cb;color:#4fd8cb}

/* Марка будущей оси: бледнее построенных — ось ещё не часть проекта. Мышь
   не ловит: иначе резинка спотыкалась бы о собственную марку */
.grid-bubble.preview{opacity:.55;border-style:dashed;pointer-events:none}

/* В режиме построения марки мышь не ловят: конец оси — первое, к чему
   притягивается курсор (046-a), и клик по нему принадлежит режиму */
.app.build-mode .grid-bubble{pointer-events:none}

/* ---------- обозначение разреза ---------- */
/* Слой имён разрезов — как слой марок осей, но имя ловит мышь: клик по
   нему выбирает разрез, двойной открывает вид. Это наш собственный
   элемент, и двойной клик по холсту у просмотрщика мы не трогаем
   (задача 035). */
.section-layer{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}

/* Имя у стрелки. Начало координат — центр подписи. */
.section-label{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  padding:2px 7px;box-sizing:border-box;
  border:1.2px solid #3f51b5;border-radius:4px;
  background:var(--m-s-low);color:#3f51b5;
  font-size:11px;white-space:nowrap;
  pointer-events:auto;cursor:pointer;user-select:none;
}
.section-label.selected{border-color:#1a9c90;color:#1a9c90}
#theme:checked ~ .app .section-label{border-color:#8c9eff;color:#8c9eff}
#theme:checked ~ .app .section-label.selected{border-color:#4fd8cb;color:#4fd8cb}

/* Имя будущего разреза: бледнее и мышь не ловит — иначе резинка
   спотыкалась бы о собственную подпись */
.section-label.preview{opacity:.55;border-style:dashed;pointer-events:none}

/* Кнопка в панели свойств: «Перевернуть». Оформлена как поле ввода,
   чтобы стоять в строке наравне с ними. */
.prop-button{
  height:24px;padding:0 10px;border-radius:6px;cursor:pointer;
  border:1px solid var(--m-outline-var);
  background:var(--m-s-cont);color:var(--text);font:inherit;font-size:12px;
}
.prop-button:hover{background:var(--m-s-high)}

/* ---------- линии детализации ---------- */
/* Список стилей в группе ленты (047-0): та же строка «подпись — список»,
   что в строке параметров, только стоит среди кнопок */
.ribbon-field{align-self:center;padding:0 6px;font-size:12px}
.ribbon-field select{max-width:150px}

/* Плоский холст поверх кадра панели (задача 047-0): толщина и штрих
   линии — в пикселях по миллиметрам бумаги, чего линии сцены не умеют.
   Мышь холст не ловит: клик по линии находит рендерер по расстоянию на
   экране, как у осей. Ниже ручек — их тянут поверх линии. */
.detail-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* Рамка подрезки вида (030-a): служебная, мышь не ловит */
.crop-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* Размеры (047-a) — на таком же холсте, поверх линий: число должно
   читаться и там, где линии пересекаются */
.dimension-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* Текст (047-b) — на таком же холсте; клик по строке находит рендерер
   по её рамке на экране */
.text-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* ---------- ручки элемента ---------- */
/* Слой ручек — единственный из наложенных слоёв, который ловит мышь:
   ручку тянут. Событие при этом не доходит до холста, и камера не едет —
   ради этого ручки и сделаны элементами страницы (задача 033). */
.handle-layer{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}

.scene-handle{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:9px;height:9px;box-sizing:border-box;
  border:1.4px solid #1a9c90;background:var(--m-s-low);
  pointer-events:auto;cursor:grab;
}
/* Квадрат — конец, круг — середина: разные ручки делают разное, и
   различать их надо не наведением, а взглядом */
.scene-handle.move{border-radius:50%}
.scene-handle:hover{background:#1a9c90}
.scene-handle.dragging{cursor:grabbing;background:#1a9c90}
#theme:checked ~ .app .scene-handle{border-color:#4fd8cb}
#theme:checked ~ .app .scene-handle:hover,
#theme:checked ~ .app .scene-handle.dragging{background:#4fd8cb}

/* В режиме построения ручек нет: клик по холсту принадлежит режиму, и
   ручка, попавшая под курсор, отбирала бы у него точку. Признак общий —
   тот же класс, которым все режимы метят оболочку. */
.app.build-mode .handle-layer{display:none}

/* ---------- маркер привязки ---------- */
/* Поверх ручек и в режиме построения тоже: маркер показывает, куда пойдёт
   построение. Мышь слой не ловит вовсе (задача 046-a). Форма — знаком
   вида, как в Revit: квадрат у конца, треугольник у середины, крест у
   пересечения; размер в пикселях, от зума не зависит. */
.snap-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}

.snap-marker{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:13px;height:13px;box-sizing:border-box;
  color:#1a9c90;pointer-events:none;
}
.snap-marker.end{border:1.6px solid currentColor}
.snap-marker.mid{
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:13px solid currentColor;transform:translate(-50%,-55%);
}
.snap-marker.intersection::before,
.snap-marker.intersection::after{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:1.6px;
  background:currentColor;transform:translate(-50%,-50%) rotate(45deg);
}
.snap-marker.intersection::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* Перпендикуляр — знак ⊥: стойка и основание */
.snap-marker.perpendicular::before{
  content:"";position:absolute;left:50%;top:0;width:1.6px;height:13px;
  background:currentColor;transform:translateX(-50%);
}
.snap-marker.perpendicular::after{
  content:"";position:absolute;left:0;bottom:0;width:13px;height:1.6px;background:currentColor;
}
/* Ближайшая точка — ромб */
.snap-marker.nearest{border:1.6px solid currentColor;transform:translate(-50%,-50%) rotate(45deg)}
#theme:checked ~ .app .snap-marker{color:#4fd8cb}

/* ---------- поле длины и угла у курсора ---------- */
/* Открывается первой набранной цифрой и стоит там, где был курсор.
   Слой мышь не ловит, само поле — ловит: в него печатают (046-b). */
.dim-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}

/* display:flex перебил бы атрибут hidden — у него стиль браузера с
   меньшим приоритетом; закрытое поле прячется отдельным правилом */
.dim-field[hidden]{display:none}
.dim-field{
  position:absolute;left:0;top:0;pointer-events:auto;
  display:flex;gap:10px;align-items:center;
  padding:5px 10px;border-radius:10px;
  background:var(--m-s-low);color:var(--text);box-shadow:var(--m-e2);
  font-size:12px;white-space:nowrap;
}
.dim-item{display:flex;gap:5px;align-items:center}
.dim-caption{opacity:.75}
.dim-unit{opacity:.75}
.dim-input{
  width:64px;padding:2px 5px;box-sizing:border-box;
  border:1px solid var(--m-outline,#8a8a8a);border-radius:5px;
  background:var(--m-s-cont);color:var(--text);font:inherit;text-align:right;
}
.dim-input:focus{outline:1.5px solid #1a9c90;outline-offset:0}
/* Текст, который не разбирается: та же подсветка, что у полей свойств */
.dim-input.bad{outline:1px solid #c5442f;outline-offset:0}
#theme:checked ~ .app .dim-input:focus{outline-color:#4fd8cb}

/* Поле текста у точки вставки (047-b): левый нижний угол поля — точка
   вставки, как у самой строки, поэтому поле поднято на свою высоту.
   Кегль задаёт скрипт — тот, которым строка нарисована на холсте. */
.text-note-field{
  position:absolute;left:0;top:0;transform:translateY(-100%);pointer-events:auto;
  min-width:120px;padding:1px 4px;box-sizing:content-box;
  border:1px solid #1a9c90;border-radius:3px;outline:none;
  background:var(--m-s-low);color:var(--text);box-shadow:var(--m-e2);
  font-family:inherit;line-height:1.15;
}
.text-note-field[hidden]{display:none}
#theme:checked ~ .app .text-note-field{border-color:#4fd8cb}

/* ---------- строка параметров построения ---------- */
/* Появляется вместе с режимом и ложится поверх вкладок видов: она про то,
   чем строят сейчас, и уходить за ней в палитру незачем. */
.options-bar{
  position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:5;
  display:flex;gap:16px;align-items:center;
  padding:6px 14px;border-radius:18px;
  background:var(--m-s-low);color:var(--text);box-shadow:var(--m-e2);
  font-size:12.5px;
}
.options-field{display:flex;gap:8px;align-items:center;white-space:nowrap}
.options-field select{max-width:190px}

/* ---------- режим построения ---------- */
/* Пока режим включён, курсор над холстом — перекрестье: пользователь
   должен видеть, что клик сейчас ставит точку, а не выбирает тело. */
.app.build-mode .scene3d{cursor:crosshair}

/* ---------- свойства уровня ---------- */
/* Поле, значение которого модель не приняла: подсветка снимается вводом.
   Обводкой, а не рамкой: .prop-input просмотрщика рисуется без неё, и
   рамка сдвинула бы соседние строки. */
.prop-input.bad{outline:1px solid #c5442f;outline-offset:0}