/* Рыночные страницы (главная, кривая ОФЗ, тепловые карты облигаций и акций)
 * в облике Coinbase.
 *
 * Все четыре собраны на одной старой системе в своём <style>: Manrope,
 * JetBrains Mono у чисел и подписей, лайм как цвет выбранного и линий.
 * Слой переводит их на cfpro-design-system без смены разметки: класс
 * html.mcb (строка в <head>), по ?old - прежний вид. Старые переменные
 * переназначены на токены /lib/cf/tokens.css; ступени тепловых карт
 * (--u1..5, --d1..5) не трогаем - это цвет знака изменения, он и по
 * системе зелёный/красный.
 *
 * Селекторы с body перебивают тёмную палитру страниц, заданную на
 * :root[data-theme="dark"] body. Создано 25.09.2026. */

html.mcb[data-theme] body {
  --ink: var(--cf-ink); --g900: var(--cf-ink); --g700: var(--cf-ink-2); --g500: var(--cf-ink-3); --g400: var(--cf-ink-3);
  --g300: var(--cf-line-strong); --g200: var(--cf-line); --g100: var(--cf-surface-2); --g50: var(--cf-canvas);
  --white: var(--cf-surface); --paper: var(--cf-surface); --thead-bg: var(--cf-surface);
  --rule: var(--cf-line); --rule-soft: var(--cf-line);
  --lime: var(--cf-accent); --lime600: var(--cf-accent); --lime-line: var(--cf-accent); --lime-soft: var(--cf-accent-soft);
  --blue: var(--cf-accent); --blue-soft: var(--cf-accent-soft);
  --chart: var(--cf-accent); --chart-soft: var(--cf-accent-soft);
  --up: var(--cf-up); --down: var(--cf-down);
  --tip-bg: var(--cf-tooltip-bg); --tip-fg: var(--cf-tooltip-ink);
  background: var(--cf-canvas); color: var(--cf-ink);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
/* Один шрифт на всю страницу: моноширинный прописан в десятках правил с
   разным весом селектора, точечно не перебить. SVG графиков - тоже. */
html.mcb main, html.mcb main *, html.mcb .tip, html.mcb .tip * { font-family: var(--font-sans) !important; }
html.mcb main svg text { font-family: var(--font-sans) !important; }
html.mcb ::selection { background: var(--cf-accent-soft); color: var(--cf-ink); }
html.mcb :focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }

/* Заголовок раздела: вес 700, трекинг системы, лаймовая черта - знак бренда. */
html.mcb main h1 { font-weight: 700; letter-spacing: -0.035em; }
html.mcb main h2 { font-weight: 600; letter-spacing: -0.02em; }

/* Капс и разрядка в подписях запрещены системой. */
html.mcb main [class], html.mcb main th, html.mcb main small { text-transform: none; letter-spacing: normal; }

/* Выбранное - синее: сегменты, чипы, вкладки. На старых страницах выбранный
   сегмент был чёрной или лаймовой плашкой. */
/* Только переключатели: плитки тепловых карт - тоже кнопки, и общее
   правило для всех button делало из прямоугольников круги. */
html.mcb main :is(.seg, .per, .tk-tabs, .sizer) > button { border-radius: var(--cf-radius-pill); }
html.mcb main :is(.seg, .per, .tk-tabs, .sizer) > button:is([aria-pressed="true"], .active) {
  background: var(--cf-accent-fill); border-color: var(--cf-accent-fill); color: var(--cf-on-accent);
}
html.mcb main :is(.more > button, .tk-more, .go, .reg-more) { border-radius: var(--cf-radius-pill); }

html.mcb main a:not([class]) { color: var(--cf-accent); }

@media (max-width: 767px) {
  html.mcb main h1 { font-size: 28px; line-height: 1.12; }
}

/* ── ОФЗ на телефоне ──────────────────────────────────────────────────────
   Переключатель периода - лента с прокруткой (обрезался на «Месяц»);
   таблица выпусков - список: выпуск и погашение слева, доходность и цена
   справа. Код выпуска дублировал название и выталкивал цифры за край. */
@media (max-width: 767px) {
  html.mcb main .panel > .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; flex: 1 1 100%; min-width: 0; max-width: 100%; scrollbar-width: none; }
  html.mcb main .panel > .seg::-webkit-scrollbar { display: none; }
  html.mcb main .panel > .seg > button { flex: none; }
  html.mcb main table:has(#rows) { display: block; min-width: 0 !important; width: 100%; }
  html.mcb main table:has(#rows) thead { display: none; }
  html.mcb main #rows { display: block; }
  html.mcb main #rows > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--cf-line); }
  html.mcb main #rows > tr > td { display: none; padding: 0 !important; border: 0; text-align: left; height: auto; min-height: 0; line-height: 1.3; max-width: none; overflow: visible; white-space: normal; }
  html.mcb main #rows > tr > td[colspan] { display: block; grid-column: 1 / -1; }
  html.mcb main #rows > tr > td:nth-child(2) { display: block; grid-column: 1; grid-row: 1; font-weight: 600; font-size: 15px; }
  html.mcb main #rows > tr > td:nth-child(3) { display: block; grid-column: 1; grid-row: 2; color: var(--cf-ink-3); font-size: 13px; }
  html.mcb main #rows > tr > td:nth-child(3)::before { content: "погашение "; }
  html.mcb main #rows > tr > td:nth-child(7) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; font-size: 16px; }
  html.mcb main #rows > tr > td:nth-child(7)::after { content: "%"; font-size: 12px; font-weight: 600; color: var(--cf-ink-3); }
  html.mcb main #rows > tr > td:nth-child(6) { display: block; grid-column: 2; grid-row: 2; text-align: right; color: var(--cf-ink-3); font-size: 13px; }
  html.mcb main #rows > tr > td:nth-child(6)::before { content: "цена "; }
  html.mcb main #rows > tr > td:nth-child(6)::after { content: "%"; }
}

/* Подписи 10-11 px (единицы, названия в «движениях дня», объёмы, чипы,
   вкладки) ниже порога системы 11,5 px - аудитория взрослая. Плитки
   тепловых карт не трогаем: там кегль подобран под размер плитки. */
html.mcb main :is(.k, .u, .volf, .r-name, .chip, .pf, .fn, .now-foot, .m, .scale-lb, .status, .live, .tk):not(.tile *) { font-size: 12px; }
html.mcb main :is(.tk-tabs, .seg, .per) > button { font-size: 12.5px; }