/* ── Глобальная палитра (single source) ────────────────────────────────
 * Light-дефолты: резолвят var(--…) на ВСЕХ страницах, включая те, где нет
 * своего :root (offline.html и др.). Per-page :root (в body) имеет ту же
 * специфичность и грузится позже → перебивает (значения те же). Тёмную тему
 * включает html[data-theme="dark"] ниже — специфичность (0,1,1) > :root,
 * поэтому перебивает и глобальный, и per-page :root независимо от порядка. */
:root{
  --purple:#3B5BFF; --bg:#fff; --bg2:#F4F6FB; --text:#14161D; --muted:#5C6275;
  --border:#E4E7F0; --teal:#0F6E56; --amber:#854F0B; --gray:#5C6275;
  --ok:#085041; --success:#085041; --err:#C0392B; --error:#C0392B;
  /* Семантические чипы/плашки (bg + парный fg). Light-дефолты = прежние
     пастели; тёмные значения — в html[data-theme="dark"] ниже. */
  --c-info-bg:#EAEFFF; --c-info-fg:#2A3C9E;
  --c-ok-bg:#E1F5EE;   --c-ok-fg:#085041;
  --c-err-bg:#FCEBEB;  --c-err-fg:#791F1F;
  --c-warn-bg:#FAEEDA; --c-warn-fg:#633806; --c-amber-fg:#854F0B;
  --c-done-bg:#EAF3DE; --c-done-fg:#27500A;
  --c-blue-bg:#E6F1FB; --c-blue-fg:#185FA5;
  --c-new-bg:#F0E9FF;  --c-new-fg:#5B2BB5;
  --c-accent-soft:#AEBCFF; --purple-strong:#2A3C9E;
  /* Ховер-поверхность интерактивных плиток (.metric и пр.): кремовый в light,
     приподнятый тёмный в dark. Прежние хардкоды #EFEDE6/#F1EFE8/#D9D6CC. */
  --hover-bg:#EFEDE6;
  /* Фон disabled-кнопок (прежний хардкод #ccc). Текст обычно var(--bg). */
  --btn-disabled-bg:#ccc;
}

/*
 * theme.css — фирменная стилистика B2C-лендинга для всех страниц приложения.
 *
 * Подключается ОДИН раз через pages/_document.tsx как
 *   <link rel="stylesheet" href="/theme.css">
 * в реальный <head>, поэтому покрывает и HTML-страницы (рендерятся через
 * [slug].tsx / index.tsx / admin/disputes.tsx из public/*.html), и
 * React-маршруты (/dashboard).
 *
 * Палитра (значения --purple/--bg2/--border/--text/--muted) живёт в
 * инлайновых <style> самих страниц и правится там же — здесь её НЕТ,
 * чтобы не конфликтовать с каскадом. theme.css держит только то, что
 * не пересекается с per-page правилами:
 *   1. @font-face (self-hosted woff2 — CSP font-src 'self')
 *   2. типографику заголовков (Unbounded) — прямое правило на элемент
 *      бьёт наследование от body, поэтому порядок подключения не важен
 *   3. базовый body-шрифт Onest (для React-страниц; HTML-страницы задают
 *      тот же шрифт в своём <style> — значения совпадают)
 *   4. мягкие тени и accent-мелочи (аддитивные свойства, конфликтов нет)
 *
 * Палитра B2C: акцент #3B5BFF (кобальт), холодный фон #F4F6FB,
 * чернила #14161D, приглушённый #5C6275.
 */

/* ── Self-hosted fonts (CSP: font-src 'self') ──────────────────────────
   Onest — текст/UI. Unbounded — display/заголовки. Вариативные woff2,
   latin + cyrillic как отдельные unicode-range (покрывают EN + RU). */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-latin.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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/unbounded-latin.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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Базовый шрифт (в основном для React-страниц вроде /dashboard) ──────
   HTML-страницы переопределяют body своим инлайновым <style> тем же
   стеком — конфликта значений нет. */
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Display-типографика заголовков (Unbounded) ────────────────────────
   Страницы НЕ задают font-family на этих селекторах (проверено), поэтому
   прямое правило применяется независимо от порядка подключения. */
h1, h2, h3, h4,
.nav-logo, .ah-nav-logo, .brand, .title, .hero-title, .page-title,
.ah-footer-brand {
  font-family: 'Unbounded', 'Onest', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  letter-spacing: -0.015em;
}

/* ── Мягкая «воздушная» подложка (как карточки на лендинге) ─────────────
   Аддитивно: страницы не задают box-shadow на .card (проверено). */
.card {
  box-shadow: 0 1px 2px rgba(20, 22, 45, 0.04),
    0 14px 34px -18px rgba(20, 22, 45, 0.16);
}
.btn-primary {
  box-shadow: 0 10px 22px -10px rgba(59, 91, 255, 0.35);
}

/* ── Accent-мелочи ─────────────────────────────────────────────────────*/
html {
  scroll-behavior: smooth;
}
::selection {
  background: var(--purple);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   Этап 2 — полное сходство с B2C-лендингом.

   Группа A (детали бренда) — применяется ГЛОБАЛЬНО (все страницы).
   Группы B/C/D (атмосфера / анимации / воздушный лейаут) — ТОЛЬКО под
   `.lp` (landing-page) — класс на div-обёртке, который [slug].tsx /
   index.tsx ставит лишь для маркетинг/auth/legal-слагов. Плотные
   служебные страницы (back-office, дашборды, таблицы) НЕ затрагиваются.
   ════════════════════════════════════════════════════════════════════════ */

/* ── A. Двухтонный логотип: «Agent» чернилами + «Hub» акцентом ──────────
   Разметка даёт <span class="lg-hub">Hub</span>; базовый цвет логотипа
   перебиваем на ink удвоением класса (specificity 0,2,0 > per-page 0,1,0),
   поэтому работает независимо от порядка подключения. */
.nav-logo.nav-logo,
.ah-nav-logo.ah-nav-logo,
.brand.brand.brand, /* triple class: beats `.admin-side .brand` (0,2,0) regardless of load order */
.ah-footer-brand.ah-footer-brand {
  color: var(--text); /* было #14161d — флипается тёмной темой, иначе логотип/бренд футера невидимы на тёмном */
}
.lg-hub {
  color: var(--purple);
}

/* ── A. Кобальтовые CTA: стрелка → с микро-сдвигом на hover ─────────────
   Сам цвет .btn-primary (ink → cobalt) меняется в разметке страниц;
   здесь — стрелка, и только на лендинг-страницах (чтобы служебные
   «Сохранить»/«Удалить» не обрастали стрелками). */
.lp .btn-primary::after,
.lp .cta-btn.primary::after {
  content: "→";
  margin-left: 0.45em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.lp .btn-primary:hover::after,
.lp .cta-btn.primary:hover::after {
  transform: translateX(3px);
}

/* ── A. Подъём карточек на hover ───────────────────────────────────────
   Глобально — только для интерактивных карточек каталога; на лендинге —
   для всех .card. Удвоение класса перебивает per-page transition. */
.agent-card.agent-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.12s ease;
}
.agent-card.agent-card:hover {
  transform: translateY(-2px);
}
.lp .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(20, 22, 45, 0.06), 0 22px 48px -20px rgba(20, 22, 45, 0.22);
}

/* ── Motion keyframes (общие; гасятся prefers-reduced-motion ниже) ──────*/
@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes lp-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.25); }
}

/* ════════ B. Атмосфера — halo-свечения + grain (только .lp) ════════════ */
.lp {
  position: relative;
  min-height: 100vh;
  isolation: isolate; /* свой stacking-контекст для grain-оверлея */
  background-image:
    radial-gradient(42rem 42rem at -8% -12%, rgba(59, 91, 255, 0.14), transparent 60%),
    radial-gradient(36rem 36rem at 112% 26%, rgba(59, 91, 255, 0.12), transparent 60%);
}
/* Fine grain — мягкий шум поверх страницы (как .grain на лендинге). */
.lp::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════ C. Анимации появления (только .lp) ══════════════════════════ */
.lp .hero,
.lp .card,
.lp section,
.lp .auth-card {
  animation: lp-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Пульсирующая точка в pill-бейдже. */
.lp .hero-badge span[style*="border-radius:50%"],
.lp .lp-dot {
  animation: lp-glow 4s ease-in-out infinite;
}

/* ════════ D. Воздушный лейаут (только .lp; в осн. для index hero) ══════ */
.lp .hero {
  padding-top: 64px;
  padding-bottom: 44px;
}
.lp .hero-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lp .hero-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.lp .hero-badge {
  font-size: 12px;
  padding: 5px 13px;
}

/* ── D+. Парящие чипы-примеры в hero + ink-CTA секция (как на лендинге) ──
   Разметка есть только в index.html; на прочих .lp-страницах этих
   элементов нет, поэтому правила там ни на что не влияют. */
.lp .hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 40rem;
  margin: 24px auto 4px;
}
.lp .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 28px -18px rgba(20, 22, 45, 0.38);
  animation: lp-float 6s ease-in-out infinite;
}
.lp .hero-chip > span {
  font-size: 16px;
  line-height: 1;
}
.lp .cta-band {
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin: 12px auto 44px;
  padding: clamp(36px, 6vw, 56px) 28px;
  text-align: center;
  background: #14161d;
  border-radius: 32px;
}
.lp .cta-band h2 {
  margin: 0 0 10px;
  color: #f4f6fb;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em;
}
.lp .cta-band p {
  max-width: 30rem;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.55;
}
.lp .cta-band .btn {
  background: #3b5bff;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.lp .cta-band .btn::after {
  content: "→";
  margin-left: 0.45em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.lp .cta-band .btn:hover::after {
  transform: translateX(3px);
}

/* ── prefers-reduced-motion: глушим всё движение ───────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp .hero, .lp .card, .lp section, .lp .auth-card,
  .lp .hero-badge span[style*="border-radius:50%"], .lp .lp-dot,
  .agent-card.agent-card, .lp .card:hover, .lp .hero-chip,
  .lp .btn-primary::after, .lp .cta-btn.primary::after, .lp .cta-band .btn::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Нативный мобильный полиш (issue «нативнее без нативных приложений») ──
 * theme.css грузится на ВСЕХ маршрутах (pages/_document.tsx) → один источник.
 * Всё безопасно на десктопе: env(safe-area-*)=0 без выреза, touch-action и
 * tap-highlight не влияют на мышь, user-select снят только с UI-хрома.
 */

/* Текст как в нативных приложениях; не даём iOS раздувать шрифт при повороте. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Серая вспышка при тапе по интерактиву — главный «вебовский» маркер; убираем,
 * обратную связь оставляем на :active. */
a, button, [role="button"], .btn, .tag, input[type="submit"], label.seg-opt {
  -webkit-tap-highlight-color: transparent;
}
/* Моментальный тап: без 300мс ожидания double-tap-zoom на интерактиве. */
a, button, [role="button"], .btn, .tag { touch-action: manipulation; }

/* Брендовый акцент нативных контролов (чекбокс/радио/прогресс/слайдер). */
:root { accent-color: var(--purple); }

/* Жесты прокрутки не протекают за скролл-контейнеры; нет случайного
 * pull-to-refresh всей страницы (в standalone-режиме PWA — нативное поведение). */
html, body { overscroll-behavior-y: none; }

/* UI-хром не выделяется при долгом тапе (как в нативном UI). Текстовый
 * контент — НЕ в списке, остаётся выделяемым/копируемым. */
.nav, .nav-inner, .nav-links, .nav-logo, .btn, .tag, .tab-item, .badge,
.cat-badge, .metric-label, .side-link, [role="button"] {
  -webkit-user-select: none; user-select: none;
}

/* Safe-area: контент и навигация не лезут под «чёлку»/жест-полоску. На
 * устройствах без выреза env()=0 → нет эффекта. Реально работает в standalone. */
@supports (padding: max(0px, env(safe-area-inset-top))) {
  .nav-inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Нижняя таб-навигация (Tier 2) ─────────────────────────────────────
 * Рендерит /bottom-nav.js (role-aware, только для авторизованных
 * заказчика/провайдера). Mobile-only: на > 720px скрыта. Палитра берётся
 * из per-page :root (--purple/--muted/--border) с фолбэками. */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; background: var(--bg, #fff);
    border-top: 0.5px solid var(--border, #E4E7F0);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 12px rgba(20, 22, 29, 0.04);
  }
  .bottom-nav .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 7px 4px 5px; min-height: 50px;
    text-decoration: none; color: var(--muted, #5C6275);
    font-size: 10px; font-weight: 500; -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav .bn-item.active { color: var(--purple, #3B5BFF); }
  .bottom-nav .bn-ic { display: flex; }
  .bottom-nav .bn-ic svg { width: 22px; height: 22px; }
  /* Контент не уезжает под бар. Переопределяет body padding из Tier 0. */
  body.has-bottom-nav { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
}

/* ── Skeleton-плейсхолдеры (Tier 2) ────────────────────────────────────
 * Мерцающая заглушка вместо пустоты при загрузке списков. Глобально
 * (у catalog есть своя локальная копия с keyframe `shimmer` — конфликта
 * нет, имя кадров здесь иное). */
.skeleton {
  background: linear-gradient(90deg, var(--bg2, #F4F6FB) 25%, #ececf2 50%, var(--bg2, #F4F6FB) 75%);
  background-size: 200% 100%;
  animation: ah-shimmer 1.2s infinite;
  border-radius: 9px;
}
@keyframes ah-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } }

/* ── Sticky bottom-CTA (Tier 2) ────────────────────────────────────────
 * Главное действие всегда под большим пальцем на «create»-флоу (task-form).
 * Десктоп: .sticky-cta — обычный поток (без изменений). Телефон: фикс-бар
 * снизу. Страница исключена из нижней таб-навигации (bottom-nav DENY),
 * чтобы не было двух баров. */
@media (max-width: 720px) {
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
    /* var(--bg): белый в light, тёмный в dark — прежний хардкод #fff давал
       белую плашку под кнопкой «Поставить задачу» в тёмной теме на телефоне. */
    background: var(--bg, #fff); border-top: 0.5px solid var(--border, #E4E7F0);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 12px rgba(20, 22, 29, 0.06);
  }
  .sticky-cta .btn, .sticky-cta button { margin-bottom: 0 !important; }
  body:has(.sticky-cta) { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* ── Тёмная тема ───────────────────────────────────────────────────────
 * html[data-theme="dark"] (ставит /theme-init.js до отрисовки). Специфичность
 * (0,1,1) > :root (0,1,0) → перебивает и глобальный, и per-page :root. Светлые
 * структурные hex уже заменены на var(--…) (bin/dark-theme-migrate.py), поэтому
 * поверхности/текст/границы флипаются автоматически. Семантические переменные
 * (--ok/--err/--teal/--amber) осветлены для контраста на тёмном; самодостаточные
 * цветные чипы (пастель bg + тёмный fg) читаемы и без изменений. */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1117;
  --bg2: #181B23;
  --text: #E6E8EE;
  --muted: #9BA1B0;
  --border: #2A2E3A;
  --purple: #6E86FF;
  --gray: #9BA1B0;
  --ok: #5DCAA5; --success: #5DCAA5;
  --err: #F09595; --error: #F09595;
  --teal: #5DCAA5; --amber: #E0A458;
  accent-color: #6E86FF;
  /* Семантические чипы/плашки: фон — полупрозрачный тинт поверх тёмного,
     текст — осветлённый парный. */
  --c-info-bg: rgba(110,134,255,.16); --c-info-fg: #AEBCFF;
  --c-ok-bg:   rgba(93,202,165,.15);  --c-ok-fg:   #5DCAA5;
  --c-err-bg:  rgba(240,149,149,.14); --c-err-fg:  #F09595;
  --c-warn-bg: rgba(224,164,88,.15);  --c-warn-fg: #E0A458; --c-amber-fg: #E0A458;
  --c-done-bg: rgba(124,196,124,.15); --c-done-fg: #9BD66E;
  --c-blue-bg: #16263A;               --c-blue-fg: #7FB4E8;
  --c-new-bg:  rgba(150,120,255,.18); --c-new-fg:  #C6B0FF;
  --c-accent-soft: #3A4470; --purple-strong: #5872E8;
  --hover-bg: #20242E;
  --btn-disabled-bg: #3A3F4D;
}

/* Сегментный переключатель темы (/profile-settings#profile). */
.theme-seg { display: inline-flex; gap: 4px; background: var(--bg2); border: 0.5px solid var(--border); border-radius: 14px; padding: 3px; }
.theme-seg button { font: inherit; font-size: 13px; padding: 7px 14px; border: none; border-radius: 11px; background: none; color: var(--muted); cursor: pointer; min-height: 40px; }
.theme-seg button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ── Поля ввода в тёмной теме ───────────────────────────────────────────
 * Карточки и инпуты оба на var(--bg) → в тёмной поля сливались с картой
 * (бордер var(--border) еле виден). Даём инпутам приподнятый фон var(--bg2)
 * + гарантированный светлый текст. !important перебивает per-page
 * `input{background:var(--bg)}`/без color (withdraw полагался на color-scheme).
 * Чекбоксы/радио/range — мимо (у них accent-color). Light-тема не тронута. */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border);
}
/* Плейсхолдер читаем в обеих темах (var--muted, без UA-затемнения). */
::placeholder { color: var(--muted); opacity: 1; }
