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

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

   Специфічність. Картки тут — це <a class="card">, а не <button>, тому власні
   правила пишемо як «.card.htile» / «.card.hres» (0,2,0): інакше правила з
   shared.css для .card і його нащадків перебивають однокласові селектори. */

/* ================= загальний ритм сторінки ================= */
/* Кожен блок головної відділений тією самою лінією, що й групи на карті: сторінка
   має читатись як одна стрічка розділів, а не як набір різних сторінок. */
#home>section{padding:38px 0 6px;border-top:1px solid var(--line)}
#home>section:first-of-type{border-top:0}
#home>section[hidden]{display:none}
#home .sec{margin-bottom:6px}
#home .gnote{margin:8px 0 22px}

/* ================= підказка під пошуком ================= */
.searchhint{margin:7px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3);line-height:1.4}
.searchhint kbd{font-family:var(--mono);font-size:10px;font-weight:600;border:1px solid var(--line);
  background:var(--card);color:var(--ink);padding:1px 5px;margin:0 1px}
/* На вузькому екрані клавіатури немає, а рядок з'їдає половину липкої панелі. */
@media (max-width:640px){ .searchhint{display:none} }

/* ================= плитки розділів ================= */
/* Плитка — посилання, тому знімаємо підкреслення й успадковуємо колір: усе
   інше (рамка, акцент зліва, підйом на hover) уже приходить із .card. */
.card.htile{text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:9px;padding:15px 16px 14px}
.htiles{align-items:start}
.card.htile .htile-n{font-size:15px;color:var(--ink-2);line-height:1.15}
.card.htile .htile-n b{display:block;font-size:38px;font-weight:900;letter-spacing:-.04em;
  line-height:1;color:var(--ink);margin-bottom:3px}
.card.htile .htile-b{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.card.htile .htile-m{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3);line-height:1.4;padding-top:9px;border-top:1px dashed var(--line)}
.card.htile .htile-go{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-top:auto;padding-top:2px}

/* ================= наскрізний ланцюг ================= */
/* Рядок про один орган із трьома посиланнями в три різні розділи. На широкому
   екрані це три колонки, на телефоні — стос: горизонтального скролу не буває. */
.xchain{display:grid;gap:10px}
.xrow{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr) auto;gap:10px 18px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);padding:12px 14px}
.xrow-id b{display:block;font-size:17px;font-weight:900;letter-spacing:-.02em;line-height:1.1;
  overflow-wrap:anywhere}
.xrow-id span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--ink-3);line-height:1.35;margin-top:4px}
.xrow-who b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.xrow-who span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.35;margin-top:3px}
.xrow-go{display:flex;flex-wrap:wrap;gap:6px}
.xrow-go a{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--line);padding:7px 9px;white-space:nowrap}
.xrow-go a:hover{border-color:var(--accent);color:var(--accent)}
.xrow-go a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (max-width:760px){
  .xrow{grid-template-columns:1fr;gap:9px;align-items:start}
  .xrow-go{width:100%}
}

/* ================= факти ================= */
.check.hfact{display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit;
  transition:transform .12s,box-shadow .12s}
.check.hfact:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow)}
.check.hfact:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.check.hfact h3{font-size:15px;line-height:1.25;letter-spacing:-.01em;margin-bottom:8px;
  overflow-wrap:break-word}
.check.hfact p{font-size:13px;line-height:1.5}
.check.hfact .hfact-go{display:block;margin-top:11px;padding-top:9px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}

/* ================= офіційні джерела ================= */
/* Типографіка підвалу: це довідковий список, а не ще один блок карток. */
.hsrc{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.hsrc li{padding-left:13px;border-left:2px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.hsrc a{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--c-court);overflow-wrap:anywhere}
.hsrc span{display:block;margin-top:5px;line-height:1.5}

/* ================= дати знімків у підвалі ================= */
.snapdates{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:5px}
.snapdates li{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3)}
.snapdates b{color:var(--ink);font-weight:600;white-space:nowrap}

/* ================= результати пошуку ================= */
.hres-head{margin-bottom:20px}
.hres-count{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-2);overflow-wrap:anywhere}
.hres-sec{margin-bottom:26px}
.hres-sec:last-child{margin-bottom:6px}
.hres-sech{display:flex;align-items:baseline;gap:10px 14px;flex-wrap:wrap;
  border-bottom:2px solid var(--accent);padding-bottom:6px;margin-bottom:12px}
.hres-secl{font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.hres-secl:hover{color:var(--accent)}
.hres-secl:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hres-secn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}

/* Картка результату. Порядок рядків навмисний: спершу роль (те, що шукали
   очима), потім ім'я або посада, потім стаж чи розмір окладу. */
.card.hres{text-decoration:none;color:inherit;padding:12px 13px 11px}
.card.hres .name{display:block;overflow-wrap:break-word}
.card.hres .since{display:block;margin-top:4px;overflow-wrap:anywhere}

.hres-more{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  padding:8px 12px;cursor:pointer}
.hres-more:hover{background:var(--ink);color:var(--paper)}
.hres-more:focus-visible{outline:3px solid var(--c-pres);outline-offset:2px}

/* ================= вузький екран ================= */
@media (max-width:640px){
  #home>section{padding-top:30px}
  .card.htile{padding:13px 13px 12px}
  .card.htile .htile-n b{font-size:31px}
  .xrow{padding:11px 12px}
}
/* Палець, а не миша: кнопка «показати всі» і три посилання в рядку ланцюга
   мають бути завширшки з палець — інакше в них не влучити. */
@media (pointer:coarse){
  .hres-more{padding:13px 14px}
  .xrow-go a{padding:12px 11px}
}
@media print{
  .card.htile,.check.hfact,.xrow{break-inside:avoid;box-shadow:none}
  .hres-more{display:none}
}