/* ============================================================
   Cashalot AI — site-enhancements.css
   Аддитивный слой поверх существующей палитры (НЕ подменяет
   --teal/--plum-deep/--cream/--ink и т.д., только расширяет).
   Подключать ПОСЛЕ основного <style> страницы:
     <link rel="stylesheet" href="/site-enhancements.css">
   Безопасно: новые компоненты namespaced (.fx-* / .ftable),
   глобально влияют только tabular-nums и focus/active состояния.
   ============================================================ */

:root {
  /* ===== Семантические финансовые токены (гармонизированы с --green/--red) ===== */
  --gain:        #2E9E68;   --gain-bg:  #E7F4EC;   --gain-strong:  #1B7A4D;
  --loss:        #C44536;   --loss-bg:  #FBEAE7;   --loss-strong:  #9A3328;
  --neutral-val: var(--gray-warm);  --neutral-val-bg: var(--paper-warm);

  /* ===== Тинты/шейды поверх бренда (для фонов, бейджей, таблиц) ===== */
  --teal-50:#F2FAF9;  --teal-100:var(--teal-pale);  --teal-700:#2A6660;  --teal-900:#173733;
  --plum-50:#F7F4F8;  --plum-100:#ECE5EE;           --plum-700:#36283D;
  --gold-50:#FBF6EA;  --gold-100:#F6EAC7;           --gold-700:#8E6E2F;

  /* ===== Source-tier badges (data firewall) ===== */
  --tier-a-bg:var(--teal-100); --tier-a-text:var(--teal-700);   /* первичные документы */
  --tier-b-bg:var(--gold-100); --tier-b-text:var(--gold-700);   /* аналитика / sell-side */
  --tier-c-bg:var(--plum-100); --tier-c-text:var(--plum-700);   /* пресса / secondary */

  /* ===== Тени (plum-tinted — теплее серых) ===== */
  --fx-shadow-sm:0 1px 3px rgba(82,61,92,.08),0 1px 2px rgba(82,61,92,.04);
  --fx-shadow-md:0 4px 8px -2px rgba(82,61,92,.10),0 2px 4px -2px rgba(82,61,92,.06);
  --fx-shadow-lg:0 12px 24px -6px rgba(82,61,92,.12),0 4px 8px -4px rgba(82,61,92,.08);

  /* ===== Motion / focus ===== */
  --fx-ease-out:cubic-bezier(.23,1,.32,1);
  --fx-ring:0 0 0 3px rgba(63,160,155,.38);
  --fx-ring-gold:0 0 0 3px rgba(212,168,87,.38);
}

/* ============================================================
   (1) TABULAR NUMS — числа перестают «плавать»
   Применяется к моно-контекстам и явным числовым классам.
   (для инлайн-JetBrains-Mono без классов — см. site-enhancements.js)
   ============================================================ */
.num, td.num, th.num,
.mono, .metric-value, .stat-number, .price__num,
code, kbd, samp, pre {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum", "zero";
}

/* ============================================================
   (2) СОСТОЯНИЯ — focus-visible ring, :active, reduced-motion
   ============================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
[role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--fx-ring);
  border-radius: 6px;
}
.btn-gold:focus-visible, .btn--gold:focus-visible { box-shadow: var(--fx-ring-gold); }

button:active, .btn:active,
.btn-primary:active, .btn-secondary:active,
[role="button"]:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Лёгкий hover-lift для карточек (opt-in) */
.fx-elevate { transition: transform var(--fx-ease-out) .22s, box-shadow var(--fx-ease-out) .22s; }
.fx-elevate:hover { transform: translateY(-3px); box-shadow: var(--fx-shadow-lg); }

/* ============================================================
   (4) ИНСТИТУЦИОНАЛЬНЫЕ ТАБЛИЦЫ — .ftable (новый класс)
   ============================================================ */
.ftable-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.ftable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: 'Inter', sans-serif; font-size: 14px;
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--ink-soft); background: var(--cream);
}
.ftable__th {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-warm);
  text-align: left; padding: 11px 16px;
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray-warm);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.ftable__th.num, .ftable td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.ftable td, .ftable th[scope="row"] {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.ftable th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); }
.ftable tbody tr:last-child td, .ftable tbody tr:last-child th { border-bottom: none; }
.ftable--zebra tbody tr:nth-child(even) { background: var(--paper); }
.ftable tbody tr:hover { background: var(--teal-pale); }
.ftable .ftable__total td, .ftable .ftable__total th {
  border-top: 2px solid var(--ink-mute); font-weight: 600; color: var(--ink);
}

/* дельты с моно ▲/▼ */
.delta { font-family: 'JetBrains Mono', monospace; font-weight: 500; white-space: nowrap; }
.delta--pos { color: var(--gain); }
.delta--neg { color: var(--loss); }
.delta--neutral { color: var(--neutral-val); }

/* sparkline-ячейка */
.ftable .spark { width: 84px; height: 24px; vertical-align: middle; }

/* sticky первая колонка на мобильных */
@media (max-width: 720px) {
  .ftable th[scope="row"] {
    position: sticky; left: 0; background: var(--cream);
    box-shadow: 1px 0 0 var(--rule);
  }
}

/* ============================================================
   Source-tier badge
   ============================================================ */
.tier-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; height: 1.35em; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: .72em; font-weight: 700;
  vertical-align: middle;
}
.tier-badge--a { background: var(--tier-a-bg); color: var(--tier-a-text); }
.tier-badge--b { background: var(--tier-b-bg); color: var(--tier-b-text); }
.tier-badge--c { background: var(--tier-c-bg); color: var(--tier-c-text); }

/* ============================================================
   Флагман-вердикт — .fx-verdict (namespaced, не трогает .callout)
   ============================================================ */
.fx-verdict {
  margin: 32px 0; padding: 28px 32px;
  background: linear-gradient(135deg, var(--plum-deep) 0%, var(--teal-deep) 130%);
  color: var(--cream); border-radius: 16px;
  box-shadow: var(--fx-shadow-lg); position: relative; overflow: hidden;
}
.fx-verdict__brand {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.fx-verdict__brand::before { content: "🐋↗ "; }
.fx-verdict__body { font-family: 'Fraunces', serif; font-size: 21px; line-height: 1.3; }
.fx-verdict__meta {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: rgba(255,252,245,.72);
}

/* count-up метрика — без скачка раскладки */
[data-count-to] { font-variant-numeric: tabular-nums; }


/* ===== nav dropdown (PRICING > Индивидуальный анализ) ===== */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-group>a::after{content:'▾';font-size:.7em;margin-left:5px;opacity:.6}
.nav-group::after{content:'';position:absolute;top:100%;left:-12px;right:-12px;height:12px}
.nav-sub{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--cream,#FFFCF5);border:1px solid rgba(26,31,46,.1);border-radius:10px;box-shadow:0 10px 30px rgba(26,31,46,.13);padding:6px;min-width:215px;display:none;flex-direction:column;z-index:200}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{display:flex}
.nav-sub a{padding:9px 14px;border-radius:7px;white-space:nowrap;font-size:14px;color:var(--ink,#1A1F2E);text-decoration:none}
.nav-sub a:hover{background:var(--paper-warm,#F2EFE8)}
@media(max-width:880px){.nav-sub{position:static;transform:none;display:flex;box-shadow:none;border:none;padding:0 0 0 14px;min-width:0;background:none}.nav-group{display:block}.nav-group::after{display:none}.nav-group>a::after{display:none}}


/* ── BETA-плашка над меню (на всех страницах) ── */
.beta-banner{
  background:linear-gradient(135deg, var(--teal-pale,#E8F6F4) 0%, var(--paper-warm,#FFFCF5) 100%);
  border-bottom:1px solid var(--teal-deep,#3FA09B);
  padding:16px 24px; text-align:center; font-size:14px;
  font-family:var(--font-sans,'Inter',sans-serif); color:var(--ink,#1A1F2E);
}
.beta-banner strong{ color:var(--teal-deep,#3FA09B); }

/* ============================================================
   Мобильная навигация (гамбургер) — добавлено 2026-06
   Общий CSS → работает на всех страницах. Десктоп НЕ меняется:
   .csl-burger скрыт, .csl-nav-drawer = display:contents
   (раскладка меню остаётся прежней). Сворачивание включается
   только в @media (max-width:860px).
   ============================================================ */
.csl-nav-drawer{ display:contents; }
.csl-burger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; margin-left:14px; flex-shrink:0;
  background:transparent; border:1px solid rgba(26,31,46,.16);
  border-radius:10px; color:#1A1F2E; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.csl-burger:hover{ border-color:#3FA09B; color:#3FA09B; }
.csl-burger svg{ width:22px; height:22px; display:block; }
.csl-burger .csl-x{ display:none; }
nav.site-nav.csl-nav-open .csl-burger .csl-bars{ display:none; }
nav.site-nav.csl-nav-open .csl-burger .csl-x{ display:block; }

@media (max-width: 860px){
  nav.site-nav{ position:relative; padding-left:16px !important; padding-right:16px !important; }
  .csl-burger{ display:inline-flex; }
  .site-logo{ margin-right:auto; }

  /* выпадающая панель под шапкой */
  .csl-nav-drawer{
    display:none !important;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#FAF9F6; border-bottom:1px solid rgba(26,31,46,.12);
    box-shadow:0 18px 44px rgba(26,31,46,.16);
    padding:6px 0 10px; z-index:60;
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  nav.site-nav.csl-nav-open .csl-nav-drawer{ display:flex !important; }

  /* пункты меню — в столбик, крупный тап-таргет */
  .csl-nav-drawer .site-nav-center{
    display:flex !important; flex-direction:column !important;
    flex-wrap:nowrap !important; gap:0 !important; width:100%;
  }
  .csl-nav-drawer .site-nav-center a{
    display:block; width:100%; padding:14px 22px; font-size:16px;
    border-bottom:1px solid rgba(26,31,46,.06);
  }

  /* нижний блок панели: переключатель языка + кнопка «Рассылка» */
  .csl-nav-drawer .site-nav-right{
    display:flex !important; flex-direction:row; align-items:center;
    justify-content:space-between; flex-wrap:wrap; gap:14px;
    width:100%; padding:16px 22px 4px;
  }
  .csl-nav-drawer .site-nav a.nav-cta{
    flex:1; min-width:150px; padding:13px 18px; font-size:14px;
  }
}

@media (max-width: 380px){
  .site-logo{ font-size:18px; }
}