/* ============================================================
   Поекранна логіка — стилі полотна екранів (screens.js).

   Окремий файл, а не доважок до app.css: розділ живе своїм модулем,
   і так його правки не перетинаються з рештою порталу.
   Палітра й тіні беруться зі змінних app.css — жодного свого кольору,
   щоб тема (світла/темна/системна) працювала без окремих правил.
   ============================================================ */

/* Кольори полотна — похідні від теми, а не самостійні. */
:root{
  --sc-edge:#B6C4BF;
  --sc-edge-ar:#9FB0AA;
  --sc-edge-hot:var(--accent);
  --sc-grid:rgba(19,28,26,.055);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sc-edge:#3E4C47; --sc-edge-ar:#55645E; --sc-grid:rgba(233,240,237,.05);
  }
}
:root[data-theme="dark"]{
  --sc-edge:#3E4C47; --sc-edge-ar:#55645E; --sc-grid:rgba(233,240,237,.05);
}

/* ---------------- шапка розділу ---------------- */
.sc-head{padding-bottom:14px}
.sc-headtop{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sc-headtop h2{margin:0; font-size:1.4rem; font-weight:700; letter-spacing:-.022em}
.sc-mapname{
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border-radius:6px; padding:4px 8px;
}
.sc-mapsel{
  font:inherit; font-size:.88rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:8px; padding:6px 10px; cursor:pointer;
}
.sc-mapsel:hover{border-color:var(--rule-2)}

.sc-seg{
  display:inline-flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:2px;
  margin-left:auto;
}
.sc-segbtn{
  font:inherit; font-size:.87rem; font-weight:600; cursor:pointer; border:0;
  background:transparent; color:var(--ink-3); border-radius:7px; padding:6px 13px;
}
.sc-segbtn.is-on{background:var(--surface); color:var(--ink); box-shadow:var(--lift)}

.sc-lede{margin:7px 0 0; color:var(--ink-2); font-size:.92rem; max-width:70ch}

.sc-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:13px}
.sc-stat{
  font-family:var(--mono); font-size:10px; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ink-3); margin-right:auto;
}
.sc-zoomops{display:inline-flex; gap:6px}
.sc-zbtn{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--rule); border-radius:8px; padding:6px 11px;
}
.sc-zbtn:hover{border-color:var(--accent); color:var(--accent)}

.sc-empty{
  padding:44px 20px; text-align:center; color:var(--ink-3); font-size:.93rem;
  background:var(--surface); border:1px dashed var(--rule-2); border-radius:12px;
}

/* ---------------- полотно ---------------- */
.sc-canvas{
  position:relative; overflow:hidden; touch-action:none;
  /* Дерево високе — віддаємо йому всю доступну висоту вікна. */
  height:calc(100vh - 232px); min-height:520px;
  background:var(--surface-3);
  background-image:radial-gradient(var(--sc-grid) 1px, transparent 1px);
  background-size:22px 22px;
  border:1px solid var(--rule); border-radius:13px;
  box-shadow:var(--lift); cursor:grab;
}
.sc-canvas.is-pan{cursor:grabbing}

/* Вʼюпорт: усе, що всередині, зсувається й масштабується одним transform —
   тому вузли і звʼязки не розʼїжджаються при зумі. */
.sc-vp{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform}

.sc-edges{
  position:absolute; left:-6000px; top:-6000px;
  width:14000px; height:14000px; overflow:visible; pointer-events:none;
}
.sc-edges > #scEdgeG{transform:translate(6000px,6000px)}
.sc-edge{
  fill:none; stroke:var(--sc-edge); stroke-width:1.7; stroke-linecap:round;
  pointer-events:stroke; cursor:pointer;
}
/* Гілка структури — суцільна і виразніша; додатковий перехід між гілками
   пунктиром і блідіше, щоб не сперечався з деревом за увагу. */
.sc-edge.is-tree{stroke-width:1.8}
.sc-edge.is-cross{stroke-width:1.3; stroke-dasharray:4 5; opacity:.62}
.sc-edge:hover{stroke:var(--sc-edge-hot); stroke-width:2.3; opacity:1}
.sc-edge.is-hot{stroke:var(--sc-edge-hot); stroke-width:2.3; opacity:1}
.sc-edge.sc-ghost{stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4; pointer-events:none}
.sc-elabel{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.02em;
  fill:var(--ink-3); paint-order:stroke; stroke:var(--surface-3); stroke-width:3.4;
  stroke-linejoin:round; pointer-events:none;
}
.sc-elabel.is-hot{fill:var(--accent)}

.sc-nodes{position:absolute; left:0; top:0}

/* ---------------- вузол-екран ---------------- */
.sc-node{
  position:absolute; width:168px; padding:10px 11px 9px;
  background:var(--surface); border:1px solid var(--rule-2); border-radius:10px;
  box-shadow:var(--lift); cursor:pointer; user-select:none; touch-action:none;
  display:grid; gap:2px; transition:border-color .12s, box-shadow .12s;
}
.sc-node:hover{border-color:var(--accent); box-shadow:var(--lift-2)}
.sc-node:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sc-node.is-sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--lift-2)}
.sc-node.is-drag{cursor:grabbing; box-shadow:var(--lift-2); opacity:.93}
.sc-node.is-target{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

.sc-ntitle{
  font-size:.865rem; font-weight:650; line-height:1.32; letter-spacing:-.012em;
  color:var(--ink); padding-right:16px;
}
.sc-nkind{
  font-family:var(--mono); font-style:normal; font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.sc-ncount{
  position:absolute; top:7px; right:8px; font-family:var(--mono); font-style:normal;
  font-size:9.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:5px; padding:1px 5px; line-height:1.5;
}

/* Порт: маленька крапка праворуч знизу — з неї тягнеться новий перехід. */
/* Внизу по центру, а не праворуч: праворуч тепер кнопка згортання гілки. */
.sc-port{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%; background:var(--accent); border:2px solid var(--surface);
  cursor:crosshair; opacity:0; transition:opacity .12s; touch-action:none;
}
.sc-node:hover .sc-port, .sc-node.is-sel .sc-port{opacity:1}

/* Рівні: що ближче до кореня, то помітніший екран. Різниця в насиченості
   рамки й вазі назви, не в розмірі — однакова ширина тримає рядки рівними. */
.sc-l0{border-color:var(--accent); background:var(--accent-soft)}
.sc-l0 .sc-ntitle{font-weight:700; font-size:.885rem}
.sc-l0 .sc-nkind{color:var(--accent-ink)}
.sc-l1{border-color:var(--rule-2)}
.sc-l1 .sc-ntitle{font-weight:650}
.sc-l2{border-color:var(--rule)}
.sc-l3{border-color:var(--rule); background:var(--surface-3)}
.sc-l3 .sc-ntitle{font-weight:600; color:var(--ink-2)}
/* Самостійні розділи — поза ієрархією, тому нейтральні й пунктирні. */
.sc-lx{border-style:dashed; border-color:var(--rule); background:var(--surface-3)}
.sc-lx .sc-ntitle{font-weight:600; color:var(--ink-2)}

/* Підпис рівня — заголовок над колонкою. */
.sc-lvcap{
  position:absolute; width:168px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  pointer-events:none; user-select:none;
}
.sc-lvcap b{
  flex:none; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  color:var(--accent); background:var(--accent-soft);
}
.sc-lvcap span{
  overflow:hidden; text-overflow:ellipsis;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.sc-lvcap i{
  flex:none; font-style:normal; font-family:var(--mono); font-size:9px;
  font-weight:700; color:var(--ink-3); opacity:.7;
}
.sc-lvcap.is-loose span{color:var(--ink-3); opacity:.85}

/* Згортання гілки: кнопка на правому боці, там, де лінія йде до дітей. */
.sc-fold{
  position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  min-width:22px; height:19px; padding:0 6px; cursor:pointer; z-index:2;
  font-family:var(--mono); font-size:10px; font-weight:700; line-height:1;
  color:var(--ink-2); background:var(--surface);
  border:1px solid var(--rule-2); border-radius:9px;
  display:grid; place-items:center; touch-action:none;
}
.sc-fold:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.sc-node.is-collapsed{border-style:dashed}
.sc-node.is-collapsed .sc-fold{
  border-color:var(--accent); color:var(--accent); background:var(--accent-soft);
}

/* «Розкласти» — головна дія панелі вигляду, тому виразніша за зум. */
.sc-zbtn.is-key{color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft)}
.sc-zbtn.is-key:hover{border-color:var(--accent)}
.sc-zbtn:disabled{opacity:.6; cursor:not-allowed}

/* ---------------- мінікарта ---------------- */
.sc-mini{
  position:absolute; right:12px; bottom:12px; width:132px; height:92px;
  background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  box-shadow:var(--lift); overflow:hidden; pointer-events:none;
}
.sc-midot{position:absolute; background:var(--rule-2); border-radius:1.5px}
.sc-midot.is-sel{background:var(--accent)}
.sc-miniview{position:absolute; border:1.5px solid var(--accent); border-radius:2px; pointer-events:none}

/* ---------------- список (альтернативний вигляд) ---------------- */
.sc-list{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.sc-libtn{
  width:100%; text-align:left; font:inherit; cursor:pointer; display:grid; gap:4px;
  background:var(--surface); border:1px solid var(--rule); border-radius:11px;
  padding:12px 14px; color:var(--ink);
}
.sc-libtn:hover{border-color:var(--accent)}
.sc-li.is-sel .sc-libtn{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.sc-lihead{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.sc-lihead b{font-size:.95rem; font-weight:650; letter-spacing:-.012em}
.sc-lihead i{
  font-family:var(--mono); font-style:normal; font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.sc-lihead em{
  font-style:normal; font-family:var(--mono); font-size:9.5px; font-weight:700;
  color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 6px;
}
.sc-liflow{font-size:.85rem; color:var(--ink-3); line-height:1.45}

/* ---------------- режим «Картки» ----------------
   Плашка екрана: тип, назва, початок опису, ознака заповненого функціоналу.
   auto-fill + minmax, а не фіксована кількість колонок: на вузькому екрані
   сітка сама стає одним стовпцем, і окремої мобільної гілки не треба.
   min-width:0 на дитині — інакше довге слово в описі розпирає колонку. */
/* ============================================================
   СТРУКТУРА РОЗДІЛІВ у режимі «Картки»
   ============================================================
   Колонки-рівні й лінії між картками прибрані: рівень у графі —
   величина технічна, і в одну колонку через неї потрапляли екрани
   з різних смислових блоків. Тепер секція = розділ системи, а
   ієрархія видно з вкладеності, а не з ліній. Діагоналей більше
   немає, бо ліній у цьому режимі немає взагалі. */
.sc-groups{display:grid; gap:18px}

.sc-grp{
  border:1px solid var(--rule-2); border-radius:14px;
  background:var(--surface-2); padding:14px 15px 16px;
}
.sc-grp-h{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.sc-grp-h b{font-size:.95rem; font-weight:680; letter-spacing:-.012em}
.sc-grp-h i{font-style:normal; font-size:.8rem; color:var(--ink-3); min-width:0}
.sc-grp-n{
  margin-left:auto; flex:none;
  min-width:21px; height:21px; padding:0 7px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--rule-2);
  font-size:.72rem; font-weight:700; color:var(--ink-3);
}

/* Самостійні екрани розділу — у ряд. Кожен разом зі своїми модалками
   й панелями складає один блок, тому ряд будуємо з блоків. */
.sc-grp-row{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
  align-items:start;
}
.sc-unit{display:grid; gap:0; min-width:0}
/* Блок, у якого є підлеглі, займає ширшу частку ряду: інакше чотири
   довідники тиснуться в одну вузьку колонку, а праворуч лишається
   порожньо. */
.sc-unit:has(.sc-subs){grid-column:span 2}
@media (max-width:760px){ .sc-unit:has(.sc-subs){grid-column:auto} }

/* Підлеглі екрани: модалки й бокові панелі. Вони не пункти навігації,
   тому стоять ПІД своїм екраном, у вкладеній рамці з підписом. Підпис
   замінює стрілку: видно, звідки вони відкриваються, без жодної лінії. */
.sc-subs{
  margin:0 0 0 14px; padding:9px 10px 10px;
  border-left:2px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  border-right:1px solid var(--rule-2);
  border-radius:0 0 11px 11px;
  background:var(--surface-3);
}
.sc-subs-h{
  display:block; margin-bottom:7px;
  font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
/* Підлеглих буває чотири (довідники налаштувань) — у стовпчик вони
   тягнуть секцію вниз без потреби. Тому теж сітка, що заповнює ширину. */
.sc-subs-row{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(205px, 1fr));
  align-items:start;
}
/* Підлегла картка дрібніша за самостійну — різниця в розмірі сама
   каже, що це не рівноправний пункт навігації. */
.sc-card.is-sub{padding:10px 11px; border-radius:10px; background:var(--surface)}
.sc-card.is-sub .sc-card-title{font-size:.88rem}
.sc-card.is-sub .sc-card-descr{-webkit-line-clamp:2}

/* ТРИ СТАНИ ПРОПРАЦЮВАННЯ замість однакового сірого бейджа.
   Зелений — намальовано в прототипі (у підписі стоїть версія);
   бурштиновий — описано словами, але ще не намальовано;
   сірий — не заповнено зовсім. */
.sc-state{
  display:inline-block; padding:2px 8px; border-radius:11px;
  font-size:.68rem; font-weight:650; line-height:1.4;
}
.sc-state.is-proto{color:var(--accent); background:var(--accent-soft)}
.sc-state.is-descr{color:#8A5A12; background:#FBF1DC}
.sc-state.is-empty{color:var(--ink-3); background:var(--surface-2)}

@media (max-width:640px){
  .sc-grp{padding:12px 11px 13px}
  .sc-grp-row{grid-template-columns:1fr}
}

/* Flex-колонка, а не grid: тільки так margin-top:auto на підвалі притискає
   мітку функціоналу до низу плашки. У grid із align-content:start підвал
   зависав одразу під коротким описом — на «Вході» це було видно на око. */
.sc-card{
  min-width:0; width:auto; text-align:left; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; gap:7px;
  background:var(--surface); border:1px solid var(--rule); border-radius:13px;
  padding:14px 15px 12px; color:var(--ink); min-height:150px;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.sc-card:hover{border-color:var(--accent); box-shadow:var(--lift); transform:translateY(-1px)}
.sc-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sc-card-kind{
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.sc-card-title{font-size:1rem; font-weight:650; letter-spacing:-.014em; line-height:1.3}
/* Опис обрізаємо трьома рядками: плашки лишаються однакової висоти,
   і сітка не розʼїжджається через один довгий текст. */
.sc-card-descr{
  font-size:.86rem; color:var(--ink-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.sc-card-descr.is-empty{color:var(--ink-3); font-style:italic}
.sc-card-foot{margin-top:auto; padding-top:4px}
.sc-card-has, .sc-card-no{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em;
  border-radius:5px; padding:2px 7px; display:inline-block;
}
.sc-card-has{color:var(--accent); background:var(--accent-soft)}
.sc-card-no{color:var(--ink-3); background:var(--surface-2)}

/* Модалка картки екрана: обидва редактори мають жити, а не тиснутись
   у два рядки. Висота задана тут, а не в спільному .edwrap, щоб не
   зачепити картку беклогу. */
#scModal .ql-editor{min-height:120px}
#scModal .fld > span{display:block}

/* ---------------- панель деталей ----------------
   Панель не накриває полотно, а звужує його: інакше половина схеми
   і кнопка «Екран» ховаються під нею саме тоді, коли з ними працюють.
   Ширину віддаємо через змінну, щоб .main підтиснувся тим самим числом. */
.sc-panel{
  position:fixed; right:0; top:0; bottom:0; width:var(--sc-pw); z-index:55;
  background:var(--surface); border-left:1px solid var(--rule-2);
  box-shadow:var(--lift-2); overflow-y:auto; padding:0 18px 26px;
  display:grid; gap:18px; align-content:start;
}
:root{--sc-pw:400px}
/* Поки панель відкрита — головна колонка вужча рівно на її ширину. */
.main:has(#scPanel){padding-right:calc(26px + var(--sc-pw))}
.sc-phead{
  position:sticky; top:0; z-index:2; background:var(--surface);
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 0 12px; border-bottom:1px solid var(--rule); margin:0 -18px 0;
  padding-inline:18px;
}
.sc-ptitle{flex:1; min-width:0; display:grid; gap:4px}
.sc-ptitle b{font-size:1.06rem; font-weight:650; letter-spacing:-.018em; line-height:1.3}
.sc-pkind{
  justify-self:start; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  background:var(--surface-2); border-radius:5px; padding:2px 7px;
}
.sc-pclose{
  flex:none; background:transparent; border:0; cursor:pointer; color:var(--ink-3);
  padding:5px; border-radius:7px; display:grid; place-items:center;
}
.sc-pclose:hover{background:var(--surface-2); color:var(--ink)}

.sc-pops{display:flex; gap:8px; flex-wrap:wrap}

.sc-panel section{display:grid; gap:9px}
.sc-panel h4{
  margin:0; font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:7px;
}
.sc-panel h4 em{
  font-style:normal; color:var(--accent); background:var(--accent-soft);
  border-radius:5px; padding:1px 6px; letter-spacing:.04em;
}
.sc-pdhead, .sc-pfhead{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.sc-pdhead .savestate, .sc-pdhead .fm-pencil{margin-left:auto}
.sc-pfhead .btn{margin-left:auto}
.sc-pempty{margin:0; color:var(--ink-3); font-size:.88rem; line-height:1.5}

/* функціонал екрана */
.sc-flist{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.sc-f{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--surface-3); border:1px solid var(--rule); border-radius:9px;
  padding:9px 10px;
}
.sc-f:hover{border-color:var(--rule-2)}
.sc-ftxt{flex:1; min-width:0; display:grid; gap:3px}
.sc-ftxt b{font-size:.9rem; font-weight:600; line-height:1.4; color:var(--ink)}
.sc-fdescr{font-size:.84rem; color:var(--ink-3); line-height:1.45}
.sc-flink{
  justify-self:start; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border-radius:5px; padding:2px 6px;
}
.sc-fops{flex:none; display:flex; gap:2px; opacity:.45; transition:opacity .12s}
.sc-f:hover .sc-fops{opacity:1}
.sc-fop{
  font:inherit; font-size:.8rem; cursor:pointer; background:transparent; border:0;
  color:var(--ink-3); width:24px; height:24px; border-radius:6px;
  display:grid; place-items:center; line-height:1;
}
.sc-fop:hover{background:var(--surface-2); color:var(--ink)}
.sc-fop.is-del:hover{background:var(--danger-soft); color:var(--danger)}
.sc-fop:disabled{opacity:.3; cursor:not-allowed}
.sc-fop:disabled:hover{background:transparent}

/* переходи */
.sc-pflow{display:grid; gap:15px}
.sc-pfrow{display:grid; gap:7px}
.sc-plinks{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.sc-plinks li{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.sc-plinks button[data-goto]{
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  background:var(--surface-2); border:1px solid transparent; border-radius:7px;
  padding:5px 10px; color:var(--ink-2); text-align:left;
}
.sc-plinks button[data-goto]:hover{border-color:var(--accent); color:var(--accent)}
.sc-plinks i{
  font-family:var(--mono); font-style:normal; font-size:9px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.sc-eop{
  font:inherit; cursor:pointer; background:transparent; border:0; color:var(--ink-3);
  padding:2px 6px; border-radius:6px; line-height:1; margin-left:auto;
}
.sc-eop:hover{background:var(--surface-2); color:var(--ink)}

/* ---------------- вибір функції карти продукту ---------------- */
.sc-pick{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px 16px}
.sc-pickscrim{position:absolute; inset:0; background:rgba(10,16,15,.55); backdrop-filter:blur(2px)}
.sc-pickbox{
  position:relative; width:100%; max-width:520px; max-height:calc(100vh - 60px);
  background:var(--ground); border:1px solid var(--rule-2); border-radius:14px;
  box-shadow:var(--lift-2); display:flex; flex-direction:column; overflow:hidden;
}
.sc-pickhead{
  display:flex; align-items:center; gap:12px; flex:none; padding:13px 15px;
  background:var(--surface); border-bottom:1px solid var(--rule);
}
.sc-pickhead b{flex:1; min-width:0; font-size:1rem; font-weight:650; letter-spacing:-.015em}
.sc-picksearch{
  flex:none; font:inherit; font-size:.92rem; margin:12px 15px 0; padding:9px 12px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule); border-radius:9px;
}
.sc-picksearch:focus{outline:none; border-color:var(--accent)}
.sc-picklist{flex:1; min-height:0; overflow-y:auto; padding:10px 15px; display:grid; gap:4px; align-content:start}
.sc-pickrow{
  width:100%; text-align:left; font:inherit; cursor:pointer; display:grid; gap:2px;
  background:var(--surface); border:1px solid var(--rule); border-radius:9px;
  padding:8px 11px; color:var(--ink);
}
.sc-pickrow:hover{border-color:var(--accent)}
.sc-pickrow b{font-size:.9rem; font-weight:600; line-height:1.4}
.sc-pickrow i{
  font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.05em;
  color:var(--ink-3);
}
.sc-pickrow.is-used{opacity:.5}
.sc-pickrow.is-on{border-color:var(--accent); background:var(--accent-soft)}
.sc-pickfoot{
  display:flex; align-items:center; gap:10px; flex:none; flex-wrap:wrap;
  padding:11px 15px; background:var(--surface); border-top:1px solid var(--rule);
}
.sc-pickhint{
  margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------------- вузьке ---------------- */
/* Вузько — панель знову накладається: звужувати вже нема що. */
@media (max-width:1100px){
  :root{--sc-pw:min(400px,100vw)}
  .main:has(#scPanel){padding-right:26px}
}
@media (max-width:900px){
  :root{--sc-pw:100vw}
}
@media (max-width:760px){
  .sc-canvas{height:calc(100vh - 300px); min-height:340px}
  .sc-mini{display:none}
  .sc-seg{margin-left:0}
  .sc-headtop h2{font-size:1.2rem}
  .sc-panel{padding-inline:14px}
  .sc-phead{margin-inline:-14px; padding-inline:14px}
}