/* Стилі розділу «Контроль»: розгортна картка органу, плитка показника з датою й
   джерелом, блоки меж юрисдикцій і зведена таблиця меж. Спільна частина —
   у shared.css; завантажується після неї.

   ЖОДНОГО КОЛЬОРОВОГО ЛІТЕРАЛА. Усе — з токенів (--ink, --line, --c-*), бо темна
   тема в цьому проєкті перевизначає ЛИШЕ токени. Один #hex тут — і світла з темною
   розходяться назавжди.

   Специфічність. Плитка показника — це .stat із shared.css плюс .kfig, тому власні
   правила для її нащадків пишемо як «.kfig .kfig-*» (0,2,0): інакше «.stat span»
   і «.stat b» (0,1,1) перебивають їх і всі підписи стають однаковими. */

/* ================= сітка карток ================= */
/* Локального переозначення .grid.wide тут більше немає: minmax(min(100%,320px),1fr)
   стоїть у самому shared.css, тож на екрані 320px горизонтального скролу не буде
   в жодному розділі, а не тільки в цьому. */
/* Картки різновисокі: у розгорнутому записі шість показників, у заглушці — чотири
   пропуски. Тягнути їх до висоти найвищої в рядку означає напівпорожні картки, тому
   кожна займає рівно стільки, скільки має що сказати. */
#kontrol .grid{align-items:start}

/* ================= картка органу ================= */
/* Картка — <article>, а не <button>: у розгорнутій частині є посилання на закон і
   на джерела, а посилання всередині кнопки не клікається. Кнопка — тільки шапка. */
.kcard{padding:0;cursor:default;scroll-margin-top:150px;overflow:hidden}
.kcard:hover{transform:none;box-shadow:none}
.kcard:not(.open):hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow)}
.kcard.open{grid-column:1/-1}

.kcard-head{display:block;width:100%;position:relative;text-align:left;font:inherit;color:inherit;
  background:transparent;border:0;padding:13px 34px 12px 14px;cursor:pointer}
.kcard-head:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.kcard-head .name,.kcard-head .since{display:block}
.kcard-head .since{overflow-wrap:anywhere}

/* Механізм призначення — той самий .flag, лише колір бере з MECH, а не фіксований. */
.kmech{display:block;margin-top:10px}
.flag.k-mech{background:var(--mc);margin-left:0;white-space:normal;letter-spacing:.08em}
.flag.k-stub{background:var(--ink-3)}

/* Розгортання. Слово в розмітці лишається для тих, хто читає HTML, а на екрані
   це стрілка в кутку: підпис «детальніше» під розгорнутою карткою брехав би. */
.kmore{position:absolute;top:11px;right:10px;font-size:0;line-height:1;color:var(--accent)}
.kmore::before{content:"▾";font-size:15px;font-weight:700}
.kcard.open .kmore::before{content:"▴"}

/* ================= смуга показників ================= */
.kstrip{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));margin-top:12px}
.kstrip.mini{margin:0;padding:0 14px 13px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px}

/* Плитка. Тло — колір сторінки, а не картки: інакше на білій картці плитка зникає. */
.kfig{background:var(--paper);padding:9px 10px 9px}
.kfig .kfig-lab{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.kfig .kfig-v{display:block;font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.08;margin-top:6px}
.kfig .kfig-v i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0;color:var(--ink-3);margin-left:4px}

/* Пропуск має виглядати навмисно, а не зламано: не порожньо і не «—», а те саме
   слово, яким його названо в даних, у моноширинному, плюс дата перевірки. */
.kfig.is-gap{background:transparent;border-style:dashed}
.kfig.is-gap .kfig-v{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  line-height:1.35;color:var(--ink-3);margin-top:7px}
.kfig.is-stale .kfig-v{color:var(--ink-3)}

/* period / cumulative. Накопичене з 2015 року і зроблене за півріччя не можна
   сплутати — тому «за весь час» намальовано плашкою, а не сірим рядком. */
.kfig .kfig-kind{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:6px;line-height:1.3}
.kfig .kfig-kind.kind-period{color:var(--c-gov)}
.kfig .kfig-kind.kind-point{color:var(--ink-3)}
.kfig .kfig-kind.kind-cumulative{display:inline-block;background:var(--c-pres);color:var(--on-accent);
  padding:2px 6px;margin-top:7px}
.kfig .kfig-kind em{font-style:normal;background:var(--c-law);color:var(--on-accent);padding:1px 5px;margin-left:5px}

.kfig .kfig-meta{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.01em;
  text-transform:none;color:var(--ink-3);line-height:1.35;margin-top:5px;overflow-wrap:anywhere}
.kfig .kfig-meta a{color:var(--c-court)}
.kfig .kfig-shared{display:block;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.03em;
  text-transform:none;color:var(--ink-2);line-height:1.35;margin-top:7px;padding-top:6px;
  border-top:1px dashed var(--line)}
.kfig .kfig-conf{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:2px 5px;margin-top:8px}
.kfig .kfig-note{display:block;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-2);line-height:1.45;margin-top:7px;padding-top:6px;
  border-top:1px dashed var(--line);overflow-wrap:break-word}

/* ================= розгорнута частина ================= */
.kbody{padding:14px;border-top:1px solid var(--line);background:var(--surface-2);display:grid;gap:20px}
/* display:grid перебиває display:none з атрибута hidden — без цього рядка згорнутих
   карток на сторінці не буває взагалі, і всі чотирнадцять розкриті одразу. */
.kbody[hidden]{display:none}
.ksec-h{margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kp{margin:0 0 9px;max-width:78ch;font-size:13.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:break-word}
.kp:last-child{margin-bottom:0}
.kp a{color:var(--c-court)}
.kp-todo{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.kref{margin:8px 0 0}

/* Посилання на статтю закону. Стаття без закону — просто рамка без посилання. */
.kart{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--line);padding:3px 7px;color:var(--ink);
  text-decoration:none;white-space:nowrap}
a.kart:hover{border-color:var(--accent);color:var(--accent)}
a.kart:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.kred{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}

.kguar{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.kguar li{max-width:78ch;padding-left:13px;border-left:2px solid var(--accent);
  font-size:13.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:break-word}

.kall{margin-top:12px;border-top:1px dashed var(--line);padding-top:4px}
.kall summary{padding:7px 0;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);cursor:pointer}
.kall summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.kchecked{margin:0;padding-top:10px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ================= межа юрисдикції всередині картки ================= */
.bnd{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:11px 13px;margin-bottom:10px}
.bnd:last-child{margin-bottom:0}
.bnd-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.bnd-h b{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.bnd-axis{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:2px 6px}
.bnd-rule{margin:0;max-width:78ch;font-size:13.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:break-word}
.bnd-th{margin:8px 0 0;padding-top:7px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.4}
.bnd-law{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}

/* ================= зведена таблиця меж ================= */
.kbounds{margin-top:56px;border-top:3px solid var(--ink);padding-top:34px}
.kbounds[hidden]{display:none}
.btbl-wrap{margin-top:22px;overflow-x:auto}
.btbl{width:100%;border-collapse:collapse;table-layout:fixed}
.btbl th{width:19%;padding:0 12px 8px;text-align:left;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.btbl th:last-child{width:62%}
.btbl td{padding:12px;vertical-align:top;background:var(--card);border-bottom:1px solid var(--line)}
.btbl td b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.btbl td>span{display:block;margin-top:5px}
.btbl td>b+span{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.35}
.btbl td .bnd-axis{display:inline-block;margin-top:0}
.btxt{font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:break-word}
.btxt a{color:var(--c-court)}
.bth{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink)}
.bmore{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-court);text-decoration:none}
.bmore:hover{text-decoration:underline}
.bmore:focus-visible{outline:3px solid var(--c-pres);outline-offset:2px}
.btbl tr.hidden{display:none}

/* Той самий прийом, що й для .chan у karta.css: на вузькому екрані таблиця
   перестає бути таблицею і стає стосом карток. Горизонтального скролу сторінки
   не буває ніколи — ні на 390px, ні на 320px. */
@media (max-width:760px){
  .btbl,.btbl tbody,.btbl tr,.btbl td{display:block;width:auto}
  .btbl thead{display:none}
  .btbl tr{margin-bottom:10px;padding:2px 0;background:var(--card);
    border:1px solid var(--line);border-left:4px solid var(--ink)}
  .btbl td{padding:9px 12px;border-bottom:0}
  .btbl td+td{padding-top:0}
  .btbl td::before{content:attr(data-l);display:block;margin-bottom:4px;
    font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3)}
  .btbl td b{display:inline}
  .btbl td>b+span{display:inline;margin:0}
  .btbl td>b+span::before{content:" · "}
  .btbl td:last-child>span{display:block;margin-top:5px}
  .btbl tr.hidden{display:none}
}

@media (max-width:640px){
  .kcard-head{padding:12px 30px 11px 12px}
  .kstrip.mini{padding:0 12px 12px}
  .kbody{padding:12px}
  .kfig .kfig-v{font-size:19px}
  .bnd{padding:10px 11px}
}
/* Палець, а не миша: розгортка й «всі показники» мають бути завширшки з палець. */
@media (pointer:coarse){
  .kall summary{padding:12px 0}
  .kmore{top:9px;right:8px}
  .kmore::before{font-size:18px}
  .kcard-head{padding-right:38px}
}
@media print{
  .kcard{break-inside:avoid;box-shadow:none}
  .btbl td{break-inside:avoid}
}