/* ============================================================================
Топливный мониторинг — сине-фиолетовая система. Mobile-first + Desktop.
========================================================================== */
/* Шрифты подключены 'ом в index.html, а НЕ @import'ом отсюда.
@import сериализует загрузку: браузер сначала скачивает app.css, только
потом узнаёт про fonts.css и идёт за ним — лишний круг в самом начале
рендера, ровно на критическом пути. в оба файла запрашивает
параллельно. Правовые страницы подключают fonts.css у себя сами. */
:root {
--font-ui: 'Golos Text', system-ui, -apple-system, Segoe UI, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
--font-display: var(--font-ui);
--r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
--ease: cubic-bezier(.22,.61,.36,1);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-t: env(safe-area-inset-top, 0px);
--nav-h: 64px;
--sheet-peek: 196px;
/* Высота листа считается от СВОБОДНОЙ области: полный экран минус нижняя навигация,
минус нижний и ВЕРХНИЙ safe-area. Иначе на iPhone с вырезом верх листа уходит выше
экрана и шапка списка («‹ В список») оказывается под статус-баром. */
--sheet-h: calc(100vh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 8px);
--sheet-h: calc(100dvh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 8px);
--grad: linear-gradient(135deg, #6366F1 0%, #7C3AED 55%, #8B5CF6 100%);
}
/* светлая */
:root, :root[data-theme='light'] {
--bg:#F3F4FB; --bg-2:#E9EAF6; --surface:#FFFFFF; --surface-2:#FBFBFF; --surface-sunk:#EEEFFA;
--ink:#171833; --ink-soft:#474A72; --ink-faint:#585B84; --on-ink:#FFFFFF;
--line:rgba(23,24,51,.10); --line-strong:rgba(23,24,51,.17);
--primary:#4F46E5; --primary-2:#4338CA; --primary-soft:#E7E6FD; --on-primary:#FFFFFF;
--violet:#7C3AED; --violet-soft:#F0E9FE;
/* queue и conflict раньше отличались на один тон (#C2410C и #B45309) — на
маркере 8 px это один и тот же коричневый. Разводим: очередь — яркий
оранжевый, спор — золотой. */
--v-available:#0A7D57; --v-none:#C81E1E; --v-conflict:#A16207; --v-unknown:#5A6187; --v-queue:#EA580C;
/* Диск кластера должен контрастировать с КАРТОЙ, а карта инвертируется вместе
с темой: на светлой подложке — тёмный диск с белой цифрой. */
--cl-disc:#1E2136; --cl-ink:#FFFFFF; --cl-track:rgba(30,33,54,.16);
--s-limited:#0E7490; --s-low:#B45309; --s-queue:#C2410C;
--shadow-1:0 1px 2px rgba(23,24,51,.06), 0 2px 8px rgba(23,24,51,.06);
--shadow-2:0 6px 24px rgba(79,70,229,.14), 0 2px 8px rgba(23,24,51,.08);
--shadow-glow:0 8px 30px rgba(124,58,237,.28);
--map-filter:saturate(.92) brightness(1.02);
}
/* тёмная */
:root[data-theme='dark'] {
--bg:#0B0C1A; --bg-2:#070811; --surface:#15172B; --surface-2:#1C1F3A; --surface-sunk:#101229;
--ink:#ECEDFB; --ink-soft:#A9ACD4; --ink-faint:#8E92BE; --on-ink:#0B0C1A;
--line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.17);
--primary:#7B78F0; --primary-2:#6366F1; --primary-soft:#221F45; --on-primary:#FFFFFF;
--violet:#A78BFA; --violet-soft:#241a45;
--v-available:#34D399; --v-none:#F87171; --v-conflict:#FBBF24; --v-unknown:#8891B4; --v-queue:#FB923C;
/* на тёмной подложке контрастен светлый диск */
--cl-disc:#F4F5FF; --cl-ink:#141628; --cl-track:rgba(255,255,255,.20);
--s-limited:#22D3EE; --s-low:#FCD34D; --s-queue:#FB923C;
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 8px 30px rgba(0,0,0,.5);
--shadow-glow:0 8px 30px rgba(124,58,237,.4);
--map-filter:brightness(.9) contrast(1.05);
}
/* ВАЖНО: держать значения синхронными с :root[data-theme='dark'] выше.
Этот блок нужен только для первой отрисовки до старта JS (FOUC), дальше тему
ставит applyTheme через data-theme. При правке токенов меняйте ОБА блока. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg:#0B0C1A; --bg-2:#070811; --surface:#15172B; --surface-2:#1C1F3A; --surface-sunk:#101229;
--ink:#ECEDFB; --ink-soft:#A9ACD4; --ink-faint:#8E92BE; --on-ink:#0B0C1A;
--line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.17);
--primary:#7B78F0; --primary-2:#6366F1; --primary-soft:#221F45; --on-primary:#FFFFFF;
--violet:#A78BFA; --violet-soft:#241a45;
--v-available:#34D399; --v-none:#F87171; --v-conflict:#FBBF24; --v-unknown:#8891B4; --v-queue:#FB923C;
/* на тёмной подложке контрастен светлый диск */
--cl-disc:#F4F5FF; --cl-ink:#141628; --cl-track:rgba(255,255,255,.20);
--s-limited:#22D3EE; --s-low:#FCD34D; --s-queue:#FB923C;
--shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 30px rgba(0,0,0,.5); --shadow-glow:0 8px 30px rgba(124,58,237,.4);
--map-filter:brightness(.9) contrast(1.05);
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* height:100% убран у body намеренно: под приложением идёт видимый SEO-подвал, и
документ обязан прокручиваться. Приложение занимает первый экран (#app ниже). */
html { height: 100%; }
/* Холст красим в цвет навигации. На iOS-PWA слой-вьюпорт бывает короче экрана, и снизу
вылезала серая полоса фона страницы — теперь она сливается с навигацией. */
html { background: var(--surface); }
body { font-family: var(--font-ui); color: var(--ink); background: var(--bg); font-size: 1rem; line-height: 1.5;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-x: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: var(--primary); text-underline-offset: 2px; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
svg { display: block; }
/* СТРАХОВКА: спрайтовые иконки () не имеют своего viewBox и без
явной height берут дефолт 150px и растягиваются в флексе. Даём базовый размер;
контекстные правила его переопределяют. */
svg:not([viewBox]) { width: 20px; height: 20px; flex: none; }
/* базовый стиль иконки: контурная (Feather/Lucide). Залитые глифы (i-pin, i-drop)
держат fill="currentColor" на самом — он переживает этот fill:none. */
.ic, svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; }
/* Было 10.5px с трекингом .14em — на грани читаемости. Спека проекта требует
«данные ≥14px», приводим в соответствие и снимаем разрядку. */
.eyebrow { font-weight: 700; font-size: 0.875rem; letter-spacing: .01em; color: var(--ink-soft); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-available{color:var(--v-available)} .bg-available{background:var(--v-available)}
.c-none{color:var(--v-none)} .bg-none{background:var(--v-none)}
.c-conflict{color:var(--v-conflict)} .bg-conflict{background:var(--v-conflict)}
.c-unknown{color:var(--v-unknown)} .bg-unknown{background:var(--v-unknown)}
.c-queue{color:var(--v-queue)} .bg-queue{background:var(--v-queue)}
/* карточки-кнопки списка/ленты/поиска: на всю ширину, текст слева (стали