/* ============================================================
   RUSSIAINNUMBERS.RU — DESIGN TOKENS
   Источники паттернов: data-slice.ru (тон, типографика, тултипы),
   ourworldindata.org (метаданные/доверие), Datawrapper Academy (цвет графиков)
   Стек: чистый CSS, без препроцессоров и фреймворков.
   ============================================================ */

:root {
  /* --- Цвет: фон и текст --- */
  --color-bg: #FFF8EF;           /* тёплый кремовый фон вместо белого */
  --color-bg-panel: #FFFFFF;     /* карточки/панели поверх фона */
  --color-text: #2A2F3A;         /* основной текст, не чистый чёрный */
  --color-text-muted: #6B7280;   /* подписи осей, метаданные */
  --color-border: rgba(0,0,0,0.10);

  /* --- Цвет: акцент ---
     Правило: ОДИН акцентный цвет на весь сайт для интерактивных элементов
     (ссылки, кнопки, активный пункт меню). Для графиков — свой акцент see below. */
  --color-accent: #0D7FB0;       /* акцент интерфейса (ссылки, кнопки, активные вкладки) */
  --color-accent-bg: rgba(13,127,176,0.10); /* фон под активным пунктом/бейджем */

  /* --- Цвет: графики (Datawrapper-правило) ---
     На графике из N рядов только ОДИН ряд — "герой" (тот, о котором текст).
     Остальные — --color-chart-muted. Никогда не давать двум рядам одинаковый вес цвета. */
  --color-chart-primary: #0D7FB0;   /* ряд, который является предметом инсайта */
  --color-chart-secondary: #B45309; /* второй ряд для сравнения (напр. key_rate vs avg_rate) */
  --color-chart-muted: #C9C1B2;     /* фоновые/неважные ряды, сетка, засечки */
  --color-chart-grid: #D6CEBF;

  /* --- Статусы данных (для баннера устаревания, см. metadata-card.html) --- */
  --color-status-ok: #15803D;
  --color-status-stale: #B45309;
  --color-status-error: #B91C1C;

  /* --- Типографика --- */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-insight: clamp(22px, 2.2vw, 30px); /* заголовок-инсайт: 24–30px по ТЗ */
  --font-size-body: 16px;
  --font-size-meta: 13px;
  --line-height-body: 1.8;    /* увеличенный line-height для длинного пояснительного текста */
  --line-height-tight: 1.3;   /* для заголовков */
  --measure-text: 68ch;       /* максимальная ширина текстового блока — критично для читаемости */

  /* --- Отступы --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* --- Радиусы и тени --- */
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 36px rgba(32,36,46,0.07);
}

/* ============================================================
   БАЗА
   ============================================================ */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* ============================================================
   ИНСАЙТ-ЗАГОЛОВОК
   Паттерн: заголовок = вывод, а не название показателя.
   Плохо: "Ключевая ставка ЦБ РФ". Хорошо: "Ставки по ипотеке обгоняют ключевую на 3.2 п.п."
   ============================================================ */

.insight-title {
  font-size: var(--font-size-insight);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
  max-width: var(--measure-text);
}

.insight-paragraph {
  max-width: var(--measure-text);
  color: var(--color-text);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-lg);
}

/* ============================================================
   ТЕРМИНЫ С ПОДСКАЗКОЙ (dotted-underline tooltip)
   Паттерн data-slice.ru: объяснение по запросу, не отвлекает от чтения.
   Реализация — чистый CSS + один маленький JS-хелпер (см. комментарий внизу файла).
   ============================================================ */

.term {
  border-bottom: 1px dotted var(--color-accent);
  color: var(--color-accent);
  cursor: help;
  position: relative;
}

.term[data-tooltip]:hover::after,
.term[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 125%;
  background: var(--color-text);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  width: max-content;
  max-width: 260px;
  z-index: 10;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   КАРТОЧКА ПОКАЗАТЕЛЯ (обёртка вокруг графика)
   ============================================================ */

.indicator-card {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* ============================================================
   СТРОКА МЕТАДАННЫХ (см. metadata-card.html)
   Ключевой элемент доверия — источник, дата, период, единица.
   Дата ДОЛЖНА рендериться из max(date) по данным, а не из new Date().
   ============================================================ */

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}

.meta-row dt {
  font-weight: 600;
  color: var(--color-text);
  display: inline;
}

.meta-row dd {
  display: inline;
  margin: 0 var(--space-md) 0 var(--space-xs);
}

/* --- Баннер устаревания данных --- */
.staleness-banner {
  display: none; /* показывать через JS, когда данные лагают дольше порога частоты */
  align-items: center;
  gap: var(--space-sm);
  background: rgba(180,83,9,0.08);
  color: var(--color-status-stale);
  border: 1px solid rgba(180,83,9,0.25);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-meta);
  margin-bottom: var(--space-md);
}

.staleness-banner.is-visible {
  display: flex;
}

/* ============================================================
   ЛЕГЕНДА ГРАФИКА (прямые подписи вместо блока-легенды сбоку)
   Datawrapper-правило: подписывать линию рядом с её концом,
   а не выносить в отдельную легенду — глаз не должен бегать туда-сюда.
   ============================================================ */

.chart-legend-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 14px;
  margin-top: var(--space-sm);
}

.chart-legend-inline .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend-inline .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   ИСТОЧНИК И ЛИЦЕНЗИЯ (блок внизу карточки, паттерн OWID)
   ============================================================ */

.source-block {
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  line-height: 1.6;
}

.source-block a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* ============================================================
   КНОПКИ / ССЫЛКИ (pill-style, паттерн data-slice.ru)
   ============================================================ */

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-pill:hover {
  background: rgba(0,0,0,0.05);
}

.btn-pill--accent {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

.btn-pill--accent:hover {
  opacity: 0.9;
  background: var(--color-accent);
}

/* ============================================================
   ПРИМЕЧАНИЕ ПО ТУЛТИПАМ (.term)
   Для мобильных устройств :hover не срабатывает — нужен JS-обработчик tap,
   переключающий класс, например:

   document.querySelectorAll('.term').forEach(el => {
     el.addEventListener('click', () => el.classList.toggle('is-open'));
   });

   и CSS-правило .term.is-open::after { ... } с теми же стилями, что и :hover.
   Это единственный обязательный JS-довесок к чисто CSS-реализации.
   ============================================================ */