/* ════════════════════════════════════════════════════════════════════════
   Дашборд «Державна атестація» — спільний каркас (shell)
   Шапка + NavTabs (перемикання екранів) під нею · компактний футер.
   Стилі — виключно на токенах URIS UIkit (--uris-*). Хардкоду нема.
   ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* min-height (НЕ height): фіксована висота body = вьюпорт обрізала б
   containing block липкого navbar — після прокрутки на висоту екрана
   sticky-елемент не може вийти за бокс батька і «відлипає». */
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-text);
  background: var(--uris-color-semantic-surface-muted);
  -webkit-font-smoothing: antialiased;
  /* Сторінка ніколи не скролиться горизонтально: широкі таблиці мають
     власний скрол (table-wrap--scroll, initResponsiveTables), а закриті
     dropdown-меню (position:absolute + visibility:hidden) все одно
     розтягували скрол-область документа біля правого краю. clip, не hidden:
     hidden зробив би body скрол-контейнером і зламав сторінковий sticky
     (шапки таблиць, topbar). */
  overflow-x: clip;
}

/* ── Каркас: шапка+таби (липкі) / контент / футер, у колонку ──────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Спільний navbar порталу липкий (компонент, z=150) — каркас як на сторінках
   переліків/реєстрів каталогу: під ним прилипає лише тулбар (.app-topbar,
   z=50). Sticky — теж positioned: мега-панель .navbar__dropdown (absolute
   top:100%) працює без окремого relative-предка. */

/* Липкий тулбар (пошук+фільтри) — прилипає ПІД navbar; шапка таблиці
   прилипає ще нижче через --app-topbar-height (navbar+тулбар,
   initStickyTableOffset). Крихти/заголовок/таби — у нелипкій
   .app-page-head вище. */
.app-topbar {
  position: sticky;
  top: calc(var(--uris-component-navbar-height) + 1px);
  z-index: 50;
  /* Muted, як контент нижче: сіре полотно починається одразу під табами
     (.app-page-head біла до межі nav-tabs); фон непрозорий — при скролі
     липка смуга так само перекриває контент. Тулбар усередині — біла
     картка, що «плаває» на сірому (падінги смуги — її повітря). */
  background: var(--uris-color-semantic-surface-muted);
  padding: var(--uris-spacing-3) var(--uris-spacing-8);
}
@media (max-width: 1023px) {
  .app-topbar { top: calc(var(--uris-component-navbar-height-mobile) + 1px); }
}

/* ── Шапка ───────────────────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-4);
  min-height: 64px;
  padding: var(--uris-spacing-3) var(--uris-spacing-8);
}

.app-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.app-header__logo { display: block; }

.app-header__titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header__eyebrow {
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uris-color-semantic-text-muted);
}

.app-header__title {
  margin: 0;
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-xl-size);
  font-weight: var(--uris-font-weight-bold);
  line-height: 1.2;
  color: var(--uris-color-semantic-text);
}

.app-header__spacer { flex: 1 1 auto; }

/* ── NavTabs: перемикання між 3 екранами (замість icon-only сайдбара) ───
   padding-inline: spacing-4 компенсує вбудований padding-inline .nav-tab
   (spacing-4), щоб текст першого пункту вирівнювався з заголовком шапки
   (там padding-inline шапки — spacing-8). */
.app-nav-tabs { padding-inline: var(--uris-spacing-4); }

/* ── Довідка (поповер з наказами МОН) ────────────────────────────────── */
.help {
  position: relative;
}

.help__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  min-height: 40px;
  padding: var(--uris-spacing-2) var(--uris-spacing-4);
  font-family: inherit;
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-md);
  cursor: pointer;
  transition: background var(--uris-duration-fast) var(--uris-ease-default),
              border-color var(--uris-duration-fast) var(--uris-ease-default);
}
.help__trigger:hover { background: var(--uris-color-semantic-surface-muted); }
.help__trigger:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 2px;
}
.help__trigger-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--uris-color-semantic-text-muted);
}

.help__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--uris-spacing-2));
  z-index: 60;
  width: min(30rem, 90vw);
  padding: var(--uris-spacing-5) var(--uris-spacing-6);
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  box-shadow: var(--uris-shadow-lg);
}
.help__panel[hidden] { display: none; }

.help__panel-title {
  margin: 0 0 var(--uris-spacing-3);
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-base-size);
  font-weight: var(--uris-font-weight-bold);
}

.help__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-3);
}
.help__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-end: var(--uris-spacing-3);
  border-block-end: 1px solid var(--uris-color-semantic-border);
}
.help__item:last-child { border-block-end: 0; padding-block-end: 0; }
.help__item-directions {
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
}
.help__item-order {
  font-size: var(--uris-text-xs-size);
  color: var(--uris-color-semantic-text-muted);
}

/* ── Контентна область ───────────────────────────────────────────────── */
.app-main {
  flex: 1 1 auto;
  padding: var(--uris-spacing-8);
}

.app-main__head {
  margin-block-end: var(--uris-spacing-6);
}
.app-main__title {
  margin: 0 0 var(--uris-spacing-2);
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-2xl-size);
  font-weight: var(--uris-font-weight-bold);
}
.app-main__subtitle {
  margin: 0;
  max-width: 68ch;
  color: var(--uris-color-semantic-text-muted);
}

/* ── Плейсхолдер Етапу 0: статус завантаження даних ──────────────────── */
.data-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--uris-spacing-4);
  margin-block-start: var(--uris-spacing-6);
}
/* Специфічність рівна .data-status — виграє через порядок оголошення (пізніше
   правило в тому самому файлі), тому [hidden] реально ховає елемент. */
.data-status[hidden] { display: none; }
.data-status__card {
  padding: var(--uris-spacing-5) var(--uris-spacing-6);
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
}
.data-status__value {
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-2xl-size);
  font-weight: var(--uris-font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.data-status__label {
  margin-block-start: 2px;
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text-muted);
}
.data-status__card--error .data-status__value { color: var(--uris-color-brand-red); }

/* ════════════════════════════════════════════════════════════════════════
   Екран 1 «Результати» — Етап 1: базові блоки (donut/bar/filter-engine +
   інтеграція Table/Select/Search/Stat-card). Мапу відкладено (Етап 3).
   ════════════════════════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--uris-spacing-4);
  margin-block-end: var(--uris-spacing-6);
}

/* .chart-section — семантична обгортка (aria-label) навколо .chart-grid +
   будь-яких chart-card--wide; margin-block-end (відступ до наступної секції)
   живе тут, а не на .chart-grid — бо .chart-grid тепер лише внутрішній
   grid-контейнер (вузьких карток), не єдиний контейнер усього блока. */
.chart-section {
  margin-block-end: var(--uris-spacing-6);
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--uris-spacing-4);
}

.chart-card {
  padding: var(--uris-spacing-5) var(--uris-spacing-6);
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  min-width: 0;
}

/* chart-card--wide РАНІШЕ було grid-item з grid-column:1/-1 усередині
   .chart-grid — це й ламало auto-fit: CSS Grid не колапсує «порожні»
   доріжки, якщо їх торкається елемент, що охоплює весь рядок (grid-column:
   1/-1 перетинає ВСІ доріжки), тому вузькі картки лишались власної ширини
   замість розтягування на всю ширину ряду (ефект видно лише на широких
   екранах, де auto-fit нарахував БІЛЬШЕ доріжок, ніж вузьких карток —
   .stat-grid без wide-елементів такої проблеми не мав, звідси видима
   розбіжність поведінки двох на вигляд однакових auto-fit грідів). Фікс:
   .chart-card--wide тепер ПОЗА .chart-grid, звичайний блочний сиблінг
   всередині .chart-section — просте margin замість grid-participation. */
.chart-card--wide { margin-block-start: var(--uris-spacing-4); }

.chart-card__title {
  margin: 0 0 var(--uris-spacing-4);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
}

/* Заголовок картки + пагінація (список областей) в один рядок */
.chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uris-spacing-4);
  margin-block-end: var(--uris-spacing-4);
}
.chart-card__head .chart-card__title { margin: 0; }

/* Фільтри тулбара — канонічні Dropdown-и (#22) у .table-toolbar__filters, як
   у демо Table-toolbar #31: усі контролі рядка однорядкові, тож вбудованого
   align-items:center компонента достатньо — власних перевизначень не треба. */

/* Тулбар (пошук/фільтри/теги) живе в липкому .app-topbar під NavTabs — завжди
   доступний під час скролу графіків і таблиці. Компонент лишився тим самим
   (зв'язок з таблицею — явний data-table-toolbar-for). */
.app-topbar .table-toolbar {
  margin-block-end: 0;
  padding: var(--uris-spacing-3) var(--uris-spacing-4);
  /* Біла картка на сірій смузі — та сама мова, що stat-картки/chart-картки
     контенту нижче. При прилипанні тінь глибшає (див. [data-stuck]). */
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  box-shadow: var(--uris-shadow-sm);
  transition: box-shadow var(--uris-duration-fast) var(--uris-ease-default);
}
.app-topbar[data-stuck] .table-toolbar { box-shadow: var(--uris-shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .app-topbar .table-toolbar { transition: none; }
}

/* Структура картки: рядок 1 — пошук + лічильник/тогл (пошук ширший за
   компонентні 380px — рядок належить лише йому); рядок 2 — усі фільтри
   (order + flex-basis:100% у флекс-рядку .table-toolbar__bar); рядок 3 —
   теги активних фільтрів (окремий блок компонента). */
.app-topbar .table-toolbar__search { max-inline-size: 480px; }
.app-topbar .table-toolbar__filters {
  order: 1;
  flex-basis: 100%;
}
/* .table-toolbar { display:flex } компонента перемагає UA-стиль [hidden]
   (каскад, не специфічність) — ховаємо явно, поки дані не завантажились. */
.app-topbar .table-toolbar[hidden] { display: none; }

/* ── Згортання тулбара (кнопка в правому верхньому куті) ────────────────
   data-collapsed ховає фільтри/теги, лишаючи рядок: пошук + лічильник
   записів + кнопка розгортання (щоб і згорнутим тулбар повідомляв стан
   вибірки і мав за що розгорнутись). Стан живе в sessionStorage
   (screen-results.js). Селектор __active тут специфічніший за
   .table-toolbar--filtered .table-toolbar__active компонента — перемагає. */
/* Лічильник + кнопка — один флекс-елемент: переносяться при wrap лише РАЗОМ
   і завжди притиснуті праворуч. Auto-margin компонента
   (.table-toolbar__bar > .table-toolbar__count) через обгортку вже не
   матчиться — його роль виконує margin на кластері. */
.app-toolbar-end {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  margin-inline-start: auto;
}
.app-toolbar-toggle { flex: 0 0 auto; }
.app-toolbar-toggle__icon {
  display: block;
  transition: transform var(--uris-duration-fast) var(--uris-ease-default);
}
.app-topbar .table-toolbar[data-collapsed] .app-toolbar-toggle__icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .app-toolbar-toggle__icon { transition: none; }
}
/* Згорнутий стан ховає лише фільтри й теги — пошук доступний завжди
   (запит користувача 2026-07-22). */
.app-topbar .table-toolbar[data-collapsed] :is(
  .table-toolbar__filters,
  .table-toolbar__active
) { display: none; }
.app-topbar .table-toolbar[data-collapsed] {
  padding-block: var(--uris-spacing-2);
}

/* ── Skeleton-лоадинг (Етап 6) ──────────────────────────────────────────
   Показується з першого кадру (без hidden у розмітці), dashboard.js ховає
   на dashboard:data-ready або на помилку. Контейнери карток — ті самі
   .stat-grid/.chart-grid/.chart-card (+ skel-metric з компонента), тож
   скелет успадковує реальну сітку й адаптив; нижче лише внутрішні
   заглушки, для яких компонент Skeleton геометрії не задає. */
.dash-skeleton[hidden] { display: none; }
.dash-skeleton__title {
  width: 10rem;
  max-width: 60%;
  margin-block-end: var(--uris-spacing-4);
}
.dash-skeleton__donut {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-6);
}
.dash-skeleton__ring {
  width: var(--uris-component-donut-chart-size-md);
  height: var(--uris-component-donut-chart-size-md);
  border-radius: var(--uris-radius-full);
  flex: 0 0 auto;
}
.dash-skeleton__legend {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-3);
}
.dash-skeleton__rows {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-4);
}
/* Висота заглушки мапи = обмеженню реальної мапи (той самий токен). */
.dash-skeleton__map { height: var(--uris-component-choropleth-map-max-block-size); }

/* ── Вузькі екрани (< breakpoint.md 768px) ──────────────────────────────
   Липкий блок з тулбаром на мобільному займав >половини в'юпорта (заміряно:
   477px із 812 — фільтри стають у стовпчик), лишаючи контенту ~⅓ екрана.
   Тому нижче md шапка+таби+тулбар скролляться разом зі сторінкою (звичайний
   потік), а вкладки отримують горизонтальний скрол — інакше третій пункт
   («Вклад СП») обрізався правим краєм в'юпорта. */
@media (max-width: 767px) {
  .app-topbar { position: static; }
  .app-nav-tabs { overflow-x: auto; scrollbar-width: none; }
  .app-nav-tabs::-webkit-scrollbar { display: none; }
  .app-nav-tabs .nav-tabs__list { flex-wrap: nowrap; width: max-content; }

  /* Горизонтальні відступи каркаса spacing-8 (32px) з'їдали 64px і без того
     вузького в'юпорта — стискаємо до spacing-4 (16px). Компенсаційний
     padding .app-nav-tabs (вирівнювання тексту вкладки з заголовком шапки,
     див. коментар вище) при цьому зникає: spacing-4 шапки мінус вбудований
     spacing-4 самої вкладки = 0. */
  .app-header { padding-inline: var(--uris-spacing-4); }
  .app-nav-tabs { padding-inline: 0; }
  .app-topbar { padding-inline: var(--uris-spacing-4); }
  .app-main { padding: var(--uris-spacing-5) var(--uris-spacing-4); }

  /* Бублик у вузькій картці: кільце + легенда поруч не вміщаються —
     у стовпчик, легенда на всю ширину. */
  .dash-skeleton__donut { flex-direction: column; align-items: stretch; }
  .dash-skeleton__ring { align-self: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   Екран 2 «Фінансування» — Етап 4: два зведені table-section один під одним
   (.chart-grid/.chart-card/.stat-grid вище — спільні з екраном 1, без змін).
   ════════════════════════════════════════════════════════════════════════ */

/* Заголовок над кожною з двох таблиць екрана 2 (на екрані 1 таблиця одна,
   заголовка не було — лише aria-label секції). Другий table-section отримує
   відступ зверху, щоб таблиці не «злипались». */
.table-section__title {
  margin: 0 0 var(--uris-spacing-4);
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-lg-size);
  font-weight: var(--uris-font-weight-bold);
  color: var(--uris-color-semantic-text);
}
.table-section + .table-section { margin-block-start: var(--uris-spacing-8); }

/* Таблиця 1 екрана 2: колонка «Назва» об'єднує тип установи (ЗВО/НУ) як
   приглушений підрядок — рішення користувача (PLAN.md §3 «Назва(D/A)»),
   економить одну колонку в і так щільній 10-стовпчиковій таблиці. */
.table__cell-subtitle {
  display: block;
  margin-block-start: 2px;
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-text-muted);
}

/* Неактивні пункти меню й футера: <a> без href. У деплой-збірці 2026-07-29
   активні лише головна та цей дашборд — решта розділів лишаються ВИДИМИМИ
   (показують заплановану структуру порталу), але не клікабельними.
   Дзеркалить те саме правило в <style> головної (index.html). */
.navbar__dropdown-item:not([href]),
.navbar__mobile-link:not([href]),
.footer__link:not([href]) {
  color: var(--uris-color-semantic-text-muted);
  cursor: default;
  opacity: 0.65;
}
.navbar__dropdown-item:not([href]):hover,
.navbar__mobile-link:not([href]):hover,
.footer__link:not([href]):hover { text-decoration: none; }

/* Фільтр «ГРБК»: значення — повні назви органів (до ~90 символів). Дефолтний
   .dropdown__menu{width:max-content} розтягнув би меню за межі в'юпорта;
   обмежуємо ширину й переносимо текст пункту в кілька рядків (лише для
   цього меню — решта фільтрів короткі, зміна їх не стосується). */
#filter-grbk {
  max-width: 26rem;
}
#filter-grbk .dropdown__item {
  white-space: normal;
  line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════════
   Екран 3 «Вклад СП» — Етап 5: найбільший обсяг Dashboard (4836 рядків) →
   таблиця пагінована (.pagination-bar #28), на відміну від суцільного
   скролу таблиць екранів 1-2.
   ════════════════════════════════════════════════════════════════════════ */
.table-section .pagination-bar {
  margin-block-start: var(--uris-spacing-4);
}

/* ════════════════════════════════════════════════════════════════════════
   Екран 4 «Детальні результати» — розкривний рядок з повною методичною
   розбивкою (37 показників, аркуш «Детальні результати ДА»). Одна панель
   відкрита одночасно (screen-details.js); тут лише геометрія/акценти.
   ════════════════════════════════════════════════════════════════════════ */

/* Шеврон-перемикач — той самий рецепт обертання, що й .app-toolbar-toggle
   вище (transform на [aria-expanded]), лише 90° замість 180°: розгортання
   рядка вниз читається природніше як "→ вниз", а не "вгору-вниз". */
.details-toggle__icon {
  display: block;
  transition: transform var(--uris-duration-fast) var(--uris-ease-default);
}
.details-toggle[aria-expanded="true"] .details-toggle__icon {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .details-toggle__icon { transition: none; }
}

.table tbody tr.details-row--active {
  background: var(--uris-color-semantic-surface-muted);
}

.details-panel-row[hidden] { display: none; }
/* Специфічність рівня .table tbody tr:hover (компонент) — інакше програє
   каскаду й панель усе одно підсвічувалась би при наведенні миші. */
.table tbody tr.details-panel-row:hover { background: transparent; }

.details-panel-cell {
  padding: var(--uris-spacing-6) var(--uris-spacing-6) var(--uris-spacing-8);
  background: var(--uris-color-semantic-surface-muted);
  border-block-end: 1px solid var(--uris-color-semantic-border);
  white-space: normal; /* .table__cell--numeric-подібні сусіди не мають зʼїжджати з nowrap */
}

.details-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--uris-spacing-2) var(--uris-spacing-4);
  margin-block-end: var(--uris-spacing-5);
}
.details-panel__title {
  margin: 0;
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-lg-size);
  font-weight: var(--uris-font-weight-bold);
  color: var(--uris-color-semantic-text);
}
.details-panel__order {
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text-muted);
}

.details-panel__stats { margin-block-end: var(--uris-spacing-6); }

.details-panel__section-title {
  margin: 0 0 var(--uris-spacing-3);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
}
.details-panel__meta { margin-block-end: var(--uris-spacing-6); }

.details-panel__accordion { margin-block-start: var(--uris-spacing-2); }
.details-panel__accordion .accordion__content .table-wrap { margin: 0; }
.details-panel__count {
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-text-muted);
}

/* Код сирого показника (Р23/Ф1…) перед значенням у клітинці з кількома
   сирими підзначеннями (напр. «Кількість проведених експертиз» = Р23+Р24) */
.details-raw-code {
  font-size: var(--uris-text-xs-size);
  color: var(--uris-color-semantic-text-muted);
  margin-inline-end: 2px;
}

/* Коди методики (Р1 · I1 · I1*) поруч із назвою показника — «Детальні
   результати» та «Медіани показників». nowrap: код не рветься між рядками
   (назва перед ним переноситься вільно). */
.indicator-codes {
  font-size: var(--uris-text-xs-size);
  color: var(--uris-color-semantic-text-muted);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   Екран 5 «Медіани показників» — порівняльна матриця (12 груп × 37
   показників), БЕЗ Table-toolbar (уся вибірка вміщується одразу, деталі —
   screen-medians.js). Тут лише категорійний розділювач рядків матриці.
   ════════════════════════════════════════════════════════════════════════ */

/* Категорійний рядок-розділювач (colspan на всю ширину) — той самий візуальний
   акцент межі, що вбудований .table__row--group-start компонента (surface-active
   лінія), але тут ПОВНОЦІННИЙ рядок з назвою категорії, а не rowspan-комірка:
   категорії різного розміру (1..8 показників) — rowspan-патерн компонента
   розрахований на ≤~6 рядків/групу (README table.css), тут не всюди підходить. */
/* Розшифровка «**» у назвах показників — під таблицями матриці. */
.medians-footnote {
  margin: var(--uris-spacing-3) 0 0;
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text-muted);
}

/* Частка установ із ненульовим значенням показника — у дужках біля медіани,
   приглушено (та сама роль другорядного контексту, що .indicator-codes). */
.medians-nonzero {
  font-size: var(--uris-text-xs-size);
  color: var(--uris-color-semantic-text-muted);
  white-space: nowrap;
}

/* Розшифровка формату клітинки під назвою напряму в шапці матриці —
   окремим рядком, приглушено й без bold шапки. */
.medians-col-note {
  display: block;
  margin-block-start: var(--uris-spacing-1);
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-text-muted);
  white-space: nowrap;
}

.medians-table__category-row td {
  padding-block: var(--uris-spacing-2);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text-muted);
  background: var(--uris-color-semantic-surface-muted);
  border-block-start: 1px solid var(--uris-color-semantic-surface-active);
}
.medians-table__category-row:first-child td { border-block-start: 0; }

/* Липка шапка (Напрям) — на запит користувача: 37 показників на таблицю
   (кожна ~45 рядків з категорійними розділювачами) — довго гортати без
   орієнтиру, який стовпець який напрям. Той самий рецепт, що екрани 4/6
   (сторінка скролиться цілком, шапка прилипає ПІД .app-topbar через CSS-
   змінну --app-topbar-height, dashboard.js/initStickyTableOffset) — тут БЕЗ
   ID-скоупу: обидві таблиці «Медіани» мають спільний клас .medians-table,
   і на цій сторінці інших таблиць нема, тож клас лишається точним селектором. */
.medians-table thead th {
  position: sticky;
  top: var(--app-topbar-height, 0px);
  z-index: 5;
}
/* 1px-концентричний фікс кутів картки (радіус th/table = зовнішній − 1px
   рамки) ПЕРЕЇХАВ у компонент table.css (.table-wrap--bordered) 2026-07-10 —
   локальні дублікати прибрано, щоб не перебивати [data-stuck] компонента
   (прямі кути прилиплої шапки, dashboard-core.js). */
@media (max-width: 767px) {
  .medians-table thead th { position: static; }
}

/* ════════════════════════════════════════════════════════════════════════
   Екран 6 «Описи впливів» — розкривна панель з наративним текстом
   (screen-impacts.js). Розкривний рядок/шеврон і .details-panel-cell/
   .details-row--active — СПІЛЬНІ з екраном 4 (класи вище); тут лише
   структура самого наративного вмісту панелі.
   ════════════════════════════════════════════════════════════════════════ */

.impact-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--uris-spacing-2) var(--uris-spacing-4);
  margin-block-end: var(--uris-spacing-5);
}
.impact-panel__title {
  margin: 0;
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-lg-size);
  font-weight: var(--uris-font-weight-bold);
  color: var(--uris-color-semantic-text);
}
.impact-panel__meta {
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text-muted);
}

.impact-panel__section + .impact-panel__section {
  margin-block-start: var(--uris-spacing-5);
}
.impact-panel__section-title {
  margin: 0 0 var(--uris-spacing-2);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
}
.impact-panel__section p {
  margin: 0;
  max-width: 120ch; /* було 68ch — на запит користувача текст ширший, на всю панель */
  color: var(--uris-color-semantic-text);
}
.impact-panel__section em { font-style: italic; }
.impact-panel__empty { color: var(--uris-color-semantic-text-muted); }
.impact-panel [data-impacts-retry] { margin-block-start: var(--uris-spacing-3); }

/* Статус фонового довантаження текстів для повнотекстового пошуку
   (screen-impacts.js, ensureAllText) — рядок під полем пошуку. */
.impacts-search-status {
  margin: var(--uris-spacing-2) 0 0;
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   Таблиці з розкривним рядком (екрани 4/6) — фікс заокруглення кута +
   липка шапка (обидва — на запит користувача, скріншот 2026-07-06).
   ════════════════════════════════════════════════════════════════════════ */

/* Заокруглення кута .table-wrap--bordered компонента дістається СПРАВЖНЬОМУ
   :first-child <th> — у цих 2 таблицях це вузька службова колонка-шеврон
   (~32px), не «Назва»/«Установа». Це і Є фізичний кут обгортки (лівий край
   toggle-колонки збігається з лівим краєм .table-wrap) — тому радіус має
   лишатись САМЕ тут, а не «зручнішій на вигляд» видимій колонці: спроба
   перенести його на :nth-child(2) («Назва»/«Установа») лишала СПРАВЖНІЙ
   кут (де toggle-колонка) без жодного радіусу — квадратний зубчик там, де
   насправді сходяться рамка обгортки й кут таблиці (звідси скарга
   користувача «всередині»: цей зубчик ховається до появи видимого тексту,
   не одразу впадає в очі).

   1px-концентричний фікс обох фізичних кутів (радіус th/table = зовнішній
   − 1px рамки; історія — git) ПЕРЕЇХАВ у компонент table.css
   (.table-wrap--bordered) 2026-07-10: локальні дублікати прибрано, щоб
   ID-селектори не перебивали [data-stuck] компонента (прямі кути прилиплої
   шапки, dashboard-core.js). */

/* Липка шапка (сторінка скролиться цілком — БЕЗ table-wrap--sticky, той
   модифікатор конфліктує з розкривною панеллю, PLAN.md §7.1). Прилипає під
   .app-topbar; висота topbar — CSS-змінна, виставляє initStickyTableOffset()
   у dashboard.js. th вже має суцільний background (компонент) — під
   рядками, що скролляться, не просвічує. */
#details-table-wrap thead th,
#impacts-table-wrap thead th {
  position: sticky;
  top: var(--app-topbar-height, 0px);
  z-index: 5;
}
@media (max-width: 767px) {
  /* .app-topbar на вузьких екранах static (не sticky) — прилипання шапки
     таблиці до вже неіснуючого «підвісу» лише плутало б. */
  #details-table-wrap thead th,
  #impacts-table-wrap thead th {
    position: static;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Екрани 1/2/3 (Результати/Фінансування/Вклад СП) — той самий фікс липкої
   шапки + кута, що екрани 4/5/6 вище (запит користувача 2026-07-06,
   скріншот: задній фон сторінки просвічував крізь заокруглений кут шапки
   після скролу). До цього ці 3 таблиці лишались на ДЕФОЛТІ компонента
   (table.css: `position:sticky; top:0`) — шапка прилипала до САМІСІНЬКОГО
   верху вьюпорта, ПІД (за z-індексом) .app-topbar (z=50 проти z=2 шапки
   таблиці), а не під ним: на межі, де рамка .table-wrap--bordered вже
   проскролила повз, заокруглений кут шапки не мав позаду СВОГО ж тла —
   крізь виїмку радіусу було видно фон сторінки. Той самий рецепт: прилипання
   ПІД .app-topbar через --app-topbar-height (initStickyTableOffset);
   1px-концентричний радіус кутів (без -1px лишається уступ на стику,
   пояснено в коментарі до екранів 4/6 вище) з 2026-07-10 несе компонент
   table.css (.table-wrap--bordered) — локальні дублікати прибрано.
   На відміну від екранів 4/6, тут НЕМАЄ службової колонки-шеврона —
   фізичний кут :first-child/:last-child <th> ЗБІГАЄТЬСЯ з видимою
   першою/останньою колонкою, спецвипадок toggle-колонки не застосовний. */
#results-table-wrap thead th,
#financing-table-wrap thead th,
#subdivisions-table-wrap thead th {
  position: sticky;
  top: var(--app-topbar-height, 0px);
  z-index: 5;
}

/* Ширина колонок «Фінансування» — НЕ через CSS width. Таблиця ширша за
   контейнер (table-layout: auto + горизонтальний скрол), а в цьому режимі
   браузер роздає ширину за вмістом і `width` ігнорує — перевірено: з
   правилом і без нього виміри однакові. Реальний важіль — мінімальна ширина
   вмісту, тобто найдовше НЕРОЗРИВНЕ слово заголовка. Тому «Коеф.
   інфра&shy;структури» в розмітці має м'який перенос (запит користувача
   2026-07-29 — звузити коефіцієнти до ширини складових оцінки): 169px → 133,
   що вкладається в діапазон сусіднього блоку (82-124). Захочеш звузити ще —
   коротший підпис або table-layout: fixed із явними ширинами ВСІХ 14 колонок;
   напівзаходи тут не діють. */

@media (max-width: 767px) {
  #results-table-wrap thead th,
  #financing-table-wrap thead th,
  #subdivisions-table-wrap thead th {
    position: static;
  }
}

/* Таблиця ширша за екран → initResponsiveTables (dashboard-core.js) вмикає
   на обгортці table-wrap--scroll (горизонтальний скрол лише таблиці). У
   скрол-контейнері сторінковий sticky НЕ працює як задумано: шапка липла б
   до верху скролпорту самої обгортки зі зсувом --app-topbar-height — тобто
   «плавала» посеред таблиці (спіймано користувачем 2026-07-23). Тому в
   цьому режимі CSS-sticky на th вимкнено (:is() з id перебиває специфічність
   id-правил sticky вище), а прилипання емулює JS transform на thead
   (updateStuck у dashboard-core.js). relative+z-index — зсунута шапка має
   малюватись НАД рядками, що проходять під нею. */
:is(#results-table-wrap, #financing-table-wrap,
    #subdivisions-table-wrap, #details-table-wrap, #impacts-table-wrap).table-wrap--scroll thead th,
.table-wrap--scroll .medians-table thead th {
  position: static;
}
.table-wrap--scroll thead {
  position: relative;
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════
   Сторінкова шапка (крихти → заголовок+довідка → таби) — каркас перенесено
   зі сторінок переліків/реєстрів каталогу. Нелипка: при скролі лишається
   тільки тулбар (.app-topbar вище). */
.app-page-head {
  padding: var(--uris-spacing-5) var(--uris-spacing-8) 0;
  background: var(--uris-color-semantic-surface);
}
.app-page-head__hero {
  display: flex;
  align-items: flex-start;
  gap: var(--uris-spacing-4);
  padding-block: var(--uris-spacing-4) var(--uris-spacing-2);
}
.app-page-head__text { min-width: 0; }
.app-page-head__title {
  margin: 0 0 var(--uris-spacing-3);
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-3xl-size);
  line-height: var(--uris-text-3xl-line);
  font-weight: var(--uris-font-weight-bold);
}
.app-page-head__desc {
  margin: 0;
  max-width: 760px;
  color: var(--uris-color-semantic-text-muted);
}
.app-page-head__hero .help {
  margin-inline-start: auto;
  flex: 0 0 auto;
}
/* Власний горизонтальний padding компонентного рядка табів не потрібен —
   відступ дає .app-page-head. */
.app-page-head .app-nav-tabs { padding-inline: 0; }
@media (max-width: 767px) {
  .app-page-head { padding-inline: var(--uris-spacing-4); }
  .app-page-head__hero { flex-direction: column; }
  .app-page-head__hero .help { margin-inline-start: 0; }
}