/* WAYMORR Analytics · общие токены, шрифты и шапка.
   Источник: WAYMORR Guideline (январь 2023) — Persian Blue, Platinum, Stem для заголовков, Suisse Intl для текста.
   Подключается на каждой странице ПОСЛЕ её собственного <style>, чтобы токены отсюда были главными. */

@font-face { font-family: 'Stem'; src: url('/fonts/stem-semilight.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Stem'; src: url('/fonts/stem-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Stem'; src: url('/fonts/stem-bold.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('/fonts/suisse-regular.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('/fonts/suisse-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('/fonts/suisse-semibold.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  --white: #FFFFFF;
  --near-black: #111111;
  --platinum: #E2E2E2;
  --platinum-soft: #F4F4F4;
  --platinum-strong: #C8C8C8;
  --persian-blue: #2511A8;
  --persian-soft: #F2F0FB;
  --text: var(--near-black);
  --text-secondary: #6B6B6B;
  --text-faint: #9A9A9A;
  --ok: #1a7a3a;
  --ok-soft: #DDF3E4;
  --warn: #9a5b00;
  --err: #b91c1c;
  --err-soft: #FBE3E3;
  --font-display: 'Stem', 'Manrope', -apple-system, sans-serif;
  --font-text: 'Suisse Intl', 'Inter Tight', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

html, body { font-family: var(--font-text); }
.display { font-family: var(--font-display); }
.numeric { font-variant-numeric: tabular-nums; }

/* Шапка — одна на все страницы: логотип слева (/logo.svg из брендбука), меню, справа статус. */
.header { border-bottom: 1px solid var(--platinum); background: var(--white); position: sticky; top: 0; z-index: 50; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; height: 14px; width: auto; }
.brand-divider { width: 1px; height: 14px; background: var(--platinum); }
.brand-section { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.header-nav { display: flex; justify-content: flex-start; gap: 28px; flex: 1; }
.header-nav a { text-decoration: none; font-size: 14px; color: var(--text-secondary); letter-spacing: 0; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.header-nav a.active { color: var(--text); border-bottom-color: var(--persian-blue); }
.header-meta { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--text-secondary); letter-spacing: 0; }
.header-status { display: flex; align-items: center; gap: 8px; }
.header-status::before { content: ''; width: 6px; height: 6px; background: var(--dot, var(--platinum-strong)); border-radius: 50%; }
.header-link { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-secondary); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.header-link:hover { color: var(--text); border-bottom-color: var(--near-black); }
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; gap: 10px 20px; padding: 12px 16px; }
  .header-nav { order: 3; flex-basis: 100%; gap: 20px; overflow-x: auto; }
}