/* Облик Coinbase для разделов портала: общая основа.
 *
 * Здесь то, что одинаково у всех переведённых разделов: палитра (синий
 * акцент действия, нейтрали, лайм как знак бренда), Public Sans с
 * табличными цифрами, заголовок раздела с лаймовой чертой, мультиселект.
 * Шапка и подвал живут в своих общих файлах (site-header.css,
 * site-footer.css) и с 23.09.2026 в том же облике на всём сайте.
 * Своё у каждого раздела - в его файле: bonds-cb.css, stocks-cb.css.
 *
 * Слой включается классом html.cb, его ставит строка в <head> страницы;
 * по ?old страница открывается в прежнем виде для сравнения.
 *
 * Почему так, а не правкой старых стилей: разметку и поведение не трогаем
 * вовсе, меняется только вид, и откатить его - убрать две строки в <head>.
 */

html.cb body { background: #f7f8fa; }
:root[data-theme="dark"].cb body { background: #0a0b0d; }

html.cb main, html.cb dialog {
  --acc: #0052ff; --acc2: #003ecb; --acc-soft: #eef3ff; --acc-ring: rgba(0,82,255,.18);
  --acc-ink: #fff;
  --pnl: #fff; --pnl2: #f3f5f8; --pnl3: #e9edf2;
  --line: #eceef2; --line2: #dde1e7;
  --c-ink: #0a0b0d; --c-ink2: #4b5260; --c-ink3: #646b77;
  --c-up: #0a7c4a; --c-dn: #cf202f; --c-up-soft: #e8f6ef; --c-dn-soft: #fdeceb;
  --c-vio: #6d4ae0; --c-vio-soft: #f1edfd;
  --c-amb: #95620a; --c-amb-soft: #fdf4e3;
  --c-teal: #0c7c87; --c-teal-soft: #e5f5f6;

  /* Старые токены страницы переводим на нейтрали Coinbase: всё, что внутри
     main и не переопределено ниже, само встаёт в новую палитру. Диалоги
     (фильтры и колонки крипты) живут вне main - им те же токены. */
  --white: var(--pnl); --g50: var(--pnl2); --g100: var(--line); --g200: var(--line);
  --g300: var(--line2); --g400: var(--c-ink3); --g500: var(--c-ink3); --g700: var(--c-ink2);
  --g900: var(--c-ink); --ink: var(--c-ink); --thead-bg: var(--pnl);
  --up: var(--c-up); --down: var(--c-dn);

  font-family: 'Public Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"].cb main, :root[data-theme="dark"].cb dialog {
  --acc: #4d8dff; --acc2: #7fabff; --acc-soft: rgba(77,141,255,.14); --acc-ring: rgba(77,141,255,.28);
  --acc-ink: #fff;
  --pnl: #131519; --pnl2: #1b1e23; --pnl3: #23272e;
  --line: #22262c; --line2: #30353d;
  --c-ink: #f3f6fa; --c-ink2: #b3bac5; --c-ink3: #8d95a1;
  --c-up: #3ecf87; --c-dn: #ff6b6b; --c-up-soft: rgba(62,207,135,.14); --c-dn-soft: rgba(255,107,107,.14);
  --c-vio: #a78bfa; --c-vio-soft: rgba(167,139,250,.15);
  --c-amb: #f0b84a; --c-amb-soft: rgba(240,184,74,.14);
  --c-teal: #3fc9d6; --c-teal-soft: rgba(63,201,214,.14);
}

/* Один шрифт на весь раздел. Точечно по классам не выйти: моноширинный
   прописан в двух десятках правил с разным весом селектора. */
html.cb main *, html.cb main *::before, html.cb main *::after,
html.cb dialog *, html.cb dialog *::before, html.cb dialog *::after { font-family: inherit !important; }
html.cb main ::selection { background: var(--acc-soft); color: var(--c-ink); }

/* ── заголовок раздела ─────────────────────────────────────────────────── */
html.cb main h1 { font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
/* Черта под заголовком раздела - фирменный знак портала, лаймовая
   (выбор Жени 23.09.2026 после сравнения с синей). */
html.cb main .rule { display: block; width: 56px; height: 4px; border-radius: 99px;
  background: #c8f048; margin: 14px 0 12px; }
html.cb main .sub { font-size: 15px; color: var(--c-ink3); }
html.cb main .status { font-size: 13px; font-weight: 500; color: var(--c-ink3); display: inline-flex;
  align-items: center; gap: 6px; }
html.cb main .status .live { color: var(--c-up); font-weight: 600; }


/* ── выпадающие мультиселекты (lib/msel.css) ───────────────────────────── */
/* Компонент общий у облигаций, фондов и недвижимости - и вид у него общий. */
html.cb main .msel-pop { border-radius: 16px; border: 1px solid var(--line); background: var(--pnl);
  box-shadow: 0 2px 6px rgba(10,11,13,.05), 0 18px 44px rgba(10,11,13,.14); padding: 14px; top: calc(100% + 8px); }
:root[data-theme="dark"].cb main .msel-pop { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.55); }
html.cb main .msel-quick { gap: 6px; border-bottom-color: var(--line); }
html.cb main .qbtn { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--line2);
  color: var(--c-ink2); }
html.cb main .qbtn:hover { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
html.cb main .msel-grid { gap: 6px; }
html.cb main .msel-grid .grp, html.cb main .msel-sec-t, html.cb main .grp-btn {
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink3); }
html.cb main .msel-grid .grp::first-letter, html.cb main .msel-sec-t::first-letter { text-transform: uppercase; }
html.cb main .msel-sec-t .hint { font-weight: 400; color: var(--c-ink3); }
html.cb main .grp-btn:hover { color: var(--c-ink); }
html.cb main .grp-btn .box { border-radius: 5px; border-color: var(--line2); background: var(--pnl); }
html.cb main .grp-btn:hover .box, html.cb main .grp-btn.is-part .box { border-color: var(--acc); }
html.cb main .grp-btn[aria-pressed="true"] .box { background: var(--acc); border-color: var(--acc); }
html.cb main .grp-btn .tick { color: #fff; }
html.cb main .grp-btn.is-part .box::after { background: var(--acc); }
html.cb main .grp-btn:hover .grp-act, html.cb main .grp-btn:focus-visible .grp-act { color: var(--acc); }

html.cb main .chip { font-size: 13px; font-weight: 600; border: 1px solid transparent; background: var(--pnl2);
  color: var(--c-ink2); border-radius: 999px; }
html.cb main .chip:hover { background: var(--pnl3); border-color: transparent; color: var(--c-ink); }
html.cb main .chip[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
html.cb main .chip[aria-pressed="true"] .chip-n { color: rgba(255,255,255,.78); }
html.cb main .chip .chip-n { font-size: 11.5px; color: var(--c-ink3); }
html.cb main .chip-wide { border-radius: 12px; }
html.cb main .chip:focus-visible, html.cb main .qbtn:focus-visible, html.cb main .grp-btn:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px; }
html.cb main .msel-foot { border-top-color: var(--line); }
html.cb main .msel-all, html.cb main .msel-clear { font-size: 13px; font-weight: 600; color: var(--c-ink2); }
html.cb main .msel-all:hover { color: var(--acc); }
html.cb main .msel-search { height: 40px; border-radius: 10px; border: 1px solid transparent; background: var(--pnl2);
  font-size: 14px; }
html.cb main .msel-search:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); background: var(--pnl); }
html.cb main .branch-sec::after { background: linear-gradient(to top, var(--pnl), transparent); }