/* Дизайн-токени платформи (Головне, Наслідки, Суди, Динаміка, Регіони,
   Справа, Методологія). Мапа (/mapa/) має власний style.css, але кольори
   даних спільні — див. «Палітра» нижче; змінювати їх лише разом із мапою.

   Чому так, а не як на мапі:
   * шрифти в rem, база 16 px. На мапі 94% видимого тексту дрібніше 12 px —
     для приладової панелі це ще терпимо, для сторінки, яку читають з
     телефона на кордоні, ні. Найдрібніший текст тут — 0.8125rem (13 px);
   * «тихий» текст #7a8896 замість #5d6b78: той давав 3,1–3,7:1 на темному
     тлі, цей — 5,5:1 на #06080b і 5,2:1 на картці (≥4,5:1 за WCAG AA). У
     світлій темі тихий текст темніший (#56616c, 6,3:1 на білому), бо той
     самий сірий на білому — лише 3,6:1;
   * дві теми. Удень люди читають з телефона, а темна сторінка на сонці не
     читається. Тема — за prefers-color-scheme, перемикач у шапці її
     перебиває (data-theme на <html>, ставить інлайн-скрипт до першого кадру).

   Жовтий #ffd400 — колір кордону й акценту. На світлому тлі жовтий ТЕКСТ
   нечитабельний (1,4:1), тож посилання там — темне золото #6e5300 (7,2:1), а
   жовтий лишається лише заливкою з чорним текстом (14,7:1). */

:root {
  /* ── Палітра даних (контракт між платформою й мапою) ─────────────────── */
  --c-border: #ffd400;          /* кордон, щільність, акцент */
  --c-dens-0: #2a2610;          /* одновідтінкова шкала щільності:        */
  --c-dens-1: #ffd400;          /* #2a2610 → #ffd400 → #fff4b8            */
  --c-dens-2: #fff4b8;
  --c-case: #ff5147;            /* справи */
  --c-noescape: #4cc3ff;        /* виміряні точки NoEscape (лише на мапі) */
  --c-muted: #7a8896;           /* тихий текст, ≥4,5:1 на темному */
  --c-select: #ffffff;          /* вибране */

  /* ── Результати справ ───────────────────────────────────────────────────
     Порядок кольорів перевірено валідатором палітри (dataviz, OKLab) саме в
     порядку показу: сусідні пари розрізняються і звичайним зором (ΔE ≥ 19),
     і за протанопії/дейтеранопії. Найслабша пара — «немає складу» ↔ «штраф»:
     у темній темі ΔE 6,5 за протанопії (межа 6–8 дозволена лише з другим
     каналом), у світлій 8,6. Тому колір ніде не єдиний носій змісту:
     кожна смуга підписана, а в стосі між сегментами — проміжок 2 px.
     «Адміністративний арешт» (сьомий ключ конвеєра) — золото #c98500 /
     #9a7000: з ним набір із семи кольорів проходить ту саму перевірку в обох
     темах (найближча до нього пара — з «винним без стягнення», ΔE ≥ 19).
     «Розпізнано не повністю» — не колір, а сіре штрихування: це відсутність
     відповіді, а не ще один результат. */
  --o-no_offense: #199e70;
  --o-fine: #e66767;
  --o-statute: #3987e5;
  --o-closed_other: #d95926;
  --o-warning: #9085e9;
  --o-guilty_no_penalty: #d55181;
  --o-arrest: #c98500;
  --o-unknown: #4a5561;

  /* ── Поверхні й текст: темна тема (типова) ─────────────────────────── */
  --bg: #06080b;
  --surface: #0d1117;
  --surface-2: #141a22;
  --line: #1f2833;
  --line-2: #2c3845;
  --ink: #e9eff3;
  --ink-2: #a9b6c2;             /* 9,2:1 на картці */
  --ink-3: var(--c-muted);
  --link: #ffd400;
  /* Стовпці й смуги «кількості» (один ряд, не результат). На темному — жовтий
     кордону; на світлому жовтий дає лише 1,4:1 до тла, а графічний обʼєкт
     потребує ≥3:1 (WCAG 1.4.11), тож там темніше золото #9c7a00 (4:1). */
  --mark: #ffd400;
  --accent: #ffd400;
  --on-accent: #000;
  --focus: #ffd400;
  --hatch: rgba(233, 239, 243, 0.16);
  --glass: rgba(13, 17, 23, 0.72);
  --glass-line: rgba(255, 255, 255, 0.10);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);

  /* Імена, якими користується ai-chat.css (його не чіпаємо): асистент на
     сторінках платформи має виглядати так само, як на мапі, і в обох темах. */
  --void: var(--bg);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --raised: var(--surface-2);
  --rule: var(--line);
  --rule-2: var(--line-2);
  --signal: var(--accent);
  --alert: var(--c-case);
  --ua: #6ea0ff;
  --sk: #34d399;
  --masthead-h: 0px;

  /* ── Типографіка ───────────────────────────────────────────────────── */
  --sans: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Literata', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --fs-xs: 0.8125rem;   /* 13 px — підписи осей, дрібні примітки */
  --fs-sm: 0.875rem;    /* 14 px */
  --fs-md: 1rem;        /* 16 px — основний текст */
  --fs-lg: 1.1875rem;   /* 19 px */
  --fs-xl: 1.5rem;      /* 24 px — заголовок сторінки на телефоні */
  --fs-num: 2.25rem;    /* 36 px — головне число картки */

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --gap: 16px;          /* бічне поле на телефоні */
  --nav-h: 60px;        /* висота нижньої капсули */
  --content: 1120px;

  color-scheme: dark;
}

/* Світла тема: або система просить світлу й людина не обрала темну, або
   людина обрала світлу перемикачем. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --o-no_offense: #12805c;
    --o-fine: #d13b3a;
    --o-statute: #2a6fcc;
    --o-closed_other: #c85a24;
    --o-warning: #5a4bb8;
    --o-guilty_no_penalty: #c44d85;
    --o-arrest: #9a7000;
    --o-unknown: #b4bdc6;
    --c-muted: #56616c;
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #e9edf1;
    --line: #dde3e9;
    --line-2: #c3ccd5;
    --ink: #0c1116;
    --ink-2: #3a4652;
    --link: #6e5300;
    --mark: #9c7a00;
    --focus: #0c1116;
    --hatch: rgba(12, 17, 22, 0.18);
    --glass: rgba(255, 255, 255, 0.78);
    --glass-line: rgba(12, 17, 22, 0.10);
    --shadow: 0 10px 30px -14px rgba(12, 17, 22, 0.35);
    --ua: #2a5fb8;
    --sk: #12805c;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --o-no_offense: #12805c;
  --o-fine: #d13b3a;
  --o-statute: #2a6fcc;
  --o-closed_other: #c85a24;
  --o-warning: #5a4bb8;
  --o-guilty_no_penalty: #c44d85;
  --o-arrest: #9a7000;
  --o-unknown: #b4bdc6;
  --c-muted: #56616c;
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #e9edf1;
  --line: #dde3e9;
  --line-2: #c3ccd5;
  --ink: #0c1116;
  --ink-2: #3a4652;
  --link: #6e5300;
  --mark: #9c7a00;
  --focus: #0c1116;
  --hatch: rgba(12, 17, 22, 0.18);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(12, 17, 22, 0.10);
  --shadow: 0 10px 30px -14px rgba(12, 17, 22, 0.35);
  --ua: #2a5fb8;
  --sk: #12805c;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 720px) {
  :root { --gap: 24px; --fs-xl: 1.875rem; --fs-num: 2.5rem; }
}

/* ── Основа ──────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

/* Фокус видно завжди, коли людина йде клавіатурою, і ніколи — від дотику.
   Колір — жовтий на темному й майже чорний на світлому: обидва ≥3:1 до тла. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Режим примусових кольорів (Windows High Contrast): штрихування й
   кольорові смуги зникають, тож межі мають лишитися видимими. */
@media (forced-colors: active) {
  .bar-fill, .seg { forced-color-adjust: none; }
  :focus-visible { outline-color: Highlight; }
}