/* Конструктор планировки ПОП – оформление «технологический чертёж» */
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap;
  src: url("../lib/fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap;
  src: url("../lib/fonts/golos-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212, U+2215; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap;
  src: url("../lib/fonts/golos-text-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap;
  src: url("../lib/fonts/golos-text-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212, U+2215; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap;
  src: url("../lib/fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap;
  src: url("../lib/fonts/golos-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212, U+2215; }

:root {
  --paper: #f4f5f3;      /* фон рабочего места */
  --sheet: #ffffff;      /* «лист» панелей */
  --graphite: #23292f;   /* основной текст и рамки штампа */
  --line: #8d979f;       /* вторичный текст, линии */
  --hair: #d6dbde;       /* тонкие разделители */
  --pencil: #2f5d8a;     /* выделение, активное состояние */
  --pencil-soft: #e4ecf4;
  --error: #b8322a;
  --radius: 3px;
  --font: "Golos Text", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--graphite); font: 14px/1.45 var(--font); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 1px; }
[hidden] { display: none !important; }
.muted { color: var(--line); }

/* ---------- стартовый экран ---------- */
.start { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.sheet { width: min(860px, 100%); background: var(--sheet); border: 2px solid var(--graphite); padding: 36px 40px 40px; }
.sheet-head h1 { font-size: 26px; line-height: 1.2; font-weight: 600; margin: 0 0 10px; max-width: 24em; }
.sheet-head p { margin: 0 0 28px; color: #4b545b; max-width: 60ch; }
.type-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--graphite); }
.type-list li { border-bottom: 1px solid var(--hair); }
.type-btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; width: 100%;
  grid-template-columns: 9rem 1fr auto; gap: 4px 24px; align-items: baseline; padding: 18px 8px; }
.type-btn:hover, .type-btn:focus-visible { background: var(--pencil-soft); }
.type-btn:focus-visible { outline: 2px solid var(--pencil); outline-offset: -2px; }
.type-name { font-size: 22px; font-weight: 600; }
.type-desc { color: #4b545b; }
.type-meta { color: var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.start-error { color: var(--error); margin-top: 16px; }

/* ---------- рабочее место ---------- */
.app { display: grid; height: 100%; grid-template: "tb tb tb" 44px "cat view props" 1fr / 290px 1fr 310px; }
.toolbar { grid-area: tb; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: var(--sheet); border-bottom: 1px solid var(--graphite); }
.venue { font-weight: 600; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tb-btn { white-space: nowrap; }
.tb-group { display: inline-flex; }
.tb-group .tb-btn + .tb-btn { border-left-width: 0; }
.tb-btn { background: var(--sheet); border: 1px solid #b9c1c6; padding: 4px 11px; cursor: pointer; border-radius: 0; }
.tb-btn:hover { background: var(--pencil-soft); }
.tb-btn[aria-pressed="true"] { background: var(--pencil); border-color: var(--pencil); color: #fff; }
.tb-check { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; color: #4b545b; cursor: pointer; }
.tb-spacer { flex: 1; }
.hint { color: var(--line); font-size: 13px; }

/* каталог */
.catalog { grid-area: cat; background: var(--sheet); border-right: 1px solid var(--hair); display: flex; flex-direction: column; min-height: 0; }
.catalog-head { padding: 10px 12px 6px; border-bottom: 1px solid var(--hair); }
.catalog-head input { width: 100%; padding: 6px 8px; border: 1px solid #b9c1c6; border-radius: var(--radius); background: #fff; }
.catalog-head p { margin: 6px 0 0; font-size: 12px; }
.catalog-list { overflow: auto; flex: 1; padding-bottom: 12px; }
.cat-group h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 12px 4px; font-size: 13px; font-weight: 600;
  background: var(--sheet); border-bottom: 1px solid var(--graphite); }
.item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: 10px;
  align-items: center; width: 100%; padding: 5px 12px; }
.item:hover { background: var(--pencil-soft); }
.item:focus-visible { outline: 2px solid var(--pencil); outline-offset: -2px; }
.item img { width: 44px; height: 44px; object-fit: contain; }
.item .nm { font-size: 13px; line-height: 1.3; }
.item .sz { display: block; font-size: 12px; color: var(--line); font-variant-numeric: tabular-nums; }

/* сцена */
.viewport { grid-area: view; position: relative; overflow: hidden; background: #fbfbfa; min-width: 0; }
.viewport canvas { display: block; }
.loading { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--graphite); color: #fff;
  padding: 4px 12px; font-size: 13px; }

/* штамп – основная надпись чертежа */
.stamp { position: absolute; right: 12px; bottom: 12px; border-collapse: collapse; background: rgba(255, 255, 255, .94);
  border: 2px solid var(--graphite); font-size: 12px; line-height: 1.25; min-width: 330px; pointer-events: none;
  font-variant-numeric: tabular-nums; }
.stamp td { border: 1px solid var(--graphite); padding: 3px 7px; white-space: nowrap; }
.stamp td.k { color: #5a636a; width: 1%; }
#stVenue { font-weight: 600; font-size: 13px; }

/* свойства */
.props { grid-area: props; background: var(--sheet); border-left: 1px solid var(--hair); padding: 14px 14px 20px; overflow: auto; }
.props-empty p { margin: 0 0 8px; }
.p-thumb { width: 100%; height: 150px; object-fit: contain; background: #fbfbfa; border: 1px solid var(--hair); }
.props h2 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 10px 0 8px; }
.p-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 14px; font-size: 13px; }
.p-list dt { color: var(--line); }
.p-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.p-actions { display: grid; gap: 6px; }
.btn { padding: 6px 10px; background: var(--sheet); border: 1px solid #b9c1c6; border-radius: var(--radius); cursor: pointer; text-align: left; }
.btn:hover { background: var(--pencil-soft); }
.btn-danger { color: var(--error); }

/* редактор плана */
.catalog.dimmed { opacity: .45; pointer-events: none; }
.editor h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.editor h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.ed-tools { border: 1px solid var(--hair); margin: 0 0 10px; padding: 6px 10px 8px; display: grid; gap: 3px; }
.ed-tools legend { font-size: 12px; color: var(--line); padding: 0 4px; }
.ed-tools label { cursor: pointer; }
.ed-field { display: grid; gap: 3px; font-size: 13px; color: #4b545b; margin-bottom: 8px; }
.ed-field select, .ed-field input, .ed-grid input { padding: 5px 6px; border: 1px solid #b9c1c6; border-radius: var(--radius);
  background: #fff; color: var(--graphite); width: 100%; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; font-size: 13px; color: #4b545b; margin-bottom: 6px; }
.ed-grid label { display: grid; gap: 3px; }
.ed-msg { min-height: 2.8em; font-size: 13px; color: #4b545b; margin: 4px 0 10px; }
.ed-msg.bad { color: var(--error); }
.ed-sel { border-top: 1px solid var(--graphite); padding-top: 10px; margin-bottom: 12px; }
.ed-files { display: grid; gap: 6px; border-top: 1px solid var(--hair); padding-top: 10px; }

@media (max-width: 1200px) { .app { grid-template-columns: 250px 1fr 230px; } .hint { display: none; } }
@media (max-width: 900px) {
  .app { grid-template: "tb" auto "view" 1fr "cat" 38vh / 1fr; }
  .props { display: none; }
  .toolbar { flex-wrap: wrap; padding: 6px 10px; }
  .stamp { min-width: 0; font-size: 11px; }
  .type-btn { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- расстановка (этап 5) ---------- */
.tb-sep { width: 1px; height: 20px; background: var(--hair); }
.viewport.placing canvas { cursor: crosshair; }
.sel-band { position: absolute; border: 1px dashed var(--pencil); background: rgba(47, 93, 138, .08); pointer-events: none; z-index: 4; }
.cursor-hint { position: absolute; z-index: 5; pointer-events: none; background: var(--sheet); border: 1px solid var(--graphite);
  padding: 2px 7px; font-size: 12px; white-space: nowrap; }
.cursor-hint.bad { border-color: var(--error); color: var(--error); }
.toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; max-width: min(640px, 90%);
  background: var(--graphite); color: #fff; padding: 7px 14px; font-size: 13px; pointer-events: none; }
.toast.bad { background: var(--error); }
.warn, .p-list dd.warn { color: var(--error); }
.warn-note { color: var(--error); font-size: 13px; margin: 6px 0 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; margin: 14px 0 0; }
.keys dt { font-weight: 600; white-space: nowrap; }
.keys dd { margin: 0; color: var(--line); }

@media (max-width: 1640px) { .hint { display: none; } }

/* ---------- проверка (этап 6) ---------- */
.check { margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--graphite); }
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check-head h2 { margin: 0; }
.btn-small { padding: 4px 10px; }
.check-auto { font-size: 12px; margin: 6px 0 4px; }
.check-sum { font-size: 13px; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.check-sum .n-error { color: var(--error); font-weight: 600; }
.check-sum .n-warning { color: #9a6a00; font-weight: 600; }
.check-sum .n-advice { color: var(--pencil); font-weight: 600; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { margin: 0; }
.check-item { display: grid; grid-template-columns: 10px 1fr; gap: 8px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--hair); padding: 7px 2px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.35; color: inherit; }
.check-item:hover, .check-item.active { background: var(--pencil-soft); }
.check-item .dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; }
.check-item.error .dot { background: var(--error); }
.check-item.warning .dot { background: #d9a200; }
.check-item.advice .dot { background: var(--pencil); }
.check-item .code { display: block; font-size: 11px; color: var(--line); margin-bottom: 1px; }
.check-ok { color: #2f8a57; font-size: 13px; }
.tb-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; font-size: 11px; line-height: 18px;
  background: var(--error); color: #fff; text-align: center; }
.tb-badge.warn { background: #d9a200; }
.tb-badge.ok { background: #2f8a57; }

/* ---------- проект, экспорт (этап 7) ---------- */
.tb-menu { position: relative; }
.menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 290px; background: var(--sheet);
  border: 1px solid var(--graphite); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); padding: 4px 0; }
.menu button { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 7px 14px; background: none; border: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--pencil-soft); outline: none; }
.menu kbd { font: inherit; font-size: 12px; color: var(--line); }
.menu hr { border: 0; border-top: 1px solid var(--hair); margin: 4px 0; }
.start-open { margin: 18px 0 0; }
.restore { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 10px;
  background: var(--sheet); border: 2px solid var(--pencil); padding: 8px 12px; font-size: 13px; max-width: 92%; }
.spec-dlg { width: min(1100px, 94vw); max-height: 90vh; border: 2px solid var(--graphite); padding: 0; }
.spec-dlg::backdrop { background: rgba(35, 41, 47, .35); }
.spec-head { position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; background: var(--sheet); border-bottom: 1px solid var(--hair); }
.spec-head h1 { font-size: 18px; margin: 0; }
.spec-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#specSub { margin: 10px 18px 0; }
.spec-body { padding: 0 18px 18px; font-size: 13px; }
.spec-body h2 { font-size: 15px; margin: 16px 0 6px; }
.spec-body table { border-collapse: collapse; width: 100%; }
.spec-body th, .spec-body td { border: 1px solid #b9c1c6; padding: 3px 7px; vertical-align: top; }
.spec-body th { background: #eef1f3; font-weight: 600; }
.spec-body th small { font-weight: 400; color: var(--line); }
.spec-body td.c { text-align: center; } .spec-body td.r { text-align: right; font-variant-numeric: tabular-nums; }
.spec-body tr.grp td { background: #f6f7f5; font-weight: 600; }
.spec-body tfoot td { font-weight: 600; }
.spec-body td.empty { text-align: center; color: var(--line); padding: 14px; }
[hidden] { display: none !important; }

/* ---------- учебный режим (этап 8) ---------- */
.start-h2 { font-size: 17px; margin: 26px 0 4px; }
.start-open { display: flex; flex-wrap: wrap; gap: 8px; }
.task-card { border: 2px solid var(--pencil); padding: 10px 12px; margin-bottom: 14px; background: #f7fafc; }
.task-kind { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pencil); }
.task-card h2 { margin: 2px 0 6px; }
.task-text p { margin: 0 0 6px; font-size: 13px; }
.task-meta { margin: 2px 0; font-size: 13px; }
.task-score { margin: 8px 0; font-size: 15px; font-weight: 600; }
.task-review { margin: 6px 0; font-size: 13px; color: #9a6a00; }
.btn-primary { background: var(--pencil); border-color: var(--pencil); color: #fff; }
.btn-primary:hover { background: #244a70; }
.student-dlg { width: min(460px, 92vw); border: 2px solid var(--graphite); padding: 20px 22px; }
.student-dlg::backdrop { background: rgba(35, 41, 47, .35); }
.student-dlg h1 { font-size: 18px; margin: 0 0 4px; }
.st-task { margin: 0 0 14px; color: var(--line); }
.student-dlg .ed-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.student-dlg input { padding: 6px 8px; border: 1px solid #b9c1c6; border-radius: var(--radius); font: inherit; }
.st-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.task-room-mark { pointer-events: none; }

/* ---------- справка, адаптация под ноутбук (этап 9) ---------- */
.help-dlg { width: min(980px, 94vw); max-height: 90vh; border: 2px solid var(--graphite); padding: 0; }
.help-dlg::backdrop { background: rgba(35, 41, 47, .35); }
.help-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 28px; padding: 6px 18px 18px; font-size: 13px; }
.help-body h2 { font-size: 15px; margin: 12px 0 6px; }
.help-body ol { margin: 0; padding-left: 18px; } .help-body li { margin-bottom: 4px; }
.toolbar { overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 1440px) {
  .app { grid-template-columns: 250px 1fr 285px; }
  .toolbar { gap: 6px; padding: 0 6px; }
  .tb-btn { padding: 4px 8px; }
  .venue { max-width: 160px; }
  .item img { width: 40px; height: 40px; }
  .stamp { min-width: 0; font-size: 11px; }
  .stamp td { padding: 2px 5px; }
}
@media (max-height: 800px) {
  .p-thumb { height: 110px; }
  .props { padding-top: 10px; }
}