/* ==========================================================================
   spot_ui.css — основа редизайна Autospot (волна 1 плана переноса холста).
   Только токены и шрифт: этот файл не меняет вёрстку существующих страниц.
   Новые компоненты редизайна берут цвета, отступы и шрифты отсюда (var(--spot-…)),
   классы — только с префиксом spot-/spot_. Подключается в templates/head.tpl через spot_asset_url().
   Источник значений — холст «Autospot — полировка и AI» (gen_common.py), решения владельца 26–29.09.2026.
   ========================================================================== */

/* Персидский текст (fa): Vazirmatn (OFL 1.1, Google Fonts), свой хостинг, только арабское письмо — грузится лишь на страницах с таким текстом.
   Стоит первым в --spot-font: латиница и кириллица в его диапазон не входят и остаются Montserrat. */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/Vazirmatn-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* Грузинский текст: Noto Sans Georgian (OFL 1.1, Google Fonts), свой хостинг, только грузинские символы.
   Вариативный шрифт: один файл на все начертания 100–900. Montserrat грузинских букв не содержит,
   поэтому раньше грузинский текст рисовался системным шрифтом устройства. */
@font-face {
    font-family: 'Noto Sans Georgian';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/NotoSansGeorgian-georgian.woff2') format('woff2');
    unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

:root {
    /* Цвета */
    --spot-red: #D8232A;          /* бренд, главная кнопка */
    --spot-red-dark: #A91C22;     /* нажатие, текст на светло-красном */
    --spot-red-soft: #FFF1F1;     /* фон иконок и акцентных плашек */
    --spot-ink: #1B1D21;          /* основной текст */
    --spot-ink-2: #3F454E;        /* второстепенный текст */
    --spot-mut: #5B616B;          /* подписи, плейсхолдеры (4.5:1 на белом) */
    --spot-line: #E3E5E9;         /* разделители, рамки карточек */
    --spot-field-border: #8E949C; /* рамка поля ввода (3:1) */
    --spot-bg: #F4F5F7;           /* фон страницы */
    --spot-field: #EEF0F2;        /* фон поиска, кнопки «AI подбор» */
    --spot-nav: #F1F1F1;          /* полоса категорий десктопа (владелец, 29.09) */
    --spot-surface: #FFFFFF;      /* карточки, шапка */
    --spot-green: #157347;        /* проверено, успех */
    --spot-green-soft: #E6F4EC;
    --spot-amber: #8A5200;        /* предупреждение */
    --spot-amber-soft: #FFF4E0;
    --spot-focus: #1D5FD1;        /* обводка фокуса, ссылки */
    --spot-vip: #F0521E;          /* огонь VIP на карточках */
    /* Роли для тёмной темы (DARK_MODE.md): в светлой равны базовым токенам, вид не меняется */
    --spot-red-fg: var(--spot-red);           /* красный ТЕКСТ (цены, ссылки); фон кнопок — по-прежнему --spot-red */
    --spot-red-dark-fg: var(--spot-red-dark); /* тёмно-красный текст на --spot-red-soft */
    --spot-green-fg: var(--spot-green);       /* зелёный текст «проверено» */
    --spot-inv: var(--spot-ink);              /* графитовая заливка (активные фишки, подсказки) с белым текстом */
    --spot-on-inv: #FFFFFF;                   /* текст на графитовой и красной заливке */

    /* Шрифты */
    --spot-font: 'Vazirmatn', 'Montserrat', 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Vazirmatn — только арабское письмо (unicode-range) */

    /* Отступы и размеры */
    --spot-gutter: 16px;          /* поля экрана на телефоне */
    --spot-space-1: 4px;          /* шкала отступов 4/8/12/16/24/32 (сетка 8 pt с половинным шагом) */
    --spot-space-2: 8px;
    --spot-space-3: 12px;
    --spot-space-4: 16px;
    --spot-space-5: 24px;
    --spot-space-6: 32px;
    --spot-gutter-desktop: 48px;  /* края контента на 1440 */
    --spot-radius-s: 8px;
    --spot-radius: 12px;          /* поля, кнопки */
    --spot-radius-l: 16px;        /* карточки */
    --spot-radius-sheet: 16px;    /* шторки */
    --spot-control-h: 44px;       /* высота кнопок и полей (не меньше зоны касания) */
    --spot-control-h-l: 52px;     /* крупные кнопки и поиск на главной */
    --spot-nav-desktop-h: 54px;   /* полоса категорий десктопа */
    --spot-shadow-sheet: 0 -8px 24px rgba(20, 22, 26, 0.12);
    --spot-scrim: rgba(20, 22, 26, 0.45);
}

/* ---- Тёмная тема (docs/redesign/DARK_MODE.md) ----
   Только при флаге uni_settings.spot_dark_mode = 1: сервер ставит <html class="spot-dm">, без флага правила ниже не срабатывают.
   data-theme="dark" — явный выбор «Тёмная» (cookie, сервер) или «Системная» при тёмной системе (скрипт head.tpl до отрисовки);
   без скрипта «Системная» работает по media-запросу. Контраст текста ≥ 4.5:1 на --spot-bg/--spot-surface/--spot-field
   (ink 14.2, ink-2 9.9, mut 6.4, red-fg 6.0, green-fg 7.5, amber 8.7 на surface; белый на --spot-red 5.0, на --spot-inv 8.0).
   Два одинаковых блока: CSS не умеет «media ИЛИ атрибут» в одном селекторе. Легаси (styles.css, bootstrap) — в spot_dark.css. */
:root.spot-dm[data-theme="dark"] {
    color-scheme: dark;
    --spot-red-fg: #FF6B70;
    --spot-red-dark-fg: #FF8A8E;
    --spot-red-soft: #3A1C1E;
    --spot-ink: #ECEEF1;
    --spot-ink-2: #C4C9D0;
    --spot-mut: #9BA2AC;
    --spot-line: #2F343B;
    --spot-field-border: #6B727C;
    --spot-bg: #111316;
    --spot-field: #262A30;
    --spot-nav: #1A1D21;
    --spot-surface: #1C1F24;
    --spot-green-fg: #4CC38A;
    --spot-green-soft: #16291F;
    --spot-amber: #F0B04A;
    --spot-amber-soft: #2E2412;
    --spot-focus: #6EA8FE;
    --spot-vip: #FF7A4D;
    --spot-inv: #4B515A;
    --spot-on-inv: #FFFFFF;
    --spot-shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.5);
    --spot-scrim: rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
    :root.spot-dm:not([data-theme="light"]) {
        color-scheme: dark;
        --spot-red-fg: #FF6B70;
        --spot-red-dark-fg: #FF8A8E;
        --spot-red-soft: #3A1C1E;
        --spot-ink: #ECEEF1;
        --spot-ink-2: #C4C9D0;
        --spot-mut: #9BA2AC;
        --spot-line: #2F343B;
        --spot-field-border: #6B727C;
        --spot-bg: #111316;
        --spot-field: #262A30;
        --spot-nav: #1A1D21;
        --spot-surface: #1C1F24;
        --spot-green-fg: #4CC38A;
        --spot-green-soft: #16291F;
        --spot-amber: #F0B04A;
        --spot-amber-soft: #2E2412;
        --spot-focus: #6EA8FE;
        --spot-vip: #FF7A4D;
        --spot-inv: #4B515A;
        --spot-on-inv: #FFFFFF;
        --spot-shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.5);
        --spot-scrim: rgba(0, 0, 0, 0.6);
    }
}
:root.spot-dm[data-theme="light"] { color-scheme: light; }

/* Шрифт грузинского текста для всего сайта: Montserrat остаётся первым, латиница и кириллица не меняются. */
body {
    font-family: var(--spot-font);
}

/* ==========================================================================
   Полировка перед dev (10.2026)
   ========================================================================== */

/* Montserrat: те же вариативные файлы Google Fonts, что в styles.css, но с диапазоном 100–900.
   styles.css объявляет их отдельными начертаниями 200–600, поэтому 700/800 (заголовки, цены, кнопки)
   рисовались как 600. Объявления ниже точнее по весу и побеждают при подборе начертания. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2'); 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Базовые токены мобильного слоя: раньше жили только в styles.css (блок spot_mobile) — здесь они не зависят от легаси. */
:root {
    --spot-safe-top: env(safe-area-inset-top, 0px);
    --spot-safe-right: env(safe-area-inset-left, 0px);
    --spot-safe-bottom: env(safe-area-inset-bottom, 0px);
    --spot-safe-left: env(safe-area-inset-right, 0px);
    --spot-header-h: 55px;        /* верхняя строка мобильной шапки */
    --spot-search-h: 60px;        /* строка поиска под ней */
    --spot-tap: 44px;             /* минимальная зона касания */
    --spot-ok: var(--spot-green); /* статус «включено/показывается» */
    --spot-shadow-pop: 0 10px 24px rgba(20, 22, 26, 0.12); /* тень выпадающих списков и всплывающих панелей */
}

/* Кольцо фокуса у кнопок (полировка: button:focus-visible) покрывает общее правило фокуса ниже —
   html body :is(a[href], button, …):focus-visible с !important, поэтому отдельное правило для <button> не нужно. */

/* Единый видимый фокус клавиатуры (Tab) для всех интерактивных элементов: кнопки шапки (город, язык и валюта, очистка поля),
   ссылки, поля, вкладки, элементы с role/tabindex. Только :focus-visible: при мыши и касании у кнопок и ссылок вид не меняется
   (у текстовых полей браузер показывает фокус и при клике — как и должно быть). Специфичность выше обычных `.x:focus{outline:0}`
   движка и компонентов; свои более точные правила (скрытые радио/чекбоксы через соседний label) остаются в своих файлах. */
html body :is(a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--spot-focus) !important; /* !important: движок гасит контур у всех кнопок (`button:focus{outline:none!important}` в styles.css) */
    outline-offset: 2px;
}

/* ---- Нативный каркас установленного приложения (волна 13, модуль «Приложение (PWA)») ----
   Только в режиме standalone (с экрана «Домой»): без «резинки» и случайного обновления страницы при прокрутке за край,
   без серой вспышки при касании, без автоувеличения шрифта в альбомной ориентации. В обычной вкладке поведение браузера прежнее. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
    body { overscroll-behavior-y: none; min-height: 100dvh; -webkit-touch-callout: none; }
    a, button, [role="button"] { touch-action: manipulation; }
}

/* Плавный переход между страницами (cross-document View Transitions: iOS 18.2+, Chrome 126+); при reduced motion — нет.
   Переходы по якорю внутри страницы — не навигация между документами, их это не касается. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}