/* ---------------------------------------------------------------------------
   UI.CSS — єдина оболонка сторінки платформи «ЗОВА» (16.08.2026)

   ЩО ЦЕ. Спільні для всіх сервісів: колонка сторінки (.wrap) і шапка розділу
   (.masthead). Більше нічого. Вміст під шапкою в кожного сервісу свій — це
   нормально, таблиця доручень і опис бота не мусять бути схожими. Однаковим
   мусить бути ТЕ, ЩО ЛЮДИНА БАЧИТЬ ПЕРШИМ: де починається сторінка, якої вона
   ширини і як виглядає її заголовок.

   НАВІЩО. До 16.08.2026 дев'ять сервісів були зверстані трьома різними
   школами й п'ятьма різними ширинами:
     • «Дані», «Доступи», «Сигнали», «ШІ-агент» — темна картка-шапка,
       ширина 1240 / 1180 / 1180 / 860;
     • «Реєстр доручень», «Плани нарад» — голий <h1> на сірому, 1320 / 1180;
     • «Мої об'єкти», «Мої доручення», «Протоколи» — ДРУГА темна смуга на всю
       ширину екрана, приклеєна до nav.js, 1600 / 1600 / 1680.
   Через це перехід між розділами читався як перехід між різними системами,
   а не між вкладками однієї. Зведено сюди.

   ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ КОПІЯ В КОЖНІЙ СТОРІНЦІ. Та сама причина, що в
   nav.js: дев'ять копій означають дев'ять місць, де правку забудуть. Копії
   вже й розійшлись — саме тому padding шапки був 16px на одних сторінках і
   14px на інших, а нижнього відступу сторінки не було ніде.

   ⚠️ ПІДКЛЮЧЕННЯ. Рядок <link rel="stylesheet" href="/ui.css"> стоїть ПЕРЕД
   власним <style> сторінки. Отже, будь-яке правило сторінки з такою самою
   вагою перебиває це. Тому в сторінках свої `.wrap` і `.masthead` ВИДАЛЕНО, а
   не залишено «про всяк випадок»: залишений дубль тихо повертає старий вигляд,
   і це виглядає як «ui.css не працює».

   ⚠️ КЕШ. /ui.css доданий у netlify.toml до списку no-store поруч із nav.js і
   access.js. Без цього виправлення оформлення не доїде до людини, поки вона
   не почистить кеш, — а `Ctrl+F5` у застосунку з іконки немає.

   ТЕМНА ТЕМА. Її навмисно немає. До 16.08.2026 два сервіси з дев'яти мали
   @media (prefers-color-scheme: dark) — тобто на комп'ютері з темною ОС
   «Реєстр доручень» був чорний, а решта платформи світла. Рішенням власника
   тему прибрано: дашборди показують на нарадах через проєктор і друкують,
   там світлий фон — норма, а не вибір.
   --------------------------------------------------------------------------- */

:root {
  /* Єдина ширина колонки. 1520 — компроміс між реєстром доручень (був 1320,
     власник назвав його правильним) і таблицею протоколів на 8 колонок
     (була 1680). На моніторі 1920 лишає поля з боків, на 1440 сторінка
     заповнює екран цілком. */
  --zn-w: 1520px;
  --zn-gut: 24px;          /* бічний відступ колонки */
  --zn-navy: #142036;      /* той самий колір, що у смузі nav.js */
  --zn-page-bg: #eef1f6;
}

/* Полотно. Фон стоїть на <html>, а не тільки на <body>: коли сторінка
   коротша за екран, під нею інакше просвічує біле тло браузера — саме через
   це на «Планах нарад» і «Протоколах» знизу була біла смуга. */
html { background: var(--zn-page-bg); }

/* ── Колонка сторінки ────────────────────────────────────────────────────
   Бічний відступ живе ТУТ, а не в body, бо смуга nav.js мусить лишатись на
   всю ширину екрана. Нижні 44px — щоб останній рядок таблиці не прилипав до
   краю вікна; доти його не було в жодної сторінки. */
.wrap {
  max-width: var(--zn-w);
  margin: 0 auto;
  padding: 18px var(--zn-gut) 44px;
}

/* ── Шапка розділу ───────────────────────────────────────────────────────
   Читається згори вниз: що це за штука (kicker) → як зветься (h1) → скільки
   в ній чого зараз (.facts) → навіщо вона (p). Праворуч — дії самої сторінки.

   Це картка з відступом від смуги nav.js, а не друга смуга впритул. Різниця
   принципова: дві темні смуги поспіль зливаються в одну товсту, і сторінка
   починається наче з середини екрана. */
.masthead {
  background: var(--zn-navy);
  color: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 20px;
}
.masthead .mh-main { flex: 1 1 420px; min-width: 0; }
.masthead .kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .68; line-height: 1.4;
}
.masthead h1 {
  font-size: 21px; line-height: 1.25; font-weight: 700;
  margin: 3px 0 0; color: #fff;
}
/* Рядок цифр, які змінюються (скільки доручень, станом на яку дату). Окремо
   від пояснення: пояснення стале, цифри — ні. */
.masthead .facts { font-size: 12.5px; opacity: .8; margin-top: 5px; }
.masthead p {
  font-size: 12.5px; line-height: 1.55; opacity: .86;
  max-width: 92ch;            /* довший рядок на 1520px уже не читається */
  margin: 7px 0 0;
}
.masthead a { color: #fff; }

/* Дії сторінки — тільки ВЛАСНІ («Довідники», «＋ Нова нарада»). Вихід на хаб,
   пошта і «Вийти» сюди не ставляться ніколи: вони живуть у смузі nav.js
   (правило про шапку в CLAUDE.md §7). */
.masthead .mh-actions {
  margin-left: auto;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-top: 2px;
}
/* ⚠️ Обов'язково. `display:flex` вище перебиває вбудоване `[hidden]{display:none}`
   браузера — без цього рядка блок дій, схований атрибутом (у протоколах так
   ховають «Довідники» від голови напрямку), лишався б на екрані. */
.masthead .mh-actions[hidden] { display: none; }
.masthead .mh-act {
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: #fff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20); border-radius: 8px;
  padding: 8px 13px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.masthead .mh-act:hover { background: rgba(255,255,255,.20); }
.masthead .mh-act.on,
.masthead .mh-act.primary { background: #fff; color: var(--zn-navy); border-color: #fff; }
/* Тиха дія (28.08.2026): службові кнопки, які тиснуть зрідка, — навігація між
   темами, згортання секцій. Коли всі дії шапки виглядають однаково, людина
   мусить читати кожну, щоб знайти ту, по якій приходила. Модифікатор лише
   гасить кнопку — розмір і поведінка ті самі. */
.masthead .mh-act.quiet { background: none; border-color: rgba(255,255,255,.28);
  font-weight: 500; opacity: .85; }
.masthead .mh-act.quiet:hover { background: rgba(255,255,255,.14); opacity: 1; }

/* Телефон. Дії з'їжджають під заголовок власним рядком: у шапці шириною
   375px кнопка поруч із заголовком стискається до трьох літер. */
@media (max-width: 720px) {
  :root { --zn-gut: 14px; }
  .wrap { padding: 14px var(--zn-gut) 32px; }
  .masthead { padding: 15px 16px; border-radius: 10px; }
  .masthead h1 { font-size: 18px; }
  .masthead p { font-size: 12px; }
  .masthead .mh-actions { margin-left: 0; width: 100%; }
}

/* Друк. Темна плашка на папері з'їдає картридж і нічого не додає: на
   роздруківці потрібні заголовок і цифри, а не фірмовий колір. Дії сторінки
   на папері не натиснеш — прибираємо. */
@media print {
  html { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .masthead {
    background: none; color: #000; padding: 0; margin-bottom: 12px;
    border-radius: 0; border-bottom: 1px solid #999; padding-bottom: 8px;
  }
  .masthead h1 { color: #000; }
  .masthead .kicker, .masthead p, .masthead .facts { opacity: 1; color: #333; }
  .masthead .mh-actions { display: none; }
}
