/* ═══ КОМПОНЕНТИ ════════════════════════════════════════════════════════════
   Жоден компонент не має власного кольору — тільки токени напряму.
   Правило перевіряється очима: у цьому файлі не має бути жодного #hex і жодного
   oklch(). Якщо компоненту «не вистачає кольору» — йому не вистачає форми.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. КАРКАС ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--rejka-w) 1fr;min-height:100vh}
.shell.zgornuto{grid-template-columns:var(--rejka-w-min) 1fr}

.rejka{background:var(--tlo-2);border-right:1px solid var(--mezha-m);
  display:flex;flex-direction:column;gap:2px;
  padding:var(--sp3) var(--sp2) var(--sp2);
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.rejka-verh{display:flex;align-items:center;gap:var(--sp2);
  padding:0 var(--sp2) var(--sp3)}
.rejka .brand{font-family:var(--f-dysplei,var(--f-tilo));font-weight:700;
  letter-spacing:.12em;font-size:14px;color:var(--tilo);flex:1 1 auto;
  white-space:nowrap;overflow:hidden}
.rejka .brand:hover{text-decoration:none}
.rejka .hrupa{font-family:var(--f-kod);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--prygl);padding:var(--sp4) var(--sp2) 4px;
  white-space:nowrap}

/* Пункт рейки. Активний отримує СВІТЛО НА РЕБРІ (мотив), а не заливку —
   заливка на 15 пунктах дала б 15 кольорових плям. */
.rejka a,.rejka-diya{position:relative;display:flex;align-items:center;
  gap:var(--sp2);padding:var(--pad-y) var(--sp2);border:0;border-radius:var(--r-sm);
  background:none;color:var(--prygl);font:inherit;font-size:14px;
  white-space:nowrap;text-align:left;width:100%;cursor:pointer;
  transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.rejka a::before,.rejka-diya::before{content:"";position:absolute;left:0;
  top:50%;translate:0 -50%;width:var(--mot-rebro,2px);height:0;
  border-radius:var(--r-full);background:var(--mot-svitlo,var(--akcent));
  transition:height var(--d) var(--pruzhyna,var(--ease))}
/* Рейка — навігація, а не форма. `Вийти` технічно `button[type=submit]`, і
   глобальне правило заливало його акцентом: виміряно 07.08.2026 — на робочому
   дашборді це був ЄДИНИЙ залитий акцентом блок, тобто найгучніший елемент
   екрана. Єдиний акцент системи не може належати найменш цінній дії. */
.rejka button.rejka-diya{background:none;border:0;color:var(--prygl);
  font-weight:inherit}
.rejka a:hover,.rejka-diya:hover{background:var(--poverhnya);color:var(--tilo);
  text-decoration:none}
.rejka a.on{color:var(--tilo);font-weight:600;background:var(--poverhnya)}
.rejka a.on::before{height:58%}
/* Активний пункт уже несе ТРИ сигнали: ребро (::before), тло й вагу. Тут колись
   стояло `box-shadow:var(--pidsvitka-rejka,none)` — токен не визначав жоден напрям,
   тож правило завжди давало `none`. Четвертий сигнал того самого стану був би
   шумом проти мотиву «світло на ребрі», тому правило прибрано, а не полагоджено. */
.rejka .ik{color:currentColor;opacity:.75}
.rejka a.on .ik{opacity:1;color:var(--akcent)}
.rejka a .nz,.rejka-diya .nz{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.rejka .n{font:600 10.5px/1 var(--f-kod);background:var(--akcent);
  color:var(--na-akcenti);border-radius:var(--r-full);padding:2px 4px;
  min-width:18px;text-align:center;flex:0 0 auto}
/* Низ рейки ПРИЛИПАЄ до дна. Виміряно 07.08.2026 на висоті 940px (типове
   вікно 1080 мінус хром браузера): рейка з 15 пунктами не вміщається —
   переповнення 151px, і блок користувача разом із «Вийти» опинявся на 915…969,
   тобто за екраном. Аватар малювався справно, але побачити його можна було
   лише прокрутивши бічну панель, про що ніхто не здогадується.
   Список пунктів тепер їде ПІД цим блоком, а не разом із ним. */
.rejka-nyz{margin-top:auto;padding-top:var(--sp3);
  border-top:1px solid var(--mezha-m);display:grid;
  grid-template-columns:minmax(0,1fr);gap:2px;
  position:sticky;bottom:calc(var(--sp2) * -1);
  background:var(--tlo-2);
  padding-bottom:var(--sp2);margin-bottom:calc(var(--sp2) * -1)}
.rejka-hto{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp2);
  font-size:13px;min-width:0}
.rejka-hto .imena{min-width:0;overflow:hidden}
.rejka-hto .nm{font-weight:600;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--tilo)}
.rejka-hto .rl{color:var(--prygl);font-size:11.5px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zgornuty{background:none;border:0;color:var(--prygl);cursor:pointer;padding:4px;
  border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto}
.zgornuty:hover{color:var(--tilo);background:var(--poverhnya)}
.rejka .devbar{font-family:var(--f-kod);font-size:9.5px;letter-spacing:.08em;
  text-align:center;color:var(--uvaha);border:1px dashed currentColor;
  border-radius:var(--r-sm);padding:4px;margin-top:var(--sp2)}

.shell.zgornuto .rejka .nz,.shell.zgornuto .rejka .hrupa,
.shell.zgornuto .rejka .brand,.shell.zgornuto .rejka-hto .imena,
.shell.zgornuto .rejka .devbar{display:none}
.shell.zgornuto .rejka a,.shell.zgornuto .rejka-diya{justify-content:center;
  padding:8px 0}
.shell.zgornuto .rejka .n{position:absolute;translate:13px -11px;font-size:9px;
  padding:1px 4px;min-width:14px}
.shell.zgornuto .rejka-hto{justify-content:center}

.robocha{min-width:0;display:flex;flex-direction:column}
.wrap{max-width:1240px;width:100%;margin:0 auto;
  padding:var(--sp6) var(--sp6) var(--sp16)}
.mob-verh{display:none}
.menyu{display:none;background:var(--poverhnya);border:1px solid var(--mezha);
  border-radius:var(--r-sm);padding:8px 8px;cursor:pointer;align-items:center}

/* ── 2. ПОВЕРХНІ ───────────────────────────────────────────────────────────── */
.panel,.card,.kartka{background:var(--poverhnya);border:1px solid var(--mezha-m);
  border-radius:var(--r);padding:var(--sp4);box-shadow:var(--tin-1);
  box-shadow:var(--tin-1),inset 0 1px 0 var(--mezha-svitla)}
.panel-sklo{background:var(--sklo);
  backdrop-filter:blur(var(--sklo-blur)) saturate(var(--sklo-nasych));
  -webkit-backdrop-filter:blur(var(--sklo-blur)) saturate(var(--sklo-nasych));
  border:1px solid var(--mezha);border-radius:var(--r);
  box-shadow:var(--tin-2),inset 0 1px 0 var(--mezha-svitla)}

/* ── 3. BENTO-СІТКА ─────────────────────────────────────────────────────────
   Плитки різної ваги. Контейнерні запити, а не медіа: та сама плитка працює
   і в широкій колонці, і у вузькій, бо міряє СЕБЕ, а не вікно. Це те, чого
   не давала стара сітка — вона ламалась, щойно поруч зʼявлялась друга колонка. */
.bento{display:grid;gap:var(--sp3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
  grid-auto-rows:minmax(112px,auto)}
.bento>*{container-type:inline-size;min-width:0}
.plyt{position:relative;display:flex;flex-direction:column;gap:var(--sp2);
  background:var(--poverhnya);border:1px solid var(--mezha-m);
  border-radius:var(--r);padding:var(--sp4);color:var(--tilo);overflow:hidden;
  box-shadow:var(--tin-1),inset 0 1px 0 var(--mezha-svitla);
  transition:border-color var(--d-fast) var(--ease),
             translate var(--d-fast) var(--ease),
             box-shadow var(--d-fast) var(--ease)}
a.plyt:hover{text-decoration:none;border-color:var(--mezha);
  translate:0 calc(-2px * var(--ruh));box-shadow:var(--tin-2)}
.plyt.shyr-2{grid-column:span 2}
.plyt.vys-2{grid-row:span 2}
.plyt-h{display:flex;align-items:center;gap:var(--sp2);
  font:600 11px/1 var(--f-kod);letter-spacing:.1em;text-transform:uppercase;
  color:var(--prygl)}
.plyt-h .ik{color:var(--prygl);opacity:.8}
.plyt .velyke{font-family:var(--f-dysplei,var(--f-tilo));font-weight:700;
  font-size:clamp(26px,9cqi,40px);line-height:1;letter-spacing:-.03em;
  margin-top:auto}
.plyt .pid{color:var(--prygl);font-size:13px}
/* Акцентна плитка: світло на ребрі, не заливка */
.plyt.akc::before{content:"";position:absolute;inset:0 auto 0 0;
  width:var(--mot-rebro,2px);background:var(--mot-svitlo,var(--akcent))}
.plyt.trevoha::before{content:"";position:absolute;inset:0 auto 0 0;
  width:var(--mot-rebro,2px);background:var(--uvaha)}
/* У вузькому контейнері плитка сама спрощується */
@container (max-width:200px){
  .plyt{padding:var(--sp3)}
  .plyt .pid{font-size:12px}
  .plyt-h{font-size:10px}
}

/* ── 4. МІКРОЧАРТИ ─────────────────────────────────────────────────────────── */
/* 4.1 Спарклайн */
.spark{display:flex;align-items:flex-end;gap:2px;height:34px;width:100%}
.spark i{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--mezha);
  transform-origin:bottom;animation:spark-rist var(--d-slow) var(--pruzhyna) both;
  animation-delay:calc(var(--i,0) * 22ms * var(--ruh))}
/* Стовпці з даними — приглушений акцент; пік — той самий акцент на повну.
   До 07.08.2026 пік малювався кольором `--uvaha`, тобто ПОПЕРЕДЖЕННЯМ. У системі
   бурштин скрізь означає «потребує уваги», і найактивніший день офісу читався як
   тривога: на живому екрані 31 подія з 32 припала на один день, і картка
   виглядала як аварія замість «був насичений день».
   Пік показуємо СИЛОЮ того самого кольору, а не іншим значенням. */
.spark i.on{background:color-mix(in oklch,var(--akcent) 55%,var(--mezha))}
.spark i.pik{background:var(--akcent)}
@keyframes spark-rist{from{scale:1 0}to{scale:1 1}}

/* 4.2 Кільце прогресу — conic-gradient, без SVG і без JS */
.kilce{--p:0;--d:52px;position:relative;width:var(--d);height:var(--d);
  flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--akcent) calc(var(--p) * 1%),var(--mezha-m) 0);
  transition:background var(--d-slow) var(--ease)}
.kilce::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:var(--poverhnya)}
.kilce span{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font:700 12px/1 var(--f-kod);color:var(--tilo)}
.kilce.lg{--d:72px} .kilce.lg span{font-size:15px}
.kilce.uvaha{background:conic-gradient(var(--uvaha) calc(var(--p) * 1%),var(--mezha-m) 0)}

/* 4.3 Bullet-графік: факт проти цілі. Одна смуга замість двох чисел. */
.bullet{position:relative;height:10px;border-radius:var(--r-full);
  background:var(--mezha-m);overflow:hidden}
.bullet i{position:absolute;inset:0 auto 0 0;width:calc(var(--f,0) * 1%);
  background:var(--akcent);border-radius:var(--r-full);
  animation:bullet-rist var(--d-slow) var(--pruzhyna) both}
.bullet u{position:absolute;top:-3px;bottom:-3px;left:calc(var(--c,100) * 1%);
  width:2px;background:var(--tilo);opacity:.65;text-decoration:none}
@keyframes bullet-rist{from{width:0}}

/* 4.4 Теплова смуга — щільність подій за період */
.teplo{display:flex;gap:2px;height:14px}
.teplo i{flex:1;border-radius:2px;background:var(--mezha-m)}
.teplo i[data-r="1"]{background:color-mix(in oklch,var(--akcent) 28%,var(--mezha-m))}
.teplo i[data-r="2"]{background:color-mix(in oklch,var(--akcent) 55%,var(--mezha-m))}
.teplo i[data-r="3"]{background:color-mix(in oklch,var(--akcent) 80%,var(--mezha-m))}
.teplo i[data-r="4"]{background:var(--akcent)}

/* 4.5 Сегментована шкала — одна мова на бал/повноту/гейти */
.shkala{display:inline-flex;gap:2px;height:9px;width:96px;vertical-align:middle}
.shkala i{flex:1;background:var(--mezha-m);border-radius:1px}
.shkala i.on{background:var(--akcent)}
.shkala i.uvaha{background:var(--uvaha)}
.shkala i.krytych{background:var(--krytych)}
.shkala.mini{width:64px;height:6px} .shkala.wide{width:160px}

/* ── 5. ЧИПИ, МОНОГРАМИ, ПОЗНАЧКИ ──────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:var(--sp1);padding:2px var(--sp2);
  border-radius:var(--r-full);font-size:12px;font-weight:500;white-space:nowrap;
  border:1px solid var(--mezha);color:var(--prygl);background:transparent}
.chip.ok{color:var(--dobre);border-color:color-mix(in oklch,var(--dobre) 45%,transparent)}
.chip.ok::before{content:"✓";font-size:10px}
.chip.warn{color:var(--uvaha);border-color:color-mix(in oklch,var(--uvaha) 45%,transparent)}
.chip.warn::before{content:"!";font-weight:700;font-size:10px}
.chip.akc{color:var(--akcent);border-color:color-mix(in oklch,var(--akcent) 45%,transparent)}
.chip.akc::before{content:"◆";font-size:8px}
.chip.krytych{color:var(--krytych);
  border-color:color-mix(in oklch,var(--krytych) 45%,transparent)}
.chip.dim{color:var(--prygl)}
.monogram{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 auto;border-radius:var(--r-sm);
  background:var(--poverhnya-2);border:1px solid var(--mezha-m);
  font:600 11px/1 var(--f-kod);color:var(--tilo);text-transform:uppercase}
.monogram.sm{width:21px;height:21px;font-size:9.5px}
/* Обличчя людини. Розмір і форма — ті самі, що в монограми: аватар мусить
   ставати НА ЇЇ МІСЦЕ, не зсуваючи рядок, бо в одному списку частина людей із
   фото, частина без. `object-fit:cover` — щоб портрет не сплющувався у квадрат.
   Рамка та сама, що в монограми: на світлій сорочці й на світлому тлі інакше
   зникає межа й обличчя «витікає» в сторінку. */
.ava{width:28px;height:28px;flex:0 0 auto;border-radius:var(--r-sm);
  object-fit:cover;object-position:center 25%;
  border:1px solid var(--mezha-m);background:var(--poverhnya-2);
  display:block}
.ava.sm{width:21px;height:21px}
.novyi{display:inline-flex;align-items:center;gap:4px;
  font:600 10px/1 var(--f-kod);letter-spacing:.1em;text-transform:uppercase;
  color:var(--akcent)}
.novyi::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--akcent);box-shadow:0 0 0 3px var(--akcent-tlo)}

/* ── 6. ФОРМИ Й КНОПКИ ─────────────────────────────────────────────────────── */
input,select,textarea,button{font:inherit;color:var(--tilo)}
input,select,textarea{background:var(--tlo-2);border:1px solid var(--mezha);
  border-radius:var(--r-sm);padding:var(--pad-y) var(--pad-x);
  transition:border-color var(--d-fast) var(--ease),
             box-shadow var(--d-fast) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--prygl)}
input:focus,select:focus,textarea:focus{border-color:var(--akcent);
  box-shadow:var(--pidsvitka);outline:none}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
input[aria-invalid=true]{border-color:var(--krytych)}
textarea{field-sizing:content;min-height:2.6em;max-height:40vh}
/* `minmax(0,1fr)`: типова колонка гріда — `auto`, тобто не вужча за
   МІНІМАЛЬНИЙ ВМІСТ. `<select>` має за мінімум найдовший свій пункт, і на
   375px «Костянтин — Інвестори й переговори» розпирав картку входу на 2px
   за край. Поле не має права визначати ширину форми. */
label{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp1);font-size:13px;color:var(--prygl);font-weight:500}
label>input,label>select,label>textarea{color:var(--tilo);font-weight:400}

button,.btn{display:inline-flex;align-items:center;gap:var(--sp2);
  background:var(--poverhnya-2);border:1px solid var(--mezha);
  border-radius:var(--r-sm);padding:var(--pad-y) var(--pad-x-btn);
  cursor:pointer;font-weight:500;
  color:var(--tilo);
  transition:border-color var(--d-fast) var(--ease),
             background var(--d-fast) var(--ease),
             translate var(--d-instant) var(--ease)}
button:hover:not(:disabled),.btn:hover{border-color:var(--akcent);
  text-decoration:none}
button:active:not(:disabled),.btn:active{translate:0 1px}
button:disabled{opacity:.45;cursor:not-allowed}
button[type=submit],.btn-head{background:var(--akcent);border-color:var(--akcent);
  color:var(--na-akcenti);font-weight:600}
button[type=submit]:hover:not(:disabled){box-shadow:var(--pidsvitka)}
/* «Тиха» кнопка мусить лишатись тихою й у формі. `.btn-quiet` (0,1,0)
   програвало `button[type=submit]` (0,1,1) за специфічністю — і 15 із 31 таких
   кнопок насправді малювались головними: «Не беру», «Відмовитись», «На
   доопрацювання» і навіть руйнівна «Прибрати стадію». Клас, який мовчки
   означає протилежне написаному, гірший за відсутній.
   `button.btn-quiet` дає ту саму специфічність (0,1,1) і стоїть пізніше —
   тож виграє; окремий `.btn-quiet` лишається для посилань-кнопок. */
.btn-quiet,button.btn-quiet{background:transparent;color:var(--akcent);
  border-color:var(--mezha);font-weight:500}
button.btn-quiet:hover:not(:disabled){box-shadow:none;border-color:var(--akcent)}
.lnk{background:none;border:0;color:var(--akcent);cursor:pointer;font:inherit;
  padding:0}
/* «Зайнята» кнопка теж `disabled` (щоб не відправити двічі), але це РІЗНІ стани:
   вимкнена = «зараз не можна», зайнята = «вже роблю». Приглушення від `disabled`
   тут знімаємо — інакше воно гасить і сам спінер, і сигнал «іде робота»
   виглядає як «нічого не сталось». */
button[aria-busy=true]{position:relative;color:transparent;
  opacity:1;cursor:progress}
button[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;
  width:14px;height:14px;border:2px solid var(--na-akcenti);
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* Форма без кнопки (фільтри, що сабмітяться з `onchange`): відгук — тонка
   смужка під самою формою. Невизначений прогрес, бо тривалості ми не знаємо;
   `scaleX` і `translate` — щоб анімація йшла на композиторі й не смикала
   розкладку сусідніх елементів. */
form[aria-busy=true]{position:relative}
form[aria-busy=true]::after{content:"";position:absolute;left:0;right:0;
  bottom:-3px;height:2px;border-radius:2px;background:var(--akcent);
  transform-origin:left;animation:smuha 1.1s ease-in-out infinite}
@keyframes smuha{
  0%{scale:0 1;translate:0}
  50%{scale:.6 1;translate:40% 0}
  100%{scale:0 1;translate:100% 0}}

/* Приглушений рух: індикатори — єдиний випадок, де анімацію НЕ можна просто
   вимкнути. Зупинений спінер каже «зависло», а не «вимкнено рух», тобто
   повідомляє неправду. Тому лишаємо пульсацію прозорості: рух є, але без
   обертання й переміщення, від яких і буває зле. */
:root[data-ruh=min] button[aria-busy=true]::after,
:root[data-ruh=min] form[aria-busy=true]::after{
  animation:pulsuye 1.4s ease-in-out infinite}
:root[data-ruh=min] form[aria-busy=true]::after{scale:1 1;translate:0}
@media (prefers-reduced-motion:reduce){
  button[aria-busy=true]::after,form[aria-busy=true]::after{
    animation:pulsuye 1.4s ease-in-out infinite}
  form[aria-busy=true]::after{scale:1 1;translate:0}}
@keyframes pulsuye{0%,100%{opacity:.3}50%{opacity:1}}

/* Сегментований перемикач — щільність, рух, фільтри */
.segment{display:inline-flex;padding:2px;gap:2px;background:var(--tlo-2);
  border:1px solid var(--mezha-m);border-radius:var(--r-sm)}
.segment button{background:none;border:0;
  padding:var(--pad-y-sm) var(--pad-x-sm);font-size:13px;
  color:var(--prygl);border-radius:var(--r-xs)}
.segment button[aria-pressed=true]{background:var(--poverhnya);color:var(--tilo);
  font-weight:600;box-shadow:var(--tin-1)}

/* ── 7. КОМАНДНА ПАЛІТРА ⌘K ────────────────────────────────────────────────── */
/* Popover API: браузер сам робить верхній шар, фокус-пастку й закриття по Esc.
   Раніше це вимагало бібліотеки; тепер — один атрибут. */
.palitra{border:0;padding:0;background:transparent;max-width:min(94vw,660px);
  width:100%;margin:max(8vh,48px) auto auto}
.palitra::backdrop{background:oklch(0 0 0 / .5);backdrop-filter:blur(3px)}
.palitra-box{background:var(--sklo);
  backdrop-filter:blur(var(--sklo-blur)) saturate(var(--sklo-nasych));
  -webkit-backdrop-filter:blur(var(--sklo-blur)) saturate(var(--sklo-nasych));
  border:1px solid var(--mezha);border-radius:var(--r-lg);
  box-shadow:var(--tin-3),inset 0 1px 0 var(--mezha-svitla);overflow:hidden}
.palitra-verh{display:flex;align-items:center;gap:var(--sp3);
  padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--mezha-m)}
.palitra-verh .ik{color:var(--prygl);flex:0 0 auto}
.palitra input{flex:1 1 auto;background:none;border:0;padding:4px 0;font-size:16px}
.palitra input:focus{box-shadow:none;border-color:transparent}
.palitra-rez{max-height:min(52vh,440px);overflow-y:auto;padding:var(--sp2);
  display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.palitra-hrupa{font:600 10px/1 var(--f-kod);letter-spacing:.14em;
  text-transform:uppercase;color:var(--prygl);padding:var(--sp3) var(--sp3) var(--sp2)}
.palitra-rez a{display:flex;align-items:center;gap:var(--sp3);
  padding:8px var(--sp3);border-radius:var(--r-sm);color:var(--tilo);min-width:0}
.palitra-rez a:hover,.palitra-rez a[aria-selected=true]{background:var(--akcent-tlo);
  text-decoration:none}
.palitra-rez a[aria-selected=true]{box-shadow:inset var(--mot-rebro,2px) 0 0 var(--akcent)}
.palitra-rez .nz{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.palitra-rez .typ{font:10px/1 var(--f-kod);letter-spacing:.08em;
  text-transform:uppercase;color:var(--prygl);flex:0 0 auto}
.palitra-nyz{display:flex;gap:var(--sp4);padding:var(--sp2) var(--sp4);
  border-top:1px solid var(--mezha-m);font-size:11.5px;color:var(--prygl)}
kbd{font:600 10.5px/1 var(--f-kod);background:var(--tlo-2);
  border:1px solid var(--mezha);border-bottom-width:2px;border-radius:var(--r-xs);
  padding:4px 4px;color:var(--tilo)}
/* Поява/зникнення без JS: @starting-style + allow-discrete */
.palitra{opacity:0;translate:0 -8px;
  transition:opacity var(--d) var(--ease),translate var(--d) var(--pruzhyna),
             overlay var(--d) allow-discrete,display var(--d) allow-discrete}
.palitra:popover-open{opacity:1;translate:0}
@starting-style{.palitra:popover-open{opacity:0;translate:0 -8px}}

/* Підказка ⌘K у рейці */
.palitra-knopka{display:flex;align-items:center;gap:var(--sp2);width:100%;
  padding:8px var(--sp2);margin-bottom:var(--sp2);background:var(--tlo);
  border:1px solid var(--mezha-m);border-radius:var(--r-sm);color:var(--prygl);
  font-size:13px;cursor:pointer}
.palitra-knopka:hover{border-color:var(--akcent);color:var(--tilo)}
.palitra-knopka kbd{margin-left:auto}

/* ── 8. СПИСКИ Й ТАБЛИЦІ ───────────────────────────────────────────────────── */
.feed{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--sp2)}
.feed>li{min-width:0;position:relative;background:var(--poverhnya);
  border:1px solid var(--mezha-m);border-radius:var(--r-sm);
  padding:var(--sp3) var(--sp4);
  transition:border-color var(--d-fast) var(--ease)}
.feed>li:hover{border-color:var(--mezha)}
/* :has() — картка сама реагує на свій вміст, без класів із бекенду */
.feed>li:has(.chip.warn)::before,.feed>li.over::before{content:"";
  position:absolute;inset:0 auto 0 0;width:var(--mot-rebro,2px);
  border-radius:var(--r-full) 0 0 var(--r-full);background:var(--uvaha)}
.feed>li.now::before{content:"";position:absolute;inset:0 auto 0 0;
  width:var(--mot-rebro,2px);border-radius:var(--r-full) 0 0 var(--r-full);
  background:var(--akcent)}
.trow{display:flex;gap:var(--sp3);align-items:flex-start;
  justify-content:space-between}
.trow>div{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
/* `anywhere` потрібен рядку для довгих назв із реєстру, але він УСПАДКОВУЄТЬСЯ —
   і на 375px підпис кнопки «Воронка →» рвався як «Воронк|а →». Напис на
   керуванні не переносять посеред слова: кнопка з розрізаним словом читається
   як зламана. `break-word` рве лише те, що інакше не влізе, і не зменшує
   мінімальну ширину — тож кнопка радше стане на власний рядок. */
.trow>div :is(button,.btn,.btn-quiet){overflow-wrap:break-word}
.tact{flex:0 0 auto}

.tablewrap{overflow-x:auto;border:1px solid var(--mezha-m);
  border-radius:var(--r);background:var(--poverhnya)}
/* `.kv` носить власну рамку — усередині обгортки вона стала б другою. */
.tablewrap > .kv{border:0;border-radius:0}
.grid{width:100%;border-collapse:collapse}
/* Сортування кліком по шапці. Знак напряму тримає постійне місце (`↕` у
   несортованих), інакше при кожному кліку шапка перескладається й підписи
   стрибають убік. */
.sort-lnk{display:inline-flex;align-items:center;gap:var(--sp1);color:inherit;
  text-decoration:none;font:inherit;letter-spacing:inherit;
  transition:color var(--d-instant) var(--ease)}
.sort-lnk:hover{color:var(--tilo);text-decoration:none}
.sort-lnk.on{color:var(--tilo)}
.sort-znak{opacity:.35;font-size:11px}
.sort-lnk.on .sort-znak{opacity:1;color:var(--akcent)}

.grid th{text-align:left;font:600 10.5px/1.3 var(--f-kod);letter-spacing:.1em;
  text-transform:uppercase;color:var(--prygl);padding:var(--sp3);
  border-bottom:1px solid var(--mezha);white-space:nowrap;
  background:var(--poverhnya);position:sticky;top:0;z-index:1}
/* `word-break:break-word` тут різало ПО ЖИВОМУ: воно дозволяє розрив у
   будь-якому місці й заодно дозволяє браузеру стиснути колонку до мінімуму.
   Виміряно 07.08.2026 на живих даних: «3 396» кВт переносилось після цифри
   «9» — тобто 3 39/6; ЄДРПОУ 38023479 ставав «3802347/9»; телефон
   «+3809792714/05». Код, який не можна прочитати й скопіювати, — не код.
   `overflow-wrap:break-word` рве лише те, що інакше НЕ ВЛІЗЕ, і не зменшує
   мінімальну ширину колонки, тому числа лишаються цілі. */
.grid td{padding:var(--sp3);border-bottom:1px solid var(--mezha-m);
  vertical-align:top;overflow-wrap:break-word}
/* Числа, коди й телефони не переносяться взагалі: розрізане число читається
   як два різні. Довгі назви поруч мають достатньо місця саме тому, що ці
   колонки більше не стискаються до мінімуму. */
.grid td.mono,.grid td .kod,.grid td .mono{white-space:nowrap}
.grid tr:last-child td{border-bottom:0}
.grid tbody tr{transition:background var(--d-fast) var(--ease)}
.grid tbody tr:hover{background:var(--akcent-tlo)}

/* ── 9. СТАНИ ──────────────────────────────────────────────────────────────── */
.empty,[data-state=empty],[data-state=first-run]{display:grid;place-items:center;
  text-align:center;gap:var(--sp3);padding:var(--sp12) var(--sp4);
  background:var(--poverhnya);border:1px dashed var(--mezha);
  border-radius:var(--r);color:var(--prygl)}
.empty b{color:var(--tilo);font-family:var(--f-dysplei,var(--f-tilo));
  font-size:17px;font-weight:600}
.empty p{max-width:46ch;margin:0}
.znak{display:block;width:104px;height:68px;color:var(--mezha)}
[data-state=error]{background:var(--poverhnya);border:1px solid var(--mezha);
  border-left:3px solid var(--krytych);border-radius:var(--r);
  padding:var(--sp3) var(--sp4)}
.err{background:color-mix(in oklch,var(--krytych) 10%,var(--poverhnya));
  color:var(--krytych);
  border:1px solid color-mix(in oklch,var(--krytych) 32%,transparent);
  padding:var(--sp3) var(--sp4);border-radius:var(--r-sm);
  margin-bottom:var(--sp3)}
/* Помилка БІЛЯ ПОЛЯ. Свідомо не банер: без рамки й підкладки, щоб два різні
   рівні (що сталось / де виправляти) не сперечались за увагу на одному екрані.
   Знак «!» — щоб сигнал не тримався на самому кольорі: дальтонізм, чорно-білий
   друк і поганий проектор знімають червоний, і підпис стає звичайним текстом. */
.pole-err{color:var(--krytych);font-size:13px;line-height:1.45;
  margin:calc(var(--sp1) * -1) 0 var(--sp2);display:flex;gap:4px}
.pole-err::before{content:"!";font-weight:700;flex:none}
/* Поле, на яке вказує помилка. `box-shadow`, а не `border`: рамку тут малює
   тема, і підміна кольору змістила б поле на 1 px відносно сусідів. */
:is(input,select,textarea)[aria-invalid=true]{
  border-color:var(--krytych);
  box-shadow:0 0 0 1px color-mix(in oklch,var(--krytych) 45%,transparent)}

.notice{background:var(--akcent-tlo);
  border:1px solid color-mix(in oklch,var(--akcent) 28%,transparent);
  border-radius:var(--r-sm);padding:var(--sp3) var(--sp4);
  margin-bottom:var(--sp3)}
.skelet,[data-state=loading]{background:var(--poverhnya);
  border:1px solid var(--mezha-m);border-radius:var(--r);padding:var(--sp4);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp2)}
.skelet i{display:block;height:11px;border-radius:var(--r-xs);
  background:linear-gradient(90deg,var(--mezha-m),var(--poverhnya-2),var(--mezha-m));
  background-size:200% 100%;animation:sk 1.5s linear infinite}
.skelet i:nth-child(2){width:72%} .skelet i:nth-child(3){width:54%}
@keyframes sk{to{background-position:-200% 0}}

/* ── 9b. ЕКРАН «МІЙ ДЕНЬ» ──────────────────────────────────────────────────── */
.den-verh{display:flex;align-items:flex-start;gap:var(--sp5);flex-wrap:wrap;
  margin-bottom:var(--sp5)}
.den-verh>div:first-child{flex:1 1 auto;min-width:0}
.den-verh .sub{margin:0}
.hrupa-den{display:flex;align-items:center;gap:var(--sp2);
  margin:var(--sp5) 0 var(--sp2);font-size:14px}
.ryadok-prog{display:flex;align-items:center;gap:var(--sp3);font-size:13.5px}
.ryadok-prog a{flex:0 0 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:14ch}
.ryadok-prog .bullet{flex:1 1 auto}
.zminy{display:grid;gap:var(--sp2);padding:var(--sp3) var(--sp4);
  background:var(--akcent-tlo);
  border:1px solid color-mix(in oklch,var(--akcent) 26%,transparent);
  border-radius:var(--r);margin-bottom:var(--sp4)}
.zminy-h{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}
.zminy-h b{font-family:var(--f-dysplei,var(--f-tilo));font-size:15px}
.zminy-h time{font:11px/1 var(--f-kod);color:var(--prygl);margin-left:auto}
.zminy ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
  gap:var(--sp2) var(--sp4)}
.zminy li{display:flex;align-items:baseline;gap:4px;font-size:13.5px}
.zminy li b{font:700 16px/1 var(--f-kod);color:var(--tilo)}
.zminy .nichoho{color:var(--prygl);font-size:13.5px;margin:0}
.nalash{display:grid;gap:var(--sp2);max-width:520px}
.nalash-p{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp4);padding:var(--sp3) var(--sp4);background:var(--poverhnya);
  border:1px solid var(--mezha-m);border-radius:var(--r-sm);font-size:14px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ── 10. РОЗДІЛИ Й ДОПОМІЖНЕ ───────────────────────────────────────────────── */
.rozdil{display:flex;align-items:center;gap:var(--sp3);
  margin:var(--sp6) 0 var(--sp3)}
.rozdil:first-child{margin-top:0}
.rozdil .nz{font-family:var(--f-dysplei,var(--f-tilo));font-size:13px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tilo);
  flex:0 0 auto}
.rozdil::after{content:"";flex:1;height:1px;background:var(--mezha-m)}
.rozdil .lich-r{font:11px/1 var(--f-kod);color:var(--prygl);flex:0 0 auto}
.cols{display:grid;grid-template-columns:1.62fr 1fr;gap:var(--sp6);
  align-items:start}
.col{min-width:0}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp2);align-items:center;
  margin-bottom:var(--sp4)}
.ik{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ik.sm{width:15px;height:15px} .ik.lg{width:22px;height:22px}

/* ── 11. ЖИВІ ПЕРЕХОДИ МІЖ ЕКРАНАМИ ────────────────────────────────────────── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-vyhid 120ms var(--ease) both}
  ::view-transition-new(root){animation:vt-vhid 200ms var(--ease) both}
}
@keyframes vt-vyhid{to{opacity:0;translate:0 -6px}}
@keyframes vt-vhid{from{opacity:0;translate:0 8px}}
/* Рейка не має брати участі в переході — інакше вона блимає на кожному кроці */
.rejka{view-transition-name:rejka}

/* ── 12. АДАПТИВ ─────────────────────────────────────────────────────────────
   Три брейкпойнти на всю систему: 600 · 900 · 1200 (шкала — `yadro.css`).
   Було шість (560·600·760·880·1000·1100), і компоненти ламались у різні
   моменти: на 950px рейка ще широка, а колонки вже злиплись — вигляд
   «недоперебудувалось». Спільна шкала прибирає саме це. */
@media (max-width:900px){
  .cols{grid-template-columns:1fr}
  .shell,.shell.zgornuto{grid-template-columns:1fr}
  .rejka{position:fixed;left:0;top:0;bottom:0;width:var(--rejka-w);z-index:40;
    translate:-100% 0;transition:translate var(--d) var(--ease);
    box-shadow:var(--tin-3)}
  .shell.vidkryto .rejka{translate:0}
  .shell.zgornuto .rejka .nz,.shell.zgornuto .rejka .hrupa,
  .shell.zgornuto .rejka .brand,.shell.zgornuto .rejka-hto .imena,
  .shell.zgornuto .rejka .devbar{display:revert}
  .shell.zgornuto .rejka a{justify-content:flex-start;padding:8px var(--sp2)}
  .mob-verh{display:flex;align-items:center;gap:var(--sp3);
    padding:var(--sp2) var(--sp4);background:var(--sklo);
    backdrop-filter:blur(var(--sklo-blur));border-bottom:1px solid var(--mezha-m);
    position:sticky;top:0;z-index:20}
  .menyu{display:inline-flex}
  .zgornuty{display:none}
  .zatemnennya{position:fixed;inset:0;background:oklch(0 0 0 / .45);z-index:30}
  .wrap{padding:var(--sp4) var(--sp4) var(--sp12)}
}
@media (max-width:600px){
  .wrap{padding:var(--sp4) var(--sp3) var(--sp12)}
  .grid{min-width:560px}
  .bento{grid-template-columns:1fr}
  .plyt.shyr-2{grid-column:span 1}
}