/* PBT CRM — телефон спершу.
   Мова вигляду взята з сайту фірми: темно-синій #202932 для глибоких поверхонь,
   білий ґрунт для змісту, помаранчевий #EB5113 — ЛИШЕ для того, що вимагає дії.
   Якщо помаранчевий з'являється на тому, що людини не потребує, він перестає
   щось означати. Одне правило: помаранчевий — дій. */

/* Шрифт фірми — підмножиною, а не цілим файлом: у ньому лишились латиниця, українська кирилиця,
   цифри й ужита пунктуація (№ ₴ · × — « » тощо), решту вирізано. Ціна екрана падає з 828 КБ до 86:
   806 КБ двох TTF стали 63 КБ двох woff2, вигляд той самий. На дорозі це різниця між 16 і 2 секундами
   на слабкому зв'язку. Перевірено: жодного символу зі зразка українського тексту не бракує. */
@font-face {
  font-family: "Liberation Sans";
  src: url("/static/fonts/LiberationSans-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Liberation Sans";
  src: url("/static/fonts/LiberationSans-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #202932;
  --navy-2: #2d3947;
  --accent: #EB5113;
  --accent-soft: #fdebe3;
  --ink: #202932;
  /* Сірий підписів тримає Lc 90 на білому (+96.8) і на --soft (+90.8) — поріг APCA для 13–14px/400.
     Ієрархію несуть кегль, вага й місце, а не блідість: на помаранчевій картці рішення дрібний
     текст бере --ink (+91.7), бо там навіть цей сірий дає лише 87. */
  --muted: #333941;
  --line: #e2e5e9;
  --soft: #f4f5f7;
  --ground: #ffffff;
  --good: #1f7a4d;
  --font: "Liberation Sans", Arial, Helvetica, sans-serif;
  --gap: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.45 var(--font);
}
a { color: inherit; }
/* Посилання-дія (телефон у рядку, назва фірми, рядок списку) — така сама ціль, як кнопка: 44 px.
   inline-flex робить його атомарним рядковим блоком, тож рядок росте, а сусідній текст не з'їжджає.
   Виняток лише для прози — посилання СЕРЕД тексту; на цих екранах такої прози немає (виміряно).
   Плитки, кнопки, чипи й бренд мають власні розміри. */
/* :where() — нульова вага: будь-яке правило класу (.act, .nav a, .figure) лишається головним,
   інакше цей рядок переважив би навіть display: grid у .act. */
a:where(:not(.brand, .btn, .chip, .figure)) {
  display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%;
  /* 44 в ОБОХ вимірах (2.5.5): «№2» у таблиці має чотири знаки тексту, а палець той самий. */
  min-height: 44px; min-width: 44px;
}
/* Прапорець і перемикач: сам квадратик — 24 px, скільки й треба оку, а ціль дотику — уся мітка
   разом зі словом, 44 px. Палець влучає в текст, не лише в квадратик; роздувати сам прапорець до
   пальця не треба. Умова одна: мітка ОБГОРТАЄ input, інакше слово не перемикає. */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: 0; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
}
img { max-width: 100%; }

/* ── шапка ─────────────────────────────────────────────── */
.top { background: var(--navy); color: #fff; }
.top-in {
  max-width: 720px; margin: 0 auto; padding: 8px var(--gap);
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap;
}
/* У розмітці меню стоїть раніше за «вийти» (порядок Tab), а на екрані «хто · вийти» — у рядку бренду. */
.brand { order: 0; font-weight: 700; letter-spacing: .04em; text-decoration: none; font-size: 18px; }
.brand b { color: var(--accent); }
/* Меню — ОДИН рядок із прокруткою. Це скасування попереднього рішення («переноситься, а не
   ховається за край: пункт, якого не видно, для власника не існує»), і скасоване воно числом:
   перенесене меню коштувало 156 px із 844 першого екрана, тобто 18 %, і не несло жодної
   інформації про стан фірми — тоді як запас під вердиктом боргу був 8 px.
   Заперечення старого рішення лишається чинним, тому воно закрите, а не проігнороване:
   * край кричить про себе тінню — той самий прийом, що на широкій таблиці (.table-wrap), а не
     новий; градієнти з `local` зникають, коли прокручувати нікуди, тож тінь є рівно тоді, коли
     є що прокручувати;
   * поточний пункт сам в'їжджає у видиме (app.js), інакше однорядкове меню ховало б саме те
     місце, де людина стоїть;
   * жоден пункт не прибрано й не сховано під «ще»: усі вісім лишаються в DOM і в порядку Tab,
     тож клавіатура й читач екрана бачать їх так само, як бачили. */
.nav {
  order: 2; display: flex; flex-wrap: nowrap; gap: 4px; flex: 1 0 100%; margin: 0 -8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 8px;
  background:
    linear-gradient(to right, var(--navy) 40%, transparent) left center,
    linear-gradient(to left, var(--navy) 40%, transparent) right center,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, .22), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .22), transparent) right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.nav a {
  text-decoration: none; color: #f2f5f8; font-size: 15px; padding: 6px 8px; border-radius: 6px;
  white-space: nowrap; flex: 0 0 auto;
}
.nav a[aria-current="page"] { background: var(--navy-2); color: #fff; }
/* Кільце фокуса — ВСЕРЕДИНУ пункту. `overflow-x: auto` за специфікацією вмикає й `overflow-y`,
   тож зовнішнє кільце в меню обрізається згори й знизу: виміряно 17.09 — поза меню кільце
   займає 560 px периметра, усередині 306 px без верху й низу. Від'ємний зсув малює його по краю
   самого пункту, і воно видиме цілком, не додаючи меню жодного пікселя висоти. */
.nav a:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--navy); }
.who { order: 1; font-size: 13px; color: #f2f5f8; white-space: nowrap; margin-left: auto; }
.who form { display: inline; }
.linkish { background: none; border: 0; color: #f2f5f8; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

main { max-width: 720px; margin: 0 auto; padding: 12px var(--gap) 48px; }
h1 { font-size: 24px; line-height: 1.2; margin: 14px 0 6px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.sub { color: var(--muted); margin: 0 0 12px; }

/* ── зони екрана власника ──────────────────────────────── */
.zone { padding: 16px 0; border-bottom: 1px solid var(--line); }
.zone:last-child { border-bottom: 0; }
.calm { margin: 0; color: var(--muted); }
.act {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  text-decoration: none; padding: 12px 14px; margin-bottom: 8px;
  border-left: 5px solid var(--accent); background: var(--accent-soft); border-radius: 8px;
}
/* Опис — один рядок з обрізанням. Зі справжнім описом корпусу (244 символи) він займав дев'ять
   рядків, рядок зони — 447 px, і відповідь «хто нам винен» ішла на 2253 px при екрані 844
   (виміряно приладом tests/e2e/test_first_screen.py; двома незалежними приладами на копії живої
   бази — 989 px уже на трьох заявках). Критерій §6.3 методики вимагає, щоб борг був видний з
   екрана, тож стискаємо РЯДОК, а не перелік: повний текст лишається в DOM і на сторінці заявки.
   overflow: hidden тут потрібен ще й сітці: він робить автоматичний мінімум нулем, інакше
   найдовше слово розсунуло б стовпець. */
.act-what {
  font-weight: 700; font-size: 18px;
  /* Опис займає ВСЮ ширину рядка (обидва стовпці), а кнопка стоїть навпроти «хто»: інакше вона
     з'їдала третину ширини саме в того, що найважливіше, і звичайний опис на 34 символи
     обрізався на двадцятому («бульдозер на планув…» — побачено очима на знімку, прилад цього не
     бачить). Висота рядка від цього не змінилась: кнопка й далі не додає власного рядка. */
  grid-column: 1 / -1;
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* min-width: 0 і overflow тут не косметика: без них нерозривне ім'я в .act-client віддає сітці
   мінімальну ширину в повний текст (~1100 px), сторінка стає ширшою за вікно, і Chromium в
   емуляції телефона МАСШТАБУЄ її — innerHeight стає 2571 замість 844, тобто «вміщається»
   міряється в чужих одиницях. Виміряно власним приладом на цій же правці. */
.act-who { grid-column: 1; color: var(--ink); font-size: 15px; min-width: 0; overflow: hidden; }
/* Ім'я клієнта обрізається, а факти рішення — ні: «чекає 3 год · 2 пропозиції · найдешевше …» це
   те, чим власник вирішує, і воно мусить лишатись цілим (OWNER VIEW §2, зона 1: що, хто, як довго).
   inline-block у тому ж рядковому потоці: коротке ім'я не додає жодного пікселя — саме тому
   вердикт на 320x640 із запасом 2 px лишився на місці, — а довге не з'їдає фактів. */
.act-client {
  display: inline-block; max-width: 60%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
.act-cta {
  grid-column: 2; grid-row: 2; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 19px; padding: 10px 14px; border-radius: 8px;
}
/* Вузький телефон. Кнопка «Вирішити» СТОЇТЬ ЗБОКУ, а не під текстом: під текстом вона була
   тому, що довгий опис стискався в сім коротких рядків, — а опис тепер один рядок з обрізанням,
   тож причини не стало. Ціна її повернення збоку — 52 px на кожному рядку зони, і саме вони
   виводили відповідь «хто нам винен» за перший екран на чотирьох заявках (виміряно: 971 px при
   844; зі кнопкою збоку — нижче). Ціль дотику не зменшилась: рядок цілком і є ціль. */
@media (max-width: 420px) {
  .act-cta { font-size: 17px; padding: 10px 12px; }
  .nav a { font-size: 14px; padding: 5px 7px; }
  /* Більші цілі дотику додали висоти меню; 4 px з кожної межі секцій повертають вердикт
     на перший екран 320x640, не зменшуючи жодної цілі (виміряно: було 647 при 640). */
  .zone { padding: 12px 0; }
}

/* Три цифри — один рядок і на телефоні: інакше «У роботі» з'їжджає з першого екрана. */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.figure {
  display: block; text-decoration: none; padding: 10px 10px 12px; background: var(--soft); border-radius: 8px;
}
.figure .num { display: block; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
/* Цифри не рвуться; одиниця дрібніша й може перейти на наступний рядок — «12,5 млн» уміщається в 320 px. */
.figure .n { font-size: clamp(22px, 7vw, 34px); white-space: nowrap; }
.figure .u { font-size: clamp(15px, 4.4vw, 22px); white-space: nowrap; }
.figure .cap { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: 4px; }
/* Висновок, а не вимірювання: важчий за підпис, але не помаранчевий — дії власника тут не чекають. */
/* Один клас — одне значення. «Найбільший борг» (посилання) і «Вирішили за тебе» (підпис групи)
   мали спільний .verdict, і тест, що брав перший-ліпший, міряв то одне, то інше залежно від
   даних: так розійшлись два незалежні виміри одного екрана (613 і 1244). Вигляд спільний,
   імена різні. */
/* Розділювачі — справжні символи всередині елементів, а не проміжок макета: інакше текст для читача
   екрана злипається в «Найбільший борг:ТОВ Будова2 000». */
/* Відповідь про борг стоїть ПЕРЕД цифрами, тож відступ їй потрібен знизу, а не лише згори. */
.verdict, .group-title {
  display: block; text-decoration: none; margin-top: 10px; margin-bottom: 10px;
  padding: 10px 12px; font-weight: 700;
  border-left: 4px solid var(--navy); background: var(--soft); border-radius: 8px;
}
/* Ім'я боржника у вердикті НЕ обрізаємо: воно і є відповіддю на «хто нам винен». Спроба зробити вердикт одним
   рядком (nowrap + стискання імені) лишала від прикладу самого власника «ІГМА-ПІСОК» дві літери на 390 px —
   виміряно перевіряльником контролера 16.09. Вердикт переноситься, як і був; висоту зменшує скорочення
   організаційно-правової форми (`short_party`), а не обрізання. Клас `money-verdict` лишається розпізнавальним:
   той самий `.verdict` носить сторінка заявки, і будь-яка майбутня правка мусить бити лише по одному з двох. */

.rows { list-style: none; margin: 0; padding: 0; }
.tasks li { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tasks .btn { margin-top: 6px; }
.row {
  display: block; text-decoration: none; padding: 10px 12px; border-bottom: 1px solid var(--line);
  border-left: 4px solid transparent;
}
/* Рядок списку не росте разом з описом: два рядки, решта прихована (текст лишається в DOM —
   пошук сторінкою й читалка беруть повний, а повністю його видно на самій заявці). Виміряно 17.09
   на крайніх випадках корпусу: один рядок був 378 px і 12 рядків тексту, п'ять заявок — 3,5 екрана.
   Правило стоїть на `.row .row-main`, а не на всіх: `.row` — це рядок, що ВЕДЕ на сторінку з повним
   текстом, і там обрізання законне. У рядку без посилання (завдання без заявки, довідка тендера)
   решти тексту не видно ніде — ні підказкою, ні розгортанням, ні на окремій сторінці, — тож там
   обрізання ховало б те, що адміністраторка написала для людей (перевіряльник, 17.09: назви від
   ≈90 символів на /desk, на головній власника і на сторінці об'єкта).
   `:has(.tag)` — не прикраса: у рядку з позначкою стану обрізання ховало САМУ ПОЗНАЧКУ
   (виміряно: «виконано» при заголовку на 161 символ опинялась за нижньою межею). Стан не сміє
   зникати з екрана, тож такі рядки лишаються без межі.
   Тому вся межа стоїть під `@supports selector(:has(*))`: у браузері без `:has()` виняток не
   спрацював би, а межа — так, і «вимкнено» при довгій назві об'єкта сховалось би. Раніше тут
   стояв коментар, що без `:has()` межі немає; це була неправда, і її знайшов перевіряльник. */
.row-main { display: block; }
@supports selector(:has(*)) {
  .row .row-main {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; overflow: hidden;
  }
  .row .row-main:has(.tag) { display: block; overflow: visible; }
}
.row-meta { display: block; font-size: 14px; color: var(--muted); }
.row-state { font-size: 14px; }
/* Застигла заявка: важча, не тривожна. Застій — це інформація, а не пожежа. */
.row.stale { border-left-color: var(--navy); background: var(--soft); }
/* «Вирішили за тебе» — звіт, не дія: група відділяється лівою межею й тоном, а не висотою.
   Запас першого екрана власника на 320×640 — 2 px (виміряв напарник), тож зайвий рядок або
   відступ з'їв би вердикт. Межа вже є в .row (4 px прозорі), тож колір коштує нуль висоти.
   Не помаранчевий: помаранчевий лишається лише для того, що вимагає дії власника. */
.row.decided { border-left-color: var(--muted); background: var(--soft); }
.row.stale .row-main { font-weight: 700; }

.busy { list-style: none; margin: 0; padding: 0; }
.busy li { padding: 8px 0; border-bottom: 1px solid var(--line); }
/* Назва одиниці — окремим рядком від «хто · до коли». `display: block` на самому `<b>` цього НЕ
   робить, і саме так тут і було: посилання-ціль дотику вище — `inline-flex`, тож `<b>` усередині
   нього стає елементом флексу, а сусідній `<span>` лягає в той самий рядок. Виміряно 17.09 на
   390 px: 2 з 3 рядків склеювались («JCB 3CX (власний)ТОВ «Демо-Будова»»), і вада залежала від
   довжини назви — короткий рядок виглядав справним, тому сторож СТВОРЮЄ довгу назву.
   Ціна — +16 px на три рядки; блок «Техніка» стоїть нижче першого екрана, тож вердикту власника
   це не чіпає (виміряно тим самим прогоном). */
.busy span { display: block; color: var(--muted); font-size: 15px; }

.stamp { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ── форми ─────────────────────────────────────────────── */
label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink); padding: 10px 12px;
  border: 1px solid #c9ced4; border-radius: 8px; background: #fff;
}
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 3px solid #9fb3c8; outline-offset: 0; border-color: var(--navy); }
/* Фокус клавіатури видно й на кнопках, посиланнях і згортках, а не лише в полях. Типове обведення
   браузера (1px, майже чорне) на темній кнопці дає контраст 1.29:1 до її ж тла — нижче за поріг 3:1
   для нетекстових елементів (виміряно 17.09 на сторінці входу). Кільце подвійне: світле всередині,
   темне зовні, тож одне з двох видно і на білій сторінці, і на темній шапці, де навігація світла. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ground); outline-offset: 1px; box-shadow: 0 0 0 5px var(--navy);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip {
  font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 999px; border: 1px solid #c9ced4;
  background: #fff; color: var(--ink); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn {
  display: inline-block; font: inherit; font-weight: 700; font-size: 18px; padding: 12px 18px;
  border-radius: 8px; border: 0; background: var(--navy); color: #fff; cursor: pointer; text-decoration: none;
}
.btn.act-btn { background: var(--accent); font-size: 19px; }
.btn.quiet { background: var(--soft); color: var(--ink); font-weight: 400; font-size: 16px; padding: 8px 12px; }
.btn.small { font-size: 15px; padding: 7px 11px; }
/* Вимкнена кнопка мусить ЧИТАТИСЬ: «вимкнено» — це не «ледь видно», а «видно й недоступно».
   `opacity: .45` змішувала з полотном і текст, і тло разом, і напис ішов за поріг APCA: виміряно
   17.09 на 390 px — суцільна кнопка Lc −57 при потрібних 60, `.quiet` +49 при потрібних 90.
   Прилад контрасту цього не бачив: він складає альфу ТЛА предків, а `opacity` елемента — ні
   (закрито тим самим комітом у tests/e2e/test_contrast.py). Тому тут свої кольори, не прозорість:
   виміряно +90.8 для обох різновидів. Межа лишається видимою, щоб «вимкнено» не трималось на
   самому кольорі. */
.btn:disabled {
  opacity: 1; background: var(--soft); color: var(--muted);
  border: 1px solid var(--line); cursor: not-allowed;
}

/* Ціль дотику не менша за палець: 44 px (WCAG 2.2, 2.5.5; Apple HIG 44 pt). Адміністраторка вносить
   заявку однією рукою під час дзвінка, тож висоту цілі задає min-height, а не кегль шрифту.
   Виміряно в Chromium на 390 px, а не пораховано по цих правилах: tests/e2e/test_reach.py. */
.btn, .chip, .nav a, .brand, .linkish {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
}
/* summary лишається list-item: inline-flex забрав би трикутник розкриття. */
summary { min-height: 44px; padding: 10px 0; }
.wide { width: 100%; margin-top: 14px; }
.error { color: #9b2c0f; font-weight: 700; margin: 8px 0 0; }
.error:empty { display: none; }
.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.caller { margin: 6px 0 0; font-size: 15px; }
.caller:empty { display: none; }

/* ── картки й таблиці ──────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 14px 0; }
.card > h2 { margin-bottom: 8px; }
details.card > summary { cursor: pointer; font-weight: 700; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; }
.states { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.state-now { background: var(--navy); color: #fff; }
/* Таблиця, ширша за екран, мусить СКАЗАТИ, що є ще. Виміряно 17.09 у вікні телефона: таблиця
   позицій заявки — 430 px при 358, тобто 72 px за краєм, і за краєм стоїть стовпець ДІЙ. Людина
   бачить п'ять стовпців, не бачить шостого й вирішує, що змінити позицію не можна.
   Тінь робиться самим фоном, без скрипта: дві «затулки» кольором полотна їдуть РАЗОМ із вмістом
   (`local`), дві тіні стоять на місці (`scroll`). Доки затулка не доїхала до краю, тінь видно;
   коли докрутили — затулка її накриває. Тому тінь з'являється рівно там, де є що гортати. */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--ground) 40%, transparent) left center,
    linear-gradient(to left, var(--ground) 40%, transparent) right center,
    radial-gradient(farthest-side at 0 50%, rgba(32, 41, 50, .20), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(32, 41, 50, .20), transparent) right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 400; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: var(--soft); }
.tag.good { background: #e3f3ea; color: var(--good); }
.muted { color: var(--muted); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.inline { display: inline; }
.timeline { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.timeline li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.timeline time { color: var(--muted); font-size: 13px; display: block; }
.archive-text {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "Liberation Mono", monospace;
  font-size: 13px; background: var(--soft); padding: 12px; border-radius: 8px; max-height: 70vh; overflow: auto;
}
.pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 14px; }
.login { max-width: 380px; margin: 40px auto; }

/* 0021: пошук, що давно не запускався, — подія, а не тиша. Помаранчевий лише для рішень власника. */
.stale-note { border-left: 4px solid var(--navy); }