/* kitchenparametric.pro — основа: тема (токены цветов), раскладка окна, хедер и логотип, бургер и меню, мета, рабочая область, подвал */
:root {
  --bar-h: 48px;
  --gap: 4px;
  /* тёмная красно-чёрная гамма; контраст текста к фону панелей — не ниже 4.5:1 */
  color-scheme: dark;
  --bg: #070707;
  --panel: #151515;
  --border: #2a2a2a;
  --border-strong: #4a4a4a;
  --text: #ededed;
  --muted: #a3a3a3;
  --filler: #1f1f1f;
  --ink: #f2f2f2;
  --ink-2: #c4c4c4;
  --accent: #F2443B;
  --accent-text: #FF6A61;   /* красный для текста: светлее, чтобы читался на тёмном */
  --accent-soft: #2A1716;
  --accent-fill: #D9534B;
  --warn: #E0A030;          /* предупреждение: жёлтый (контраст к #151515 и #1b1b1b — выше 7:1) */
  --dark: #0e0e0e;
  --dark-rule: #262626;
  --ax-x: #FF1F1F;   /* оси: длина — красная */
  --ax-y: #2F6BFF;   /* высота — синяя */
  --ax-z: #14E03C;   /* глубина — зелёная */
  --on-dark: #ffffff;
  --on-dark-2: #b5b5b5;
}

* { box-sizing: border-box; }

/* полосы прокрутки скрыты везде (как в Mooduline); прокрутка колёсиком, тачем и клавишами работает */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

html, body {
  margin: 0;
  height: 100%;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  padding: var(--gap);
  height: 100vh;
  overflow: hidden;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 0;
  min-width: 0;
}

.label {
  position: sticky;
  top: 0;
  padding: 8px 12px;
  background: var(--panel);
  font-weight: 600;
  color: var(--ink);
}

/* 1, 3, 2 — полосы на всю ширину */
.bar {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.bar .label { position: static; }

/* Хедер — как в Mooduline: логотип слева, бургер-меню справа */
header {
  flex: none;
  margin-bottom: var(--gap);
  padding: 0 8px 0 12px;
  gap: 16px;
}
header.panel { background: var(--dark); border-color: var(--border); }
.brand { display: flex; align-items: center; }
/* логотип — SVG (символ #kp-logo в начале страницы): высота задаёт размер, ширина — по пропорции */
.kp-logo { display: block; height: 19px; width: auto; flex: none; }
.kp-logo.sm { height: 11px; overflow: visible; }      /* меню и подвал: полоса 1px; хвост «p» — ниже рамки */
/* в хедере — kitchenparametric (одна жирность) над полосой с зазором 1px, хвост «p» проходит через полосу; точка — кусок полосы между двумя
   разрывами; PRO — красные заглавные, чуть сжатые по ширине (штрих как у kitchen), высотой 16px из 18:
   плоский низ — по низу полосы, «O» чуть выходит за край. Полоса, зазор, разрывы и точка — целые пиксели при высоте 18px; рамка — по центру хедера */
.kp-logo.hd { height: 18px; overflow: visible; }     /* хвост «p» — ниже рамки */

header .menu { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Бургер в стиле логотипа: жирная белая (kitchen), тонкая серая (parametric), короткая красная (.pro) */
/* При открытом меню бургер остаётся поверх панели и превращается в крестик */
.burger {
  position: relative; z-index: 102;
  width: 36px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer;
}
.burger i {
  position: absolute; right: 7px; width: 22px; height: 2px; border-radius: 1px;
  transition: transform .3s ease, width .2s ease, opacity .2s ease;
}
.burger i:nth-child(1) { top: 9.5px; height: 3px; background: var(--on-dark); }
.burger i:nth-child(2) { top: 15px; background: var(--on-dark-2); }
.burger i:nth-child(3) { top: 20px; width: 11px; background: var(--accent); }
.burger:hover i:nth-child(3) { width: 22px; }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Крестик: белая и красная сходятся в центр и поворачиваются, серая исчезает */
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] i:nth-child(3) { width: 22px; transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger i { transition: none; } }

.btn { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: 8px 14px; cursor: pointer; font: inherit; color: inherit; }
.btn:hover { background: var(--filler); }
.btn.ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; }
.btn.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Боковое меню справа */
#burger, #menu-x, .menu-i { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.menu-bg {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.menu-p {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(320px, 86vw);
  background: var(--dark); box-shadow: -18px 0 40px rgba(0, 0, 0, .5); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  /* выезжает справа и проявляется от полупрозрачного к непрозрачному */
  transform: translateX(100%); opacity: .35; visibility: hidden;
  transition: transform .28s ease, opacity .4s ease, visibility 0s linear .4s;
}
body.menu-open .menu-bg { opacity: 1; visibility: visible; transition: opacity .25s ease; }
body.menu-open .menu-p { transform: none; opacity: 1; visibility: visible; transition: transform .28s ease, opacity .4s ease; }

/* Шапка меню по высоте совпадает с хедером: справа над ней остаётся бургер-крестик */
.menu-h {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--bar-h) + var(--gap)); padding: var(--gap) 13px 0 20px;
  border-bottom: 1px solid var(--dark-rule); position: sticky; top: 0; background: var(--dark);
  font-size: 19px; font-weight: 900; letter-spacing: .01em; color: var(--on-dark);
}
.menu-h .dot { color: var(--accent-text); font-weight: 400; }

.menu-list { flex: 1; display: flex; flex-direction: column; padding: 10px 0; }

/* Пункт меню: белый текст, при наведении — красный, как .pro, и красная метка слева */
.menu-i {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 20px; border: 0;
  background: none; font: inherit; font-size: 15px; letter-spacing: -.01em; color: var(--on-dark); text-align: left; cursor: pointer;
  transition: color .15s ease;
}
.menu-i::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0;
  background: var(--accent); transform: scaleY(0); transition: transform .15s ease;
}
.menu-i:hover, .menu-i:focus-visible { color: var(--accent-text); outline: none; }
.menu-i:hover::before, .menu-i:focus-visible::before { transform: none; }
.menu-i svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.menu-empty { padding: 11px 20px; color: var(--on-dark-2); font-size: 13.5px; }

/* Подпись внизу — логотип */
.menu-f {
  flex: none; padding: 14px 20px 18px; border-top: 1px solid var(--dark-rule);
}

@media (prefers-reduced-motion: reduce) { .menu-bg, .menu-p, .menu-i, .menu-i::before { transition: none !important; } }

/* Сцена: мета + рабочая область. Мета уезжает вверх отрицательным margin-top и обрезается сценой */
#stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#meta {
  flex: none;
  padding-bottom: var(--gap);
  transition: margin-top .28s ease;
}

/* Мета заказа — поля из Mooduline v1_1 (заказчик, № заказа, сообщение оператору) в стиле логотипа:
   подпись серая, значение жирное тёмное, фокус — красная черта; строка высотой с хедер */
.om-row { height: var(--bar-h); display: flex; align-items: center; gap: 28px; padding: 0 8px 0 12px; }
.om-f {
  flex: 1 1 240px; max-width: 440px; min-width: 0; display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0 4px; border-bottom: 2px solid transparent; cursor: text; transition: border-color .15s ease;
}
.om-f.om-no { flex: 0 1 170px; }
.om-f > span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.om-f input {
  flex: 1 1 0; min-width: 0; border: 0; padding: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink);
}
.om-f input::placeholder, .om-note::placeholder { color: var(--muted); font-weight: 400; }
.om-no input { font-variant-numeric: tabular-nums; }
.om-f:hover { border-bottom-color: var(--border-strong); }
.om-f:focus-within { border-bottom-color: var(--accent-text); }

/* «Сообщение оператору» — как пункт меню: серый текст, при наведении и открытом поле красный;
   красная точка (как в «.pro») — в свёрнутом сообщении есть текст */
.om-b {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  transition: color .15s ease;
}
.om-b svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.om-b:hover, .om-b.on { color: var(--accent-text); }
.om-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.om-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.om-b.has:not(.on) .om-dot { display: block; }

.om-note {
  display: block; width: calc(100% - 20px); margin: 0 8px 12px 12px; min-height: 68px; padding: 9px 12px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--dark);
  font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink);
}
.om-note[hidden] { display: none; }
.om-note:focus { outline: none; border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }

@media (max-width: 640px) { .om-row { gap: 14px; padding-left: 12px; } .om-b span { display: none; } }
@media (prefers-reduced-motion: reduce) { .om-f, .om-b { transition: none; } }

/* Рабочая область: 4 | 5 | 6 над 7. Ширины ≈ 35% / 16.5% / 48.5%, высоты 6:7 ≈ 63% / 37% */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 70fr) minmax(0, 33fr) minmax(0, 97fr);
  grid-template-rows: minmax(0, 63fr) minmax(0, 37fr);
  grid-template-areas:
    "base params preview"
    "base params order";
  gap: var(--gap);
  min-height: 0;
}

#base    { grid-area: base; }
#params  { grid-area: params; }
#preview { grid-area: preview; display: grid; place-items: center; }
#order   { grid-area: order; }

.col { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; }

/* Заглушка контента, чтобы панель было чем скроллить */
.filler {
  margin: 0 12px 12px;
  height: 1600px;
  background: repeating-linear-gradient(
    var(--filler) 0 28px, transparent 28px 34px
  );
}

#preview .label { position: static; color: var(--muted); font-size: 18px; }

/* Подвал: по умолчанию закрыт, выезжает снизу */
footer {
  flex: none;
  height: 0;
  overflow: hidden;
  transition: height .25s ease;
}
footer.open { height: calc(var(--bar-h) + var(--gap)); }

/* Как хедер и меню: подпись-логотип слева; проявляется от полупрозрачного к непрозрачному */
.footer-inner {
  margin-top: var(--gap); gap: 12px; padding: 0 8px 0 20px;
  opacity: .35; transition: opacity .4s ease;
}
footer.open .footer-inner { opacity: 1; }
.footer-inner.panel { background: var(--dark); border-color: var(--border); }


@media (prefers-reduced-motion: reduce) { footer, #meta, .footer-inner { transition: none; } }

/* спрайт логотипа: вне потока страницы (вместо встроенного style) */
.sprite { position: absolute; }
/* логотип в шапке ведёт на главную сайта продукта */
.brand a { display: inline-flex; color: inherit; }

/* Окна как слои (js/layers.js): выключенное окно убирается, сетка main перестраивается скриптом */
.ly-off { display: none !important; }
.menu-sec {
  margin-top: 8px; padding: 14px 20px 4px; border-top: 1px solid var(--dark-rule);
  font-size: 12.5px; font-weight: 900; letter-spacing: .04em; color: var(--on-dark-2);
}
.menu-sec .dot, .menu-ly .dot { color: var(--accent-text); font-weight: 400; }
.menu-ly .ly-ck { stroke: #fff; opacity: 0; }
.menu-ly [aria-checked="true"] svg rect { fill: var(--accent); stroke: var(--accent); }
.menu-ly [aria-checked="true"] .ly-ck { opacity: 1; }
/* «Редактор базы» под переключателями окон: есть только у редактора базы */
.menu-db { margin-top: 6px; }
.menu-db[hidden] { display: none; }
#base .win-h .db-close { margin-left: auto; font-weight: 400; letter-spacing: normal; }