/* Карточка биржевого фонда (fund/<TICKER>.html) в облике Coinbase.
 *
 * Страница собрана на старых стилях bond-page.css (Manrope, моноширинные
 * цифры, лаймовая плитка с красным числом, капс «ГЛАВНОЕ ДЛЯ РЕШЕНИЯ»).
 * Этот слой переводит её на дизайн-систему cfpro-design-system, не трогая
 * разметку и генератор: включается классом html.fcb в шаблоне
 * scripts/fund-page.tpl.html, по ?old открывается прежний вид.
 *
 * Главное решение: восемь плиток-близнецов стали одной лентой ключевых
 * чисел (как у выпуска и акции) - на телефоне это сетка 2 × 4 внутри одной
 * панели, а не восемь карточек одна под другой на полтора экрана.
 *
 * Только токены /lib/cf/tokens.css. Создано 25.09.2026. */

html.fcb body {
  background: var(--cf-canvas); color: var(--cf-ink);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
html.fcb main, html.fcb main * { font-family: var(--font-sans) !important; }
html.fcb main .ticker { font-family: var(--font-mono) !important; }
html.fcb main { max-width: var(--cf-content-max); }

/* ── шапка ─────────────────────────────────────────────────────────────── */
html.fcb .crumbs { font-size: 13px; color: var(--cf-ink-3); }
html.fcb .crumbs a { color: var(--cf-ink-2); text-decoration: none; }
html.fcb .crumbs a:hover { color: var(--cf-accent); }
html.fcb .hero { align-items: center; margin-bottom: var(--cf-space-24); }
html.fcb h1 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--cf-ink); }
html.fcb h2 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--cf-ink); }
html.fcb .issuer-link { color: var(--cf-accent); font-size: 14.5px; font-weight: 500; text-decoration: none; }
html.fcb .issuer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html.fcb .badges { gap: var(--cf-space-6); margin: var(--cf-space-12) 0 0; }
html.fcb .badges span {
  display: inline-flex; align-items: center; height: var(--cf-h-tag); padding: 0 var(--cf-space-10);
  border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2);
  font-size: 12px; font-weight: 600;
}
html.fcb .badges .ticker { background: var(--cf-surface-2); color: var(--cf-ink); font-size: 12.5px; font-weight: 500; }
html.fcb .moex-link {
  display: inline-flex; align-items: center; min-height: var(--cf-h-button); padding: 0 var(--cf-space-16);
  border: 1px solid var(--cf-line-strong); border-radius: var(--cf-radius-pill); background: var(--cf-surface);
  color: var(--cf-ink); font-size: 14px; font-weight: 600;
}
html.fcb .moex-link:hover { background: var(--cf-surface-2); }

/* ── лента ключевых чисел ─────────────────────────────────────────────── */
html.fcb .decision > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.fcb .metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  overflow: hidden; border: 1px solid var(--cf-line); border-radius: var(--cf-radius-xl); background: var(--cf-surface);
}
html.fcb .metric, html.fcb .metric-primary {
  padding: var(--cf-space-18) var(--cf-space-20); border: 0; border-radius: 0; background: none;
  box-shadow: inset -1px 0 0 var(--cf-line), inset 0 -1px 0 var(--cf-line);
}
html.fcb .metric span, html.fcb .metric-primary span { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; }
html.fcb .metric strong, html.fcb .metric-primary strong {
  margin: var(--cf-space-8) 0 var(--cf-space-4); color: var(--cf-ink);
  font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em;
}
html.fcb .metric strong.metric-wrap { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; white-space: normal; }
html.fcb .metric-primary strong { font-size: 28px; letter-spacing: -0.035em; }
html.fcb .metric strong.up { color: var(--cf-up); }
html.fcb .metric strong.down { color: var(--cf-down); }
html.fcb .metric small, html.fcb .metric-primary small { color: var(--cf-ink-3); font-size: 12.5px; line-height: 1.4; }

/* ── панели ────────────────────────────────────────────────────────────── */
html.fcb .panel {
  margin-top: var(--cf-space-16); padding: var(--cf-space-24); border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-xl); background: var(--cf-surface); box-shadow: none;
}
html.fcb .years-note, html.fcb .section-head p { color: var(--cf-ink-3); font-size: 12.5px; }
html.fcb .year { border-top-color: var(--cf-line); }
html.fcb .year-n { color: var(--cf-ink); font-size: 14px; font-weight: 600; }
html.fcb .year-tag { border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2); font-style: normal; font-size: 11.5px; font-weight: 600; }
html.fcb .year-v { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
html.fcb .year.up .year-v { color: var(--cf-up); }
html.fcb .year.down .year-v { color: var(--cf-down); }
html.fcb .year-bar { background: var(--cf-surface-2); }
html.fcb .year-bar::before { background: var(--cf-line-strong); }
html.fcb .year.up .year-bar i { background: var(--cf-up); }
html.fcb .year.down .year-bar i { background: var(--cf-down); }

html.fcb .segmented { padding: var(--cf-space-4); border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); }
html.fcb .segmented button { min-height: var(--cf-h-sm); padding: 0 var(--cf-space-12); border-radius: var(--cf-radius-pill); color: var(--cf-ink-2); font-size: 13px; font-weight: 600; }
html.fcb .segmented button.active { background: var(--cf-surface); color: var(--cf-ink); box-shadow: var(--cf-shadow-thumb); }

html.fcb .facts div { border-bottom-color: var(--cf-line); padding: var(--cf-space-12) 0; }
html.fcb dt { color: var(--cf-ink-2); font-size: 14.5px; }
html.fcb dd { color: var(--cf-ink); font-size: 14.5px; font-weight: 600; }
html.fcb dd a { color: var(--cf-accent); text-decoration: none; }

html.fcb .seo-copy > p { color: var(--cf-ink-2); font-size: 15px; line-height: 1.65; max-width: var(--cf-prose-max); }
html.fcb details { border-top-color: var(--cf-line); padding: 0; }
html.fcb summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12);
  min-height: 52px; list-style: none; color: var(--cf-ink); font-size: 15px; font-weight: 600;
}
html.fcb summary::-webkit-details-marker { display: none; }
html.fcb summary::after {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--cf-ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--cf-dur-slow) var(--cf-ease);
}
html.fcb details[open] summary::after { transform: rotate(180deg); }
html.fcb details p { margin: 0 0 var(--cf-space-14); color: var(--cf-ink-2); font-size: 15px; line-height: 1.6; }
html.fcb summary:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; border-radius: var(--cf-radius-xs); }
html.fcb .source-actions { display: flex; flex-wrap: wrap; gap: var(--cf-space-8); margin-top: var(--cf-space-16); }
html.fcb .source-actions a {
  display: inline-flex; align-items: center; min-height: var(--cf-h-button); padding: 0 var(--cf-space-16);
  border: 1px solid var(--cf-line-strong); border-radius: var(--cf-radius-pill); background: var(--cf-surface);
  color: var(--cf-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
html.fcb .source-actions a:hover { background: var(--cf-surface-2); }

/* ── ноутбук и планшет ────────────────────────────────────────────────── */
@media (max-width: 980px) {
  html.fcb .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── телефон ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html.fcb main { padding-left: var(--cf-space-16); padding-right: var(--cf-space-16); }
  html.fcb .hero { display: block; margin-bottom: var(--cf-space-18); }
  html.fcb .identity { gap: var(--cf-space-8); }
  html.fcb h1 { font-size: 25px; line-height: 1.18; }
  html.fcb .hero-actions { margin-top: var(--cf-space-14); }
  html.fcb .moex-link { min-height: var(--cf-h-button); }

  html.fcb .metric, html.fcb .metric-primary { padding: var(--cf-space-14) var(--cf-space-16); }
  html.fcb .metric strong { font-size: 19px; }
  html.fcb .metric strong.metric-wrap { font-size: 16px; }
  html.fcb .metric-primary strong { font-size: 28px; }
  html.fcb .metric small { font-size: 12.5px; }
  /* Главное число - на всю ширину, остальные по два; если их нечётно,
     последнее тоже растягивается, чтобы не висела пустая половина. */
  html.fcb .metrics > .metric-primary { grid-column: 1 / -1; }
  html.fcb .metrics > .metric:last-child:nth-child(even) { grid-column: 1 / -1; }

  html.fcb .panel { padding: var(--cf-space-18) var(--cf-space-16); }
  html.fcb .chart-panel { padding-left: var(--cf-space-12); padding-right: var(--cf-space-12); }
  html.fcb .facts { grid-template-columns: 1fr; }
  html.fcb .source-actions a { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html.fcb summary::after { transition: none; }
}

/* ── страница управляющей компании (uk/<slug>.html) - тот же слой ─────────
   Шаблон scripts/uk-page.tpl.html на тех же стилях bond-page.css, поэтому
   класс html.fcb включает и его. Здесь - то, чего нет у фонда: лид, таблица
   фондов компании, блок документов. */
html.fcb .bp-logo { border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cf-line); }
html.fcb .lead { max-width: var(--cf-prose-max); color: var(--cf-ink-2); font-size: 15px; line-height: 1.6; }
html.fcb .lead b { color: var(--cf-ink); }
html.fcb .metric-small strong { font-size: 18px; }
html.fcb .table-scroll { border: 0; border-radius: 0; }
html.fcb .table-scroll th {
  background: none; color: var(--cf-ink-3); font-size: 13px; font-weight: 500; text-align: left;
  border-bottom: 1px solid var(--cf-line-strong);
}
html.fcb .table-scroll td { border-bottom-color: var(--cf-line); font-size: 14px; text-align: left; }
html.fcb .table-scroll td a { color: var(--cf-ink); font-weight: 600; text-decoration: none; }
html.fcb .table-scroll td a:hover { color: var(--cf-accent); }
html.fcb .table-scroll td.mono, html.fcb .table-scroll td.mono a { font-family: var(--font-mono) !important; font-size: 12.5px; font-weight: 500; color: var(--cf-ink-2); }
html.fcb .disclosure summary b { font-weight: 600; }
html.fcb .disclosure summary span { color: var(--cf-ink-3); font-size: 13px; font-weight: 400; }
html.fcb .doc-type { color: var(--cf-ink); font-weight: 600; }
html.fcb .doc-meta { color: var(--cf-accent); }

@media (max-width: 767px) {
  /* Таблица фондов компании: пять колонок уезжали вбок - на телефоне
     строка из двух этажей: фонд и СЧА, под ними ISIN, объекты и выплаты. */
  html.fcb .table-scroll { overflow: visible; }
  html.fcb .table-scroll table, html.fcb .table-scroll tbody { display: block; min-width: 0 !important; }
  html.fcb .table-scroll thead { display: none; }
  html.fcb .table-scroll tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--cf-space-12); row-gap: var(--cf-space-4);
    padding: var(--cf-space-12) 0; border-bottom: 1px solid var(--cf-line);
  }
  html.fcb .table-scroll td {
    display: block; position: static !important; padding: 0 !important; border: 0; white-space: normal;
    background: none !important; box-shadow: none !important; min-width: 0 !important;
  }
  html.fcb .table-scroll td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 15px; }
  html.fcb .table-scroll td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
  html.fcb .table-scroll td:nth-child(2) { grid-column: 1; grid-row: 2; }
  html.fcb .table-scroll td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; color: var(--cf-ink-3); font-size: 13px; }
  html.fcb .table-scroll td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; color: var(--cf-ink-3); font-size: 13px; }
  html.fcb .table-scroll tr:last-child { border-bottom: 0; }
}