/* ═══ ЯДРО ══════════════════════════════════════════════════════════════════
   Шрифти · база · типографіка · простір · примітиви руху.
   Кольорів тут НЕМАЄ — усе через токени напряму (napryamy/*.css), який
   підключається ПЕРЕД цим файлом.

   Порядок підключення: napryamy/<обраний>.css → yadro.css → komponenty.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ШРИФТИ ─────────────────────────────────────────────────────────────────
   Вкладені локально: у продукті діє заборона на зовнішні запити під час
   роботи. Ліцензія SIL OFL — див. vendor/fonts/DZHERELO.txt.
   Підмножини за unicode-range: кирилиця тягнеться лише коли потрібна. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(vendor/fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(vendor/fonts/inter-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(vendor/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(vendor/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(vendor/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(vendor/fonts/manrope-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(vendor/fonts/manrope-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(vendor/fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Unbounded;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(vendor/fonts/unbounded-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(vendor/fonts/unbounded-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;
  font-display:swap;src:url(vendor/fonts/jbmono-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 600;
  font-display:swap;src:url(vendor/fonts/jbmono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD}

/* ── ПРОСТІР, ТИПОГРАФІКА, ЩІЛЬНІСТЬ ────────────────────────────────────────
   Щільність — перемикач для людини (компактно / просторо). Це чесна відповідь
   на «виразно, але не втомлює»: замість того щоб я вгадував середнє, дається
   регулятор. Множник входить у КОЖЕН відступ, тому екран стискається цілісно. */
:root{
  --shchilnist:1;
  /* Внутрішні відступи КЕРУВАНЬ — окрема шкала, теж кратна 4.
     Була розсипана літералами: 9×11 у полів, 9×15 у кнопок, 7 у рейки,
     5×11 у сегмента, 5 у підписів. Виміряно 06.08.2026: 48.4 % обчислених
     відступів на шести екранах не лягали на крок 4px — рівень найгіршої з
     семи платформ, що я міряв. Числа в керуваннях не «майже однакові», а
     мають збігатися: інакше кнопка й поле поруч стоять на різній висоті, і
     око бачить це раніше, ніж людина усвідомлює. */
  --pad-y:8px;    --pad-x:12px;      /* поле, пункт рейки, рядок списку */
  --pad-y-sm:4px; --pad-x-sm:12px;   /* сегмент, дрібні кнопки */
  --pad-x-btn:16px;                  /* кнопка ширша за поле — так і має бути */

  --sp1:calc(4px * var(--shchilnist));   --sp2:calc(8px * var(--shchilnist));
  --sp3:calc(12px * var(--shchilnist));  --sp4:calc(16px * var(--shchilnist));
  --sp5:calc(20px * var(--shchilnist));  --sp6:calc(24px * var(--shchilnist));
  --sp8:calc(32px * var(--shchilnist));  --sp12:calc(48px * var(--shchilnist));
  --sp16:calc(64px * var(--shchilnist));

  --f-tilo:Inter,system-ui,"Segoe UI",sans-serif;
  --f-kod:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --rejka-w:224px; --rejka-w-min:60px;
  --mira:68ch;
}
:root[data-shchilnist=kompaktno]{--shchilnist:.8}
:root[data-shchilnist=prostoro]{--shchilnist:1.15}

/* ── ШКАЛА ШИРИН ──────────────────────────────────────────────────────────
   Три брейкпойнти на всю систему. Було шість (560·600·760·880·1000·1100), без
   спільної логіки: на 950px рейка ще широка, а колонки вже злиплись, і вигляд
   читався як «недоперебудувалось».

     600  — телефон: одна колонка, ключ-значення стовпчиком
     900  — планшет: рейка стає накладною, карта складається згори вниз
     1200 — вузький ноутбук: права панель карти стає шухлядою

   ЧЕСНО ПРО ОБМЕЖЕННЯ: `@media (max-width: var(--bp-s))` у CSS не працює —
   медіа-запит обчислюється до каскаду й змінних не бачить (`@custom-media`
   досі не в жодному браузері). Тому в самих запитах числа лишаються
   літералами, а ці токени — джерело правди для JS і для звірки: гейт
   `test_shkala_shyryn` порівнює одне з одним і червоніє на четвертому числі. */
:root{--shyr-s:600px;--shyr-m:900px;--shyr-l:1200px}

/* Рух вимикається або людиною, або системно. Обидва шляхи ведуть в одну
   змінну, щоб компоненти не перевіряли дві умови окремо. */
:root{--ruh:1}
:root[data-ruh=min]{--ruh:0}
@media (prefers-reduced-motion:reduce){:root{--ruh:0}}

/* ── БАЗА ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--tlo);color:var(--tilo);
  font:16px/1.55 var(--f-tilo);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh}

h1,h2,h3{margin:0;font-family:var(--f-dysplei,var(--f-tilo));font-weight:600;
  line-height:1.18;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(23px,1.4vw + 18px,30px)}
h2{font-size:20px;margin:var(--sp6) 0 var(--sp3)}
h3{font-size:16px;margin:var(--sp4) 0 var(--sp2);letter-spacing:-.008em}
p{margin:0 0 var(--sp3);max-width:var(--mira);text-wrap:pretty}
/* Підкреслення завжди на місці, але прозоре. Якщо його додавати на ховері,
   рядок сіпається: `text-decoration` впливає на розкладку рядка. Анімуємо лише
   колір — найдешевший прийом «зробленості», який тут узагалі є. */
a{color:var(--akcent);text-decoration:underline;
  text-decoration-color:transparent;text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color var(--d-instant) var(--ease)}
a:hover{text-decoration-color:currentColor}
code,.mono,.kod{font-family:var(--f-kod);font-variant-numeric:tabular-nums}
code{font-size:.88em;background:var(--mezha-m);color:var(--tilo);padding:1px 4px;
  border-radius:var(--r-xs);word-break:break-all}
.kod{font-size:11.5px;letter-spacing:.06em;color:var(--prygl);text-transform:uppercase}

::selection{background:var(--akcent-tlo);color:var(--tilo)}
/* ── ФОКУС ────────────────────────────────────────────────────────────────
   Кільце зібране з ОДНОГО токена товщини. Раніше `2px` стояло літералом двічі
   (сама рамка й відступ), і зміна товщини вимагала памʼятати про друге місце —
   тому відступ рахується формулою від товщини, а не дублює число.

   Двосторонній відступ. Позитивний (+2px) добрий на самотній кнопці, але в
   щільному ряду — таблиця, канбан, стрічка — кільце залазить на сусіда й
   читається як «виділено два». Там воно йде ВСЕРЕДИНУ: та сама товщина,
   протилежний знак, нічого чужого не чіпає.

   Анімуємо колір і відступ, а НЕ `outline` цілком: інакше браузер анімує й
   товщину, і кільце «набрякає» замість приїхати. */
:root{--fokus-tovshchyna:2px}
:focus-visible{
  outline:var(--fokus-tovshchyna) solid var(--akcent);
  outline-offset:var(--fokus-tovshchyna);
  border-radius:var(--r-xs);
  transition:outline-color var(--d-instant) var(--ease),
             outline-offset var(--d-instant) var(--ease)}
:is(.grid,.feed,.strichka,.kanban,.lane,.k-spysok,.palitra-rez) :focus-visible{
  outline-offset:calc(0px - var(--fokus-tovshchyna))}

.dim{color:var(--prygl)}
.small{font-size:13.5px}
.hint{color:var(--prygl);font-size:13.5px;max-width:var(--mira)}
.sub{color:var(--prygl);margin:0 0 var(--sp5)}

/* ── ПРИМІТИВИ ГЛИБИНИ ──────────────────────────────────────────────────────
   Скло — окремий примітив, а не властивість картки: backdrop-filter коштує
   кадрів, тому він має бути свідомим рішенням у кожному місці, а не типовим. */
.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))}
.tin-1{box-shadow:var(--tin-1)} .tin-2{box-shadow:var(--tin-2)}
.tin-3{box-shadow:var(--tin-3)}

/* Верхнє світле ребро — імітація освітлення згори. Один рядок, а панель
   перестає бути пласким прямокутником. */
.rebro{box-shadow:inset 0 1px 0 var(--mezha-svitla)}

/* ── РУХ ────────────────────────────────────────────────────────────────────
   Тривалості множаться на --ruh: при вимкненому русі стають нульовими, але
   САМІ ПЕРЕХОДИ лишаються описаними. Це важливо: елементи не «стрибають» у
   кінцевий стан із проміжного, вони просто досягають його миттєво. */
:root{
  --d-instant:calc(var(--t-instant) * var(--ruh));
  --d-fast:calc(var(--t-fast) * var(--ruh));
  --d:calc(var(--t) * var(--ruh));
  --d-slow:calc(var(--t-slow) * var(--ruh));
}

/* Поява при в'їзді у видиму область — без жодного JS, на таймлайні прокрутки */
@media (prefers-reduced-motion:no-preference){
  .zyavlyayetsya{animation:zyava linear both;animation-timeline:view();
    animation-range:entry 0% entry 42%}
  :root[data-ruh=min] .zyavlyayetsya{animation:none}
}
@keyframes zyava{from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}

/* Анімоване число: @property дає браузеру знати, що це ЧИСЛО, і він може його
   інтерполювати. Без цього рядка анімація лічильника вимагала б JS-таймера. */
/* Лічильник відкручує JS (`vzayemodiyi.js`), а не CSS. `counter()` не вміє
   групувати розряди, і в одній картці стояло «46149» великим числом при
   «51 416 осіб» підписом просто під ним — два формати одного роду поруч.
   Тут лишається тільки резерв місця: без нього рядок стрибає, коли число
   зʼявляється. `ch` по цифрі — бо шрифт має табличні цифри. */
.chyslo-anim{font-variant-numeric:tabular-nums}