/* ОБЩАЯ ЧАСТЬ РЕДИЗАЙНА 10.2026 (скил vinpasi-design): шрифты, токены, база, шапка, подвал.
   Вынесена из board.css 11.10, чтобы страницы вне доски (вход, карточка машины) получали ту же
   шапку и те же токены, не подтягивая правила доски, которые перекрашивают `.picker`, `.fld`,
   `.empty`, `h1`. Подключается первой: `_design_head.html` (главная, /filters), вход, карточка.
   Порядок каскада для главной не изменился: подвал раньше стоял после правил доски, но ни одно
   правило доски его селекторов не трогает (проверено grep по `.foot-`, `.fa-facts`). */

/* ШРИФТЫ — локально, из @fontsource-variable 5.3.0 (web/frontend/package.json), без запроса к
   Google Fonts. Скил vinpasi-design: Manrope на латиницу и кириллицу, Noto Sans Georgian на
   грузинский и знак лари ₾ (U+20BE): в Manrope его нет, в Noto он лежит в латинском
   подмножестве, поэтому второе правило берёт оттуда ровно один знак. Оси веса переменные:
   200–800 у Manrope, 100–900 у Noto. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/static/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20BD,U+20BF-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/static/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/static/fonts/manrope-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Noto Sans Georgian"; font-style: normal; font-display: swap; font-weight: 100 900;
  /* 104% — ЗАМЕР, не на глаз (10.10, ~/Downloads/vinpasi-design-tools/ge-metric.mjs): canvas
     measureText на 100px, круглые строчные Manrope «о с е o c e» = 57, тело мхедрули без
     выносных «ა თ ი ო» = 55, отношение 1,039. Менять только новым замером. */
  size-adjust: 104%;
  src: url("/static/fonts/noto-sans-georgian-georgian-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31; }
@font-face { font-family: "Noto Sans Georgian"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/static/fonts/noto-sans-georgian-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+20BE; }

/* ТОКЕНЫ И ШРИФТ РЕДИЗАЙНА. Жили в app.css; с 10.10 редизайн включён только на главной и
   /filters (Иван: «две страницы, больше ничего не переделываем»), поэтому токены едут вместе
   с board.css и не трогают остальные страницы. board.css печатается после стилей страницы,
   и этот :root перекрывает :root из app.css. */
:root {
  /* РЕДИЗАЙН 10.2026. Цвет на доске значит вердикт — зелёный, янтарный, красный, синий для
     заметки. Всё остальное чёрно-белое: кнопки, выбранное состояние, ссылки в шапке — это
     чернила, а не синий. Так три цвета вердикта читаются с первого взгляда, а интерфейс не
     спорит с фотографиями. Шрифт — Manrope + Noto Sans Georgian (скил vinpasi-design, 10.10). */
  --bg: #ffffff;
  --paper: #f4f5f7;
  --panel: #f4f5f7;
  --panel-2: #ebedf1;
  --line: #e3e6eb;
  --line-strong: #c9ced6;
  --ink: #15191e;
  --ink-dim: #596270;
  /* #8a93a0 давал 3,1:1 на белом (судья 10.10); #6b7280 — 4,8:1, проходит AA. */
  --ink-faint: #6b7280;
  --ok: #178a4c;
  /* Янтарь и зелень вердикта как ТЕКСТ: #b5730f давал 3,9:1, #8a5a00 — 5,9:1 (судья 10.10). */
  --caution: #8a5a00;
  --fail: #c8372d;
  --note: #4a6a8e;
  /* Ссылка — чернила. Прежний синий #1a63c4 оставался бы четвёртым цветом на карточке. */
  --link: #15191e;
  --link-wash: #f4f5f7;
  --link-line: #c9ced6;
  --radius: 10px;
  --r: 12px;
  --r-sm: 8px;
  --font: "Manrope", "Noto Sans Georgian", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-pop: 0 12px 32px rgba(20, 25, 30, .14);
  --h-top: 56px;
  --h-bar: 40px;
}

@media (min-width: 1024px) {
  :root { --h-top: 60px; }
}

html, body {
  font: 14px/1.5 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}


:root { --hm-bar-h: 59px; --like: #d1436a; --like-wash: #fdf0f4; --hatch: repeating-linear-gradient(135deg, #e3e6eb 0 3px, #f4f5f7 3px 6px); }

/* ---------------------------------------------------------------- базовое */
body { color: var(--ink); background: var(--bg); }
/* Короткая страница (вход, ошибка, отправлено): под подвалом оставалась белая полоса — это фон
   холста, а не страницы. Холст цвета подвала, тело — белое: полоса пропадает без правок вёрстки
   (судья WP-D, 11.10). */
html { background: var(--panel); }
/* app.css ссылается на --warn и --bad (строки «Нравится», `.lk-*`), но нигде их не объявляет:
   цвет просто не применялся. Синонимы смысловых цветов редизайна. */
:root { --warn: var(--caution); --bad: var(--fail); }
a { color: var(--ink); }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
h2 { color: var(--ink); font-size: 18px; }
.hi { display: inline-block; vertical-align: -3px; flex: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }
.wrap { max-width: 1200px; padding: 0 20px 72px; }
@media (max-width: 1023px) { .wrap { padding: 0 16px 56px; } }

/* ---------------------------------------------------------------- шапка */
.top {
  height: var(--h-top);
  gap: 20px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1023px) { .top { padding: 0 16px; gap: 12px; } }
.brand { gap: 10px; font-weight: 600; }
.brand .logo { width: 96px; height: 25px; }
.brand .tag { font-size: 12px; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; }
.brand .tag .bc-n { color: var(--ink-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .brand .logo { width: 108px; height: 28px; }
}
@media (min-width: 1440px) { .brand .tag { display: inline; } }
/* По-грузински подпись бренда длиной ~430px, и на 1440 последний пункт меню резался до «Tele»
   (замер 11.10, судья /filters). Подпись — украшение, пункт меню — навигация: до 1600 по-грузински
   подпись уходит, как уже уходит на всех языках ниже 1440. */
@media (max-width: 1599px) { html[lang="ka"] .brand .tag { display: none; } }
/* Между 1024 и 1279 шапка не переносится по контракту (`.top` без flex-wrap), а восемь пунктов
   меню с подписью бренда и тремя языками в Google Sans шире 1024: замер 1381px. Подпись уходит,
   пункты теснее. По-грузински подписи длиннее примерно на четверть, поэтому порог 1280. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .top { gap: 10px; padding: 0 14px; }
  .brand .tag { display: none; }
  .nav a { padding: 0 6px; font-size: 13px; }
  .nav a .n { margin-left: 4px; }
  .nav-sep { margin: 0 2px; }
  .langs a { padding: 4px 6px; }
  .acc.nav-login { padding: 0 12px; }
}
/* Навигация: без подчёркиваний, активный пункт держит чёрную полку под собой на всю высоту шапки. */
@media (min-width: 1024px) {
  /* Меню сжимается и прокручивается вбок, а не раздвигает страницу: по-грузински восемь
     пунктов на 1280 шире колонки, и до этой правки шапка тянула страницу до 1451px. */
  .nav { display: flex; align-items: center; gap: 2px; height: var(--h-top); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    display: inline-flex; align-items: center; height: var(--h-top); flex: none; white-space: nowrap;
    padding: 0 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-dim);
    border-bottom: 2px solid transparent; border-top: 2px solid transparent;
  }
  .nav a:hover { color: var(--ink); text-decoration: none; }
  .nav a.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
  .nav-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 8px; }
  .nav a .n { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--panel-2); color: var(--ink-dim); }
  .nav a.live { color: var(--ok); }
}
/* Языки — один сегментный переключатель. Код языка остаётся: флаг без кода ничего не говорит
   о том, какой из двух похожих флагов нажат. */
.langs { gap: 0; padding: 3px; border-radius: 999px; background: var(--panel); }
.langs a {
  gap: 5px; padding: 4px 9px; border: 0; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ink-dim);
  filter: grayscale(1) opacity(.8);
}
.langs a .code { font-size: 11px; letter-spacing: .02em; }
.langs a:hover { background: transparent; color: var(--ink); filter: grayscale(.4) opacity(.9); text-decoration: none; }
.langs a.on { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 25, 30, .12); filter: none; }
/* Войти — единственная залитая кнопка в шапке. Кабинет — светлая пилюля с инициалами. */
@media (min-width: 1024px) {
  .acc { display: inline-flex; align-items: center; }
  .acc.nav-login {
    height: 36px; padding: 0 16px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  }
  .acc.nav-login:hover { background: #000; text-decoration: none; }
  .acc-pill { height: 36px; padding: 0 12px 0 4px; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 500; }
  .acc-pill .ini { width: 28px; height: 28px; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
}
.burger > summary { width: 40px; height: 40px; border-radius: 10px; color: var(--ink); border-color: var(--line); }
.burger > summary .b-open { display: inline-flex; }
.burger > summary .b-shut { display: none; }
.burger[open] > summary .b-open { display: none; }
.burger[open] > summary .b-shut { display: inline-flex; }
.drawer { box-shadow: 0 24px 40px rgba(20, 25, 30, .14); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.drawer a { font-size: 15px; font-weight: 500; }
.drawer a.on { box-shadow: inset 3px 0 0 var(--ink); }
.drawer .d-acc { color: var(--ink); }

/* ---------------------------------------------------------------- подвал */
.foot-site { margin-top: 56px; background: var(--panel); border-top: 1px solid var(--line); }
.foot-in { max-width: 1200px; padding: 32px 20px 20px; }
.foot-about h2 { font-size: 15px; }
.foot-about p { font-size: 13px; color: var(--ink-dim); }
.fa-facts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.foot-col h3 { font-size: 13px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.foot-col a { color: var(--ink-dim); font-size: 14px; }
.foot-col a:hover { color: var(--ink); }
.foot-col li { border-bottom-color: var(--line); }
.foot-legal { max-width: 1200px; padding: 14px 20px 24px; font-size: 12px; color: var(--ink-faint); }