/* Конструктор схем — верстка поверх токенів @theinua/ui (design.css).
   Власних кольорів не заводимо: усе на змінних, тож темна тема працює сама. */

.sc-layout {
  display: grid;
  grid-template-columns: var(--sc-pal-w, 232px) minmax(0, 1fr) var(--sc-side-w, 328px);
  grid-template-areas: 'pal stage side';
  gap: 14px;
  align-items: start;
}
.sc-pal { grid-area: pal; }
.sc-stage { grid-area: stage; }
/* Права колонка — ДВІ картки, а не одна: «Елемент» стосується вибраного, «Уся схема» —
   креслення цілком. Розділені вони не заголовком, а порожнечею між картками: інакше
   налаштування елемента й дії над схемою читались як один довгий список рівних пунктів. */
.sc-side { grid-area: side; display: grid; gap: 14px; align-content: start; }

.sc-col {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px;
}

/* Три рівні підписів замість одного: назва картки (що це за зона) → назва секції
   (капс) → підпис поля. Раніше все було одним h3-капсом, тож вага в них була однакова. */
.sc-title { margin: 0 0 2px; font-size: 1rem; font-weight: 600; }
.sc-lead { margin: 0 0 12px; color: var(--hint); font-size: .78rem; line-height: 1.35; }

.sc-col h3 {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hint);
  margin: 16px 0 6px;
}
.sc-col h3:first-child { margin-top: 0; }
.sc-lead + h3 { margin-top: 0; }

.muted { color: var(--hint); font-size: .85rem; }
.bad { color: var(--danger); }
.ok { color: var(--success); }
.warn { color: var(--p-orange); font-style: normal; font-size: .78rem; }

/* ── Палітра ─────────────────────────────────────────────────────────────── */
/* Плитки живуть у групах; сітка — всередині групи, а не на всій палітрі. */
.palette { display: flex; flex-direction: column; gap: 10px; }
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pal-group h3 {
  margin: 2px 0 6px;
  font: 600 .68rem var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

.pal-search {
  width: 100%; margin-bottom: 8px; padding: 7px 10px;
  border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: 400 .82rem var(--font);
}
.pal-search:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Чіпси груп — той самий фільтр, що пошук, лише перемикачем. */
.pal-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.pal-chips button {
  padding: 3px 9px;
  border: 1px solid var(--border-gold); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font: 500 .72rem var(--font);
}
.pal-chips button.on { background: var(--green); color: #fff; border-color: var(--green); }
.pal-chips button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.pal-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font: 500 .72rem var(--font);
  color: var(--text);
}
.pal-item:hover { border-color: var(--gold); box-shadow: 0 2px 10px rgba(var(--green-rgb), .1); }
.pal-item svg { width: 100%; height: 46px; }
/* Зв'язок з атмосферою фізично дрібний — 96×40 мм проти 475×667 у баняка. Вписаний на
   весь зріст, він у списку обіцяє розмір, якого не має, тож показуємо його вдвічі
   меншим. Правило точкове: на самій схемі елемент малюється у справжньому розмірі. */
.pal-item[title="vent"] svg { width: 50%; height: 23px; }
.pal-item span { text-align: center; line-height: 1.2; }

/* Індикатори процесу — не деталі апарата, тож помічені окремо. */
.pal-item.is-indicator { border-style: dashed; }

/* ── Полотно ─────────────────────────────────────────────────────────────── */
.sc-stage { position: relative; padding: 8px; }
.sc-stage .rb-scene { width: 100%; height: 74vh; display: block; touch-action: none; }

/* Індикатор без прив'язаного джерела: у редакторі видно, що він стоїть і що він ще
   «не живий». У прев'ю та OG його просто нема — там сцена вже не редагується. */
[data-item].unbound-indicator { opacity: .3; }

.sel-box {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 8 6;
  pointer-events: none;
}

.stage-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--hint); pointer-events: none; text-align: center; padding: 20px;
}
/* display від селектора класу перебиває display:none, який атрибут hidden ставить
   стилем браузера, — без цього напис лишався б поверх намальованої схеми. */
.stage-empty[hidden] { display: none; }

/* Смуга над полотном лишає тільки те, що стосується самого перегляду: чим схема
   називається і що на ній видно. Раніше в тому ж ряду рівною міткою стояв «Демо-режим»
   (читався як режим ЕКСПОРТУ, а не показу) і «Очистити», яке стирає роботу; стирання
   переїхало до дій над усією схемою, до сусіда «Видалити елемент». */
.stage-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}
/* Назва тягнеться й відсовує решту праворуч. Робити це через margin-left:auto на
   «Очистити» не можна: авто-відступ з'їдає вільне місце ДО того, як воно дістанеться
   flex-grow, і поле лишалось би вузьким при напівпорожній смузі. */
.bar-name {
  flex: 1 1 200px;
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--hint);
}
.bar-name input { flex: 1 1 auto; min-width: 0; }

.bar-group {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0; padding: 2px 10px 5px;
  border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
}
.bar-group legend {
  padding: 0 4px;
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em;
  color: var(--hint);
}
.bar-group label {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; font-size: .84rem;
}
.bar-group select { width: auto; padding: 4px 6px; font-size: .82rem; }

/* Кнопки в панелях щільніші за ядрові: у колонці завширшки 300 px їх з десяток, і
   повний розмір ядра перетворював панель на драбину з однакових прямокутників. */
.sc-col .btn { padding: 9px 12px; font-size: .86rem; border-radius: var(--radius-sm); }

/* Дно картки — місце для дії без вороття, як «Видалити елемент» на дні панелі елемента.
   Риска відділяє її від решти, щоб у неї не потрапляли випадково. */
.sc-danger { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
.sc-danger .btn { width: 100%; color: var(--danger); border-color: rgba(var(--danger-rgb), .35); }
/* Стерти все — дія без вороття, тож питаємо підтвердження в самій кнопці: другий клац
   замість вікна. Заряджений стан видно заливкою, а не самим лише кольором тексту. */
.bar-clear.armed { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Перелік проблем: поки він видимий, схеми на полотні НЕМА — половину не малюємо. */
.problems {
  background: rgba(var(--danger-rgb), .07);
  border: 1px solid rgba(var(--danger-rgb), .3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: .88rem;
}
.problems ul { margin: 6px 0 0; padding-left: 20px; }

/* ── Панель елемента ─────────────────────────────────────────────────────── */
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel-head span { font-size: .76rem; }

/* Порожня панель — не заглушка, а підказка: людина має розуміти, ЩО тут з'явиться і
   що для цього зробити (правило empty-states). Пунктир каже «місце зарезервовано». */
.panel-empty {
  padding: 14px;
  border: 1px dashed var(--border-gold);
  border-radius: var(--radius-sm);
  color: var(--hint);
  font-size: .82rem;
  line-height: 1.45;
}
.panel-empty b { display: block; margin-bottom: 4px; color: var(--text); font-size: .88rem; }

.row { display: block; margin: 5px 0; font-size: .9rem; }
select.row, input.row { width: 100%; }

.row.src { display: grid; grid-template-columns: 1fr; gap: 3px; }
.row.src span { font-size: .82rem; color: var(--hint); }

.hint-src { font-size: .76rem; line-height: 1.35; margin: 0 0 8px; }

/* Повзунок демо-значення поруч із прив'язаним джерелом. */
.lvl { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.lvl input[type=range] { width: 100%; margin: 0; }
.lvl b { font: 500 .76rem var(--font); color: var(--hint); min-width: 34px; text-align: right; }
.lvl input:disabled { opacity: .4; }

/* Порти НЕ чіпаємо: вони частина бібліотеки й мають лишатись такими, як намальовані.
   Для показу малюємо окремий шар виносок — маркер із кодом середовища збоку від
   апарата й тонка лінія до самого порту. Так мітки не налипають одна на одну. */
/* Іконка без підкладки й рамки — колір несе середовище, форма несе напрямок.
   Селектори з іменем тега навмисно: інакше .m-<середовище> нижче має однакову
   специфічність і перебиває fill/stroke, а гілка замість лінії стає залитою плямою. */
.port-callout path.ic { stroke: none; }
.port-callout path.wave { fill: none; stroke-linecap: round; opacity: .7; }
.port-callout circle.pin { stroke: none; }

/* Колір середовища — з палітри дизайн-системи (--p-*), а не з кольорів бібліотеки.
   Розкладка читається як у будь-якій автоматиці: пара гаряча, вода холодна, продукт
   свій, злив нейтральний. Відтінки рознесено по тону (0° / 210° / 174° / ненасичений),
   щоб вони не злипались у дрібному значку й лишались помітними в обох темах.
   Значення на кольорі НЕ тримається: середовище розрізняється формою значка, а
   напрямок — стрілкою (правило color-not-only). */
.port-callout .m-vapor,   .lg-vapor   { fill: var(--p-red);       stroke: var(--p-red); }
.port-callout .m-coolant, .lg-coolant { fill: var(--p-azure);     stroke: var(--p-azure); }
.port-callout .m-liquid,  .lg-liquid  { fill: var(--p-malachite); stroke: var(--p-malachite); }
/* спирт — та сама рідина, лише інша лінія: колір спільний із liquid, щоб на
   схемі не з'явилось четверте кольорове середовище там, де їх насправді три */
.port-callout .m-spirt,   .lg-spirt   { fill: var(--p-malachite); stroke: var(--p-malachite); }
.port-callout .m-water,   .lg-water   { fill: var(--p-cyan);      stroke: var(--p-cyan); }
.port-callout .m-sensor,  .lg-sensor  { fill: var(--p-violet);    stroke: var(--p-violet); }
.port-callout .m-drain,   .lg-drain   { fill: var(--p-grey);      stroke: var(--p-grey); }

/* Розмірні виноски (шар dims.js) — креслярська графіка: тонкі лінії з косими
   зарубками, число з білим ореолом (paint-order), щоб читалось поверх ліній
   схеми і в чорно-білому друці. Товщина — non-scaling, бо масштаб плаває. */
.dims-layer { color: #33414e; }
.dims-layer .dim-line, .dims-layer .dim-tick {
  stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.dims-layer .dim-ext-line {
  stroke: currentColor; stroke-width: .7; opacity: .55; vector-effect: non-scaling-stroke; }
.dims-layer .dim-text { fill: currentColor; font-family: var(--font, sans-serif);
  font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: .22em; stroke-linejoin: round; }
.dims-layer .dim-dia { font-style: italic; }
.dims-layer .dim-ins { fill: var(--p-red, #b3261e); }
.dims-layer .dim-total .dim-text { font-weight: 700; }

/* Легенда: без неї значок доводиться вгадувати (правило legend-visible). */
.port-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-border);
  font-size: .78rem; color: var(--hint); }
.port-legend i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.port-legend svg { width: 20px; height: 20px; flex: none; }

.sc-col input[type=text], .sc-col input[type=number], .sc-col select, .sc-col textarea {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font: 400 .88rem var(--font);
}
.sc-col textarea { font-family: ui-monospace, monospace; font-size: .74rem; }

.seg { display: flex; gap: 4px; }
.seg button {
  flex: 1; padding: 6px 0;
  border: 1px solid var(--border-gold); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer;
  font: 500 .82rem var(--font);
}
.seg button.on { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Значки на кнопках ───────────────────────────────────────────────────── */
/* Значок працює в парі з підписом, а не замість нього: він пришвидшує впізнавання
   того, що вже прочитали, а сам по собі змушував би вгадувати. Обведення бере
   currentColor, тож на зеленій активній кнопці значок білішає разом із текстом. */
.ico-btn { width: 16px; height: 16px; flex: none; }
.sc-col .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}

/* Значок порту в рядку панелі — той самий, що на полотні (див. portGlyph). */
.ico-port { width: 17px; height: 17px; flex: none; }
.port-was, .port-now { display: inline-flex; align-items: center; gap: 6px; }
.port-now { margin-top: 2px; color: var(--p-orange); font-size: .8rem; }
.port-now b { font-weight: 600; }

.ports { font-size: .78rem; line-height: 1.4; }

/* ── Проток теплоносія ───────────────────────────────────────────────────── */
/* Траса — лінія від входу до виходу, яку збірка проклала по реальних витках змійовика.
   Сама по собі вона невидима: показуємо ЛИШЕ рух, і лише коли потік справді є. Штрих
   їде за напрямком шляху (від coolant_in до coolant_out), тож напрям брати нізвідки
   більше не треба. Колір — теплоносій із палітри, як у виносок. */
/* Траса з бібліотеки лишається невидимою — вона лише каже, КУДИ тече. */
[data-flow] { fill: none; stroke: none; }

/* Рух — це сама заливка контуру: її підмінює градієнт того ж кольору з бігучою
   світлішою хвилею (див. applyFlow). Кольори звідти ж, із заливки, тому тут стилів
   нема — і не має бути: інакше рідина на елементі з іншим кольором стала б чужою.
   Рух гасне під prefers-reduced-motion — хвиля лишається нерухомою, але видно, що
   в трубках є середовище. */

/* ── Замки на стиках ─────────────────────────────────────────────────────── */
/* Замкнений — колір апарата, тобто «так і має бути»; відкритий — попереджувальний,
   бо це відхилення від того, що показує геометрія. Ціль для пальця більша за значок:
   на дотику 26 px замало, а роздувати сам замок означало б закрити ним стик. */
/* Хомут намальовано з кольоровою заливкою (активний стан); нейтральний і знятий
   перефарбовуємо ПОВЕРХ inline-стилів малюнка — звідси !important. Фарбуємо лише
   .lock-body: ціль для пальця (.hit) лежить поза ним і лишається прозорою.
   Наведення РОСТИТЬ хомут і міняє колір — так акцент читається на самій деталі,
   а не плямою навколо неї. */
.joint-locks .clamp-lock { pointer-events: none; }
.joint-locks .lock-body { transition: transform .13s ease; }
.joint-locks .clamp-lock:not(.is-active) .lock-body rect,
.joint-locks .clamp-lock:not(.is-active) .lock-body path { fill: var(--surface) !important; }
.joint-locks .clamp-lock.is-active { pointer-events: auto; cursor: pointer; }
.joint-locks .clamp-lock.is-active:hover .lock-body { transform: scale(1.25); }
.joint-locks .clamp-lock.is-active:hover .lock-body rect,
.joint-locks .clamp-lock.is-active:hover .lock-body path {
  fill: var(--green) !important; stroke: var(--green) !important;
}
.joint-locks .clamp-lock.is-open .lock-body rect,
.joint-locks .clamp-lock.is-open .lock-body path {
  fill: none !important; stroke-dasharray: 6 5; opacity: .75;
}
.joint-locks .clamp-lock.is-open:hover .lock-body rect,
.joint-locks .clamp-lock.is-open:hover .lock-body path {
  stroke: var(--green) !important; opacity: 1;
}
.joint-locks .hit { fill: transparent !important; stroke: none !important; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .joint-locks .lock-body { transition: none; } }

/* ── Порт у фокусі ───────────────────────────────────────────────────────── */
/* Виносок на апараті з кількох тарілок буває під два десятки, і за підписом «теплоносій,
   вхід» не видно, ЯКИЙ саме це штуцер. Наведення чи таб на рядок у панелі підсвічує
   порт на схемі та його виноску. Колір навмисно НЕ з палітри середовищ — інакше
   підсвічений порт читався б як порт іншого середовища. */
.port-row:hover, .port-row:focus-within { background: var(--surface); border-radius: var(--radius-sm); }

/* Середовище й напрям — поруч: разом вони читаються як одна відповідь «що і куди». */
.row.src .two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4px; }

rect.port-hot { stroke: var(--text); stroke-width: 2.5; paint-order: stroke; }
[data-cal].port-hot .wave { stroke-width: 2.4; stroke-dasharray: none; opacity: 1; }
[data-cal].port-hot .pin { r: 4; }
[data-cal].port-hot .mk { filter: drop-shadow(0 0 6px var(--text)); }

/* Решта виносок притухає — контраст робить пошук миттєвим. */
.port-callout:has(.port-hot) > g:not(.port-hot) { opacity: .28; }

/* Ширина й висота поруч: це одна відповідь «який аркуш», а не два окремі налаштування. */
.canvas-size { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.canvas-size label { display: grid; gap: 3px; font-size: .82rem; color: var(--hint); }

.sc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-actions button { flex: 1 1 auto; }

/* Сирий JSON — не рівня «Копіювати посилання»: ним користуються одиниці, а місця він
   займав як цілий розділ. Тепер згорнутий (правило progressive-disclosure), але
   лишається на видноті одним рядком, а не ховається в меню. */
.sc-adv { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
.sc-adv > summary {
  display: flex; align-items: center; gap: 7px;
  min-height: 30px;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em;
  color: var(--hint);
}
.sc-adv > summary::-webkit-details-marker { display: none; }
.sc-adv > summary::before {
  content: '\25B8';
  display: inline-block;
  transition: transform .15s ease;
}
.sc-adv[open] > summary::before { transform: rotate(90deg); }
.sc-adv > summary:hover { color: var(--text); }
.sc-adv > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Клавіатура має бачити, де вона стоїть, — і на кнопках-сегментах, і на плитках. */
.pal-item:focus-visible,
.seg button:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}

/* На дотику кнопки доростають до 44 px; на миші дрібніші — панель і так довга. */
@media (pointer: coarse) {
  .seg button, .sc-actions button, .bar-group label { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-adv > summary::before { transition: none; }
}

/* ── Демо: пара підіймається ─────────────────────────────────────────────── */
/* Анімуємо ЛИШЕ <path> усередині індикатора: у самого g[data-item] transform стоїть
   атрибутом (його ставить рушій), і CSS-трансформ його б перебив, зсунувши елемент. */
body.demo-on [data-el="steam"] path {
  animation: steam-rise 3.2s ease-in-out infinite;
}
body.demo-on [data-el="steam"] path:nth-child(2n) { animation-delay: -1.1s; }
body.demo-on [data-el="steam"] path:nth-child(3n) { animation-delay: -2.2s; }

@keyframes steam-rise {
  0%, 100% { opacity: .28; transform: translateY(16px); }
  50%      { opacity: .92; transform: translateY(-8px); }
}

/* Рух гасимо глобально; стан лишається читабельним рівнем і кольором (SPEC). */
@media (prefers-reduced-motion: reduce) {
  body.demo-on [data-el="steam"] path { animation: none; opacity: .9; }
}

/* ── Вузькі екрани ───────────────────────────────────────────────────────── */
/* Полотно ширше за все інше, тож першим здається не воно, а третя колонка: схема йде
   на всю ширину, а список елементів і панелі стають під нею поруч. Раніше все ставало
   в один стовпчик, і панель вибраного опинялась через екран прокрутки від полотна. */
@media (max-width: 1180px) {
  .sc-layout {
    grid-template-columns: minmax(190px, 1fr) minmax(280px, 1.35fr);
    grid-template-areas: 'stage stage' 'pal side';
  }
  .pal-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-stage .rb-scene { height: 60vh; }
}
@media (max-width: 720px) {
  .sc-layout { grid-template-columns: 1fr; grid-template-areas: 'stage' 'pal' 'side'; }
  .palette { grid-template-columns: repeat(3, 1fr); }
}

/* Панелі параметричних полів. Баняк має вісім полів і два перемикачі — одним
   стовпчиком не видно, що до чого: рамка збирає поле з його частиною («кришка
   є/нема» стоїть над формою кришки), а не лишає їх у спільній купі. */
.pgroup {
  margin: 14px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
}
.pgroup h3 { margin-top: 12px; }
.pgroup-t {
  margin: 0 0 8px !important;
  color: var(--text);
  letter-spacing: .04em;
}

/* Відводи царги: рядок «Ø · відступ · бік · юбка · ×». Сітка, а не потік, —
   щоб колонки збігалися по вертикалі й підписи шапки стояли над своїми полями. */
.taps { margin-top: 4px; }
.tap-head, .tap-row {
  display: grid;
  /* Колонки ГНУЧКІ. Фіксовані (4.5rem 4rem 5.5rem 4rem) давали min-content
     ширший за стовпець панелі, і той роздувався під них: у редагуванні панель
     вилазила за екран, а в режимах без відводів — навпаки стискалася. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.6rem;
  gap: 4px; align-items: center;
}
.tap-head { margin-bottom: 2px; }
.tap-head span {
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: .04em; color: var(--hint);
}
.tap-row { margin-bottom: 4px; }
.tap-row select, .tap-row input {
  width: 100%; min-width: 0;
  /* Чотири поля в рядку — тісно: дрібніший шрифт і вужчі поля, щоб «праворуч»
     лишалось словом, а не «прав…». */
  padding: 6px; font-size: .8rem;
}
.tap-row [data-tap-del] {
  padding: 0; line-height: 1; font-size: 1rem;
  color: var(--danger); background: none; border: none; cursor: pointer;
}
.taps [data-tap-add] { margin-top: 2px; }
/* П'ять колонок (врізки в кришку) у тій самій ширині: вужчі поля, без
   спінерів — інакше «115» у полі відступу лишалось «1». */
.taps[data-tap-cols="dia,r,ang,skirt,dir"] .tap-head, .taps[data-tap-cols="dia,r,ang,skirt,dir"] .tap-row { gap: 3px; }
.taps[data-tap-cols="dia,r,ang,skirt,dir"] .tap-row select,
.taps[data-tap-cols="dia,r,ang,skirt,dir"] .tap-row input { padding: 6px 3px; font-size: .75rem; }
.taps[data-tap-cols="dia,r,ang,skirt,dir"] .tap-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.taps[data-tap-cols="dia,r,ang,skirt,dir"] .tap-row input[type="number"]::-webkit-inner-spin-button { display: none; }
/* Кришка згори: креслення під замовлення, точки-врізки тягнуть мишею. */
.lid-top { display: block; width: 100%; height: auto; max-height: 260px; margin: 2px 0 8px; }
.lid-top [data-ltap] { cursor: grab; touch-action: none; }
.lid-top [data-ltap]:active { cursor: grabbing; }
.pass-lid { margin: 8px 0 0; }
.pass-lid svg { display: block; width: 100%; max-width: 240px; height: auto; }


/* Перемикач правої колонки: редагування або рух. Стоїть на місці заголовка
   картки — режим і є її назвою, другого підпису тут не треба. */
.seg-mode { margin-bottom: 10px; }

/* Інструменти режиму — праворуч у смузі над полотном. Масштаб числом поруч із
   кнопками: у роботі важливіше знати, ЯКИЙ він, ніж мати ще одну кнопку. */
/* margin-left:auto тут не треба: інструменти режиму живуть у власному ряду, а в
   ряду з назвою праворуч їх відсовує саме поле назви (див. .bar-name). */
.bar-tools { display: flex; align-items: center; gap: 6px; }
.bar-tools .btn { padding: 4px 10px; min-height: 30px; }
.bar-zoom { font-size: .78rem; color: var(--hint); min-width: 3.2rem; text-align: center; }

/* Верхній ряд праворуч — дії над ГОТОВИМ документом: поділитися й відкрити
   сторінкою. Там їх шукають за звичкою з текстових редакторів, і там вони не
   плутаються з інструментами креслення. Відсовує їх праворуч поле назви, яке
   росте, — тому власного margin-left:auto тут нема. */
.bar-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bar-doc .btn { padding: 4px 10px; min-height: 30px; }

/* Третій ряд — усе про ВИГЛЯД і аркуш: масштаб поруч із обрізкою й центруванням.
   Сусідство навмисне: «Вписати» міняє лише те, що видно, «Обрізати по схемі» —
   сам аркуш, і поруч видно, що це різні дії над одним і тим самим.
   Межу групи малюємо, лише коли інструменти режиму справді є: у режимі портів
   ряд лишається порожнім, і риска висіла б перед кнопками сама по собі. */
.bar-view { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bar-view .btn { padding: 4px 9px; min-height: 30px; }
.bar-view .bar-tools:empty { display: none; }
.bar-view .bar-tools:not(:empty) + .bar-grp {
  padding-left: 9px; border-left: 1px solid var(--border-gold);
}

/* Другий ряд смуги — інструменти ВИБРАНОГО елемента. Вони жили в правій колонці,
   під формою, і до кожного повороту рука йшла через увесь екран; тут вони там же,
   куди дивляться, — як стрічка в текстовому редакторі.
   Ряд ламаємо flex-basis'ом у ТІЙ САМІЙ смузі, а не окремим блоком: друга смуга
   принесла б другу лінію під першою й розрізала б заголовок надвоє. Порожній
   (не редагування) ряд зникає сам — інакше під назвою лишалась би дірка. */
.bar-el {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.bar-el:empty { display: none; }
.bar-el .btn { padding: 4px 9px; min-height: 30px; }
/* Групи — те, чим стрічка відділяє шрифт від абзацу: без поділу сім кнопок
   читаються одним списком, і поворот губиться серед шарів. Межа намальована
   БОКОМ групи, а не окремим значком у ряду: окремий при перенесенні лишався б
   висіти в кінці рядка, а пара всередині групи не розривається навпіл. */
.bar-grp { display: inline-flex; align-items: center; gap: 6px; }
.bar-grp + .bar-grp { padding-left: 9px; border-left: 1px solid var(--border-gold); }
/* Вимкнена кнопка мусить ВИГЛЯДАТИ вимкненою: «не працює» без цього читається як
   поламане. Курсор каже те саме, що й колір, — одного сигналу мало. */
.bar-el .btn[disabled] { opacity: .45; cursor: not-allowed; }
.bar-el .danger { color: var(--danger); border-color: rgba(var(--danger-rgb), .4); }
/* Скільки градусів і чи дзеркально — праворуч, як масштаб у верхньому ряду:
   значок дає дію, число — точність. Без вибору мовчить. */
.bar-rot { font-size: .78rem; color: var(--hint); margin-left: auto; }
/* Під пальцем 30 px — це промах, а серед цих кнопок «Видалити», і скасування схема
   не має. Правило стоїть ТУТ, а не в спільному блоці дотику вище: там воно йшло
   раніше за .bar-el .btn тієї самої ваги й програвало за порядком. */
@media (pointer: coarse) {
  .bar-el .btn { min-height: 44px; min-width: 44px; }
  .bar-doc .btn, .bar-view .btn { min-height: 44px; }
}
/* На вузькому екрані підпис коштує рядок на кожні дві кнопки — смуга виростала на
   п'ять рядів і з'їдала полотно. Лишається значок; назву кнопки тримає aria-label,
   тож ні голосове керування, ні читач екрана нічого не втрачають. */
@media (max-width: 720px) {
  .bar-el .btn-txt {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.sc-stage #stage { cursor: grab; }

/* ── Паспорт апарата ────────────────────────────────────────────────────────
   Перелік «показник — значення» зі складеної схеми. Те, чого бракує для решти
   чисел, показуємо окремим блоком: порожнеча мовчить, а тут має говорити. */
.pass-list { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 6px 12px; margin: 0; font-size: .86rem; }
.pass-list dt { color: var(--hint); }
.pass-list dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.pass-gaps { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border-gold); border-radius: var(--radius); background: rgba(var(--gold-rgb), .05); font-size: .82rem; }
.pass-gaps b { display: block; margin-bottom: 4px; color: var(--green); }
.pass-gaps ul { margin: 0; padding-left: 18px; color: var(--hint); }
.pass-gaps li { margin: 2px 0; }

/* Стовпець панелі не має залежати від вмісту: його ширину задає розкладка, а
   поля вписуються в неї. Без цих обмежень довгий пункт у списку («Нержавіюча
   сталь») або сітка з кількох колонок тягнули весь стовпець за собою. */
.sc-side, .sc-col, .pgroup, .taps, .row.src, .lvl { min-width: 0; }
.sc-col select, .sc-col input, .sc-col textarea { max-width: 100%; }
.sc-col select { text-overflow: ellipsis; }