/* ============================================================
   Судова практика ЄДРСР — оформлення.

   Правило: імена класів НЕ міняються. Шаблони їх використовують у
   рядках JavaScript, і перейменування тихо ламає видачу пошуку.

   Кольори задані змінними на :root і перекриваються у темній темі
   нижче. Ніяких кольорів у шаблонах — інакше темна тема ламається.
   ============================================================ */

:root {
  color-scheme: light dark;

  --ink: #2c2c2c;
  --ink-soft: #55585c;
  --ink-faint: #8a8f96;

  --paper: #f5f6f8;          /* полотно */
  --paper-raised: #ffffff;   /* картки */
  --paper-sunk: #eceef1;     /* смуги, підказки */
  --line: #dfe2e7;
  --line-soft: #edeff2;

  --rail: #0a1e35;
  --rail-soft: #14304f;
  --rail-ink: #bfbfbf;

  --accent: #0a1e35;         /* бордо — характер юридичного інструмента */
  --accent-soft: #16375a;
  --accent-wash: #edf1f6;
  --gold: #d4af37;
  /* Золото бренду придатне для ЗАЛИВКИ, але не для тексту:
     #d4af37 на світлому тлі дає контраст ~2:1. Для написів
     поверх золотого washу — окремий, темніший відтінок. */
  --gold-ink: #7a6219;
  /* Текст ПОВЕРХ --accent і --gold. Виніс в токени, бо в
     темній темі акцент стає золотим, і зашите #fff зробило
     б кнопку нечитабельною. */
  /* Заголовки — кольору бренду, а не кольору тексту. На лендінгу
     так само: тіло — charcoal, заголовки — navy. */
  --head: #0a1e35;
  --on-accent: #ffffff;
  --on-gold: #2c2c2c;
  --gold-wash: #fbf4e1;
  --ok: #1f6b45;
  --ok-wash: #e8f5ee;
  --bad: #b02525;
  --bad-wash: #fdeeee;

  --radius: 12px;
  --radius-sm: 8px;
  /* Телефонний лад: більший радіус і «скло» нижньої смуги.
     Скло — це напівпрозорий колір ПЛЮС backdrop-filter; колір мусить
     бути токеном, бо смуга темна в обох темах, але не однаково. */
  --radius-lg: 18px;
  --rail-glass: rgba(10, 30, 53, .82);
  --glass: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .55);
  --shadow-soft: 0 1px 3px rgba(16,20,28,.05), 0 10px 28px rgba(16,20,28,.07);
  --press: rgba(10, 30, 53, .06);
  --shadow: 0 1px 2px rgba(16,20,28,.04), 0 4px 14px rgba(16,20,28,.05);
  --shadow-lg: 0 12px 34px rgba(16,20,28,.16);

  --rail-w: 66px;
  --rail-open: 244px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaed;
    --ink-soft: #b6bac0;
    --ink-faint: #868b93;

    --paper: #0e141c;
    --paper-raised: #141c27;
    --paper-sunk: #1a2430;
    --line: #27323f;
    --line-soft: #202a36;

    --rail: #060d16;
    --rail-soft: #16222f;
    --rail-ink: #aeb4bc;

    --accent: #d4af37;
    --accent-soft: #e3c45f;
    --accent-wash: #241f10;
    --gold: #d4af37;
    /* На темному тлі золото вже достатньо світле для тексту. */
    --gold-ink: #e3c45f;
    /* Акцент тут золотий, тому напис на ньому — темний. */
    /* На темному тлі navy зливається з полотном — беремо світлий. */
    --head: #eef1f5;
    --on-accent: #0a1e35;
    --on-gold: #2c2c2c;
    --gold-wash: #241f10;
    --ok: #67c295;
    --ok-wash: #14251d;
    --bad: #e07b7b;
    --bad-wash: #2b1a1a;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.55);
    --rail-glass: rgba(6, 11, 18, .78);
    --glass: rgba(20, 28, 39, .76);
    --glass-line: rgba(255, 255, 255, .07);
    --shadow-soft: 0 1px 3px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.45);
    --press: rgba(255, 255, 255, .07);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", -apple-system,
               system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* Однакове кільце фокуса скрізь: працювати можна з клавіатури */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- бічна панель, розкривається при наведенні ---------- */

.rail {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--rail);
  color: var(--rail-ink);
  overflow: hidden;
  transition: width .22s cubic-bezier(.32,.72,0,1);
  z-index: 50;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.05);
}
.rail:hover { width: var(--rail-open); box-shadow: var(--shadow-lg); }

.rail-brand {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 0 20px 20px;
  border-bottom: 1px solid var(--rail-soft);
  white-space: nowrap;
}
.rail-brand .mark {
  font-family: Georgia, "PT Serif", serif; font-size: 25px; color: var(--gold);
  width: 26px; text-align: center; flex: none;
}
.rail-brand .word {
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  font-size: 12px; opacity: 0; transition: opacity .16s; color: #fff;
}
.rail:hover .word { opacity: 1; }

/* Перелік розділів ГОРТАЄТЬСЯ, а не обрізається.
   У смуги стоїть overflow:hidden, і коли розділів стало чотирнадцять,
   на ноутбучному екрані останні просто зникали — без смужки прокрутки
   й без жодної ознаки, що там ще щось є. «Профілі й доступ» стояв
   останнім, і його не було видно взагалі. */
.rail nav {
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.rail nav::-webkit-scrollbar { width: 0; height: 0; }
.rail nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0 10px 12px;
  color: var(--rail-ink); text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  position: relative;
  transition: background .14s, color .14s;
}
.rail nav a i {
  font-style: normal; font-size: 17px;
  width: 26px; text-align: center; flex: none;
}
.rail nav a span { opacity: 0; transition: opacity .16s; font-size: 14px; }
.rail:hover nav a span { opacity: 1; }
.rail nav a:hover { background: var(--rail-soft); color: #fff; }
.rail nav a.on { background: var(--rail-soft); color: #fff; }
/* Активний пункт помічений смужкою, а не лише кольором: колір на
   вузькій панелі з самими іконками майже не читається */
.rail nav a.on::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold);
}

/* ---------- основне полотно ---------- */

main {
  margin-left: var(--rail-w);
  padding: 56px 56px 120px;
  max-width: 1140px;
}

/* Шрифт системний, а НЕ з мережі.
   На лендінгу стоїть EB Garamond із CDN — там це доречно, сторінка і
   так живе в інтернеті. Сама програма мусить працювати офлайн після
   завантаження даних, тому підключати Google Fonts сюди не можна:
   без мережі заголовки просто провалилися б у запасний шрифт, а на
   кожному відкритті сторінки висів би запит у нікуди. Georgia є на
   Windows і macOS, PT Serif — у більшості складань Linux. */
h1 {
  font-family: Georgia, "PT Serif", "Times New Roman", serif;
  font-size: 34px; font-weight: 500;
  margin: 0 0 14px; letter-spacing: -.015em;
  line-height: 1.18; color: var(--head);
}
/* Коротка золота риска під назвою сторінки — той самий знак, що тримає
   лендінг докупи. Декоративна, тому прихована від читача екрана. */
h1::after {
  content: ""; display: block; width: 44px; height: 2px;
  margin-top: 14px; background: var(--gold);
}
h2 {
  font-family: Georgia, "PT Serif", "Times New Roman", serif;
  font-size: 22px; font-weight: 500;
  margin: 44px 0 16px; letter-spacing: -.01em; color: var(--head);
}
h3 {
  font-family: Georgia, "PT Serif", "Times New Roman", serif;
  font-weight: 500; color: var(--head);
}
.lede { color: var(--ink-soft); margin: 0 0 14px; max-width: 72ch;
        font-size: 16px; line-height: 1.6; }
.lede + .lede { margin-top: -6px; }
.lede:last-of-type { margin-bottom: 32px; }

/* ---------- банери й порожні стани ---------- */

/* ЗАМІТКА — ТИХА, ПОПЕРЕДЖЕННЯ — ГОЛОСНЕ.
   Спершу все пояснювальне малювалося однаково: жовта рамка, жовте тло,
   товста засічка. Таких блоків у програмі набралося пʼятдесят шість, і
   сторінка перетворювалася на стіну попереджень, яку перестають читати
   цілком — разом із тими трьома, що справді важливі.
   Тепер за замовчуванням це спокійна заміткa на тлі полотна, а жовтий
   лишився класу `.warn` і червоний — `.err`. */
.banner {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 20px;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--line);
  background: var(--paper-sunk);
  font-size: 14.5px; color: var(--ink-soft);
}
.banner.warn {
  border-color: var(--gold); border-left-color: var(--gold);
  background: var(--gold-wash);
}
.banner.err {
  border-color: var(--bad); border-left-color: var(--bad);
  background: var(--bad-wash);
}

.empty {
  padding: 34px 30px; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-soft); box-shadow: var(--shadow);
}
.empty p { margin: 0 0 12px; }
.empty p:last-child { margin-bottom: 0; }

/* ---------- картки й сітки ---------- */

/* Ряд дій над показниками. Без цього кнопки стоять упритул до
   карток і виглядають як одне ціле з ними. */
.row + .cards { margin-top: 26px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; }
.card {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius); padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s;
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.card .n {
  font-family: Georgia, "PT Serif", serif; font-size: 31px; font-weight: 500;
  color: var(--head);
  line-height: 1.1; display: block; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.card .k {
  color: var(--ink-faint); font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; margin-top: 4px; display: block;
}
.card.warn { border-color: var(--gold); background: var(--gold-wash); }

/* ---------- форми ---------- */

label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
/* Типи полів перелічені ПОІМЕННО, і цього достатньо лише доти, доки
   не зʼявиться новий тип. Саме так сталося з паролем: на сторінці
   реєстрації він лишався вузьким і не схожим на сусідні поля, бо
   `password` у переліку не було. Додано разом з `email` і `tel`. */
input[type=text], input[type=search], input[type=number],
input[type=password], input[type=email], input[type=tel],
select, textarea {
  font: inherit; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-raised); color: var(--ink); width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
input::placeholder { color: var(--ink-faint); }
input[type=text]:hover, input[type=search]:hover,
input[type=password]:hover, input[type=email]:hover,
select:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 1 1 170px; }
.row > div.narrow { flex: 0 0 158px; }

.btn {
  font: inherit; font-weight: 550;
  /* Кнопка буває і <button>, і <a>. У посилання підкреслення стоїть
     глобально, і на кнопці воно виглядає як помилка верстки. */
  text-decoration: none;
  padding: 11px 20px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background .14s, transform .1s, box-shadow .14s;
  box-shadow: var(--shadow);
}
.btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--accent-wash); }
.btn.small { padding: 6px 13px; font-size: 13px; }
.btn.plain {
  background: var(--paper-raised); color: var(--ink); border-color: var(--line);
}
.btn.plain:hover:not(:disabled) { background: var(--paper-sunk); border-color: var(--ink-faint); }

.checks { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.checks label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; color: var(--ink); cursor: pointer;
}
.checks input { width: auto; accent-color: var(--accent); }

/* ---------- результати пошуку ---------- */

.hit {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: border-color .14s, box-shadow .14s;
  position: relative; overflow: hidden;
}
.hit:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-lg); }
/* Позначка збоку смужкою: рамка іншого кольору на світлій темі майже
   не видно, а юристові треба помітити «проти клієнта» одразу */
.hit.against::before, .hit.proc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.hit.against::before { background: var(--bad); }
.hit.against { background: var(--bad-wash); }
.hit.proc::before { background: var(--gold); }

.hit-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 7px; }
.hit-head a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 15.5px; }
.hit-head a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.hit-meta { color: var(--ink-faint); font-size: 13px; margin-bottom: 9px; }
.hit-snip { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
/* Цитата приходить окремим запитом — поки її немає, місце під неї вже
   зайняте, щоб картки не стрибали */
.hit-snip .snip-wait { color: var(--ink-faint); font-style: italic; }
.hit-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Вибір підбірки просто в картці: куди саме зберігається рішення —
   видно на місці, а не десь угорі сторінки */
.savepick {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  flex: 1 1 100%; margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.savepick select.pick-coll { width: auto; min-width: 180px; padding: 7px 10px; font-size: 13.5px; }
.savepick input.pick-note { width: auto; flex: 1 1 240px; padding: 7px 10px; font-size: 13.5px; }

/* Смуга з глибиною пошуку: за який період переглянуто практику */
.depth {
  margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--paper-sunk); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-soft);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

.t {
  display: inline-block; font-size: 11px; padding: 3px 9px;
  border-radius: 999px; background: var(--paper-sunk); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  font-weight: 600; border: 1px solid transparent;
}
.t.bad { background: var(--bad-wash); color: var(--bad); border-color: var(--bad); }
.t.warn { background: var(--gold-wash); color: var(--gold-ink); border-color: var(--gold); }
.t.ok { background: var(--ok-wash); color: var(--ok); border-color: var(--ok); }
.t.miss { background: var(--paper-sunk); color: var(--ink-faint); }

mark { background: var(--gold-wash); color: inherit; padding: 0 3px; border-radius: 3px;
       box-shadow: inset 0 -2px 0 var(--gold); }
mark.current { background: var(--gold); color: var(--on-gold); box-shadow: none; }

/* ---------- пагінація ---------- */

.pager {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  margin: 28px 0 10px; color: var(--ink-soft); font-size: 14px;
}
.pager button {
  font: inherit; padding: 7px 16px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-raised);
  color: var(--ink); border-radius: var(--radius-sm);
  transition: background .14s, border-color .14s;
}
.pager button:hover:not(:disabled) { background: var(--paper-sunk); border-color: var(--ink-faint); }
.pager button:disabled { opacity: .35; cursor: default; }
.loading { opacity: .4; transition: opacity .15s; }

/* ---------- таблиці ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th {
  color: var(--ink-faint); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom-color: var(--ink-faint);
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--paper-sunk); }
tr.loaded td { color: var(--ink-faint); }

/* ---------- текст рішення ---------- */

.doctext {
  font-family: "PT Serif", Georgia, serif;
  font-size: 17px; line-height: 1.72;
  max-width: 68ch; white-space: pre-wrap;
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 36px 40px; margin-top: 20px;
  box-shadow: var(--shadow);
}
.hitbar {
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; color: var(--ink-soft); margin-top: 16px;
}
.hitbar button {
  font: inherit; padding: 5px 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-raised);
  color: var(--ink); border-radius: var(--radius-sm);
}
.hitbar button:hover { background: var(--paper-sunk); }
.docmeta {
  display: flex; gap: 24px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: 14px; margin: 12px 0 4px;
}
.docmeta b { color: var(--ink); font-weight: 600; }

/* ---------- індикатор фонового завдання ---------- */

.taskbar {
  position: fixed; right: 28px; bottom: 26px;
  display: flex; align-items: center; gap: 14px;
  background: var(--rail); color: #f2f4f7;
  padding: 15px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 340px; max-width: 460px; z-index: 60;
  border: 1px solid rgba(255,255,255,.07);
}
.taskbar.hidden { display: none; }
.tb-body { flex: 1; min-width: 0; }
.tb-title { font-size: 13px; margin-bottom: 8px; line-height: 1.45; }
.tb-bar { height: 5px; background: var(--rail-soft); border-radius: 999px; overflow: hidden; }
.tb-bar i { display: block; height: 100%; width: 0; background: var(--gold);
            border-radius: 999px; transition: width .3s; }
.tb-bar i.indeterminate { animation: slide 1.3s ease-in-out infinite; width: 38% !important; }
@keyframes slide { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }
/* Рядок про сон у смужці завдання. Колір задано явно: смужка темна, а
   клас .muted розрахований на світлий фон і тут був би нечитабельним. */
.tb-awake { margin-top: 8px; font-size: 12px; line-height: 1.4;
            color: rgba(242,244,247,.72); }

/* ---------- дрібниці ---------- */

.muted { color: var(--ink-faint); font-size: 13.5px; }
.stack > * + * { margin-top: 16px; }
.sep { height: 1px; background: var(--line); margin: 30px 0; border: 0; }
code {
  font-family: "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-size: 13px;
  background: var(--paper-sunk); padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--line-soft);
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}

/* ============================================================
   Адаптив: на телефоні бічна панель стає нижньою навігацією.
   Розкриття по наведенню на тачі не працює, тому там показуємо
   іконки внизу екрана, а полотно займає всю ширину.
   ============================================================ */

@media (max-width: 760px) {
  .rail {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100% !important; height: 60px;
    flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    box-shadow: 0 -4px 20px rgba(0,0,0,.22);
    border-right: none; border-top: 1px solid rgba(255,255,255,.06);
    -webkit-overflow-scrolling: touch;
  }
  .rail:hover { width: 100% !important; box-shadow: 0 -4px 20px rgba(0,0,0,.22); }
  .rail-brand { display: none; }
  .rail nav {
    display: flex; flex-direction: row; padding: 0; width: 100%;
    justify-content: space-around; align-items: stretch; gap: 0;
  }
  .rail nav a {
    flex-direction: column; gap: 3px;
    padding: 8px 10px; border-radius: 0;
    justify-content: center; min-width: 64px;
  }
  .rail nav a.on::before {
    left: 12px; right: 12px; top: 0; bottom: auto;
    width: auto; height: 3px; border-radius: 0 0 3px 3px;
  }
  .rail nav a i { font-size: 19px; width: auto; }
  .rail nav a span {
    opacity: 1 !important; font-size: 10px;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 68px;
  }

  main {
    margin-left: 0; padding: 22px 16px 84px;
    max-width: 100%;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 18px; }

  /* форми в один стовпчик */
  .row > div { flex: 1 1 100% !important; }
  .row > div.narrow { flex: 1 1 100% !important; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px 18px; }
  .card .n { font-size: 25px; }

  /* індикатор завдання на всю ширину над навігацією */
  .taskbar {
    right: 10px; left: 10px; bottom: 70px;
    min-width: 0;
  }

  /* таблиці горизонтально прокручуються, а не ламають верстку */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 460px; }

  .doctext { padding: 20px 18px; font-size: 16px; max-width: 100%; }
  .hit-actions { flex-wrap: wrap; }
  .pager { flex-wrap: wrap; }
}

/* Дуже вузькі екрани — картки в один стовпчик */
@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
}

/* Хто вимкнув анімації в системі — тому їх не показуємо */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition: none; transform: none; }
  .btn.liquid::after { animation: none; }
  .sheet { transition: none; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Друк рішення (кнопка «Друк / PDF» на сторінці документа).
   На телефоні та сама кнопка відкриває системний діалог друку —
   звідти ж зберігається PDF.

   Головне тут: аркуш має бути самодостатнім. Юрист несе його в суд,
   тому на ньому мусять бути номер справи, суд, дата й посилання на
   реєстр — інакше роздруківку неможливо перевірити, а вся програма
   саме про перевірність.
   ============================================================ */

.print-only { display: none; }

@page { margin: 18mm 16mm; }

@media print {
  /* Кольори задаємо явно: у темній темі змінні дали б білий текст на
     чорному, тобто залитий тонером аркуш */
  html, body {
    background: #fff !important; color: #000 !important;
    font-size: 11.5pt;
  }

  /* Усе службове з паперу прибираємо. Разом із контейнерами: сховати
     лише кнопки й поля мало — порожній .row лишає смугу відступу */
  .rail, .taskbar, .banner, .hitbar, .hit-actions, .pager, .depth,
  .btn, button, select, input, label, .sep, .lede, .row, .checks,
  .stack > .row, .savepick {
    display: none !important;
  }

  main { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }

  /* Заголовок і метадані замінює блок print-head — він компактніший
     і містить посилання на джерело */
  h1, .docmeta { display: none !important; }

  .print-only { display: block; }
  .print-head {
    border-bottom: 1pt solid #000;
    padding-bottom: 6pt; margin-bottom: 12pt;
    font-size: 10pt; line-height: 1.45;
  }
  .print-head .ph-title { font-size: 13pt; font-weight: 700; margin-bottom: 4pt; }
  .print-head .ph-url { word-break: break-all; color: #000; }

  .doctext {
    border: 0 !important; box-shadow: none !important;
    background: transparent !important; color: #000 !important;
    padding: 0 !important; margin: 0 !important;
    max-width: 100% !important;
    font-family: "PT Serif", Georgia, serif;
    font-size: 11.5pt; line-height: 1.5;
    white-space: pre-wrap;
    orphans: 3; widows: 3;
  }

  /* Підсвітка збігів: фон принтер може не надрукувати, тому підкреслення */
  mark, mark.current {
    background: transparent !important; color: #000 !important;
    text-decoration: underline; font-weight: 600;
  }

  a { color: #000 !important; text-decoration: none; }
}

/* ---------- журнал ---------- */

.logbox {
  font-family: "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.6;
  background: #0d1016; color: #c3cad6;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px;
  max-height: 400px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
.logbox .logerr { color: #f0a0a0; }

/* Ланцюжок руху справи по інстанціях */
.chain-arrow {
  text-align: center; color: var(--ink-faint);
  font-size: 20px; line-height: 1; margin: -4px 0 6px;
}

/* Правова позиція у видачі: те, ЩО вирішив суд. Показується над
   фрагментом із підсвіткою — фрагмент лише пояснює, чому рішення
   знайшлося. */
.hit-pos:empty { display: none; }
.hit-pos {
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
  background: var(--paper-sunk); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 10px;
}
.hit-pos .pos-label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 3px;
}

/* Профіль судді: горизонтальні смуги розподілу */
.bar-row {
  display: flex; align-items: center; gap: 12px; font-size: 14px;
}
.bar-name { flex: 0 0 190px; color: var(--ink-soft); }
.bar-track {
  flex: 1 1 auto; height: 10px; border-radius: 999px;
  background: var(--paper-sunk); overflow: hidden;
}
.bar-track i { display: block; height: 100%; background: var(--accent); }
.bar-num {
  flex: 0 0 60px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (max-width: 760px) {
  .bar-name { flex: 0 0 120px; font-size: 13px; }
}

/* Конструктор документа. Блок — картка з заголовком виду і текстовим
   полем; кнопки переміщення тримаються праворуч у шапці блоку, щоб не
   плутатися з текстом. */
.bblock { padding: 12px 14px; margin-bottom: 10px; }
.bhead { display: flex; align-items: center; justify-content: space-between;
         margin-bottom: 8px; font-size: 13px; }
.bbtns button { margin-left: 4px; }
.bblock textarea { width: 100%; box-sizing: border-box; resize: vertical;
                   font-family: inherit; font-size: 15px; line-height: 1.5; }
.citem { border-top: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.citem:first-child { border-top: 0; }
.citem button { margin-top: 4px; }

/* Хто ввійшов — унизу бічної смуги. Кольори тільки через змінні:
   інлайновий колір ламає темну тему. */
.rail-user {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.rail-user .ru-name {
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-word;
}
.rail-user a { color: var(--rail-ink); }
.rail-user a:hover { color: var(--accent); }

/* ==========================================================================
   Телефон: окремий лад, а не стиснутий настільний
   ==========================================================================

   Що було не так (перевірено на 375 px):
   — чотирнадцять розділів у смузі 60 px доводилося гортати вбок, підписи
     обрізалися до «Перевірка рі…»;
   — картки показників ставали в один стовпчик і з'їдали весь екран до
     того, як почнеться зміст;
   — у «Збереженому» кнопки дій виїжджали за правий край: їх просто не
     було видно;
   — кнопка «Шукати» опинялася ПОСЕРЕД форми, бо фільтри ставали в
     стовпчик під нею.
   ========================================================================== */

/* Кнопка «Ще» і шторка існують лише на телефоні */
.more-btn { display: none; }
.filters-toggle { display: none; }
.coll-toggle { display: none; }
.sheet, .sheet-back { display: none; }

@media (max-width: 760px) {

  /* --- нижня смуга: п'ять великих цілей замість стрічки з чотирнадцяти --- */
  .rail { height: auto; overflow: visible; }
  .rail nav {
    overflow: visible;
    display: flex; flex-direction: row;
    padding: 0; flex: 1 1 auto;
  }
  /* Лишаються щоденні розділи; решта — у шторці за кнопкою «Ще» */
  .rail nav a { display: none !important; }
  .rail nav a[data-prim] { display: flex !important; flex: 1 1 0; }
  /* Підпис переноситься на два рядки, а не зникає за краєм:
     «Перевірка рішення» не вміщається в один рядок на 375 px, а
     обрізаний підпис не підказує нічого. */
  .rail nav a[data-prim] span {
    font-size: 10px; line-height: 1.15;
    white-space: normal; text-align: center;
    max-width: none; overflow: hidden;
  }
  .rail nav a[data-prim] { min-width: 0; padding: 7px 3px; }

  /* «Ще» — СУСІД переліку, а не його пункт. При flex:1 1 auto
     перелік забирав усі 375 px, і кнопці лишалося 8 px — підпис
     виходив за край екрана. Чотири розділи та кнопка ділять ширину
     як п’ять рівних часток. */
  .rail nav { flex: 4 1 0 !important; min-width: 0; }
  .more-btn { flex: 1 1 0; min-width: 0; }
  .rail-user { display: none; }

  .more-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    flex: 1 1 0; min-width: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--rail-ink);
    font: inherit; font-size: 11px;
    padding: 8px 4px;
  }
  .more-btn i { font-style: normal; font-size: 19px; line-height: 1; }

  /* Ціль дотику не менша за 48 px — інакше в неї не влучити пальцем */
  .rail nav a[data-prim], .more-btn { min-height: 56px; }

  /* --- шторка з рештою розділів --- */
  .sheet-back {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 60;
  }
  .sheet {
    display: block; position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--paper-raised); color: var(--ink);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.35);
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    z-index: 61;
    max-height: 78vh; overflow-y: auto;
  }
  body.sheet-on .sheet { transform: translateY(0); }
  body.sheet-on .sheet-back { opacity: 1; pointer-events: auto; }
  body.sheet-on { overflow: hidden; }

  .sheet-grip {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 2px auto 12px;
  }
  .sheet-title {
    font-weight: 600; margin: 0 4px 10px; color: var(--ink-soft);
    font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  }
  .sheet-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sheet-links a {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 12px; min-height: 52px;
    border-radius: var(--radius-sm);
    background: var(--paper-sunk); color: var(--ink);
    text-decoration: none; font-size: 14px;
  }
  .sheet-links a i { font-style: normal; font-size: 17px; opacity: .75; }
  .sheet-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--line); font-size: 14px;
  }

  /* --- показники в два стовпчики: числа короткі, місця вистачає --- */
  .cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .card { padding: 14px 15px; }
  .card .n { font-size: 22px; }
  .card .k { font-size: 11px; }

  /* Смуга збереження з’являється лише разом із видачею: зберігати
     ще нічого, а на телефоні вона займає весь перший екран. */
  #collbar { display: none; }
  /* Смуга дій розгортається кнопкою. Причина та сама, що у фільтрів:
     на 375 px розгорнута смуга (підбірка, «нова», скільки зберегти,
     три кнопки) займає майже екран, і перше знайдене рішення
     починається нижче згину. Зберігають видачу ПІСЛЯ перегляду. */
  body.has-results .coll-toggle { display: inline-block; margin: 0 0 12px; }
  body.has-results.coll-on #collbar { display: flex; }

  /* Заголовок і пояснення компактніші — інакше поле запиту
     починається нижче згину екрана. */
  h1 { font-size: 24px; margin-bottom: 6px; }
  main > p, .lead { font-size: 14px; }

  /* --- кнопки дій ПЕРЕНОСЯТЬСЯ, а не виїжджають за край ---
     І сам рядок стає стовпчиком: поруч із кнопками назва підбірки
     стискалася до двох літер на рядок. */
  .list-plain li { flex-direction: column; align-items: stretch; gap: 10px; }
  .coll-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .coll-actions .btn { flex: 1 1 auto; }

  /* --- спершу запит і кнопка, фільтри — під розкривачкою ---
     Порядку `order` тут не достатньо: фільтри лежать у СУСІДНЬОМУ
     рядку, тому кнопка все одно опинялась посеред форми — це
     перевірено на 375 px. На телефоні фільтри сховані зовсім: на
     першому екрані лише запит і «Шукати». */
  .row { align-items: stretch; }
  .row > div.go { order: 99; }
  .row > div.go .btn { width: 100%; }
  .filt, .row.filters { display: none; }
  body.filters-on .filt { display: block; }
  body.filters-on .row.filters { display: flex; }
  .filters-toggle { display: inline-block; margin: 0 0 14px; }

  /* Порожній підпис над кнопкою — розпірка для настільного вигляду,
     щоб кнопка стала врівень із полями. На телефоні поля стають у
     стовпчик, і кожна така розпірка дає порожній рядок: у конструкторі
     вісім кнопок розтягувалися на півтора екрана. */
  label.sp { display: none; }
  /* !important тут не примха: вище (рядок із .row > div) уже стоїть
     flex: 1 1 100% !important, і без цього кнопки лишаються на
     всю ширину, по одній на рядок. */
  .row > div:has(> label.sp) { flex: 0 1 auto !important; }

  /* Поле не менше 16 px — інакше Safari сам наближає сторінку при
     дотику й верстка їде */
  input, select, textarea { font-size: 16px !important; }

  main { padding: 18px 16px calc(88px + env(safe-area-inset-bottom)); }
  .taskbar { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Дуже вузькі екрани: показники все одно в два стовпчики */
@media (max-width: 420px) {
  .cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   Рідкі кнопки
   ==========================================================================
   Натиск дає м'яке «продавлювання» з пружною віддачею, а від місця
   дотику розходиться хвиля. Координати ставить JS у --x/--y, тому хвиля
   йде саме з-під пальця, а не з центра.

   Ефект НЕ вмикається, якщо в системі вимкнено анімації — правило нижче
   в блоці prefers-reduced-motion. І він не чіпає колір: усе через
   напівпрозорий білий, тому темна тема лишається цілою.
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              box-shadow .18s ease, background-color .15s ease;
}
.btn::after {
  content: "";
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0); opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.btn.plain::after, .btn.ghost::after { background: rgba(127,127,127,.3); }
.btn:active { transform: scale(.96); }
.btn.liquid::after { animation: liquid .5s ease-out; }

@keyframes liquid {
  0%   { transform: scale(0);  opacity: .65; }
  70%  { opacity: .25; }
  100% { transform: scale(26); opacity: 0; }
}


/* ==========================================================================
   Телефон: лад 2026
   ==========================================================================

   Попередній телефонний лад (23.10.2026) вирішив головне — щоб нічого
   не обрізалося й не виїжджало за край. Цей розділ про інше: щоб
   програма на телефоні виглядала як програма, а не як настільна
   сторінка, яку стиснули.

   Чотири речі, які це дають, і кожна з причиною:

   1. БЕЗПЕЧНІ ЗОНИ. На iPhone унизу екрана живе смужка жесту «додому».
      Нижня смуга стояла впритул до краю, тобто підписи розділів лежали
      ПІД цією смужкою. Лікується `env(safe-area-inset-*)`, але сам
      `env()` дає нулі, поки в <meta viewport> немає `viewport-fit=cover`
      — тому правка не лише тут, а й у base.html.

   2. СКЛО замість глухої плити. Смуга напівпрозора з розмиттям, тому
      під час гортання видно, що зміст триває далі. Колір через токен
      (`--rail-glass`), бо смуга темна в обох темах, але не однаково.
      Для тих, хто вимкнув прозорість у системі
      (`prefers-reduced-transparency`), лишається суцільний колір —
      це не прикраса, а вимога доступності.

   3. ЦІЛІ ДОТИКУ. Кнопки й поля не нижчі за 48 px, активний розділ
      позначений заповненою «пігулкою» під піктограмою, а не смужкою
      у 3 px: смужку на телефоні видно гірше за все.

   4. ПЕРЕХОДИ МІЖ СТОРІНКАМИ. Програма багатосторінкова, і кожне
      натискання давало білий спалах перезавантаження. `@view-transition`
      прибирає його без жодного рядка JavaScript. Де браузер цього не
      вміє — просто лишається як було.

   Імена класів не змінені: шаблони збирають розмітку рядками в
   JavaScript, і перейменування тихо ламає видачу пошуку.
   ========================================================================== */

/* Дотик не має давати сірий прямокутник підсвітки і не має чекати
   300 мс на можливе подвійне натискання. */
* { -webkit-tap-highlight-color: transparent; }
a, button, select, input[type=checkbox], label { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }

/* Перехід між сторінками. Багатосторінковій програмі це прибирає
   білий спалах перезавантаження; браузер, який не вміє, нічого не
   втрачає. Нижче, у блоці prefers-reduced-motion, перехід вимикається
   для тих, хто попросив менше руху. */
@view-transition { navigation: auto; }

@media (max-width: 760px) {

  /* --- нижня смуга: скло, безпечна зона, пігулка активного розділу --- */
  .rail {
    background: var(--rail-glass);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -1px 24px rgba(0, 0, 0, .28);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .rail {
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
  }
  .rail nav a[data-prim], .more-btn {
    min-height: 54px; padding: 8px 4px 7px;
    border-radius: 14px;
    transition: background-color .18s ease, color .18s ease,
                transform .14s cubic-bezier(.34,1.56,.64,1);
  }
  .rail nav a[data-prim] i, .more-btn i {
    font-size: 20px; line-height: 1;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  /* На телефоні піктограма — головний орієнтир (підпис у 10,5 px
     читається гірше), тому вона трохи більша за настільну. */
  .rail nav a[data-prim] .ic, .more-btn .ic { width: 22px; height: 22px; }
  /* У шторці піктограма сидить у власному кружечку 30x30. */
  .sheet-links a .ic { width: 17px; height: 17px; }
  /* Підпис 10,5 px мусить мати повну яскравість: приглушений дрібний
     напис на темній смузі читається гірше за все на екрані. */
  .rail nav a[data-prim] span, .more-btn span {
    font-size: 10.5px; letter-spacing: .005em; opacity: .95;
  }
  .rail nav a[data-prim], .more-btn { color: #d7dbe0; }
  .rail nav a[data-prim]:active, .more-btn:active { transform: scale(.93); }

  /* Активний розділ — заповнена пігулка під піктограмою. Смужку в
     3 px на телефоні видно гірше за все інше, а колір на темній
     смузі майже не читається. */
  .rail nav a[data-prim].on::before {
    content: ""; position: absolute;
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(100%, 64px); height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 14px;
    background: rgba(212, 175, 55, .16);
    border: 0; z-index: -1;
  }
  .rail nav a[data-prim].on { color: #fff; background: none; isolation: isolate; }
  .rail nav a[data-prim].on i { color: var(--gold); transform: translateY(-1px); }
  .rail nav a[data-prim].on span { opacity: 1; font-weight: 600; }

  /* --- друкарня: розмір тече разом із шириною екрана --- */
  body { font-size: 16px; line-height: 1.6; }
  h1 {
    font-size: clamp(25px, 7.2vw, 33px);
    letter-spacing: -.02em; line-height: 1.14;
    margin-bottom: 4px;
  }
  h1::after { width: 38px; margin-top: 11px; }
  h2 { font-size: clamp(18px, 5vw, 22px); margin: 34px 0 13px; }
  .lede { font-size: 15.5px; }

  /* --- поверхні: мʼякші, без жорстких рамок --- */
  .card, .hit, .empty, .doctext, .bblock {
    border-radius: var(--radius-lg);
    border-color: var(--line-soft);
    box-shadow: var(--shadow-soft);
  }
  .card { border-top: 2px solid var(--gold); padding: 15px 16px; }
  .hit { padding: 16px 17px; margin-bottom: 11px; }
  .banner { border-radius: 14px; padding: 13px 15px; }

  /* Натиск по картці відгукується — на телефоні немає наведення, і
     без цього незрозуміло, чи влучив палець. */
  .hit:active, .card:active, .sheet-links a:active, .list-plain li:active {
    transform: scale(.988);
  }
  .hit, .card, .sheet-links a {
    transition: transform .14s cubic-bezier(.34,1.56,.64,1),
                box-shadow .18s ease, border-color .18s ease;
  }

  /* --- поля й кнопки: цілі не менші за 48 px --- */
  input[type=text], input[type=search], input[type=number],
  input[type=password], input[type=email], input[type=tel],
  select, textarea {
    min-height: 48px; padding: 13px 15px;
    border-radius: 13px;
    background: var(--paper-raised);
  }
  input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px var(--accent-wash);
  }
  .btn {
    min-height: 48px; padding: 12px 20px;
    border-radius: 13px; font-weight: 600;
  }
  .btn.small { min-height: 40px; padding: 8px 14px; border-radius: 11px; }

  /* Поле вибору файлу браузер малює сам, і на телефоні воно виходить
     24 px заввишки — утричі менше за палець. А саме з телефона його й
     натискають: «Перевірка документа», «Матеріали справи» і
     відновлення копії починаються саме тут. Пунктирна рамка — єдине
     місце, де вона щось означає: сюди кладуть файл. */
  input[type=file] {
    width: 100%; min-height: 48px; padding: 11px 13px;
    font: inherit; font-size: 15px;
    border: 1px dashed var(--line); border-radius: 13px;
    background: var(--paper-raised); color: var(--ink-soft);
  }
  input[type=file]::file-selector-button {
    font: inherit; font-weight: 600; margin-right: 12px;
    min-height: 34px; padding: 6px 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper-sunk); color: var(--ink); cursor: pointer;
  }
  /* Головна кногка форми — на всю ширину: на телефоні її шукають
     великим пальцем, а не очима. */
  .row > div.go .btn { border-radius: 14px; font-size: 16px; }
  .checks label { min-height: 40px; }
  .checks input { width: 20px; height: 20px; }

  /* --- шторка розділів --- */
  .sheet {
    border-radius: 24px 24px 0 0;
    background: var(--glass);
    border-top: 1px solid var(--glass-line);
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    max-height: min(80dvh, 680px);
    overscroll-behavior: contain;
    box-shadow: 0 -12px 50px rgba(0, 0, 0, .4);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .sheet {
      -webkit-backdrop-filter: saturate(180%) blur(26px);
      backdrop-filter: saturate(180%) blur(26px);
    }
    .sheet-back { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  }
  .sheet-grip {
    width: 44px; height: 5px; border-radius: 3px;
    background: var(--ink-faint); opacity: .45; margin: 6px auto 14px;
  }
  .sheet-links a {
    border-radius: 14px; padding: 13px 12px; min-height: 56px;
    background: var(--paper-raised);
    border: 1px solid var(--line-soft);
  }
  /* Піктограма у власному кружечку — так перелік читається як перелік
     розділів, а не як стовпчик посилань. */
  .sheet-links a i {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--accent-wash);
    color: var(--accent); font-size: 15px; opacity: 1;
  }

  /* --- полотно --- */
  main {
    padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .taskbar {
    bottom: calc(84px + env(safe-area-inset-bottom));
    border-radius: 16px;
  }

  /* Комірка ряду, у якій ТІЛЬКИ КНОПКИ, не має займати всю ширину.
     Вище стоїть `.row > div { flex: 1 1 100% }` — правильне для полів,
     бо поле на півекрана не заповниш. Але через нього «Видачу в
     підбірку», «Експорт JSON» і «Аналітика» ставали трьома окремими
     рядками на весь екран. Тепер вони стають у ряд і переносяться.

     `.go` виключено навмисно: головна кнопка форми («Шукати») лишається
     на всю ширину — її шукають великим пальцем, а не очима. */
  .row > div:has(> .btn):not(.go):not(:has(input, select, textarea)) {
    flex: 0 1 auto !important;
  }
}

/* Хто вимкнув прозорість у системі — тому суцільний колір. Це не
   прикраса, а вимога доступності: з розмиттям текст поверх нього
   читається гірше. */
@media (prefers-reduced-transparency: reduce) {
  .rail, .sheet {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .rail { background: var(--rail); }
  .sheet { background: var(--paper-raised); }
}

/* Менше руху — менше руху. Перехід між сторінками теж вимикається:
   він дає рух на весь екран, а саме про це й просять. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hit:active, .card:active, .sheet-links a:active,
  .rail nav a[data-prim]:active, .more-btn:active { transform: none; }
}



/* ==========================================================================
   Піктограми розділів
   ==========================================================================

   Були знаками Unicode, і це давало смугу, де половина пунктів
   кольорові. Причина не в доборі знаків: `U+270D`, `U+2696`, `U+231A`
   і `U+2691` мають ЕМОДЗІ-накреслення за замовчуванням, тому Windows
   малює їх кольоровими картинками, а сусідні `U+25C8` чи `U+2713` —
   звичайним шрифтовим гліфом. Набір «кольорових» залежить від шрифтів
   машини, тобто в юриста й на сервері він різний.

   Тепер це лінії в SVG: одна товщина, одна сітка, колір береться з
   тексту (`currentColor`), тому активний пункт, світла й темна тема
   працюють самі собою, без жодного окремого правила.
   ========================================================================== */

.ic {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Крапки й кружечки, які мусять бути залитими, а не обведеними. */
.ic .solid { fill: currentColor; stroke: none; }

/* Коробка під піктограму центрує її. Раніше тут вистачало
   text-align, бо всередині стояв текстовий знак. */
.rail nav a i, .more-btn i, .sheet-links a i {
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   Комп'ютер: лад 2026
   ==========================================================================

   Телефонний лад (23.10 і 11.11.2026) настільного вигляду НЕ чіпав —
   і це було навмисно, бо проблеми телефону (підписи під смужкою жесту,
   цілі дрібніші за палець, спалах перезавантаження) на широкому екрані
   не існують. Але власник подивився на програму в браузері й сказав,
   що вона виглядає як 2015 рік. Цей розділ — відповідь на це.

   Що саме міняється і ЧОМУ:

   1. СМУГА ЗАКРІПЛЕНА ВІДКРИТОЮ на широких екранах. Досі назви розділів
      було видно лише при наведенні: щоб прочитати, куди йдеш, треба
      навести мишу й зачекати 0,22 с. Юрист робить це десятки разів на
      день. На екранах від 1280 px місця вистачає, тому смуга стоїть
      розкрита завжди, а наведення нічого не вирішує. На вужчих
      ноутбуках поведінка лишається колишньою — там 244 px справді
      шкода.

   2. СКЛО й ПІГУЛКА — та сама мова, що на телефоні. Програма мусить
      виглядати однією програмою на обох пристроях, а не двома різними.
      Активний розділ позначений заливкою, а не лише тонкою смужкою:
      смужку в 3 px видно гірше за все.

   3. ДРУКАРНЯ ТЕЧЕ разом із шириною (clamp). Жорсткі 34 px заголовка
      однакові і на 1280, і на 2560 px — на великому моніторі це
      виглядає дрібно, а поруч із ним текст у 15 px читається гірше за
      паперовий документ. Тіло піднято до 16 px з більшим міжрядковим:
      програма, у якій читають РІШЕННЯ СУДУ, мусить бути зручною для
      читання, а не щільною.

   4. МІРА РЯДКА в тексті рішення. Повний текст на 1180 px дає рядок
      під 200 знаків — око губить початок наступного рядка. Обмеження
      ставиться в `ch`, тобто рахується від самого шрифту.

   5. ПОВЕРХНІ: мʼяка тінь замість жорсткої рамки, більший радіус.
      Рамка в 1 px — це прийом, від якого інтерфейси відійшли саме
      тому, що межа, намальована тінню, читається як глибина, а не як
      лінія на кресленні.

   Імена класів НЕ змінені: шаблони збирають розмітку рядками в
   JavaScript, і перейменування тихо ламає видачу пошуку, не давши
   жодної помилки. Кольори — лише токенами: зашитий колір ламає темну
   тему. Обидва правила вже коштували цьому проєкту окремої відладки.
   ========================================================================== */

@media (min-width: 761px) {

  /* --- полотно й друкарня --- */
  body { font-size: 16px; line-height: 1.62; }

  main {
    padding: 60px 60px 140px;
    max-width: 1180px;
  }

  h1 {
    font-size: clamp(34px, 2.5vw, 42px);
    letter-spacing: -.022em; line-height: 1.1;
  }
  /* Риска з переходом у прозоре: та сама золота засічка бренду, але не
     схожа на підкреслення в текстовому редакторі. */
  h1::after {
    width: 58px; height: 3px; border-radius: 2px; margin-top: 16px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }
  h2 { font-size: clamp(22px, 1.6vw, 26px); margin: 50px 0 18px; }
  .lede { font-size: 17px; line-height: 1.6; }

  /* --- бічна смуга: скло --- */
  .rail {
    background: var(--rail-glass);
    border-right: 1px solid var(--glass-line);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .rail {
      -webkit-backdrop-filter: saturate(170%) blur(18px);
      backdrop-filter: saturate(170%) blur(18px);
    }
  }
  .rail nav { padding: 14px 10px; gap: 3px; }
  .rail nav a {
    padding: 11px 0 11px 12px;
    border-radius: 12px;
    transition: background-color .16s ease, color .16s ease;
  }
  .rail nav a:hover { background: var(--press); color: #fff; }

  /* Активний розділ — заливка плюс золота засічка ВСЕРЕДИНІ пігулки.
     Засічка лишається (на вузькій смузі з самими піктограмами колір
     майже не читається), але тепер вона не висить за межею пункту. */
  .rail nav a.on {
    background: linear-gradient(90deg,
                rgba(212, 175, 55, .20), rgba(212, 175, 55, .05));
    color: #fff;
  }
  .rail nav a.on::before {
    left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px;
  }
  .rail nav a.on i { color: var(--gold); }

  /* --- поверхні --- */
  .card, .hit, .empty, .doctext, .bblock {
    border-radius: var(--radius-lg);
    border-color: var(--line-soft);
    box-shadow: var(--shadow-soft);
  }
  .card { padding: 18px 20px; }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .hit { padding: 18px 20px; margin-bottom: 12px; }
  .hit:hover {
    transform: translateY(-2px);
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
  }
  .hit, .card {
    transition: transform .16s cubic-bezier(.32,.72,0,1),
                box-shadow .18s ease, border-color .18s ease;
  }
  .banner { border-radius: 14px; }

  /* Міра рядка в тексті рішення. Рахується від шрифту (ch), а не в
     пікселях: при іншому розмірі тексту межа лишається доречною. */
  .doctext { max-width: 80ch; }

  /* --- поля й кнопки --- */
  input[type=text], input[type=search], input[type=number],
  input[type=password], input[type=email], input[type=tel],
  select, textarea {
    min-height: 44px; border-radius: 10px;
  }
  input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px var(--accent-wash);
  }
  .btn {
    min-height: 44px; border-radius: 10px; font-weight: 600;
    transition: background-color .16s ease, border-color .16s ease,
                transform .12s ease, box-shadow .18s ease;
  }
  .btn.small { min-height: 34px; border-radius: 9px; }
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:active:not(:disabled) { transform: translateY(1px); }
}

/* Смуга закріплена відкритою там, де для цього є місце.
   1280 px — не кругле число з повітря: при відкритій смузі 244 px і
   полотні 1180 px потрібно 1424 px, щоб нічого не тиснуло; від 1280
   полотно вже не дотягує до своєї межі й просто стає вужчим, що
   прийнятно, а нижче — відчутно тісно. */
@media (min-width: 1280px) {
  .rail { width: var(--rail-open); }
  .rail:hover { box-shadow: none; }
  .rail-brand .word, .rail nav a span { opacity: 1; }
  main { margin-left: var(--rail-open); }
}

/* Менше руху — менше руху. Нові підняття карток і кнопок теж. */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .hit:hover, .btn:hover:not(:disabled) { transform: none; }
}


/* ==========================================================================
   Рух: стан роботи, а не прикраса
   ==========================================================================

   Підбірку ефектів власник приніс із каталогу готових компонентів. Узяті
   ІДЕЇ, а не компоненти: там усе на React і Framer Motion, а в цій
   програмі ні того, ні іншого немає і не буде — сторінки збирає Jinja,
   скрипти звичайні, залежностей три, робота офлайн. Майже все нижче
   робиться самим CSS.

   Відбирали за одним правилом: ефект мусить ПОКАЗУВАТИ СТАН, а не
   розважати. У програмі, де юрист звіряє цитату перед подачею до суду,
   грайлива анімація витрачає довіру. Тому з каталогу не взято Goo menu,
   Jelly slider, Like burst, Pull cord, Fan cards, Swipe deck і Magnetic
   button, хоча вони там найпомітніші.

   Усе вимикається при `prefers-reduced-motion` — блок у кінці файлу.
   ========================================================================== */

/* --- 1. Кнопка зі станом: очікування -> успіх ----------------------------
   Складання документа йде хвилинами, заливка годинами. Кнопка, яка в цей
   час просто сіра, не відрізняється від зламаної. */
.btn[data-state] { position: relative; }
.btn[data-state="busy"] { pointer-events: none; color: transparent !important; }
.btn[data-state="busy"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; opacity: .9;
  color: var(--on-accent);
  animation: spin .7s linear infinite;
}
.btn.ghost[data-state="busy"]::after, .btn.plain[data-state="busy"]::after {
  color: var(--accent);
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn[data-state="ok"] {
  background: var(--ok) !important; border-color: var(--ok) !important;
  color: #fff !important;
}
.btn[data-state="ok"]::before {
  content: "\2713\00a0";
  display: inline-block;
  animation: pop .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes pop {
  0% { transform: scale(.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 2. Очікування відповіді моделі --------------------------------------
   Модель пише кілька хвилин. Статичний рядок «зачекайте» не відрізняється
   від зависання, тому текст живе. */
.thinking { display: inline-flex; align-items: center; gap: 9px; }
.thinking::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  animation: breathe 1.4s ease-in-out infinite;
  flex: none;
}
@keyframes breathe {
  0%, 100% { transform: scale(.7); opacity: .45; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.thinking span {
  background: linear-gradient(90deg, var(--ink-faint) 25%,
              var(--ink) 50%, var(--ink-faint) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sweep 2.1s linear infinite;
}
@keyframes sweep { to { background-position: -220% 0; } }

/* --- 3. Показник кроків --------------------------------------------------
   Перехід між кроками стрибком не читається як рух уперед. */
.wiz-steps span {
  transition: background-color .22s ease, color .22s ease,
              border-color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.wiz-steps span.on { transform: scale(1.06); }

/* --- 4. Сегментований перемикач ------------------------------------------
   Замість <select> для порядку видачі: три стани видно одразу, а
   «пігулка» їде між ними, тому зрозуміло, ЩО саме змінилося.
   Будується скриптом із самого <select>, тому без JavaScript лишається
   звичайний список і нічого не ламається. */
.seg {
  position: relative; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--paper-sunk); border: 1px solid var(--line-soft);
  border-radius: 999px; min-height: 44px; align-items: center;
}
.seg button {
  position: relative; z-index: 1;
  font: inherit; font-size: 14px; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  transition: color .2s ease;
}
.seg button[aria-selected="true"] { color: var(--on-accent); font-weight: 600; }
.seg .seg-pill {
  position: absolute; z-index: 0; top: 3px; bottom: 3px;
  background: var(--accent); border-radius: 999px;
  transition: left .28s cubic-bezier(.32,.72,0,1),
              width .28s cubic-bezier(.32,.72,0,1);
}

/* --- 5. Перетягування файлів ---------------------------------------------
   Юрист тягне документи з теки, а не шукає кнопку «Выбор файла». */
.drop {
  display: block; padding: 18px; border-radius: var(--radius);
  border: 1.5px dashed var(--line); background: var(--paper-sunk);
  transition: border-color .18s ease, background-color .18s ease,
              transform .18s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
}
.drop:hover { border-color: var(--ink-faint); }
.drop.over {
  border-color: var(--gold); background: var(--gold-wash);
  transform: scale(1.012);
}
.drop .drop-hint { font-size: 14px; color: var(--ink-soft); }
.drop .drop-name { font-weight: 600; color: var(--ink); }

/* --- 6. Картка, що розкривається -----------------------------------------
   Довгий фрагмент рішення розпирає видачу, і двадцять знахідок не
   вміщаються на екран. Згортаємо, але лишаємо спосіб прочитати. */
.hit.clamp .hit-body {
  max-height: 150px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
  transition: max-height .3s ease;
}
.hit.clamp.open .hit-body {
  max-height: 3000px; -webkit-mask-image: none; mask-image: none;
}
.hit-more {
  font: inherit; font-size: 13.5px; background: none; border: 0;
  color: var(--accent); cursor: pointer; padding: 6px 0 0;
}
.hit-more:hover { text-decoration: underline; }

/* --- 7. Кнопка копіювання ------------------------------------------------ */
.copied { animation: pop .32s cubic-bezier(.34,1.56,.64,1); }

/* --- 8. Перехід між розділами з клавіатури -------------------------------
   Розділів пʼятнадцять, і мишею до потрібного доводиться цілитися. */
.cmdk-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 11, 18, .55);
  animation: fade .18s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .cmdk-back { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
@keyframes fade { from { opacity: 0; } }
.cmdk {
  position: fixed; z-index: 201; left: 50%; top: 14vh;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: rise .22s cubic-bezier(.32,.72,0,1);
}
@keyframes rise {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.985); }
}
.cmdk input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-soft);
  border-radius: 0; background: none; font-size: 16px; padding: 16px 18px;
}
.cmdk input:focus { box-shadow: none; outline: none; }
.cmdk ul { list-style: none; margin: 0; padding: 6px; max-height: 44vh;
           overflow-y: auto; }
.cmdk li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 15px; color: var(--ink);
}
.cmdk li .ic { width: 17px; height: 17px; opacity: .75; }
.cmdk li[aria-selected="true"] { background: var(--accent-wash); }
.cmdk .cmdk-empty { padding: 18px; color: var(--ink-faint); font-size: 14px; }
.cmdk-foot {
  padding: 9px 14px; font-size: 12.5px; color: var(--ink-faint);
  border-top: 1px solid var(--line-soft); background: var(--paper-sunk);
}

/* Хто просив менше руху — тому менше руху. Стан усе одно видно:
   кольором, текстом і позначкою, а не лише анімацією. */
@media (prefers-reduced-motion: reduce) {
  .btn[data-state="busy"]::after,
  .thinking::before, .thinking span { animation: none; }
  .thinking span { color: var(--ink-soft); -webkit-text-fill-color: currentColor; }
  .wiz-steps span.on { transform: none; }
  .seg .seg-pill { transition: none; }
  .drop.over { transform: none; }
  .cmdk, .cmdk-back { animation: none; }
  .btn[data-state="ok"]::before { animation: none; }
}

/* Рядок-зауваження всередині картки цитати. */
.warn-line { color: var(--gold-ink); }