/* Скринер облигаций в облике Coinbase - тот же язык, что у карточки выпуска.
 * Общая основа (палитра, шрифт, заголовок, шапка, подвал) - в cb-skin.css,
 * здесь только своё: фильтры, мультиселекты, таблица, лента изменений
 * рейтингов и мобильный список.
 *
 * Лента изменений рейтингов - список строк в одной панели, а не сетка
 * карточек: сетка на пять колонок при шести событиях оставляла дыру в
 * четыре карточки, у списка дыр не бывает при любом числе строк.
 */
/* ── панель фильтров ───────────────────────────────────────────────────── */
html.cb main .filters { --ctl-h: 44px; background: var(--pnl); border: 1px solid var(--line);
  border-radius: 20px; padding: 18px 20px 20px; box-shadow: none; gap: 16px 12px; margin: 24px 0 16px; }
html.cb main .fg { gap: 7px; }
html.cb main .fg label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--c-ink3); line-height: 1.25; }

html.cb main .fg input, html.cb main .fg select, html.cb main .msel-btn {
  height: var(--ctl-h); padding: 0 14px; border-radius: 12px; border: 1px solid transparent;
  background-color: var(--pnl2); color: var(--c-ink); font-size: 14.5px; font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  -moz-appearance: textfield; }
html.cb main .fg input::-webkit-outer-spin-button,
html.cb main .fg input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.cb main .fg input::placeholder { color: var(--c-ink3); opacity: 1; }
html.cb main .fg input:hover, html.cb main .msel-btn:hover { background-color: var(--pnl3); border-color: transparent; }
html.cb main .fg input:focus, html.cb main .msel-btn:focus-visible,
html.cb main .msel-btn[aria-expanded="true"] {
  outline: none; background-color: var(--pnl) !important; border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px var(--acc-ring); }
html.cb main .msel-chev { color: var(--c-ink3); width: 14px; height: 14px; }

/* Выбранное значение: мягкая синяя заливка и синий текст. Лаймовая подложка
   и рамка из общего правила здесь не нужны. */
html.cb main .filters input.on, html.cb main .msel.has-val .msel-btn {
  background-color: var(--acc-soft) !important; border-color: transparent !important;
  color: var(--acc) !important; font-weight: 600; }
html.cb main .msel.has-val .msel-chev { color: var(--acc); }

/* «от - до» - одно поле с перегородкой, а не два одинаковых прямоугольника:
   это одна величина, и читаться она должна как один контрол. */
html.cb main .fg .row { gap: 0; position: relative; border-radius: 12px; background: var(--pnl2);
  border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
html.cb main .fg .row:hover { background: var(--pnl3); }
html.cb main .fg .row input { height: calc(var(--ctl-h) - 2px); background-color: transparent !important;
  border: 0 !important; border-radius: 12px; box-shadow: none !important; min-width: 0; min-height: 0; }
html.cb main .fg .row input:hover { background-color: transparent; }
html.cb main .fg .row input + input { border-radius: 0 12px 12px 0;
  background-image: linear-gradient(var(--line2), var(--line2)) !important;
  background-repeat: no-repeat !important; background-size: 1px 20px !important;
  background-position: left center !important; }
html.cb main .fg .row:focus-within { background: var(--pnl); border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }
html.cb main .fg .row:has(input.on) { background: var(--acc-soft); }
html.cb main .fg .row:has(input.on):focus-within { background: var(--pnl); }
html.cb main .fg .row input.on { color: var(--acc) !important; }

html.cb main .resetbtn { height: var(--ctl-h); border-radius: 999px; border: 1px solid var(--line2);
  background: var(--pnl); color: var(--c-ink2); font-size: 14px; font-weight: 600; padding: 0 18px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
html.cb main .resetbtn:hover { background: var(--pnl2); border-color: var(--line2); color: var(--c-ink); }
html.cb main .resetbtn.show { background: var(--acc-soft); border-color: transparent; color: var(--acc); }
html.cb main .resetbtn.show:hover { background: var(--acc); color: var(--acc-ink); }
html.cb main .resetbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acc-ring); border-color: var(--acc); }

/* ── таблица ───────────────────────────────────────────────────────────── */
html.cb main .tablewrap { border-radius: 20px; border: 1px solid var(--line); box-shadow: none; background: var(--pnl); }
html.cb main .scroll { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
/* Таблица ровно на экран (Женя, 28.09.2026): докрутил до строки итога - и
   таблица достаёт до низа окна, без пустоты под ней. 86 = отступ под шапкой 12
   + строка итога 32 и 10 под ней + рамка и верхняя полоса прокрутки 16 +
   отступ снизу 16. Высоту шапки меряет скрипт страницы (--bonds-hdr). */
html.cb main .tablewrap .scroll { max-height: max(360px, calc(100dvh - var(--bonds-hdr, 71px) - 86px)); }
html.cb main .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
html.cb main .scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px;
  border: 3px solid var(--pnl); }
html.cb main .scroll::-webkit-scrollbar-track { background: transparent; }
html.cb main .scroll table { font-size: 14px; }
/* Дублёр горизонтальной прокрутки над шапкой (ui-scroll.js) остаётся - без
   него до правых колонок надо мотать к низу таблицы. Только вписан в рамку:
   тонкий, с отступами от скругления и без серой подложки. */
html.cb main .hbar { height: 12px; margin: 6px 18px -4px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
html.cb main .hbar::-webkit-scrollbar { height: 6px; }
html.cb main .hbar::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; }
html.cb main .hbar::-webkit-scrollbar-thumb:hover { background: var(--c-ink3); }
html.cb main .hbar::-webkit-scrollbar-track { background: transparent; }
html.cb main .fg .row input, html.cb main #q { padding: 0 12px; }

html.cb main .scroll thead th { background: var(--pnl); color: var(--c-ink3); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; padding: 14px 10px 12px; border-bottom: 1px solid var(--line); }
html.cb main .scroll thead th:hover, html.cb main .sortbtn:hover { color: var(--c-ink); }
html.cb main .scroll thead th[aria-sort="ascending"], html.cb main .scroll thead th[aria-sort="descending"] {
  color: var(--c-ink); font-weight: 600; }
html.cb main .scroll thead th .sar { color: var(--acc); }
html.cb main .sortbtn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
html.cb main .scroll thead th:first-child { padding-left: 20px; }

html.cb main .scroll tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--c-ink);
  font-weight: 450; }
html.cb main .scroll tbody td:first-child { padding-left: 20px; }
html.cb main .scroll tbody tr { transition: background-color .12s ease; }
html.cb main .scroll tbody tr:hover,
html.cb main .scroll tbody tr:hover td:first-child { background: var(--pnl2); }
html.cb main .scroll thead th:first-child,
html.cb main .scroll tbody td:first-child { background: var(--pnl); }
html.cb main .scroll.shifted thead th:first-child,
html.cb main .scroll.shifted tbody td:first-child { box-shadow: 10px 0 14px -10px rgba(10,11,13,.16); }
:root[data-theme="dark"].cb main .scroll.shifted tbody td:first-child,
:root[data-theme="dark"].cb main .scroll.shifted thead th:first-child { box-shadow: 10px 0 14px -10px rgba(0,0,0,.7); }

html.cb main .name { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
/* Название выпуска полужирное, как у акций, фондов и крипты. Правило выше не
   срабатывало с 23.09: его перебивало «.scroll tbody td { font-weight: 450 }»
   с более длинным селектором, и названия рисовались почти обычным весом.
   (25.09.2026, Женя: тонкий шрифт не нравится.) */
html.cb main .scroll tbody td.name { font-weight: 600; }
html.cb main #rows .bl:hover { color: var(--acc); }
html.cb main .scroll .issuer-ava, html.cb main .scroll .issuer-logo { width: 32px; height: 32px; flex-basis: 32px; }
html.cb main .scroll .issuer-name { gap: 12px; }
html.cb main .issuer-monogram { font-size: 13px; font-weight: 700; }
html.cb main .issuer-monogram.gov { background: var(--acc-soft); color: var(--acc); }
html.cb main .ytm { font-weight: 600; color: var(--c-ink); }
html.cb main .ytm-shaky { color: var(--c-ink3); }

/* Метки свойств выпуска: пилюли обычным регистром вместо моноширинных
   плашек капсом. Цвет называет вид метки, а не оценку бумаги. */
html.cb main :is(.sec, .flt, .amt, .more, .qual, .subord) {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1.3; padding: 2px 8px;
  border-radius: 999px; text-transform: lowercase; vertical-align: 1px; }
html.cb main :is(.sec, .flt, .amt, .qual, .subord)::first-letter { text-transform: uppercase; }
html.cb main .sec.gov { background: var(--acc-soft); color: var(--acc); }
html.cb main .sec.corp { background: var(--pnl2); color: var(--c-ink2); }
html.cb main .sec.currency { background: var(--c-teal-soft); color: var(--c-teal); }
html.cb main .flt { background: var(--c-vio-soft); color: var(--c-vio); }
html.cb main .amt, html.cb main .more { background: var(--pnl2); color: var(--c-ink2); }
html.cb main .qual, html.cb main .subord { background: var(--c-amb-soft); color: var(--c-amb); }
html.cb main :is(.amt, .more, .tipped):is(:hover, :focus-visible) { background: var(--acc-soft); color: var(--acc); }

html.cb main .rt { font-size: 12px; font-weight: 700; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; border: 0; }
html.cb main .rt-gov { background: var(--acc-soft); color: var(--acc); }
html.cb main .rt-nr { background: var(--pnl2); color: var(--c-ink3); }
html.cb main .rt-cell .rt-val { font-size: 12.5px; font-weight: 700; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; }
/* Дата действия и название поручителя уходят второй строкой под оценку: в одну
   строку они раздували колонку до 165 пикселей, и у ОФЗ, где даты нет, между
   рейтингом и ценой стояла пустота. Строка таблицы и так высотой с логотип. */
html.cb main .scroll .rt-cell { flex-wrap: wrap; column-gap: 4px; row-gap: 3px; max-width: 110px; }
/* Подпись - обычный текст 11,5 px (меньше дизайн-система не разрешает), с
   зазором 3 px от оценки: вплотную она налезала на плашку (Женя, 28.09.2026). */
html.cb main .scroll .rt-cell :is(.rt-when, .rt-aff-note) { order: 9; flex-basis: 100%; font-family: inherit;
  font-size: 11.5px; line-height: 13px; letter-spacing: 0; }
/* 21 (оценка) + 3 + 13 (подпись) + отступы 18 = 55, с округлением 56: все строки этой высоты,
   с подписью и без, таблица не «дышит». */
html.cb main .scroll tbody tr.rowlink { height: 56px; }
/* Знак, вписанный lib/logo-fit.js: цветной фон на весь круг, без белого кольца. */
html.cb main .issuer-logo.is-fit { padding: 0; object-fit: cover; background: none; }
html.cb main .rt-more { font-size: 11.5px; color: var(--c-ink3); }

html.cb main th .q { width: 15px; height: 15px; border-color: var(--line2); color: var(--c-ink3); font-size: 9.5px; }
html.cb main th .q:hover, html.cb main th .q.show { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }

/* Подсказки: те же тёмные пузыри, только мягче и в нашем наборе. */
html.cb main :is(.est, .flt-f, .ytm-ey, .dm-exact, .qual, .amt, .more, .tipped, .nd):is(:hover, :focus-visible)::after,
html.cb main th .q:hover::after, html.cb main th .q.show::after {
  border-radius: 12px; padding: 10px 13px; font-size: 12.5px; font-weight: 450; line-height: 1.45;
  box-shadow: 0 12px 32px rgba(10,11,13,.24); }
html.cb main :is(.est, .nd, .flt-f):is(:hover, :focus-visible) { color: var(--acc); border-bottom-color: var(--acc); }

/* ── низ таблицы ────────────────────────────────────────────────────────
   Кнопки «Показать ещё» и строки «Показано N из M» нет: строки догружаются
   при прокрутке (appendMore в bonds.html), число бумаг - в строке итога над
   таблицей. Маячок для телефона невидимый. */
html.cb main .more-sentinel { height: 1px; }
html.cb main .scroll tr.more-row td { height: 1px; padding: 0; border: 0; }

/* ── лента изменений кредитных рейтингов ───────────────────────────────── */
/* Разметку строк рисует общий CF.ratings.changeCard - её же берёт страница
   ratings.html. Поэтому карточка превращается в строку сеткой, а не новой
   разметкой: .rc-top растворяется, его дети встают в свои колонки. */
html.cb main .rch { margin-top: 56px; }
/* Справка под скринером живёт вне main, но это тот же раздел - тот же набор. */
html.cb .seo-block { font-family: 'Public Sans', system-ui, sans-serif; }
html.cb .seo-block h2 { letter-spacing: -.025em; }
html.cb main .rch-head { margin-bottom: 16px; align-items: flex-end; }
html.cb main .rch-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 6px; }
html.cb main .rch-head p { font-size: 14px; color: var(--c-ink3); line-height: 1.45; }
html.cb main .rch-all { height: 44px; padding: 0 20px; border-radius: 999px; background: var(--acc); border: 0;
  color: var(--acc-ink); font-size: 14px; font-weight: 600; transition: background-color .15s ease; }
html.cb main .rch-all:hover { background: var(--acc2); }
:root[data-theme="dark"].cb main .rch-all { background: #2f6fe0; }
:root[data-theme="dark"].cb main .rch-all:hover { background: #3f7ef0; }
html.cb main .rch-all:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acc-ring); }

/* Колонки общие на всю ленту (subgrid): иначе каждая строка считает ширины
   сама, и рейтинг с пометкой агентства пляшут от строки к строке. */
html.cb main #rchGrid.rch-grid { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto auto auto;
  gap: 0; background: var(--pnl); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
html.cb main #rchGrid .rc {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  grid-template-areas: "date name move act meta"; align-items: center; column-gap: 20px;
  padding: 15px 22px; border-radius: 0; background: none; box-shadow: none; transform: none;
  border-top: 1px solid var(--line); transition: background-color .12s ease; }
html.cb main #rchGrid > .rc:first-child { border-top: 0; }
html.cb main #rchGrid .rc:hover { background: var(--pnl2); box-shadow: none; transform: none; }
html.cb main #rchGrid .rc-top { display: contents; }
html.cb main #rchGrid .rc-date { grid-area: date; font-size: 13px; color: var(--c-ink3); }
html.cb main #rchGrid .rc-name { grid-area: name; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cb main #rchGrid .rc-name a:hover { color: var(--acc); text-decoration: none; }
html.cb main #rchGrid .rc-move { grid-area: move; font-size: 14.5px; gap: 7px; }
html.cb main #rchGrid .rc-move > span[aria-hidden] { color: var(--c-ink3); }
html.cb main #rchGrid .rc-old { color: var(--c-ink3); }
html.cb main #rchGrid .rc-new { font-weight: 700; color: var(--c-ink); }
html.cb main #rchGrid .rc-act { grid-area: act; justify-self: start; font-size: 12.5px; font-weight: 600;
  padding: 4px 11px 4px 9px; }
html.cb main #rchGrid .rc-act.up { background: var(--c-up-soft); color: var(--c-up); }
html.cb main #rchGrid .rc-act.down { background: var(--c-dn-soft); color: var(--c-dn); }
html.cb main #rchGrid .rc-act.new { background: var(--acc-soft); color: var(--acc); }
html.cb main #rchGrid .rc-act.hold { background: var(--pnl2); color: var(--c-ink2); }
html.cb main #rchGrid .rc-act.off { background: var(--c-amb-soft); color: var(--c-amb); }
html.cb main #rchGrid .rc-meta { grid-area: meta; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; gap: 8px; font-size: 13px;
  color: var(--c-ink3); }
html.cb main #rchGrid .rc-ag { font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 3px 9px;
  border-radius: 999px; background: var(--pnl2); color: var(--c-ink2); }
html.cb main #rchGrid .rc-isin { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: none;
  border: 1px solid var(--line2); color: var(--c-ink2); }
html.cb main #rchGrid .rc-isin:hover { border-color: var(--acc); color: var(--acc); }
html.cb main #rchGrid .rc-link { color: var(--acc); font-weight: 600; }

html.cb main .rch-more { margin-top: 16px; }
html.cb main .rch-btn { height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--pnl); font-size: 14px; font-weight: 600; color: var(--c-ink); }
html.cb main .rch-btn:hover { background: var(--pnl2); border-color: var(--line2); }
html.cb main .rch-note { font-size: 13px; color: var(--c-ink3); }

@media (max-width: 1100px) {
  html.cb main #rchGrid.rch-grid { display: block; }
  html.cb main #rchGrid .rc-meta { flex-wrap: wrap; white-space: normal; }
  html.cb main #rchGrid .rc { grid-template-columns: 84px minmax(0, 1fr) 76px 150px;
    grid-template-areas: "date name move act" ". meta meta meta"; row-gap: 6px; }
  html.cb main #rchGrid .rc-meta { justify-content: flex-start; }
}
@media (max-width: 700px) {
  html.cb main #rchGrid .rc { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name act" "move date" "meta meta"; padding: 14px 16px; row-gap: 6px; }
  html.cb main #rchGrid .rc-date { justify-self: end; }
  html.cb main .rch-head h2 { font-size: 21px; }
}

/* ── телефон: список вместо таблицы ────────────────────────────────────── */
@media (max-width: 767px) {
  html.cb main h1 { font-size: 28px; }
  html.cb main .mscr-top { background: var(--header-bg); border-bottom-color: var(--line); }
  html.cb main .mscr-count { font-size: 13px; font-weight: 500; }
  html.cb main .mscr-count b { color: var(--c-ink); font-weight: 700; }
  html.cb main .mscr-search svg { z-index: 1; color: var(--c-ink3); }
  html.cb main .mscr-search input { border: 1px solid transparent; background: var(--pnl2); border-radius: 12px;
    font-size: 16px; font-weight: 500; }
  html.cb main .mscr-search input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); background: var(--pnl); }
  html.cb main :is(.mscr-fbtn, .mscr-chip) { border-color: var(--line2); background: var(--pnl); font-size: 14px; font-weight: 600; }
  html.cb main .mscr-chip { color: var(--c-ink2); }
  html.cb main .mscr-chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--pnl); }
  html.cb main .mscr-fbtn[aria-expanded="true"], html.cb main .mscr-fbtn.on { background: var(--acc); border-color: var(--acc); color: #fff; }
  html.cb main .mscr-fbtn b, html.cb main .mscr-more b { background: var(--acc-soft); color: var(--acc); font-size: 11.5px; }
  html.cb main .mscr-fbtn.on b, html.cb main .mscr-fbtn[aria-expanded="true"] b { background: rgba(255,255,255,.22); color: #fff; }
  html.cb main .mscr-panel-body { background: var(--pnl2); border-top-color: var(--line); }
  html.cb main .mscr-grp-t { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink3); }
  html.cb main .mscr-opt { border: 1px solid transparent; background: var(--pnl); border-radius: 999px; font-size: 13.5px; color: var(--c-ink2); }
  html.cb main .mscr-opt[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #fff; }
  html.cb main .mscr-range input { border: 1px solid transparent; background: var(--pnl); border-radius: 10px; font-size: 16px; font-weight: 500; }
  html.cb main .mscr-range input:focus { border-color: var(--acc); }
  html.cb main .mscr-more { border: 1px solid var(--line2); border-radius: 999px; font-size: 14px; font-weight: 600; }
  html.cb main .mscr-acts { background: linear-gradient(180deg, transparent 0, var(--pnl2) 11px); }
  html.cb main .mscr-acts button { border-radius: 999px; border-color: var(--line2); background: var(--pnl); font-size: 15px; font-weight: 600; }
  html.cb main .mscr-acts button.main { background: var(--acc); border-color: var(--acc); color: #fff; }
  :root[data-theme="dark"].cb main .mscr-acts button.main,
  :root[data-theme="dark"].cb main .mscr-opt[aria-pressed="true"],
  :root[data-theme="dark"].cb main .mscr-fbtn.on { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
  html.cb main .mscr-cols { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-ink3); }
  html.cb main .mscr-sort { font-size: 11.5px; font-weight: 500; text-transform: none; }
  html.cb main .mscr-sort[data-on="1"] { color: var(--acc); font-weight: 600; }
  html.cb main .mscr-row { background: var(--pnl); border-bottom-color: var(--line); }
  html.cb main .mscr-row:active { background: var(--pnl2); }
  html.cb main .mscr-nm { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  html.cb main .mscr-sub .t { font-size: 12px; font-weight: 400; color: var(--c-ink3); letter-spacing: 0; }
  html.cb main .mscr-rt { font-size: 12px; font-weight: 700; color: var(--c-ink2); }
  html.cb main .mscr-mk { font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 6px; border-radius: 999px; }
  html.cb main .mscr-mk.put { background: var(--acc-soft); color: var(--acc); }
  html.cb main .mscr-mk.call { background: var(--c-amb-soft); color: var(--c-amb); }
  html.cb main .mscr-mk.amort, html.cb main .mscr-mk.more { background: var(--pnl2); color: var(--c-ink2); }
  html.cb main .mscr-ytm { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
  html.cb main .mscr-px, html.cb main .mscr-vol { font-size: 12.5px; font-weight: 450; }
}

@media (prefers-reduced-motion: reduce) {
  html.cb main * { transition: none !important; }
}