/*
  Палитра выведена из маркировки жил: PE — жёлто-зелёный, N — синий,
  L — коричневый. Ими же кодируются группы на плане, поэтому цвет читается
  электриком без легенды.
*/
:root {
  --paper: #f1f3ee;
  --panel: #fbfcfa;
  --sunk: #e7eae3;
  --ink: #161a16;
  --ink-2: #474e46;
  --ink-3: #757c73;
  --line: #d3d8cd;
  --line-2: #b9c0b2;

  --pe-green: #3e8e41;
  --pe-yellow: #c8ae12;
  --danger: #b33a2b;
  --warn: #b57a16;

  --g1: #2a5c9e;
  --g2: #8a5230;
  --g3: #3e8e41;
  --g4: #b33a2b;
  --g5: #6b4c9a;
  --g6: #0f7d7d;

  --wall: #23281f;
  --room: #e4e8dd;

  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --display: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f120f;
    --panel: #161a16;
    --sunk: #1c211b;
    --ink: #e6eae3;
    --ink-2: #a7afa5;
    --ink-3: #7a8278;
    --line: #2a302a;
    --line-2: #3b433a;
    --pe-green: #5fb363;
    --pe-yellow: #dfc53f;
    --danger: #e07162;
    --warn: #dda44b;
    --g1: #6d9dd9;
    --g2: #c08a5f;
    --g3: #5fb363;
    --g4: #e07162;
    --g5: #a68ad4;
    --g6: #4fb5b5;
    --wall: #c9d0c4;
    --room: #1e241d;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app {
  height: 100%;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 272px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "bar bar bar"
    "left canvas right"
    "status status status";
}

.app[data-mode="estimate"] {
  grid-template-areas:
    "bar bar bar"
    "sheet sheet sheet"
    "status status status";
}
.view3d { grid-area: canvas; display: none; }
.app[data-mode="view3d"] .view3d { display: block; }
.app[data-mode="view3d"] #canvas-wrap { display: none; }
#view3d { display: block; width: 100%; height: 100%; cursor: grab; }
#view3d:active { cursor: grabbing; }

/* Раздел «Проекты» занимает экран так же, как смета: список во всю ширину. */
.app[data-mode="projects"] {
  grid-template-areas:
    "bar bar bar"
    "sheet sheet sheet"
    "status status status";
}

.app[data-mode="estimate"] .left,
.app[data-mode="estimate"] .right,
.app[data-mode="estimate"] .canvas-wrap,
.app[data-mode="projects"] .left,
.app[data-mode="projects"] .right,
.app[data-mode="projects"] .canvas-wrap { display: none; }

.app:not([data-mode="estimate"]) #sheet { display: none; }
.app:not([data-mode="projects"]) #cloud { display: none; }

/* ── Проекты на сервере ──────────────────────────────────────────────── */

.cloud-form { max-width: 340px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cloud-form .btn { margin-top: 8px; }
.cloud-who { float: right; display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--ink-3); font-family: var(--mono); }
.cloud-current { max-width: 420px; margin-bottom: 8px; }
.cloud-current .btn { margin-top: 8px; }
.cloud-actions { display: flex; gap: 6px; justify-content: flex-end; }
table.est tr.current td { background: var(--sunk); }

.sync-ok { color: var(--pe-green); }
.sync-wait { color: var(--warn); }
.sync-no { color: var(--ink-3); }

/* ── Экран входа ─────────────────────────────────────────────────────── */

/* position: fixed выносит его из грид-раскладки .app — перекрывает всё,
   независимо от того, какая вкладка была открыта. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.auth-gate[hidden] { display: none; }

.auth-card { width: 100%; max-width: 320px; padding: 24px; }

.auth-logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 0 28px; }

.field-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.field-check input { accent-color: var(--pe-green); }

/* ── Верхняя панель ─────────────────────────────────────────────────── */

.bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--sunk);
  border-bottom: 1px solid var(--line);
}

.project-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  padding: 3px 6px;
  min-width: 180px;
}
.project-name:hover { border-color: var(--line-2); }
.project-name:focus { outline: none; border-color: var(--pe-green); background: var(--panel); }

.tabs { display: flex; gap: 2px; margin-left: auto; }

.tab {
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.tab:hover { color: var(--ink); background: var(--panel); }
.tab[aria-selected="true"] {
  background: var(--panel);
  border-color: var(--line-2);
  color: var(--ink);
  font-weight: 600;
}
.tab:focus-visible { outline: 2px solid var(--pe-green); outline-offset: 1px; }

.bar-actions { display: flex; gap: 4px; }

.btn {
  font: inherit;
  font-size: 13px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--sunk); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--pe-green); outline-offset: 1px; }
.btn.primary { border-color: var(--pe-green); color: var(--pe-green); font-weight: 600; }

/* ── Панели ─────────────────────────────────────────────────────────── */

.left, .right {
  background: var(--panel);
  overflow-y: auto;
  padding: 12px;
}
.left { grid-area: left; border-right: 1px solid var(--line); }
.right { grid-area: right; border-left: 1px solid var(--line); padding: 0; }

/*
 * ТИПОГРАФИКА.
 *
 * Шкала тесная (шаг около 1.12) — интерфейс плотный, крупные ступени в нём
 * не помещаются. Иерархия держится на ТРЁХ признаках сразу: размер,
 * насыщенность и цвет. На одном она разваливается, что и произошло: метка
 * раздела была самым мелким (10 px) и самым бледным текстом на экране, то
 * есть проигрывала тексту, который должна возглавлять.
 *
 * Тело текста — не бледнее `--ink-2`: на `--ink-3` контраст падает до
 * границы 4.5:1 по WCAG 2.1, а на мелком кегле этого мало.
 */
:root {
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-md: 13.5px;
  --text-lg: 16px;
  --leading-tight: 1.3;
  --leading-normal: 1.55;
}

.panel-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  /* Воздух сверху — главный признак начала раздела: он делает заголовок
     заголовком вернее, чем любое выделение. */
  margin: 24px 0 10px;
}

/* Первому разделу отбивка сверху не нужна — он и так первый. */
#left > .panel-label:first-child,
#right section > .panel-label:first-child { margin-top: 0; }

/** Пояснительный текст: то, что человек читает, а не сканирует. */
.help {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-2);
}
.help + .help { margin-top: 10px; }
.help b, .help strong { color: var(--ink); font-weight: 600; }
.help kbd, .help code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink);
}

/** Подсказка второго плана: сноска под блоком, а не самостоятельный текст. */
.help.aside {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--ink-3);
  margin-top: 8px;
}
/* Отбивку разделов задаёт общее правило `.panel-label` — прежний сброс
   здесь съедал её в правой панели, и заголовок прилипал к тексту над ним. */
.right section { padding: 12px; border-bottom: 1px solid var(--line); }

.tool-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 18px; }

.tool {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.tool:hover { background: var(--sunk); color: var(--ink); }
.tool[aria-pressed="true"] {
  background: var(--sunk);
  border-color: var(--line-2);
  color: var(--ink);
  font-weight: 600;
}
.tool .key { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* Подпись поля приглушена, значение — самое контрастное: глаз идёт по
   значениям, а подписи читает только при необходимости. */
.field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: var(--text-md); }
.field > span { color: var(--ink-3); }
.field > b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.field input, .field select {
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  width: 118px;
  padding: 3px 6px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--pe-green); }

.selected-kind { font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }

/* ── Группы ─────────────────────────────────────────────────────────── */

.grp {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
}
.grp:hover { background: var(--sunk); }
.grp[aria-selected="true"] { background: var(--sunk); font-weight: 600; }
.swatch { width: 10px; height: 10px; border-radius: 50%; }
.grp .meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.grp .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Проблемы ───────────────────────────────────────────────────────── */

.issue {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
}
.issue:last-child { border-bottom: 0; }
.issue .mark { font-family: var(--mono); font-weight: 700; }
.issue.error .mark { color: var(--danger); }
.issue.warning .mark { color: var(--warn); }
.issue b { color: var(--ink); font-weight: 600; }

.count-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  color: #fff;
  margin-left: 6px;
}
.count-badge.error { background: var(--danger); }
.count-badge.warning { background: var(--warn); }

/* ── Холст ──────────────────────────────────────────────────────────── */

.canvas-wrap { grid-area: canvas; position: relative; background: var(--sunk); overflow: hidden; }
#plan { display: block; width: 100%; height: 100%; cursor: crosshair; }

.hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 5px 9px;
  pointer-events: none;
  max-width: 60%;
}

.dim-input {
  position: absolute;
  font-family: var(--mono);
  font-size: 13px;
  width: 92px;
  padding: 3px 6px;
  background: var(--panel);
  border: 1px solid var(--pe-green);
  color: var(--ink);
}
.dim-input:focus { outline: none; }

/* ── Смета ──────────────────────────────────────────────────────────── */

.sheet { grid-area: sheet; overflow-y: auto; padding: 18px 24px; background: var(--panel); }
.sheet h2 { font-family: var(--display); font-size: 20px; margin: 22px 0 10px; }
.sheet h2:first-child { margin-top: 0; }

table.est { width: 100%; border-collapse: collapse; font-size: 13px; }
table.est th {
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  padding: 0 8px 5px 0;
}
table.est td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
table.est td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
table.est td.name { color: var(--ink); }
table.est tr.missing td { color: var(--danger); }
table.est .src { font-size: 11px; color: var(--ink-3); }

.totals { margin-top: 16px; display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.totals .total { font-size: 20px; font-weight: 700; color: var(--ink); }

.notice {
  border-left: 3px solid var(--warn);
  padding: 8px 0 8px 12px;
  margin: 14px 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.notice b { color: var(--ink); font-weight: 600; }
.notice.green { border-color: var(--pe-green); }

/* ── Строка состояния ───────────────────────────────────────────────── */

.status {
  grid-area: status;
  border-top: 1px solid var(--line);
  background: var(--sunk);
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.status .sum { margin-left: auto; color: var(--ink); font-weight: 700; font-size: 15px; }
.status .sum span {
  font-family: system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  margin-right: 8px;
}

/* ── Расчёт «Почему?» ───────────────────────────────────────────────── */

.why { border: 1px solid var(--line-2); background: var(--panel); margin-top: 10px; }
.why-head { padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--sunk); }
.why-head .val { font-family: var(--display); font-weight: 700; font-size: 19px; }
.why-head .because { color: var(--ink-2); font-size: 12.5px; display: block; }
table.calc { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
table.calc td { padding: 5px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.calc tr:last-child td { border-bottom: 0; }
table.calc .lbl { color: var(--ink-2); }
table.calc .num { text-align: right; white-space: nowrap; color: var(--ink); }
table.calc .note { color: var(--ink-3); font-size: 10.5px; }
table.calc tr.decisive td { background: var(--sunk); }
table.calc tr.decisive .lbl { color: var(--ink); font-weight: 700; }

/* Кнопка, ждущая подтверждения вторым нажатием. */
.btn.armed {
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.btn.armed:hover { background: var(--danger); color: var(--panel); }

.kind-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  flex: none;
}

/* ── Этажи ───────────────────────────────────────────────────────────────── */

.level-select {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
  max-width: 150px;
}
.level-select:focus { outline: none; border-color: var(--pe-green); }

/* ── Выдуманные цены не должны выглядеть настоящими ──────────────────────── */

.sum.demo { color: var(--warn); }
.sum.demo > span { color: var(--warn); opacity: 0.85; }
.totals .total.demo { color: var(--warn); }
.sheet-toggle[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Редактор групп ──────────────────────────────────────────────────────── */

.mode-badge {
  float: right;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  text-transform: none;
}
.mode-badge.manual { border-color: var(--pe-green); color: var(--pe-green); }

.grp-card { border: 1px solid transparent; margin-bottom: 1px; }
.grp-card.over { border-color: var(--pe-green); background: var(--sunk); }
.grp-card.orphans { border-color: var(--line); padding: 8px; margin-top: 14px; background: var(--panel); }

.grp-body { padding: 4px 8px 10px; border-left: 2px solid var(--line-2); margin: 2px 0 8px 4px; }
.grp-why {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--ink-3);
  padding: 4px 0 8px;
}

.pt-list { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 8px; }
.pt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  font-size: 12.5px;
  background: var(--panel);
  border: 1px solid transparent;
  cursor: grab;
}
.pt:hover { background: var(--sunk); }
.pt.current { border-color: var(--pe-green); }
.pt input[type="checkbox"] { accent-color: var(--pe-green); margin: 0; }
.pt .pt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt .pt-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.pt-empty { font-size: 12px; color: var(--ink-3); padding: 6px 0; line-height: 1.45; }

.grp-actions { display: flex; flex-direction: column; gap: 4px; }
.grp-actions select,
.grp-actions .btn { width: 100%; font-size: 12px; }
.grp-actions select {
  padding: 4px 6px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.grp-actions select:disabled { opacity: 0.45; }

.grp-tools { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.hint-block {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--ink-3);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }