/* ═══════════════════════════════════════════════════════════════════════════
   Master Service · «Наскрізна маркетингова аналітика»
   ЄДИНА система оформлення порталу — затверджений варіант верстки В6
   (дизайн-схема 3.2.5 v1.2 від 19.08.2026 + макет 3.2.7; §15 — ухвалені рішення).

   Один файл на три оболонки (дашборди, адмінрозділи, вхід) — інакше перехід
   між розділами перевертав палітру. Тут: токен-шар (світла + темна тема §10),
   каркас (шапка 50 px Night · іконковий рейл 54 px · банер-герой Г-1/Б-1/К-1
   128–136 px · робоча зона #f6f8fa), компоненти §6–§7, стани §9, адаптив §11,
   друк (системний друк браузера; серверний PDF має власний _PDF_CSS — див. §ДРУК).

   КОНТРАКТИ, які не можна ламати:
     · portal.js читає через getComputedStyle: --ink --ink-2 --ink-3 --axis --rule
       --rule-2 --series-1 --series-1-wash --surface --warn-edge — імена лишаються,
       міняються лише значення; --surface у темній темі — СОЛІД (фон тултіпа);
     · класи шаблонів (.kpi/.viz/.strip/.card/.pill/.chip/.btn …) лишаються —
       перевизначено за їх ВЖИВАННЯМ у шаблонах, не за назвою у В6 (у В6 .pill =
       мітка, .chip = стан; у порталі навпаки);
     · жодних зовнішніх завантажень: CSP default-src 'self'. MuseoSansCyrl і
       EurostileExt-Bla у репо ВІДСУТНІ (алловліст /static) — стек В6 із фолбеками,
       локальний IBM Plex Sans — останній реальний фолбек ПЕРЕД system-ui.

   Контраст (§4.4): заливка під білий дрібний текст — Blue 600 #0761a1 (6,49:1),
   не Celestian #3c8ec8 (3,56:1); Celestian — рейл, рамки, фокус, великі елементи.
   Orange #ffa800 ніколи не текст на білому — текст-попередження #b06f00 / #8a5b00.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-cyrillic-300-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-cyrillic-300-italic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-300-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF; }

/* ── Токени: світла тема (§4, §2, §3) ─────────────────────────────────────── */
:root {
  color-scheme: light;

  /* 4.1 фірмова палітра (незмінна) */
  --ms-white: #ffffff; --ms-blue: #3c8ec8; --ms-night: #0a0a0a;
  --ms-orange: #ffa800; --ms-dark: #0b1e31; --ms-gun: #434444;

  /* 4.2 робочі відтінки */
  --b900: #0b1e31; --b800: #123c5e; --b700: #17456c; --b600: #0761a1; --b500: #3c8ec8;
  --b300: #8fc4e6; --b100: #c1dced; --b050: #e2eef8;
  --o700: #b06f00; --o600: #d98f00; --o500: #ffa800; --o200: #ffd58a; --o050: #fff4e0;
  --n900: #0a0a0a; --n800: #22282c; --n700: #3f4a53; --n600: #5c666d; --n500: #6b757c;
  --n400: #b7c0c6; --n300: #e2e7ea; --n200: #eef1f4; --n100: #f6f8fa; --n000: #ffffff;

  /* Поверхні */
  --paper:       #f6f8fa;   /* фон робочої зони */
  --surface:     #ffffff;   /* панель / тултіп чарта (portal.js) */
  --surface-2:   #f6f8fa;   /* рядок Разом / службовий, поле */
  --surface-ink: #0a0a0a;
  --input-bg:    #fbfcfd;
  --row-hover:   #f2f8fc;
  --al-bg:       #fafbfc;
  --al-hover:    #f2f6f9;
  --crumb-hover: #e9f1f8;

  /* Текст. Контраст на білому: ink 19,6 · ink-2 9,07 · ink-3 4,71 (AA).
     --muted (3,05:1) — ЛИШЕ для розділювача крихт та іконок, не для тексту 11–13 px
     (§12: дрібний текст ≥ 4,5:1; виноска/пояснення від системи — #6b757c, §7.5). */
  --ink:   #0a0a0a;
  --ink-2: #3f4a53;
  --ink-3: #5c666d;   /* n600: 5,52:1 на --paper #f6f8fa (n500 #6b757c давав 4,42 — нижче AA) */
  --axis:  #5c666d;
  --muted: #8b959c;

  /* Лінії — ніколи не чорні */
  --rule:     #eef1f4;      /* розділювачі рядків, треки, сітка чарта */
  --rule-2:   #e2e7ea;      /* рамки панелей/полів, вісь X, під шапкою таблиці */
  --rule-ink: rgba(10,10,10,.13);

  /* 4.6 серії каналів (варіант 1) — колір закріплений за каналом назавжди */
  --series-1: #3c8ec8;      /* Рекламні кабінети */
  --series-2: #ffa800;      /* Маркетплейси */
  --series-3: #14507e;      /* Органічні соцмережі та GBP */
  --series-4: #7f8b92;      /* Телефонія і чат */
  --series-1-wash: rgba(60,142,200,.10);

  /* 4.5 статуси — лише зі стрілкою/іконкою/словом; серіями не бувають */
  --good:      #4f8036;     /* текст позитивної дельти (4,69:1) */
  --good-fill: #6aa84f;     /* заливки, стрілки, смуги — НЕ текст на білому */
  --good-bg:   #eef6e9;
  --good-bd:   #cfe3c2;
  --bad:       #b52b2b;     /* текст і заливка (6,28:1) */
  --bad-fill:  #b52b2b;     /* заливка ПІД БІЛИЙ текст — у темній темі лишається #b52b2b:
                               білий на #e2726f дав би 3,06:1 (§15-13) */
  --bad-bg:    #fdeaea;
  --bad-bd:    #f3c6c6;
  --warn:      #b06f00;     /* текст-попередження на білому (4,10:1) */
  --warn-chip: #8a5b00;     /* текст у чипі/пігулці на #fff4e0 */
  --warn-edge: #ffa800;     /* смуга, кільце аномалії (portal.js) */
  --warn-wash: #fff4e0;
  --warn-bd:   #f3d49a;

  /* Акцент інтерфейсу — один: Celestian Blue */
  --accent:        #3c8ec8; /* рейл, рамки, фокус, великі елементи */
  --accent-fill:   #0761a1; /* заливка під білий текст 12–13 px (§4.4) */
  --accent-hover:  #0761a1;
  --accent-active: #17456c;
  --accent-ink:    #ffffff;
  --link:          #0761a1; /* посилання, дрібний синій текст (6,49:1) */
  --blue-soft:     #e2eef8;
  --blue-bd:       #c1dced;

  --hero-gradient: linear-gradient(120deg, #0b1e31 0%, #17456c 48%, #3c8ec8 100%);

  --radius:       4px;      /* усі елементи керування (Ф-2) */
  --radius-panel: 6px;      /* панелі, картки, попап */
  --rhythm:       4px;

  /* Шрифти (§3). IBM Plex Sans — локальний @font-face, стоїть ДО system-ui,
     інакше він ніколи не спрацює як фолбек. */
  --font-primary: 'MuseoSansCyrl', 'Museo Sans Cyrl', 'Museo Sans', 'Avenir Next', 'Futura',
                  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'EurostileExt-Bla', 'Eurostile Extended', 'Eurostile', 'Square721 BT', 'Michroma',
                  var(--font-primary);
  --font: var(--font-primary);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;

  --shadow-pop:   0 10px 28px rgba(10,10,10,.13);
  --shadow-tip:   0 6px 18px rgba(10,10,10,.12);
  --shadow-toast: 0 10px 26px rgba(0,0,0,.25);
}

/* ── Токени: темна тема (§10) — власний набір сходинок, не інверсія ──────────
   Механізм без змін: theme.js ставить data-theme на <html>; системна вподоба діє,
   поки людина не натиснула перемикач, і перемикач виграє в обидва боки. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --paper: #0b1e31; --surface: #17293b; --surface-2: #1f3042; --surface-ink: #ffffff;
    --input-bg: #1f3042; --row-hover: rgba(255,255,255,.05);
    --al-bg: rgba(255,255,255,.04); --al-hover: rgba(255,255,255,.07); --crumb-hover: rgba(255,255,255,.08);
    --ink: #ffffff; --ink-2: #b7c0c6; --ink-3: #93a6b5; --axis: #93a6b5; --muted: #93a6b5;
    --rule: rgba(255,255,255,.08); --rule-2: rgba(255,255,255,.12); --rule-ink: rgba(255,255,255,.14);
    --series-1: #5aa6dc; --series-2: #ffb733; --series-3: #c9dff0; --series-4: #7d878c;
    --series-1-wash: rgba(90,166,220,.14);
    --good: #8fc46f; --good-bg: rgba(143,196,111,.14); --good-bd: rgba(143,196,111,.35);
    --bad: #e2726f; --bad-fill: #b52b2b; --bad-bg: rgba(226,114,111,.14); --bad-bd: rgba(226,114,111,.35);
    --warn: #ffa800; --warn-chip: #ffd58a; --warn-wash: rgba(255,168,0,.16); --warn-bd: rgba(255,168,0,.35);
    --accent: #5aa6dc; --accent-hover: #3c8ec8; --link: #8fc4e6;
    --accent-active: #e2eef8;   /* див. коментар у @media (prefers-color-scheme: dark) */
    --blue-soft: rgba(60,142,200,.14); --blue-bd: rgba(255,255,255,.12);
    --n400: #7d878c; --n600: #93a6b5; --n800: #ffffff;
    --shadow-pop: 0 10px 28px rgba(0,0,0,.5); --shadow-tip: 0 6px 18px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1e31; --surface: #17293b; --surface-2: #1f3042; --surface-ink: #ffffff;
  --input-bg: #1f3042; --row-hover: rgba(255,255,255,.05);
  --al-bg: rgba(255,255,255,.04); --al-hover: rgba(255,255,255,.07); --crumb-hover: rgba(255,255,255,.08);
  --ink: #ffffff; --ink-2: #b7c0c6; --ink-3: #93a6b5; --axis: #93a6b5; --muted: #93a6b5;
  --rule: rgba(255,255,255,.08); --rule-2: rgba(255,255,255,.12); --rule-ink: rgba(255,255,255,.14);
  --series-1: #5aa6dc; --series-2: #ffb733; --series-3: #c9dff0; --series-4: #7d878c;
  --series-1-wash: rgba(90,166,220,.14);
  --good: #8fc46f; --good-bg: rgba(143,196,111,.14); --good-bd: rgba(143,196,111,.35);
  --bad: #e2726f; --bad-fill: #b52b2b; --bad-bg: rgba(226,114,111,.14); --bad-bd: rgba(226,114,111,.35);
  --warn: #ffa800; --warn-chip: #ffd58a; --warn-wash: rgba(255,168,0,.16); --warn-bd: rgba(255,168,0,.35);
  --accent: #5aa6dc; --accent-hover: #3c8ec8; --link: #8fc4e6;
  --accent-active: #e2eef8;   /* наведене посилання: у світлій темі #17456c нечитний на темному тлі */
  --blue-soft: rgba(60,142,200,.14); --blue-bd: rgba(255,255,255,.12);
  --n400: #7d878c; --n600: #93a6b5; --n800: #ffffff;
  --shadow-pop: 0 10px 28px rgba(0,0,0,.5); --shadow-tip: 0 6px 18px rgba(0,0,0,.45);
}

/* ── Скидання й база ────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-active); }
button { font: inherit; }

.acc {
  font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .07em; font-weight: 900;
}
.num { font-variant-numeric: tabular-nums; }
.sp { flex: 1; }

/* Фокус клавіатури (§6.3, 1-в-1): рамка #3c8ec8 + кільце 0 0 0 3px rgba(60,142,200,.28).
   Прибирати заборонено. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(60,142,200,.28);
  border-radius: var(--radius);
}
.seg a:focus-visible, .seg button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ms-night); color: #fff;
  padding: 10px 16px; font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ═══ КАРКАС (§2): шапка 50 · рейл 54 · тіло · футер ═══════════════════════ */
.layout {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  /* Колонка рейла Night на всю висоту, навіть коли сам рейл липкий і короткий */
  background: linear-gradient(90deg, var(--ms-night) 0 54px, transparent 54px);
}

/* Шапка застосунку: Night, липка, синя смуга-акцент 3 px знизу */
.ah {
  grid-column: 1 / -1; grid-row: 1;
  position: sticky; top: 0; z-index: 30;
  height: 50px;
  background: var(--ms-night); color: #fff;
  border-bottom: 3px solid var(--ms-blue);
  padding: 0 18px;
  display: flex; align-items: center; gap: 18px;
}
.ah .brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mark {
  width: 28px; height: 28px; flex: none;
  border: 2px solid var(--ms-blue); border-radius: 4px;
  display: grid; place-items: center;
  font-size: 11.5px; color: var(--ms-blue); line-height: 1;
}
.ah .brand b { display: block; font-size: 12px; letter-spacing: .13em; color: #fff; line-height: 1.2; white-space: nowrap; }
.ah .brand small { display: block; font-size: 10.5px; color: #98a3ab; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.ah .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8b969e; }
/* `align-items: center` вирівнює КОРОБКИ, а не текст: роль (10 px, капс) стояла на
   0,65 px вище за імʼя (12 px) і крапку-розділювач — на око «admin трохи вгорі».
   baseline садить усі чотири шматки на одну лінію. */
.ah .who {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  font-size: 12px; color: #c8d0d6;
  border-left: 1px solid rgba(255,255,255,.18); padding-left: 14px;
}
.ah .who b { color: #fff; font-weight: 600; }
.ah .who .role { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #8b969e; }
.ah .who a { color: #c8d0d6; }
.ah .who a:hover { color: #fff; }

/* Іконковий рейл: 54 px Night, іконки 34×34, підказка при наведенні/фокусі */
aside {
  grid-column: 1; grid-row: 2 / 4;
  position: sticky; top: 50px; align-self: start;
  height: calc(100vh - 50px);
  width: 54px;
  background: var(--ms-night);
  padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* Знак у рейлі — як у макеті 3.2.7 (renderRail: mark 30×30 над іконками) */
aside .mark { width: 30px; height: 30px; margin-bottom: 4px; font-size: 11px; }
/* Кнопка-меню рейла (§11, 768–1023): чекбокс + label без JS; на ноутбуку схована */
.rail-check, .rail-toggle { display: none; }
aside nav { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
/* Рубрика меню — тонка лінія між групами; текст лишається в DOM для читалок */
aside nav .nav-group {
  width: 34px; height: 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.14);
  margin: 4px 0 2px; font-size: 0; color: transparent;
}
aside nav .nav-group:first-child { border-top: 0; margin: 0; }
aside nav a {
  position: relative;
  width: 34px; height: 34px; border-radius: var(--radius);
  display: grid; place-items: center;
  color: #6d7a83; text-decoration: none;
}
aside nav a .ico { width: 18px; height: 18px; color: inherit; }
aside nav a span {
  position: absolute; left: 44px; top: 6px; z-index: 40;
  background: var(--ms-night); color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 500; line-height: 1.45;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
  font-family: var(--font-primary);
}
aside nav a:hover span, aside nav a:focus-visible span { opacity: 1; }
aside nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
aside nav a.active, aside nav a[aria-current="page"] { background: var(--ms-blue); color: #fff; }

/* Лише робоча зона оболонки: на сторінці входу <main> живе в іншій сітці */
.layout > main {
  grid-column: 2; grid-row: 2;
  padding: 11px 14px 22px;
  min-width: 0; max-width: none;
}
main:focus-visible { box-shadow: none; }

/* Футер робочої зони */
.foot {
  grid-column: 2; grid-row: 3;
  padding: 10px 18px;
  border-top: 1px solid var(--rule-2);
  font-size: 11px; color: var(--ink-3);
  display: flex; gap: 14px; flex-wrap: wrap;
  background: var(--surface);
}

/* ═══ БАНЕР-ГЕРОЙ (§5 Г-1, §7.1, §8 Б-1) ══════════════════════════════════
   Вилазить на всю ширину робочої зони (негативні поля), тримає надзаголовок
   шаблону → назву розділу → мета-рядок → пігулки, і під ними KPI-смугу.
   Дрібний текст стоїть ліворуч, де фон темніший за #17456c. */
.masthead.hero {
  /* §12 + §5: механізм «ліві 55 %» — підкладка Night під дрібним текстом. Токен
     --hero-gradient НЕ чіпаємо (його читає ще й .auth-plate): шаруємо в місці вжитку. */
  background: linear-gradient(90deg, rgba(11,30,49,.55) 0%, rgba(11,30,49,.55) 55%, rgba(11,30,49,0) 72%), var(--hero-gradient); color: #fff;
  margin: -11px -14px 11px;
  padding: 14px 18px 15px;
}
.strip + .masthead.hero, .flash + .masthead.hero { margin-top: 0; }
.hero .masthead-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0; margin: 0;
}
.hero .eyebrow { font-size: 10px; color: rgba(255,255,255,.7); line-height: 1.3; letter-spacing: .1em; }
.hero h1 { font-size: 18px; font-weight: 900; line-height: 1.2; margin: 3px 0 0; color: #fff; letter-spacing: .07em; font-family: var(--font-accent); text-transform: uppercase; }
.hero .dateline {
  font-size: 12px; color: rgba(255,255,255,.78); text-align: left;
  border-left: 1px solid rgba(255,255,255,.28); padding-left: 12px;
  align-self: stretch; display: flex; align-items: flex-end;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.hero .dateline b { color: #fff; font-weight: 600; }
.hero .sp { flex: 1; }
.masthead .rule-double { display: none; }

/* Стан даних у банері — пігулка з крапкою (крапка = «іконка», не лише колір).
   Стоїть на СВІТЛІЙ частині градієнта, тому проблемні стани — лише як чипи §7.7
   (§5 дозволяє праворуч лише білі рамки та pill.gh/pill.or): застарілі — Orange
   із текстом #3a2600 і знаком ⚠, недоступне — заливка --bad-fill і знак ⛔. */
.freshness {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; line-height: 1.5;
  padding: 2px 9px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.3); background: rgba(11,30,49,.70); color: #fff;
  white-space: nowrap;
}
.freshness .dot { width: 7px; height: 7px; border-radius: 50%; background: #8fc46f; flex: 0 0 7px; }
.freshness.is-stale { background: var(--ms-orange); border-color: var(--ms-orange); color: #3a2600; font-weight: 700; }
.freshness.is-stale .dot { display: none; }
.freshness.is-stale::before { content: '\26A0\FE0E'; font-size: 10.5px; }
.freshness.is-down { background: var(--bad-fill); border-color: var(--bad-fill); color: #fff; font-weight: 700; }
.freshness.is-down .dot { display: none; }
.freshness.is-down::before { content: '\26D4\FE0E'; font-size: 10.5px; }

/* Вибір шаблону маршруту (D-73) — компактний дропдаун у банері, щоб укластись у 136 px */
.hero .picker > summary {
  /* §5: пікер стоїть на СВІТЛІЙ частині — плашка Night, та сама, що в .freshness
     (біла .16 давала .lbl лише 2,25:1); біла рамка §5 лишається */
  background: rgba(11,30,49,.70); border-color: rgba(255,255,255,.3); color: #fff;
  font-size: 11px; padding: 2px 9px; min-height: 0;
}
.hero .picker > summary .lbl { color: rgba(255,255,255,.75); }
.hero .picker > summary .caret { color: rgba(255,255,255,.75); }
/* Значення пікера успадковувало --ink (#0a0a0a у світлій темі) з правила :587 і
   після переходу плашки на Night давало 1,6:1 — у банері воно завжди біле. */
.hero .picker > summary .picker-value { color: #fff; }
.hero .picker > summary:hover, .hero .picker[open] > summary { border-color: #fff; background: rgba(11,30,49,.82); }
.tpl-picker .picker-panel { left: auto; right: 0; min-width: 250px; }
.picker-panel.route-bar { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.picker-panel .chip {
  display: flex; justify-content: space-between; gap: 10px;
  border: 0; border-radius: var(--radius); padding: 6px 8px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--ink-2); white-space: normal;
}
.picker-panel .chip:hover { background: var(--surface-2); color: var(--ink); }
.picker-panel .chip.on { background: var(--blue-soft); color: var(--link); font-weight: 600; }
.picker-panel .chip.is-off { border: 0; opacity: .7; }

/* KPI-смуга (К-1): grid, напівпрозора, значення й дельта в один рядок */
.kpi-lede {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));   /* §7.1: смуга на шість показників */
  margin: 12px 0 0;
  background: rgba(11,30,49,.70); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius);
}
.kpi-lede.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.kpi {
  position: relative; min-width: 0;
  padding: 8px 12px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.kpi:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.kpi:last-child { border-right: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.kpi .l {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,.75); line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Знак «і» біля назви показника (§7.8): пояснення показується при наведенні */
.kpi .l::after {
  content: 'i'; display: inline-grid; place-items: center;
  width: 13px; height: 13px; margin-left: 5px; vertical-align: 1px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  font-size: 9px; font-weight: 700; font-style: normal; line-height: 1; color: rgba(255,255,255,.85);
}
/* §7.2 К-1: значення й дельта в ОДНОМУ рядку — перенос ламав висоту банера Б-1.
   Дельта стискається з трикрапкою, якщо не влазить, але на новий рядок не йде. */
.kpi .row { display: flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; line-height: 1.25; min-width: 0; }
.kpi .d { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi .v {
  display: inline; font-size: 19px; font-weight: 700; letter-spacing: 0; line-height: 1.25;
  color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kpi.lede .v { font-size: 19px; }
.kpi .v.is-empty { font-size: 19px; font-weight: 500; color: rgba(255,255,255,.8); letter-spacing: 0; }
.kpi .d { font-size: 11px; font-weight: 600; color: var(--b100); font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.kpi .d .cmp { font-weight: 400; color: rgba(255,255,255,.62); }
.kpi .d .up   { color: #8fc46f; font-weight: 600; }   /* §10 Green dark, 5,31:1 на смузі */
.kpi .d .down { color: #f3c6c6; font-weight: 600; }   /* §4.5 Red bd, 7,07:1; #e2726f тут лише 3,54 */
.kpi .d .flat { color: #c1dced; font-weight: 600; }   /* §4.2 Blue 100, 7,60:1 */
/* Пояснення показника — тултіп під «і» (текст лишається в DOM) */
.kpi .def {
  display: none; position: absolute; left: 12px; top: calc(100% - 4px); z-index: 35;
  max-width: 320px; min-width: 200px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: var(--radius-panel); box-shadow: var(--shadow-tip);
  padding: 8px 11px; font-size: 12px; line-height: 1.45; font-weight: 300; font-style: italic;
}
.kpi:hover .def, .kpi:focus-within .def { display: block; }
/* Клік по «Звернення» розкладає за типами (D-72 п.1): посилання розтягнуте на клітинку */
.kpi.lede .kpi-more { margin: 0; font-size: 10.5px; position: static; }
.kpi.lede .kpi-more a {
  position: absolute; inset: 0; border-radius: var(--radius) 0 0 var(--radius);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 8px 12px 0; color: rgba(255,255,255,.72); text-decoration: none; line-height: 1.3;
}
.kpi.lede:hover { background: rgba(255,255,255,.1); }
.kpi.lede .kpi-more a:hover { color: #fff; }

/* Ряд маршруту в робочій зоні: «хлібні крихти» + корені (виміри) */
.route-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 9px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--accent); }
.crumbs a { color: var(--link); text-decoration: none; padding: 2px 6px; border-radius: var(--radius); }
.crumbs a:hover { background: var(--crumb-hover); }
.crumbs b { color: var(--ink); font-weight: 700; }
.crumbs .sep { color: var(--muted); }

.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tabs a {
  font-size: 11.5px; font-weight: 600; line-height: 1.5; padding: 2px 9px;
  border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--surface);
  color: var(--ink-2); text-decoration: none; letter-spacing: 0; text-transform: none; margin: 0;
}
.tabs a:hover { border-color: var(--accent); color: var(--link); }
.tabs a.active { background: var(--blue-soft); border-color: var(--blue-bd); color: var(--link); }

/* Шапка адмінрозділів (.head) і сторінок (.page-head) */
.head, .page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 6px 0 9px; border-bottom: 1px solid var(--rule-2);
}
.head h1, .page-head h1 {
  font-family: var(--font-accent); font-size: 18px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .07em; line-height: 1.25; color: var(--ink);
}
.head .sub, .page-head .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.head h2 { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.head a { font-size: 12.5px; }

/* ═══ ПАНЕЛЬ ФІЛЬТРІВ (§6.2) — біла панель r6 з рамкою ═════════════════════ */
.filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--rule-2); border-radius: var(--radius-panel);
  background: var(--surface); padding: 8px 11px; margin: 0 0 10px;
}
form.filters { margin-bottom: 14px; }
.filters .lbl { font-size: 12px; font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.filters .right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filters .field-group {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  border: 1px solid var(--rule-2); background: var(--input-bg); border-radius: var(--radius);
  padding: 0 0 0 10px; font-size: 12px; color: var(--ink-2);
}
.filters .field-group:hover, .filters .field-group:focus-within { border-color: var(--accent); }
/* §12 «видимий фокус на всіх інтерактивних елементах»: з <select> кільце знято
   нижче, тож воно переїжджає на обгортку — інакше фокус і :hover не відрізнити */
.filters .field-group:focus-within { box-shadow: 0 0 0 3px rgba(60,142,200,.28); }
.filters .field-group select {
  border: 0; background: transparent; padding: 3px 4px 3px 2px; min-height: 26px;
  font-size: 12px; font-weight: 600; color: var(--ink); max-width: 210px;
}
.filters .field-group select:focus-visible { box-shadow: none; }
.filters .field-group .btn-slim { margin: 2px; }
.filters .chips {
  font-size: 11px; font-weight: 600; color: var(--link); background: var(--blue-soft);
  border-radius: var(--radius); padding: 1px 6px; white-space: nowrap;
}
.filters .right .field-group { padding-right: 0; }

/* Множинний фільтр (D-72 п.6) як фільтр-кнопка В6 §6.2 («Філія: усі ▾») із
   множинним вибором У ПОПАПІ (§1): у полі — лише значення або лічильник «2 обр.»,
   листбокс живе в розкривній панелі (details/summary, без JS). Раніше
   select[multiple] size=1 заввишки 26 px домальовував половину другого рядка —
   читалось як зламане поле — і панель фільтрів переносилась на два поверхи. */
.picker.multi-picker > summary { border-color: var(--rule-2); color: var(--ink-2); }
.picker.multi-picker > summary .lbl { color: var(--ink-2); }
.picker.multi-picker > summary .caret { color: var(--ink-3); }
.picker.multi-picker > summary:hover, .picker.multi-picker[open] > summary { border-color: var(--accent); background: var(--blue-soft); }
.picker.multi-picker.is-on > summary { border-color: var(--accent); color: var(--link); }
.picker.multi-picker.is-on > summary .lbl, .picker.multi-picker.is-on > summary .caret { color: var(--link); }
.picker-form { display: grid; gap: 8px; padding: 8px; min-width: 250px; }
.picker-form select[multiple] {
  width: 100%; height: auto; overflow: auto; font-size: 12.5px; padding: 4px;
  border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.picker-form select[multiple] option { padding: 4px 6px; border-radius: var(--radius); }
.picker-form .picker-actions { display: flex; align-items: center; gap: 8px; }
.picker-form .picker-hint { margin-top: 0; }

.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.seg a, .seg button {
  display: inline-flex; align-items: center; min-height: 32px;   /* §12: клікабельна зона ≥ 32 px (було ≈27,4) */
  border: 0; border-right: 1px solid var(--rule-2);
  background: transparent; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.45;
  color: var(--ink-2); text-decoration: none; padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg a:hover, .seg button:hover { background: var(--rule); color: var(--ink); }
.seg a.active, .seg button.active, .seg a.on, .seg button.on, .seg [aria-pressed="true"] {
  background: var(--accent-fill); color: #fff; font-weight: 700;
}
/* Сегмент періоду в шапці — темний варіант (брендовий Celestian, текст 700) */
.ah .seg { border-color: rgba(255,255,255,.22); background: transparent; }
.ah .seg a, .ah .seg button { color: #c8d0d6; border-right-color: rgba(255,255,255,.18); font-size: 12px; }
.ah .seg a:hover, .ah .seg button:hover { background: rgba(255,255,255,.08); color: #fff; }
.ah .seg a.active, .ah .seg button.active { background: var(--accent-fill); color: #fff; font-weight: 700; }

input, select, textarea {
  font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius);
  padding: 5px 9px;
}
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
textarea { width: 100%; min-height: 150px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
label { display: block; font-size: 10.5px; color: var(--ink-3); margin-bottom: 4px;
        text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.field { margin-bottom: 14px; }
.inp { border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 5px 9px; font-size: 12.5px; background: var(--surface); color: var(--ink); }

/* Фільтр-факт (одна філія у скоупі; довідник ще порожній) */
.static-filter { font-size: 12px; font-weight: 600; color: var(--ink); padding-right: 10px; }
.static-filter.is-pending { font-weight: 300; color: var(--ink-3); cursor: help; }

/* Розкривний вибір періоду (details/summary, без JS) — фільтр-кнопка .f.blue */
.picker { position: relative; }
.picker > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--input-bg); padding: 3px 10px; font-size: 12px; color: var(--link);
  white-space: nowrap; line-height: 1.5;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary:hover { background: var(--blue-soft); }
.picker[open] > summary { background: var(--blue-soft); }
.picker > summary .lbl { color: var(--link); }
.picker > summary .picker-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.picker > summary .caret { color: var(--link); font-size: 10px; }

.picker-panel {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; min-width: 274px;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop); padding: 6px; max-height: 74vh; overflow: auto;
}
.picker-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 9px 8px 4px;
}
.picker-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius);
  font-size: 13px; color: var(--ink-2); text-decoration: none;
}
.picker-row:hover { background: var(--surface-2); color: var(--ink); }
.picker-row .tick { width: 14px; flex: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--accent); }
.picker-row.on { color: var(--link); font-weight: 600; background: var(--blue-soft); }
.picker-custom { border-top: 1px solid var(--rule); margin-top: 6px; padding: 10px 8px 4px; }
.picker-custom label { margin-bottom: 6px; }
.picker-custom-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.picker-custom-row input { min-width: 0; width: 100%; font-size: 12px; padding: 5px 7px; }
.picker-custom-row span { color: var(--ink-3); }
.picker-custom-row .btn { grid-column: 1 / -1; margin-top: 8px; justify-content: center; }
/* Обмеження — поруч з елементом, не модалкою (§9) */
.picker-hint { margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.45; font-style: italic; font-weight: 300; }

/* ═══ КНОПКИ (§6.2–6.3) ═══════════════════════════════════════════════════
   Головна .btn — одна на екран: заливка Blue 600 під білий текст (6,49:1). */
.btn, .btn-save {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: #fff; background: var(--accent-fill);
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 5px 13px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover, .btn-save:hover { background: var(--accent-active); color: #fff; }
/* Натиснута (§6.3): відгук на саме натискання, а не на наведення. Зсув 1 px
   всередину + темніша заливка; для вторинних і прозорих — лише зсув і тло. */
.btn:active, .btn-save:active, .btn.pr:active { background: var(--b800); color: #fff; transform: translateY(1px); }
.btn.ghost:active, .btn.se:active, .btn-reset:active, .btn.gh:active,
.filters .export:active, .btn.ic:active { background: var(--rule); transform: translateY(1px); }
.btn.at:active { background: var(--o600); border-color: var(--o600); transform: translateY(1px); }
.btn.danger:active { background: var(--b900); border-color: var(--ms-night); transform: translateY(1px); }
.btn[disabled]:active, .btn.dis:active, .btn-reset.is-off:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn:active, .btn-save:active { transform: none; } }
.btn.pr { background: var(--accent-fill); color: #fff; }
.btn.pr:hover { background: var(--accent-active); }
/* Вторинна: білий, рамка, текст темний; hover — синя рамка */
.btn.ghost, .btn.se, .filters .export, .btn-reset {
  background: var(--surface); color: var(--n800); border-color: var(--rule-2); font-weight: 500;
}
.btn.ghost:hover, .btn.se:hover, .btn-reset:hover { background: var(--surface); border-color: var(--accent); color: var(--link); }
/* Прозора: експорт, дрібні дії */
.btn.gh, .filters .export { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; }
.btn.gh:hover, .filters .export:hover { background: var(--rule); color: var(--ink); border-color: transparent; }
.filters .export { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; min-height: 28px; }
.filters .export .ico { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-3); }
.filters .export:hover .ico { color: var(--ink); }
/* Дія-увага — лише де є проблема */
.btn.at { background: var(--ms-orange); border-color: var(--ms-orange); color: #3a2600; font-weight: 700; }
.btn.danger { background: var(--bad-fill); border-color: var(--bad-fill); color: #fff; }
/* hover — без вигаданого темнішого червоного (§14-a): та сама заливка, рамка Night */
.btn.danger:hover { background: var(--bad-fill); border-color: var(--ms-night); color: #fff; }
/* Іконкова 34×34 */
.btn.ic { width: 34px; height: 34px; padding: 0; justify-content: center; border-color: var(--rule-2); background: var(--surface); color: var(--ink-2); }
/* Недоступна */
.btn[disabled], .btn.dis, .btn-reset.is-off {
  background: var(--rule); color: var(--n400); border-color: transparent; cursor: default; opacity: 1;
}
.btn[disabled]:hover, .btn-reset.is-off:hover { background: var(--rule); color: var(--n400); border-color: transparent; }
.btn-slim { padding: 2px 8px; font-size: 11px; }
/* «Скинути фільтри (N)» стоїть одразу за фільтрами (§6.2), не притиснута праворуч:
   margin-left:auto разом із .right переносив панель на другий поверх на 1440 px */
.btn-reset.is-off { cursor: not-allowed; }

/* Перемикач теми — іконкова кнопка; показується лише «протилежна» іконка */
.theme-toggle {
  display: inline-grid; place-items: center; width: 34px; height: 34px;   /* §6.2 іконкова 34×34; 28×28 провалювало ще й §12 «зона ≥ 32×32» */
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2); cursor: pointer; padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--link); }
.theme-toggle .ico { width: 15px; height: 15px; display: none; }
.theme-toggle .ico:first-of-type { display: block; }
:root[data-theme="dark"] .theme-toggle .ico:first-of-type { display: none; }
:root[data-theme="dark"] .theme-toggle .ico:last-of-type { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-toggle .ico:first-of-type { display: none; }
  :root:where(:not([data-theme="light"])) .theme-toggle .ico:last-of-type { display: block; }
  :root[data-theme="light"] .theme-toggle .ico:first-of-type { display: block; }
  :root[data-theme="light"] .theme-toggle .ico:last-of-type { display: none; }
}

/* ═══ ПІГУЛКИ Й ЧИПИ (§7.7) ═══════════════════════════════════════════════
   .pill у шаблонах — СТАН (ok/warn/off/bad/mute) → чип стану В6: іконка + слово.
   .pill.blue/.gh/.or — мітки В6 (шаблон, лічильник у банері). */
.pill {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1.5;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 1px 9px; border-radius: var(--radius);
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2);
  white-space: nowrap; vertical-align: middle;
}
.pill.ok   { background: var(--good-bg); color: var(--good); border-color: var(--good-bd); }
.pill.ok::before { content: '✓'; font-size: 10px; }
.pill.warn, .pill.off { background: var(--warn-wash); color: var(--warn-chip); border-color: var(--warn-bd); }
.pill.warn::before, .pill.off::before { content: '\26A0\FE0E'; font-size: 10.5px; }
.pill.bad  { background: var(--bad-fill); color: #fff; border-color: var(--bad-fill); }
.pill.bad::before { content: '\26D4\FE0E'; font-size: 10.5px; }
.pill.mute { background: var(--rule); color: var(--ink-3); border-color: transparent; }
.pill.blue { background: var(--blue-soft); border-color: var(--blue-bd); color: var(--link); }
.pill.gh   { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.pill.or   { background: var(--ms-orange); border-color: var(--ms-orange); color: #3a2600; font-weight: 700; }
a.pill { text-decoration: none; }
a.pill:hover { border-color: var(--accent); color: var(--link); }
a.pill.or:hover { color: #3a2600; border-color: var(--o600); background: var(--o600); }

/* .chip у шаблонах — шаблон маршруту / вимір розкладу; .stale/.down/.nodata — стани В6 */
.chip {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1.5;
  padding: 2px 9px; min-height: 32px; border: 1px solid var(--rule-2); border-radius: var(--radius);
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; background: var(--surface);
}
/* §12: «мінімальна клікабельна зона 32×32 px (У ЩІЛЬНІЙ ТАБЛИЦІ — РЯДОК ЦІЛКОМ)» —
   виняток паспорта, інакше 32 px усередині td зламали б рядок Т-2 рівно 38 px */
td .chip { min-height: 0; }
.chip:hover { border-color: var(--accent); color: var(--link); }
.chip.on { background: var(--blue-soft); border-color: var(--blue-bd); color: var(--link); }
.chip.is-off { color: var(--ink-3); border-style: dashed; cursor: help; opacity: .75; font-weight: 500; }
.chip.stale { color: var(--warn-chip); background: var(--warn-wash); border-color: var(--warn-bd); }
.chip.down { color: #fff; background: var(--bad-fill); border-color: var(--bad-fill); }
.chip.nodata { color: var(--ink-3); background: var(--rule); border-color: transparent; }
/* §7.7 «чип завжди має іконку + слово, не лише колір» — ті самі знаки, що в .pill */
.chip.stale::before { content: '\26A0\FE0E'; font-size: 10.5px; }
/* \FE0E обовʼязковий: без нього ⛔ малюється КОЛЬОРОВОЮ емодзі — рожевий диск,
   який ігнорує color:#fff чипа і зливається з його червоною заливкою. */
.chip.down::before { content: '\26D4\FE0E'; font-size: 10.5px; }
.chip.nodata::before { content: '\2014'; font-size: 10.5px; }

/* Чип обраного значення фільтра */
.fchip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-2);
  background: var(--surface); border-radius: var(--radius); padding: 2px 4px 2px 10px; font-size: 12px; color: var(--ink-2);
}
.fchip button { border: 0; background: transparent; color: var(--ink-3); font-size: 14px; line-height: 1; padding: 0 5px; border-radius: 50%; cursor: pointer; }
.fchip button:hover { background: var(--rule); color: var(--ink); }
.f, .fbtn {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule-2);
  background: var(--input-bg); border-radius: var(--radius); padding: 4px 10px; font-size: 12px; color: var(--ink-2);
}
.f b, .fbtn b { color: var(--ink); font-weight: 600; }
.f:hover, .fbtn:hover { border-color: var(--accent); }
.f.blue { border-color: var(--accent); color: var(--link); }

/* Смуги шаблонів/розкладу */
.route-bar, .breakdown-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px;
}
.route-bar .lbl, .breakdown-bar .lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 2px;
}

/* Зведена дельта періоду біля заголовка графіка (§7.3) */
.badge-delta {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius);
  font-size: 11px; font-weight: 600; line-height: 1.5; vertical-align: middle; letter-spacing: 0;
  border: 1px solid var(--rule-2); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* §12: кегль 11 px — дрібний текст, поріг 4,5:1. На плашці --good-bg #4f8036 давав
   лише 4,25:1 (у темній --bad на --bad-bg 4,04:1); бейдж і так лежить на --surface
   панелі .viz, тож знімаємо тільки заливку — рамка лишає плашку впізнаваною. */
.badge-delta.is-good { color: var(--good); background: var(--surface); border-color: var(--good-bd); }
.badge-delta.is-bad  { color: var(--bad);  background: var(--surface);  border-color: var(--bad-bd); }
.badge-delta.is-flat { color: var(--ink-2); }
.badge-delta.is-nobase { color: var(--warn-chip); background: var(--warn-wash); border-color: var(--warn-bd); font-weight: 500; cursor: help; }

/* Дельти В6 (варіант Б): лише значуща зміна фарбується, завжди зі стрілкою */
.up { color: var(--good); font-weight: 600; }
.dn, .down { color: var(--bad); font-weight: 600; }
.nt { color: var(--ink-2); font-weight: 600; }

/* ═══ ПАНЕЛІ Й ФІГУРИ (§7) ═══════════════════════════════════════════════
   Р-1: графік + сповіщення (1fr · 300 px), решта панелей — окрема сітка. */
.viz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; margin-bottom: 10px; align-items: start; }
.viz-grid.cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.viz-grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.viz, .panel {
  min-width: 0; margin: 0 0 10px;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-panel);
  padding: 10px 12px;
}
.viz-grid > .viz { margin-bottom: 0; }
.viz h3, .panel h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); line-height: 1.4;
}
.viz .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.viz .canvas { height: 205px; margin-top: 9px; }
.viz .canvas.tall { height: 276px; }
.ph { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.ph .sp { flex: 1; }
.viz .ph { margin-bottom: 0; }
.viz .ph h3 { flex: 0 1 auto; }
/* Виноска — «пояснення від системи»: 11,5 px #6b757c (§7.5, 4,71:1), 300 Italic
   цілою фразою; посилання прямі */
.viz > footer, .viz > figcaption, .hint2 {
  margin: 8px 0 0; padding: 0; border: 0;
  font-size: 11.5px; color: var(--ink-3); font-style: italic; font-weight: 300; line-height: 1.45;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start;
}
.viz > footer a, .viz > figcaption a { font-style: normal; font-weight: 500; color: var(--link); text-decoration: none; }
.viz > footer a:hover, .viz > figcaption a:hover { text-decoration: underline; }
/* §7.5/§7.8: знак «і» біля назви показника в шапці таблиці — те саме коло Ø 14,
   що в .prov summary .i. th успадковує uppercase + letter-spacing, тож обидва
   скидаємо явно, інакше кирилична «і» друкувалась би як «І». */
.viz th .i {
  display: inline-grid; place-items: center; width: 14px; height: 14px;
  margin-left: 6px; padding: 0; vertical-align: -2px;
  border: 1px solid var(--n400); border-radius: 50%; background: transparent;
  font-family: inherit; font-size: 9px; font-weight: 700; font-style: normal;
  line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--ink-3); cursor: help;
}
.viz th .i:hover { border-color: var(--accent); color: var(--accent); }
.viz .table-wrap { margin-top: 8px; }
.viz .breakdown-bar { margin-top: 6px; }

/* Походження цифри — знак «і» Ø14, тултіп-блок під панеллю (у друку розкрито) */
.prov { position: relative; }
.prov summary {
  list-style: none; cursor: pointer; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-weight: 500;
}
.prov summary::-webkit-details-marker { display: none; }
.prov summary .i {
  display: inline-grid; place-items: center; width: 14px; height: 14px; flex: 0 0 14px;
  border: 1px solid var(--n400); border-radius: 50%; font-size: 9px; font-weight: 700;
  font-style: normal; line-height: 1; color: var(--ink-3);
}
.prov summary:hover, .prov[open] summary { color: var(--link); }
.prov summary:hover .i, .prov[open] summary .i { border-color: var(--accent); color: var(--accent); }
/* «Звідки цифра» містить назви таблиць без пробілів (marts.rpt_leads і т. ін.) —
   у панелі 300 px вони не переносились і виїжджали за картку. */
.prov .prov-body {
  margin-top: 6px; padding: 8px 11px; max-width: 420px; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-panel); box-shadow: var(--shadow-tip);
  font-family: var(--mono); font-size: 10.5px; font-style: normal; font-weight: 400;
  color: var(--ink-2); line-height: 1.6;
}
.tip {
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-panel); padding: 8px 11px;
  font-size: 12px; box-shadow: var(--shadow-tip); display: inline-block; max-width: 320px;
}
.tip b { display: block; font-size: 12.5px; margin-bottom: 3px; }

/* ═══ СТАНИ ЕКРАНА (§9) ══════════════════════════════════════════════════ */
.state {
  display: grid; place-items: center; text-align: center; gap: 4px;
  min-height: 200px; padding: 22px 10px;
  border: 1px dashed var(--rule-2); border-radius: var(--radius-panel);
  background: var(--surface); color: var(--n600);
}
.viz .canvas + .state, .state.compact { min-height: 0; }
.viz .state { margin-top: 9px; }
.state .state-t { font-size: 13px; font-weight: 300; font-style: italic; color: var(--n600); }
.state .state-d { font-size: 12px; font-weight: 300; font-style: italic; color: var(--ink-3); max-width: 44ch; line-height: 1.5; }
.state .ico { width: 20px; height: 20px; color: var(--ink-3); }   /* §12 «іконки ≥ 3:1»: --n400 давав 1,85:1 на --surface */
.state.stale { border-style: solid; border-color: var(--warn-bd); background: var(--warn-wash); }
.state.stale .state-t { color: var(--warn-chip); font-style: normal; font-weight: 600; }   /* --warn #b06f00 давав 3,76:1 на --warn-wash */
.state.down  { border-style: solid; border-color: var(--bad-bd); }
.state.down .state-t { color: var(--bad); font-style: normal; font-weight: 600; }
.state.down .ico { color: var(--bad); }
.empty {
  padding: 22px 10px; text-align: center; color: var(--n600); font-size: 13px;
  border: 1px dashed var(--rule-2); border-radius: var(--radius-panel); background: var(--surface);
  font-style: italic; font-weight: 300;
}
.skel { height: 11px; border-radius: var(--radius); background: linear-gradient(90deg, var(--rule), var(--rule-2), var(--rule)); display: block; margin-bottom: 7px; }

/* ═══ СМУГИ ПОВІДОМЛЕНЬ І ТОСТ ═══════════════════════════════════════════ */
.strip, .flash, .note {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  border: 0; border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--blue-soft); padding: 9px 13px; margin: 0 0 10px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
/* .strip і .flash навмисне поділені в шаблонах на <span class="tag"> + <span> + <a>,
   тому flex їм пасує. .note ж несе СУЦІЛЬНУ прозу з інлайновими <b>, <span class="mono">
   і чипами .pill — а flex робить окремим елементом кожен текстовий вузол, тож речення
   розсипалось на шматки з проміжками 10 px і переносами посеред фрази (bot-config,
   audit-log, dialogs, integrations, alert_rules_form). Блоковий потік — це те, що для
   .note вже стоїть у друці (@media print нижче), тепер екран із ним збігається. */
.note { display: block; }
.strip b, .note b, .note strong { color: var(--ink); }
.strip .tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface); color: var(--link); border: 1px solid var(--blue-bd);
  border-radius: var(--radius); padding: 1px 8px; flex: 0 0 auto; align-self: center; line-height: 1.5;
}
.strip.warn, .note.warn { background: var(--warn-wash); border-left-color: var(--warn-edge); }
.strip.warn .tag { background: var(--warn-wash); color: var(--warn-chip); border-color: var(--warn-bd); }
.strip.imp .tag { background: var(--accent-fill); color: #fff; border-color: transparent; }
.flash.err { background: var(--bad-bg); border-left-color: var(--bad); color: var(--bad); }
.strip a, .flash a, .note a { color: var(--link); font-weight: 500; }
/* Підтвердження дії — тост (§7.8): Night, знизу по центру, автоховання 2,6 с.
   Помилки лишаються на екрані (смуга), тостом не ховаються. */
.strip.ok-flash, .flash.ok {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 40px);
  background: var(--ms-night); color: #fff;
  border: 0; border-radius: 9px; padding: 9px 15px; margin: 0;
  font-size: 12.5px; box-shadow: var(--shadow-toast);
  animation: toast-hide .4s ease 2.6s forwards;
}
@keyframes toast-hide { to { opacity: 0; visibility: hidden; transform: translate(-50%, 14px); } }
@media (prefers-reduced-motion: reduce) { .strip.ok-flash, .flash.ok { animation: none; } }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ms-night); color: #fff; border-radius: 9px; padding: 9px 15px; font-size: 12.5px; box-shadow: var(--shadow-toast); z-index: 60; }

.hint { font-size: 11.5px; color: var(--ink-3); margin: 8px 0 10px; font-style: italic; font-weight: 300; line-height: 1.45; }
.hint2 { display: block; }
.dim, td.dim { color: var(--ink-3); }
/* Технічні рядки (адреси, коди, назви полів) не мають пробілів, тому в вузькій
   колонці розпирали сторінку замість переносу — на 360 px це давало 20 px скролу
   на «новому користувачі». */
.mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.wrap { max-width: 520px; overflow-wrap: anywhere; }

/* ═══ ТАБЛИЦІ (§7.5 Т-2: рядок 38 px, розділювачі ніколи не чорні) ═══════ */
/* Таблиця прокручується всередині себе (§11), але сам факт прокрутки був невидимий:
   на 1440 px таблиця розрізу — 1590 px при полі 1317, і заголовок обривався
   посеред слова без жодного натяку. Класичні тіні прокрутки: криючі шари
   (background-attachment: local) їдуть разом із вмістом і відкривають тіньові
   (scroll) рівно тоді, коли з того боку є що гортати. Нових кольорів немає. */
.table-wrap {
  overflow-x: auto; margin: 0;
  background:
    linear-gradient(to right, var(--surface) 40%, rgba(0,0,0,0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 40%, rgba(0,0,0,0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11,30,49,.14), rgba(0,0,0,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11,30,49,.14), rgba(0,0,0,0)) right center / 11px 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: transparent; }
th {
  text-align: left; padding: 0 10px 7px; white-space: nowrap; vertical-align: bottom;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: transparent;
  border-bottom: 1px solid var(--rule-2);
}
/* Т-2: рядок рівно 38 px = 9 + 19 + 9 + межа 1 (12,5 px × 1.52 = 19 px) */
td {
  padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 19px;
  font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink);
}
td:first-child { color: var(--ink); }
tbody tr:hover td { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: 1px solid var(--rule-2); }
th.num, td.num { text-align: right; white-space: nowrap; }
td a { color: var(--ink); font-weight: 600; text-decoration: none; }
td a:hover { color: var(--link); text-decoration: underline; }
/* Рядок «Разом» — останній, фон n100, 600, без нижньої межі */
tfoot th, tfoot td {
  background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 12.5px;
  text-transform: none; letter-spacing: 0; padding: 9px 10px; border: 0; vertical-align: top; line-height: 19px;
}
/* Службовий рядок «Без прив'язки …» (D-74) — БЕЗ курсиву: назви не курсивлять */
tr.is-service td, tr.svc td { background: var(--surface-2); color: var(--n600); }
tr.is-service td:first-child, tr.svc td:first-child { font-style: normal; }
tr.is-service td a { color: var(--n600); }
i.hint, td .hint {
  display: inline; font-size: 10px; font-style: normal; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px dotted var(--n400); cursor: help; margin: 0 0 0 6px; line-height: 1;
}
tr.total td { background: var(--surface-2); border-bottom: 0; font-weight: 600; }
/* Таблиця рівня: назва ліворуч, ширше; клік по рядку = крок маршруту */
.viz table td:first-child { white-space: normal; min-width: 200px; }
.viz tbody tr:has(td a) { cursor: pointer; }
.nm { font-weight: 600; }
.nm small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); margin-left: 17px; line-height: 1.45; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; background: var(--n400); vertical-align: 0; }
/* Колір каналу — за КОДОМ групи, не за порядком рядків (§4.6, §14-i). Група поза
   чотирма кодами В6 (crm, manual) — послідовно нейтральна: і крапка, і смуга n400,
   а не сіра крапка з синьою смугою в тому самому рядку. */
[data-group] .dot, [data-group] .track i { background: var(--n400); }
[data-group="ads"] .dot, [data-group="ads"] .track i         { background: var(--series-1); }
[data-group="marketplace"] .dot, [data-group="marketplace"] .track i { background: var(--series-2); }
[data-group="organic"] .dot, [data-group="organic"] .track i { background: var(--series-3); }
[data-group="telephony"] .dot, [data-group="telephony"] .track i,
[data-group="chat"] .dot, [data-group="chat"] .track i       { background: var(--series-4); }
/* Частка (Ч-1): у таблиці — число + трек 54×6; у панелі частки — рядок
   «назва | N · xx,x %» і трек на 100 % ширини, найбільший рядок заповнює трек */
.share { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.track { display: inline-block; width: 54px; height: 6px; border-radius: 4px; background: var(--rule); overflow: hidden; vertical-align: middle; }
.track.full { display: block; width: 100%; }
.track i { display: block; height: 100%; border-radius: 4px; background: var(--series-1); }
.share-list { display: grid; gap: 9px; margin-top: 9px; }
.share-row { display: block; font-size: 12.5px; min-width: 0; }
.share-row .share-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.share-row .share-name { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row .share-val { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.share-row .track.full { margin-top: 4px; }

/* ═══ СПОВІЩЕННЯ (§7.6 С-2): кольорова межа зліва + дрібний знак ═════════
   Таблиця «Активні сповіщення» у бічній колонці 300 px рендериться списком:
   кожен рядок — картка з межею статусу; шапка таблиці схована лише візуально. */
.viz.alerts .table-wrap { overflow: visible; }
.viz.alerts table, .viz.alerts tbody { display: block; }
.viz.alerts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.viz.alerts tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: start;
  border-left: 3px solid var(--warn-edge); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--al-bg); padding: 7px 10px; margin-bottom: 6px;
}
.viz.alerts tr:last-child { margin-bottom: 0; }
.viz.alerts tr:hover { background: var(--al-hover); }
.viz.alerts tbody tr:hover td { background: transparent; }
.viz.alerts td {
  display: block; padding: 0; border: 0; background: transparent; text-align: left;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.35;
}
/* Розкладка картки. Друга колонка тримає ЛИШЕ кнопку «✓» (28 px) — і саме тому
   пігулка доставки має власний рядок. Було навпаки: пігулка стояла в колонці 2,
   а «⛔ адресат без Telegram» у ній нерозривний і завширшки 154 px. У панелі
   300 px заголовку лишалось 115 px, і слово «Спрацювання» (121 px разом зі
   знаком) ЗАЇЗДИЛО під пігулку — саме це видно на скріншоті прода 07.09.
   Розкладка більше не залежить від довжини ярлика доставки: додати до
   ALERT_DELIVERY_LABELS довший статус тепер безпечно. */
.viz.alerts td:nth-child(1) { grid-column: 1; grid-row: 2; }
.viz.alerts td:nth-child(2) { grid-column: 1; grid-row: 1; position: relative; padding-left: 16px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* Рівень (§7.6): у даних рядка є лише статус ДОСТАВКИ, не природа події — тому
   кожне активне спрацювання = попередження ⚠ Orange; доставка впала (failed) =
   критичне ⛔ Red. Зелена «позитивна подія» зі статусу доставки не виводиться. */
.viz.alerts td:nth-child(2)::before {
  content: '\26A0\FE0E'; position: absolute; left: 0; top: 0;
  color: var(--warn); font-size: 11px; font-weight: 700; line-height: 1.5;
}
.viz.alerts td:nth-child(3) { grid-column: 1 / -1; grid-row: 4; font-variant-numeric: tabular-nums; }
.viz.alerts td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; margin-top: 3px; }
.viz.alerts td:nth-child(5) { grid-column: 2; grid-row: 1; }
.viz.alerts tr:has(.pill.bad) { border-left-color: var(--bad); }
.viz.alerts tr:has(.pill.bad) td:nth-child(2)::before { content: '\26D4\FE0E'; color: var(--bad); font-size: 10.5px; }
/* Контекст спрацювання (AC-M5-28 «тип і опис», AC-M4-25 «величина відхилення»)
   живе ВСЕРЕДИНІ третьої клітинки: розкладку картки тримає nth-child, і шоста
   колонка зламала б і її, і друковану таблицю. */
/* Правила ШИРОКИХ таблиць розрізу, які тут не діють. Обидва зняті за вимірами на
   проді 07.09: у картці 314 px `table.scrollWidth` був 546 — звідси горизонтальний
   скрол усієї сторінки і опис спрацювання, що йшов одним рядком під кнопку «✓».
     · `min-width: 200px` (перша колонка = назва філії/каналу) розпирало клітинку
       з датою до 200 px у колонці сітки завширшки 129 px;
     · `white-space: nowrap` у `td.num` (щоб не рвались числа) не давало
       переноситись ОПИСУ, який лежить у тій самій клітинці поруч із числами.
   Ставити нерозривність назад на `.al-nums` не можна: коли чисел немає, там
   лежить речення «значення не збереглося в журналі». */
.viz.alerts td:first-child { min-width: 0; }
.viz.alerts td.num { white-space: normal; }
.viz.alerts .al-nums, .viz.alerts .al-dev, .viz.alerts .al-desc { display: block; }
.viz.alerts .al-dev { color: var(--warn); font-weight: 600; }
.viz.alerts .al-desc { font-variant-numeric: normal; color: var(--ink-3); }
.viz.alerts td:nth-child(2) a { color: inherit; text-decoration: none; }
.viz.alerts td:nth-child(2) a:hover { text-decoration: underline; }
.al {
  display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 6px; border: 0; border-left: 3px solid var(--warn-edge);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--al-bg); cursor: pointer;
}
.al:last-child { margin-bottom: 0; }
.al:hover { background: var(--al-hover); }
.al.crit { border-left-color: var(--bad); }
.al.ok { border-left-color: var(--good-fill); }
.al .ic { font-size: 12px; line-height: 1.25; flex: none; color: var(--warn); }
.al.crit .ic { color: var(--bad); }
.al.ok .ic { color: var(--good); }
.al b { font-size: 12.5px; display: block; font-weight: 600; color: var(--ink); }
.al span { font-size: 11.5px; color: var(--ink-3); }

/* Підтвердження (ack) і видалення в рядку — іконкові кнопки */
.inline-ack button {
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--good);
  border-radius: var(--radius); cursor: pointer; font-size: 12px; width: 28px; height: 28px; padding: 0; font-weight: 700;
}
.inline-ack button:hover { border-color: var(--good-fill); background: var(--good-bg); }
.inline-del button { border: 0; background: transparent; color: var(--bad); cursor: pointer; font-size: 13px; padding: 0 4px; border-radius: var(--radius); }
.inline-del button:hover { background: var(--bad-bg); }

/* ═══ АДМІНРОЗДІЛИ: картки, сітки, форми, пейджер ═════════════════════════ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Дитина сітки має min-width:auto й НЕ стискається вужче за свій min-content —
   картка «Доставка сповіщень» на головній розпирала колонку 340 px до 358,8 і
   тягла вбік усю сторінку (виміряно на проді 07.09, 360 px). `.viz` і `.panel`
   свій min-width:0 уже мають, а голі <div> у цих сітках — ні. */
.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; }
.card {
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-panel);
  padding: 11px 13px; min-width: 0;
}
.card .n { font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -.5px;
           font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; }
.card .l { font-size: 11px; color: var(--n600); text-transform: none; letter-spacing: 0; font-weight: 500; }
.card .dim { font-size: 11.5px; margin-top: 3px; }
.card > label { margin-bottom: 10px; }
.pager { display: flex; gap: 10px; margin-top: 14px; font-size: 12.5px; align-items: center; color: var(--ink-3); }
.ref-form {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: center;
  margin: 12px 0 10px; padding: 12px; border: 1px solid var(--rule-2);
  border-radius: var(--radius-panel); background: var(--surface-2);
}
.ref-form label { margin-bottom: 0; }
.ref-form .btn-save { grid-column: 2; justify-self: start; }
.viz .ref-form { margin-top: 9px; }

/* ═══ ВХІД: банер Г-1 + бланк входу ══════════════════════════════════════ */
body.auth { background: var(--paper); }
.auth-layout { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.auth-plate {
  background: var(--hero-gradient); color: #fff;
  display: grid; align-items: center; padding: 48px 52px; position: relative; overflow: hidden;
}
.auth-plate-inner { position: relative; max-width: 30rem; }
.auth-brand {
  font-family: var(--font-accent); font-size: 15px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.35); line-height: 1.3;
}
.auth-brand small {
  display: block; font-family: var(--font-primary); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  opacity: .78; margin-top: 5px;
}
.auth-claim { margin-top: 30px; font-size: 26px; font-weight: 700; line-height: 1.24; letter-spacing: -.01em; }
.auth-facts { margin-top: 38px; display: flex; gap: 34px; flex-wrap: wrap; }
.auth-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.auth-facts dd { font-size: 23px; font-weight: 700; letter-spacing: 0; margin-top: 3px; font-variant-numeric: tabular-nums; }

.auth-form-side { display: grid; place-items: center; padding: 40px 32px; }
.auth-form { width: 100%; max-width: 22.5rem; }
.auth-form h1 { font-family: var(--font-accent); font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; line-height: 1.25; }
.auth-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.auth-form .rule-double { border-top: 1px solid var(--rule-2); margin: 13px 0 22px; }
.auth-form .field { margin-bottom: 16px; }
.auth-form input { width: 100%; font-size: 14px; padding: 8px 11px; }
.auth-submit { width: 100%; padding: 9px; font-size: 13.5px; justify-content: center; }
.auth-foot {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 20px;
  padding-top: 14px; border-top: 1px solid var(--rule-2);
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5; font-style: italic; font-weight: 300;
}
.auth-foot .ico { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; }
.auth-dev { font-size: 11px; color: var(--ink-3); margin-top: 10px; text-align: center; }
.auth-form .flash.err { position: static; transform: none; animation: none; }

/* ═══ АДАПТИВ (§11) ═══════════════════════════════════════════════════════
   Пріоритет — ноутбук 1440–1920.
   1024–1279: бічна колонка переїжджає під графік, ховаються необов'язкові колонки.
   768–1023:  одна колонка; рейл згортається в кнопку-меню (чекбокс + label, без JS —
              CSP забороняє інлайн-скрипти); KPI-смуга у два ряди; таблиця
              прокручується горизонтально, перша колонка липка.
   < 768:     лише банер із KPI, сповіщення й частка; таблиця рівня — окремим
              «екраном» з кнопки «Показати таблицю» (:target — «Назад» повертає). */
.show-table { display: none; }
@media (max-width: 1279px) {
  /* Шість клітинок на 1024–1279 px стають вужчими за назву показника — ділимо
     на два ряди по три, тим самим правилом, що й §11 нижче за шкалою. */
  .kpi-lede { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(3n) { border-right: 0; }
  .kpi:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .viz-grid { grid-template-columns: 1fr; }
  .viz-grid.cols { grid-template-columns: 1fr 1fr; }
  .viz-grid.cols > .viz:nth-child(3) { grid-column: 1 / -1; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}
/* §11 «у таблиці ховаються Покази й Кліки» — межу підняли з 1279 до 1599 після
   заміру: з цими двома колонками таблиця розрізу займає 1590 px, а поле панелі
   на 1440 px = 1317 і на 1600 px = 1477. Смуга 1280–1599 у §11 своя, тож
   ховати в ній необовʼязкові колонки правило не порушує. В експорті Excel і
   на друку колонки лишаються — тут ідеться лише про екран. */
@media (max-width: 1599px) {
  .col-opt { display: none; }
}
/* Таблиця рівня має 16 колонок. Навіть без двох `col-opt` вона просить 1417 px у
   контейнер 1332 на 1440 px і 1552 у 1492 на 1600 — остання колонка ховається за краєм.
   Тиснемо ГОРИЗОНТАЛЬНИЙ відступ клітинки з 10 до 6 px (по 8 px з колонки: 14 колонок
   дають 112 px проти дефіциту 85, 16 колонок — 128 проти 60). Вертикаль не чіпаємо:
   рядок «рівно 38 px» — ухвалений Т-2 схеми, а min-width першої колонки лишається 200,
   бо назви на кшталт «Харків, майданчик BIO» на вужчій колонці пішли б у два рядки
   і зламали б ту саму висоту 38 px. Схема пінить висоту рядка, не відступ. */
@media (max-width: 1919px) {
  .viz table th, .viz table td { padding-left: 6px; padding-right: 6px; }
}
/* На рівні каналів колонок найбільше і після стиснення відступів бракувало ще 19 px
   (1351 проти поля 1332). Добираємо їх НЕ з тексту: два треки «Частка» по 54 px
   стають 44 — це пропорційний індикатор, він нічого не втрачає від 10 px, тоді як
   дальше стиснення відступів звело б проміжок між правовирівняними числами до 10 px
   і колонки почали б читатись як склеєні. 2 × 10 = 20 px проти дефіциту 19. Межа 1599, а не 1439: на 1440 px
   правило з «max-width: 1439» не спрацьовує — рівність не менше. */
@media (max-width: 1599px) {
  .track { width: 44px; }
}
@media (max-width: 1023px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; background: none; }
  /* Рейл → смуга Night під шапкою з кнопкою-меню; розділи розкриваються списком */
  aside {
    grid-column: 1; grid-row: 2; position: static; height: auto; width: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; padding: 6px 10px; gap: 6px;
  }
  aside .mark { display: none; }
  .rail-check {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .rail-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius);
    color: #c8d0d6; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
  }
  .rail-toggle .ico { width: 18px; height: 18px; }
  .rail-toggle:hover, .rail-check:checked ~ .rail-toggle { background: rgba(255,255,255,.09); color: #fff; }
  .rail-check:focus-visible ~ .rail-toggle { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(60,142,200,.28); }
  aside nav { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 2px; width: auto; padding: 6px 0 2px; }
  .rail-check:checked ~ nav { display: flex; }
  aside nav .nav-group {
    width: auto; height: auto; overflow: visible; margin: 4px 0 0; padding: 8px 8px 3px;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8b969e;
  }
  aside nav .nav-group:first-child { border-top: 0; margin: 0; padding-top: 2px; }
  aside nav a { width: auto; height: 34px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 8px; }
  aside nav a span {
    position: static; opacity: 1; border: 0; padding: 0; background: transparent;
    pointer-events: auto; transition: none; font-size: 12.5px;
  }
  /* .layout > main — та сама специфічність, що й базове правило, інакше main лишався
     б у другій колонці сітки, якої вже немає */
  .layout > main { grid-column: 1; grid-row: 3; }
  .foot { grid-column: 1; grid-row: 4; }

  /* §11, смуга 768–1023 px: три клітинки у два ряди */
  .kpi-lede { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(3n) { border-right: 0; }
  .kpi:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .kpi:first-child { border-radius: var(--radius) 0 0 0; }
  .kpi:last-child { border-radius: 0 0 var(--radius) 0; }
  /* У сітці 2×2 посилання «розкласти за типами» не накладається на підпис — стає
     окремим рядком під значенням (клітинка лишається клікабельною по посиланню) */
  .kpi.lede .kpi-more a { position: static; display: block; padding: 2px 0 0; border-radius: 0; }
  .viz-grid.cols, .viz-grid.cols2 { grid-template-columns: 1fr; }
  .viz table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
  /* …але НЕ в «Активних сповіщеннях»: там таблиця розкладена картками (display:grid
     на tr), прокручувати вбік нічого, а липка клітинка домальовувала клітинці з
     датою білий прямокутник --surface поверх тла картки --al-bg. */
  .viz.alerts table td:first-child { position: static; background: transparent; z-index: auto; }
  /* §11: те саме для таблиць адмінрозділів — вони лежать у .table-wrap без .viz.
     Без цього на 768 px убік їхала вся сторінка, а не таблиця (виміряно 28.08). */
  .table-wrap > table td:first-child, .table-wrap > table th:first-child {
    position: sticky; left: 0; background: var(--surface); z-index: 1;
  }
  .table-wrap > table tbody tr:hover td:first-child { background: var(--row-hover); }
  .viz tbody tr:hover td:first-child { background: var(--row-hover); }
  .viz tr.is-service td:first-child, .viz tfoot th:first-child { background: var(--surface-2); }
  .hero .dateline { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .ah { position: static; height: auto; min-height: 50px; padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
  .ah .brand small { display: none; }
  .ah .who { border-left: 0; padding-left: 0; }
  .layout > main { padding: 10px 10px 22px; }
  .masthead.hero { margin: -10px -10px 10px; padding: 12px 14px 13px; }
  .hero h1 { font-size: 16px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; min-height: 0; }
  .auth-plate { padding: 30px 24px; }
  .auth-claim { font-size: 22px; margin-top: 20px; }
  .auth-facts { margin-top: 22px; gap: 22px; }
  .auth-facts dd { font-size: 19px; }
  .auth-form-side { padding: 32px 24px 48px; }
}
@media (max-width: 767px) {
  .kpi-lede, .kpi-lede.two { grid-template-columns: 1fr; max-width: none; }
  .kpi, .kpi:nth-child(2n), .kpi:nth-child(3n) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; }
  .kpi:last-child { border-bottom: 0; }
  .kpi .l { white-space: normal; }
  .hero .masthead-row { gap: 8px; }
  .filters .right { margin-left: 0; }
  /* Телефон — «глянути KPI і сповіщення»: графіки динаміки сховані, таблиця рівня
     відкривається кнопкою як окремий екран; сповіщення й частка лишаються */
  .phone-hide { display: none; }
  .level-table { display: none; }
  .level-table:target { display: block; }
  .show-table { display: inline-flex; margin: 0 0 10px; }
  .level-table:target + .show-table { display: none; }
}

/* ═══ ДРУК / PDF ══════════════════════════════════════════════════════════
   Шлях тут один: «⬇ PDF» = системний друк браузера. Серверний PDF (сервіс
   renderer/ → notifications/digests/render_pdf.py) цей файл НЕ читає — має власний
   _PDF_CSS, тож правки нижче на нього не впливають. Все одно
   консервативно: без grid-областей, без липких/фіксованих шарів, кольори чорнилом,
   банер суцільний білий із рамкою, KPI-смуга — таблицею. */
@media print {
  :root {
    --paper: #fff; --surface: #fff; --surface-2: #f4f4f2; --surface-ink: #000;
    --ink: #000; --ink-2: #333; --ink-3: #555; --axis: #666; --muted: #555;
    --rule: #ddd; --rule-2: #bbb; --accent: #000; --accent-fill: #000; --accent-ink: #fff; --link: #000;
    --warn-wash: #fff; --blue-soft: #fff; --good-bg: #fff; --bad-bg: #fff; --al-bg: #fff; --input-bg: #fff;
  }
  .ah, aside, .foot, .filters, .route-row, .tabs, .strip.imp, .inline-ack, .accents, .skip-link,
  .theme-toggle, .prov summary, .strip.ok-flash, .flash.ok, .tpl-picker,
  .rail-check, .rail-toggle, .show-table { display: none !important; }
  /* §14-11 «не прибирати підказки «і»»: на папері тултіпа немає, тож пояснення
     показника друкується статичним рядком під ним, а не гине разом зі знаком */
  .kpi .def {
    position: static; display: block; max-width: none; min-width: 0;   /* min-width:200px × 6 клітинок = ≥1200 px на аркуші ~794 px */
    border: 0; box-shadow: none; padding: 2pt 0; color: #333;
  }
  /* У друку є все, що на телефоні сховане за кнопкою */
  .phone-hide, .level-table { display: block; }
  /* A4 ≈ 794 px, тож медіа-блок ≤1599 активний і на папері — але на аркуші
     місця вистачає, і ховати «Покази»/«Кліки» в експорті сенсу немає (§11). */
  .col-opt { display: table-cell; }
  /* A4 ≈ 794 CSS px, тож блок ≤1023 px активний і при друку — знімаємо липкі шари,
     які він ставить: заявлена консервативність «без липких/фіксованих шарів» */
  .viz table td:first-child,
  .table-wrap > table td:first-child, .table-wrap > table th:first-child { position: static; }
  .layout { display: block; background: none; }
  main { padding: 0; max-width: none; }
  body { background: #fff; font-size: 11pt; }
  .masthead.hero { background: #fff !important; color: #000; border: 1pt solid #ccc; margin: 0 0 12pt; padding: 10pt 12pt; }
  .hero h1 { color: #000; font-size: 16pt; }
  .hero .eyebrow, .hero .dateline, .hero .dateline b { color: #333; }
  .freshness, .hero .pill { color: #000; border: 1pt solid #999; background: #fff; }
  .freshness .dot { background: #000; }
  .masthead-row, .viz > footer, .viz > figcaption, .freshness, .strip, .flash, .note { display: block; }
  .viz > figcaption span, .viz > footer span { display: block; }
  .kpi-lede { display: table; width: 100%; background: none; border: 1pt solid #ccc; border-radius: 0; margin-top: 8pt; }
  .kpi { display: table-cell; padding: 6pt 8pt; border-right: 1pt solid #ccc; border-radius: 0; }
  .kpi .l { color: #333; white-space: normal; }
  .kpi .l::after { display: none; }
  .kpi .v { font-size: 15pt; color: #000; }
  .kpi .d, .kpi .d .up, .kpi .d .down, .kpi .d .flat, .kpi .d .cmp { color: #000; }
  .kpi.lede .kpi-more a { position: static; display: block; padding: 0; color: #333; }
  .viz-grid { display: block; }
  .viz { break-inside: avoid; page-break-inside: avoid; margin-bottom: 12pt; border: 1pt solid #ccc; border-radius: 0; }
  .viz .canvas, .viz .canvas.tall { height: auto; min-height: 180pt; }
  .card, .state { border: 1pt solid #ccc; }
  .prov[open] .prov-body, .prov .prov-body { display: block !important; box-shadow: none; border: 0; padding: 4pt 0; }
  .viz.alerts table { display: table; }
  .viz.alerts tbody { display: table-row-group; }
  .viz.alerts thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .viz.alerts tr { display: table-row; border: 0; background: none; }
  .viz.alerts td { display: table-cell; padding: 4pt 6pt; border-bottom: 1pt solid #ddd; }
  .viz.alerts td:nth-child(2)::before { display: none; }
  .pill, .chip, .badge-delta { border: 1pt solid #999; background: #fff; color: #000; }
  table { font-size: 9.5pt; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* ── Екран інструмента (D-68; 3.1.15 WGT-INS-1/2/3) — мінімум поверх В6 ─────────
   Профіль — та сама таблиця Т-2; недоступне поле — рядок .is-off (приглушений, як
   .chip.is-off у шаблонах TPL-5/TPL-7) + рядок причини під ним. Ніяких нових кольорів. */
.fld-block { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 12px 0 4px; }
.fld-table td code { font-size: 11px; color: var(--ink-3); }
/* §7.7, стан «⛔ джерело недоступне» на рівні РЯДКА — клас спільний для всіх таблиць,
   не лише .fld-table (спільний контракт розмітки: <tr class="is-off">) */
tr.is-off td { color: var(--ink-3); }
.fld-table tr.fld-reason td { font-size: 12px; font-weight: 300; font-style: italic; border-top: 0; padding-top: 0; }
.core-table td.dim, .fld-table td.dim { color: var(--ink-3); font-size: 11.5px; }
.tool-link { font-size: 11px; color: var(--link); text-decoration: none; margin-left: 6px; white-space: nowrap; }
.tool-link:hover { text-decoration: underline; }
.inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; max-width: 480px; }
.inv { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); }
.inv .l { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
.inv .row { display: flex; align-items: baseline; gap: 8px; }
.inv .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv .d { font-size: 11px; font-variant-numeric: tabular-nums; }
.inv .d .up { color: var(--good); } .inv .d .down { color: var(--bad); } .inv .d .flat { color: var(--ink-3); }