/* Конструктор меблів — стилі лише двох сторінок (/konstruktor,
   /konstruktor-kuhni). Окремий файл, а не `styl.css`, з двох причин:

   1. `public/_s/styl.css` СКЛАДАЄ інструмент `tools/styl_z_maketa.py`, і його
      межа §28.9 — 61 440 Б при живій вазі 58 457 Б. Запас 2 983 Б, а цього
      файла тут 6+ КБ: він би завалив контроль складача.
   2. Ці правила потрібні двом адресам із 135. Решті 133 сторінок вони
      тільки додавали б вагу до завантаження.

   Підключається через `'css' => '/_s/konstruktor.css'` у
   `app/Data/posadkovi-konstruktor.php` — `Posadkovi::meta()` пропускає шлях
   за маскою `^/_s/[a-z0-9_.-]+\.(css|js)$`, каркас друкує його рядком 61.

   Кольори — ЛИШЕ змінними сайта (`--akcent`, `--fon-vtor`, …): складач
   `styl_z_maketa.py` міняє палітру таблицею ZAMINY, і зашите тут значення
   розійшлося б із рештою сайта молча.

   Класи `kn-k*` — для SVG, яке малює `konstruktor.js`. Тримаю їх тут, а не
   атрибутами в JS: так креслення змінює колір разом із сайтом і слухається
   «меньше движения» без жодного рядка в скрипті. */

/* ---------- сітка: керування та вихід ---------- */

.kn{display:grid;gap:1.5rem;align-items:start}

@media (min-width:900px){
  .kn{grid-template-columns:minmax(300px,.92fr) 1.08fr;gap:2rem}
  /* Креслення й кошторис лишаються перед очима, поки людина крутить поля
     нижче. Відступ 5.5rem — нижче липкої `.shapka` (z-index 40), тому
     підсумок не ховається під шапкою. */
  .kn-vyhid{position:sticky;top:5.5rem}
}

/* ---------- керування ---------- */

.kn-keruvannya{display:flex;flex-direction:column;gap:1.3rem}

.kn-krok{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tyhe);display:flex;align-items:center;gap:.6rem}
.kn-krok::after{content:"";flex:1;height:1px;background:var(--ramka)}

.kn-polya{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(142px,1fr))}

.kn-pole{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;min-width:0}
.kn-pole>span{color:var(--tekst);font-weight:600}
.kn-pole small{color:var(--tyhe);font-size:.72rem}

.kn-pole input[type=number],
.kn-pole select{font:inherit;font-size:.9rem;width:100%;min-width:0;padding:.5rem .6rem;
  border:1.5px solid var(--ramka);border-radius:var(--radius-polya);
  background:var(--fon-vikna);color:var(--tekst)}
.kn-pole input[type=number]:focus-visible,
.kn-pole select:focus-visible{outline:2px solid var(--akcent);outline-offset:1px;
  border-color:var(--ramka-syl)}

/* Галочка («Фурнітура Blum») одним рядком на всю ширину: поле без числа, і
   поряд із числовими воно виглядало б обрізаним стовпцем. */
.kn-pole-halochka{grid-column:1/-1;flex-direction:row;align-items:center;gap:.55rem}
.kn-pole-halochka input{width:1.1rem;height:1.1rem;accent-color:var(--akcent);flex:none}
.kn-pole-halochka>span{font-weight:600}

/* ---------- вихід: креслення ---------- */

.kn-vyhid{display:flex;flex-direction:column;gap:1rem}
.kn-vyhid>h3{margin:0;font-size:1.05rem}

.kn-kresl{display:grid;gap:.9rem;padding:.9rem;background:var(--fon-vikna);
  border:1px solid var(--ramka);border-radius:var(--radius-kartky)}
.kn-kresl>[data-kn-kresl]{display:grid;gap:.9rem}
.kn-kresl>[data-kn-kresl]:empty{display:none}
.kn-kresl figure{margin:0;display:flex;flex-direction:column;gap:.35rem}
.kn-kresl figcaption{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tyhe)}
.kn-kresl svg{display:block;width:100%;height:auto;overflow:visible}

/* Креслення. `konstruktor.js` малює НЕ в міліметрах, а в логічних одиницях:
   довга сторона виріба завжди 1000, решта за масштабом. Через це товщина
   лінії й кегль підпису стоять тут числами й однаково читаються і на шафі
   1400 мм, і на кухні 8000 мм; у міліметрах лінія «14» на восьми метрах
   перетворилась би на волосину. */
.kn-kf{fill:var(--fon-vtor)}
.kn-kl{fill:none;stroke:var(--tekst);stroke-width:7;stroke-linejoin:round}
.kn-kv{fill:none;stroke:var(--tekst);stroke-width:4}
.kn-ka{fill:var(--akcent);opacity:.16}
.kn-kab{fill:none;stroke:var(--akcent);stroke-width:4}
.kn-kp{fill:none;stroke:var(--ramka-syl);stroke-width:3;stroke-dasharray:12 9}
.kn-kd{fill:none;stroke:var(--akcent);stroke-width:2.5}
.kn-kt{fill:var(--akcent);font-size:32px;font-weight:600;
  font-family:ui-sans-serif,system-ui,sans-serif}

/* ---------- вихід: кошторис ---------- */

.kn-tablycya-obgortka{overflow-x:auto;-webkit-overflow-scrolling:touch}

.kn-tablycya{width:100%;border-collapse:collapse;font-size:.85rem;min-width:19rem}
.kn-tablycya th,
.kn-tablycya td{padding:.42rem .5rem;text-align:left;border-bottom:1px solid var(--ramka)}
.kn-tablycya thead th{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tyhe);font-weight:600;white-space:nowrap}
.kn-tablycya th:nth-child(n+2),
.kn-tablycya td:nth-child(n+2){text-align:right;white-space:nowrap}
.kn-tablycya tbody td:first-child{min-width:8rem}
.kn-tablycya tfoot th{font-weight:600}
.kn-tablycya tfoot td{font-variant-numeric:tabular-nums}
.kn-tablycya tfoot tr:first-child th,
.kn-tablycya tfoot tr:first-child td{border-top:2px solid var(--ramka-syl)}

.kn-vsogo th,
.kn-vsogo td{font-size:1.08rem;color:var(--akcent);border-bottom:none;padding-top:.6rem}

/* ---------- підписи під кошторисом ---------- */

.kn-pidtyagnuto,
.kn-pidkaz{margin:0;font-size:.8rem;color:var(--tyhe);line-height:1.5}
.kn-pidtyagnuto{padding:.55rem .7rem;background:var(--fon-vtor);
  border-left:3px solid var(--ramka-syl);border-radius:var(--radius-polya)}

.kn-kod{margin:0;font-size:.76rem;color:var(--tyhe);line-height:1.6}
.kn-kod code{display:inline-block;max-width:100%;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;
  padding:.18rem .4rem;background:var(--fon-vtor);border-radius:4px;color:var(--tekst)}

/* Кнопки беруть вигляд із `styl.css` (`.knopky`, `.knopka`,
   `.knopka-golovna`, `.knopka-tyha`) — тут лише перенос на вузькому. */
.kn-vyhid .knopky{flex-wrap:wrap;gap:.5rem}

.kn-susid{margin:0;font-size:.86rem}
.kn-susid a{color:var(--akcent);font-weight:600}

/* ---------- спокій ---------- */

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