/* SimUptime — шапка и подвал всех страниц сайта (simuptime.com, api.simuptime.com).
 *
 * ЭТАЛОН — ПОРТАЛ И ПАНЕЛЬ (владелец, 29.09.2026: «единые правила для футера, хедера… портал и панель
 * как эталон»). Числа ниже взяты из них, не придуманы здесь: .topbar / .sitefoot / .brand / .lang
 * портала (SimUptime Fleet/web/style.css) и .top / .foot панели. Правила словами — ОФОРМЛЕНИЕ.md
 * в корне проекта SimUptime.
 *
 * ПРАВИТСЯ ТОЛЬКО ЭТОТ ФАЙЛ. Копия лежит в volumes/www-api/chrome.css (у api.simuptime.com свой
 * корень, а чужой стиль туда не пускает CSP); её кладёт `python guide/build.py`.
 *
 * Цвета — числами, а не токенами: 404 самодостаточна и своих токенов не заводит. Значения те же, что
 * у токенов портала (--accent, --ink, --ink-soft, --ink-faint, --line-soft, фон шапки).
 */

/* ---------- шапка: на всю ширину, липкая, тонкая линия снизу (как .topbar портала) ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 23, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* ---------- логотип: значок 22 px, «Sim» жирным, «Uptime» серым, продукт голубым ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #eef2f8; }
.brand__mark { width: 22px; height: 22px; flex: none; fill: #5ec5ff; }
.brand__name { font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.brand__name-accent { color: #9aa7bd; font-weight: 500; }
/* Название продукта после «SimUptime»: Guides, API (у портала это Fleet — .brand__name-fleet там же). */
.brand__name-product { color: #5ec5ff; font-weight: 600; }

/* ---------- переключатель языка: EN / RU справа ---------- */
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; letter-spacing: 0.06em; }
.lang[hidden] { display: none; }
.lang__sep { color: #5d6a82; }
.lang__btn {
  appearance: none; border: 0; background: none; padding: 4px 2px; cursor: pointer;
  color: #5d6a82; font: inherit; letter-spacing: inherit; transition: color 0.2s ease;
}
.lang__btn:hover { color: #9aa7bd; }
.lang__btn[aria-current="true"], .lang__btn.is-active { color: #5ec5ff; }

/* ---------- подвал: на всю ширину, копирайт слева, справа — версия или ссылки (как .sitefoot) ---------- */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 28px 30px;
  font-size: 0.76rem; letter-spacing: 0.02em; color: #5d6a82;
}
.foot a { color: #5d6a82; text-decoration: none; transition: color 0.2s ease; }
.foot a:hover { color: #5ec5ff; }

/* ---------- телефон: шапка плотнее, как у портала ---------- */
@media (max-width: 720px) {
  .top { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang__btn, .foot a { transition: none; }
}