/* GH-MARKER: ready for GitHub */
/* Fyra Pages v4 «Огонь из логотипа» — документный стиль для ПУБЛИЧНЫХ
   контентных/правовых страниц: help, legal-document, legal-documents,
   prohibited, security, error, 404.
   Всё изолировано под .fx.fx-doc — не протекает на другие страницы.

   Механика в два слоя:
   (1) Ремап дизайн-токенов сайта (--card / --text / --link / --border …),
       которые УЖЕ потребляет существующий page-CSS (help.css / legal.css /
       inline-styles.css). Переопределяем их локально на .fx.fx-doc → весь
       существующий разметочный CSS автоматически перекрашивается в fire-
       палитру без риска сломать вёрстку. Заодно глобальное правило
       `a:not(.btn)…{color:var(--link)}` внутри .fx-doc становится золотым.
   (2) Точечная документная типографика + минимальные fire-акценты
       (сдержанно: огонь только в ссылках и маркере заголовка). */

/* ══════════════════════════════════════════════════════════════════
   1. РЕМАП ТОКЕНОВ САЙТА → FIRE-ПАЛИТРА (scoped на .fx.fx-doc)
   Значения fire (--void/--coal/--paper/--gold/--flame/--fire-soft/--fd…)
   приходят из fyra-next.css (.fx). Здесь маппим на них «сайтовые» имена.
   ══════════════════════════════════════════════════════════════════ */
.fx.fx-doc{
  --card: var(--coal);
  --bg: var(--void);
  --bg-elev: var(--coal-2);
  --bg-hover: var(--coal-2);
  --text: var(--paper);
  --muted: var(--dim);
  --border: var(--line);
  --primary: var(--flame);
  --primary-600: var(--orange);
  --accent: var(--flame);
  --neon-blue: var(--flame);
  --link: var(--gold);
  --link-hover: var(--gold);
  --link-visited: var(--gold);
  --amber-light: var(--gold);
  --amber-dark: var(--orange);
  --gradient-warm: var(--fire-soft);
  --gradient-button: var(--fire-soft);
  --glow: 0 0 0 3px rgba(236,32,6,.16);
  --font-heading: var(--fd);
  --font-body: var(--fb);
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   2. ЧИТАЕМАЯ ДОКУМЕНТНАЯ КОЛОНКА
   Сужаем внешние контейнеры до комфортной ширины чтения и центрируем.
   ══════════════════════════════════════════════════════════════════ */
.fx.fx-doc .tr-container,
.fx.fx-doc .cp-section,
.fx.fx-doc .legal-page,
.fx.fx-doc .help-center,
.fx.fx-doc .offer-container,
.fx.fx-doc .pr-container{
  max-width: 820px;
  margin-inline: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.fx.fx-doc .tr-container,
.fx.fx-doc .cp-section,
.fx.fx-doc .offer-container,
.fx.fx-doc .pr-container{ padding-top: 44px; padding-bottom: 64px; }

/* Карточка-обёртка правовых страниц: тёмная, острый угол, без тени. */
.fx.fx-doc .fyra-card{
  border-radius: 2px;
  box-shadow: none;
  padding: 34px 32px;
}

/* ══════════════════════════════════════════════════════════════════
   3. ДОКУМЕНТНАЯ ТИПОГРАФИКА
   ══════════════════════════════════════════════════════════════════ */
/* Заголовки — Unbounded, светлый paper. */
.fx.fx-doc h1,
.fx.fx-doc h2,
.fx.fx-doc h3,
.fx.fx-doc h4,
.fx.fx-doc .cp-title,
.fx.fx-doc .tr-title,
.fx.fx-doc .cp-section-title,
.fx.fx-doc .help-hero-title,
.fx.fx-doc .legal-page-title,
.fx.fx-doc .help-support-title{
  font-family: var(--fd);
  color: var(--paper);
  letter-spacing: -.02em;
}

/* Главный заголовок документа — крупный, с центрированным огненным маркером. */
.fx.fx-doc .cp-title,
.fx.fx-doc .tr-title,
.fx.fx-doc .help-hero-title,
.fx.fx-doc .legal-page-title{
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}
.fx.fx-doc .cp-title::after,
.fx.fx-doc .tr-title::after,
.fx.fx-doc .help-hero-title::after,
.fx.fx-doc .legal-page-title::after{
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin: 16px auto 0;
  background: var(--fire);
  border-radius: 2px;
}

/* Эмблема-иконка документа (partials/icon 'doc' — SVG со stroke=currentColor):
   без правила наследует светлый paper карточки. Красим в fire, чтобы перекликалась
   с огненным маркером H1 под ней. .cp-icon/.err-icon — эмодзи, CSS-color их не берёт. */
.fx.fx-doc .tr-icon{ color: var(--flame); line-height: 1; }
.fx.fx-doc .tr-icon .ic{ filter: drop-shadow(0 0 10px rgba(236,32,6,.30)); }

/* Тело документа — Onest, мягкий светлый цвет, воздушный line-height. */
.fx.fx-doc .cp-content,
.fx.fx-doc .tr-content{
  font-family: var(--fb);
  color: #C9CDD4;
  line-height: 1.72;
  font-size: 16px;
}
.fx.fx-doc .cp-paragraph,
.fx.fx-doc .cp-content p,
.fx.fx-doc .tr-content p,
.fx.fx-doc .cp-list li,
.fx.fx-doc .cp-content li,
.fx.fx-doc .tr-content li{
  color: #C9CDD4;
  line-height: 1.72;
}
.fx.fx-doc .cp-content strong,
.fx.fx-doc .tr-content strong{ color: var(--paper); }

/* Разделительные заголовки внутри контента — чуть плотнее. */
.fx.fx-doc .cp-section-title{ font-size: 1.2rem; margin-top: 34px; }

/* Ссылки-инлайн внутри контента: золотой акцент + подчёркивание на hover. */
.fx.fx-doc .cp-content a,
.fx.fx-doc .cp-contact-link,
.fx.fx-doc .tr-content a,
.fx.fx-doc .faq-article-answer a{
  color: var(--gold);
  text-decoration: none;
  text-underline-offset: 2px;
}
.fx.fx-doc .cp-content a:hover,
.fx.fx-doc .cp-contact-link:hover,
.fx.fx-doc .tr-content a:hover,
.fx.fx-doc .faq-article-answer a:hover{ text-decoration: underline; }

/* Код / pre — моно на угольном фоне. */
.fx.fx-doc .cp-content code,
.fx.fx-doc .tr-content code,
.fx.fx-doc .cp-content pre,
.fx.fx-doc .tr-content pre{
  font-family: var(--fm);
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: #D8DCE3;
}
.fx.fx-doc .cp-content code,
.fx.fx-doc .tr-content code{ padding: 2px 6px; font-size: .9em; }
.fx.fx-doc .cp-content pre,
.fx.fx-doc .tr-content pre{ padding: 14px 16px; overflow-x: auto; }
.fx.fx-doc .tr-content pre code{ background: none; border: 0; padding: 0; }

/* Таблицы — заголовки моно/капс, границы по --line. */
.fx.fx-doc .tr-content th{
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--coal);
  border-color: var(--line);
}
.fx.fx-doc .tr-content td{ border-color: var(--line); }

/* Заголовочные разделители страниц: гасим захардкоженный светлый #E5E7EB. */
.fx.fx-doc .tr-header,
.fx.fx-doc .cp-header{ border-bottom: 1px solid var(--line); }

/* Плашка «В разработке» — в fire-тонах вместо светло-жёлтой. */
.fx.fx-doc .tr-dev-warning{
  background: rgba(255,198,26,.06);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
}
.fx.fx-doc .tr-dev-title{ color: var(--gold); }
.fx.fx-doc .tr-dev-text{ color: var(--dim); }

/* ══════════════════════════════════════════════════════════════════
   4. HELP (FAQ / аккордеоны)
   ══════════════════════════════════════════════════════════════════ */
/* Тело ответа статьи — читаемее, чем dim. */
.fx.fx-doc .faq-article-answer{ color: #C9CDD4; }
/* Кнопка «назад» — тихая (не золотая), огонь только на hover. */
.fx.fx-doc .help-back-btn{ color: var(--dim) !important; }
.fx.fx-doc .help-back-btn:hover{ color: var(--paper) !important; border-color: var(--flame) !important; }
/* Кнопка «Создать запрос»: help.css:419 держит АМБЕРНЫЙ hover-glow старой темы
   (rgba(255,184,77,.4)) — перекрашиваем в fire-красный, чтобы не выбивался. */
.fx.fx-doc .help-support-btn-primary:hover{ box-shadow: 0 8px 32px rgba(236,32,6,.30); }

/* ══════════════════════════════════════════════════════════════════
   5. LEGAL-DOCUMENTS (список ссылок на документы)
   ══════════════════════════════════════════════════════════════════ */
/* Строка-ссылка: читаемый paper (перебиваем глобальное a:not(.btn) → --link),
   огонь — в буллете и стрелке/бордере на hover (через ремап --primary). */
.fx.fx-doc .legal-document-item{ color: var(--paper) !important; }
.fx.fx-doc .legal-document-name{ color: var(--paper); }
.fx.fx-doc .legal-document-item:hover .legal-document-name{ color: var(--gold); }

/* Эмблемы категорий: legal.css:177-191 хардкодит role-градиенты (синий/зелёный/
   фиолетовый) — на fire-теме читаются чужеродно. Унифицируем в огненный градиент;
   роль по-прежнему различима по подписи и глифу внутри. */
.fx.fx-doc .legal-category[data-role="general"] .legal-category-icon,
.fx.fx-doc .legal-category[data-role="donor"] .legal-category-icon,
.fx.fx-doc .legal-category[data-role="streamer"] .legal-category-icon,
.fx.fx-doc .legal-category[data-role="advertiser"] .legal-category-icon{
  background: var(--fire-soft);
}

/* ══════════════════════════════════════════════════════════════════
   6. ERROR / 404 — центрированная карточка (не документная колонка)
   ══════════════════════════════════════════════════════════════════ */
.fx.fx-doc .personal{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 56px 20px;
}
.fx.fx-doc .personal .content{ width: 100%; max-width: 480px; }
.fx.fx-doc .err-card{
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 40px 34px;
  text-align: center;
}
.fx.fx-doc .err-icon{ font-size: 40px; margin-bottom: 14px; }
.fx.fx-doc .err-title{
  font-family: var(--fd);
  font-size: clamp(22px, 3vw, 30px);
  color: var(--paper);
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.fx.fx-doc .err-message{ color: var(--dim); line-height: 1.6; margin: 0; }
.fx.fx-doc .err-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}
.fx.fx-doc .err-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: transparent;
  color: var(--paper) !important;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.fx.fx-doc .err-actions .btn:hover{ border-color: var(--paper); }
.fx.fx-doc .err-actions .btn-primary{
  background: var(--fire-soft);
  color: #fff !important;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.fx.fx-doc .err-actions .btn-primary:hover{
  background: linear-gradient(180deg, #FF8A2E, #EC2006);
  border-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   7. АДАПТИВ
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .fx.fx-doc .fyra-card{ padding: 24px 18px; }
  .fx.fx-doc .tr-container,
  .fx.fx-doc .cp-section{ padding-top: 28px; padding-bottom: 44px; }
}