/* ══════════════════════════════════════════════════════════════════════
   ЄДИНИЙ ВИГЛЯД ПОРТАЛУ. Підключається ПЕРШИМ рядком у <head> кожної
   сторінки: <link rel="stylesheet" href="/brand.css">

   Портал зібрано зі 113 окремих сторінок без спільного шаблону, і вигляд
   розʼїхався так, як із коду не видно: логотип був написаний шістьма
   різними способами і виглядав пʼятнадцятьма (від 12 до 20 px, вага
   700-900, трекінг від -0.3 до 2.4 px, колір то зелений, то чорний, а на
   /ovdp і /crypto-catalog - синє посилання браузера за замовчуванням).
   Палітра при цьому всюди та сама, просто оголошена під різними іменами:
   --brand і --accent, --bg і --cream, --ink і --text.

   Тому тут ДВІ речі й нічого зайвого:
   1) канонічні значення кольорів + псевдоніми старих імен, щоб сторінка,
      яка писала var(--accent), нічого не помітила;
   2) вигляд логотипа класом .pt-logo.

   ⚠️ Висоту, позицію й вміст шапок НЕ чіпаємо: під fixed-шапкою в кожної
   сторінки свій padding-top, і зміна висоти зсунула б увесь текст.
   ⚠️ Подвійний клас (.pt-logo.pt-logo) - не помилка, а вага селектора:
   локальні правила .nav-logo лежать у <style> нижче за цей файл і без
   цього перебивали б його. Де локальне правило все одно сильніше, це
   видно у `node scripts/brand-check.mjs` і чиститься в самій сторінці.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Канон. Значення взяті з club.html і cabinet.html - вони збігались
     навіть тоді, коли називались по-різному. */
  --pt-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pt-bg: #f6f8f7;          /* тло сторінки */
  --pt-surface: #ffffff;     /* картка */
  --pt-ink: #14241d;         /* основний текст */
  --pt-muted: #3f4f48;       /* другорядний */
  --pt-light: #5f7269;       /* дрібний підпис */
  --pt-line: #e2e8e5;        /* лінії й рамки */
  --pt-brand: #0a855c;       /* бренд */
  --pt-brand-dark: #057a55;  /* натиснуте, логотип */
  --pt-brand-pale: #e6f6ef;  /* мʼяке тло бренду */

  /* Імена, під якими ці ж кольори вже живуть на сторінках. Оголошені
     тут як запасні: сторінка зі своїм :root перебʼє їх власними
     значеннями, і нічого не зламається. */
  --sans: var(--pt-sans);
  --bg: var(--pt-bg);
  --surface: var(--pt-surface);
  --ink: var(--pt-ink);
  --muted: var(--pt-muted);
  --light: var(--pt-light);
  --line: var(--pt-line);
  --brand: var(--pt-brand);
  --brand-dark: var(--pt-brand-dark);
  --brand-pale: var(--pt-brand-pale);
  --cream: var(--pt-bg);
  --accent: var(--pt-brand);
  --accent-light: #0e9f6e;
  --accent-pale: var(--pt-brand-pale);
  --text: var(--pt-ink);
  --text-muted: var(--pt-muted);
  --text-light: var(--pt-light);
  --divider: var(--pt-line);
  --white: #ffffff;
}

/* ── Логотип ──────────────────────────────────────────────────────────
   Одна розмітка на весь портал:  PRO<b>T</b>OCOL
   Підсвічена саме «T» (а не склад «COL», як було на інструментах): так
   він написаний на головній клубу, у кабінеті й на дашборді - тобто там,
   де людина бачить його найчастіше. */
.pt-logo.pt-logo {
  font-family: var(--pt-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--pt-brand-dark);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.pt-logo.pt-logo b,
.pt-logo.pt-logo span,
.pt-logo.pt-logo em,
.pt-logo.pt-logo i {
  color: var(--pt-brand);
  font-weight: inherit;
  font-style: normal;
  font-size: inherit;
  letter-spacing: inherit;
}
.pt-logo.pt-logo:hover { color: var(--pt-brand); }
.pt-logo.pt-logo:focus-visible { outline: 2px solid var(--pt-brand); outline-offset: 3px; border-radius: 3px; }

/* Обгортка, коли логотип лежить у <div>: міняти тег на <a> там не можна -
   блоковий елемент усередині flex-шапки поводиться інакше, ніж рядковий,
   і розкладка поїхала б. Тому загортаємо, а не замінюємо. */
.pt-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.pt-logo-link:focus-visible { outline: 2px solid var(--pt-brand); outline-offset: 3px; border-radius: 3px; }

/* Виділення тексту - у бренді. Дрібниця, але вона є на КОЖНІЙ сторінці:
   доти виділення було синє системне, різне в різних браузерах. */
::selection { background: #c7e9d8; color: #14241d; }

/* Логотип у шапці уроку. Шапка курсу вузька і вже має три елементи
   («← Каталог», хлібні крихти, «далі →»), тому логотип стоїть першим і
   зникає на вузькому екрані: на телефоні там і без нього тісно, а
   переповнення шапки з'їло б назву уроку. */
.pt-logo-mn { margin-right: 4px; flex: 0 0 auto; }
@media (max-width: 900px) { .pt-logo-mn { display: none; } }