/* Карта облигаций на скринере (lib/bonds-map.js). Только токены cf-*.
   Панель встаёт между строкой итога и таблицей: карта - вид той же выборки. */

/* Цвета точек по рейтингу. Пары --cf-rt-*-fg сделаны под текст на плашке:
   в светлой теме AAA, AA и A у них почти один тёмно-зелёный, на карте их не
   различить. Для точек нужна шкала с разнесённой светлотой. КАНДИДАТЫ В
   tokens.css дизайн-системы (--cf-rt-*-dot), до решения Жени живут здесь. */
:root {
  --bm-rt-aaa: #0e7a4a; --bm-rt-aa: #3fa34d; --bm-rt-a: #93bf2e; --bm-rt-bbb: #e0ad1a;
  --bm-rt-bb: #f08a2c; --bm-rt-b: #e25534; --bm-rt-ccc: #b4232c; --bm-rt-nr: var(--cf-ink-3);
}
[data-theme="dark"] {
  --bm-rt-aaa: #2fbf7a; --bm-rt-aa: #74cf5c; --bm-rt-a: #bad94a; --bm-rt-bbb: #f2c440;
  --bm-rt-bb: #ff9f4a; --bm-rt-b: #ff6f4f; --bm-rt-ccc: #ff4d5e;
}

.bm { margin: 0 0 var(--cf-space-16); padding: var(--cf-space-18) var(--cf-space-20) var(--cf-space-14);
  border: 1px solid var(--cf-line); border-radius: var(--cf-radius-xl); background: var(--cf-surface); }
.bm[hidden] { display: none; }

.bm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12) var(--cf-space-16); flex-wrap: wrap; }
.bm-ctl { display: flex; align-items: center; gap: var(--cf-space-10); flex-wrap: wrap; }
.bm-seg button span { margin-left: 4px; color: var(--cf-ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.bm-seg button[aria-pressed="true"] span { color: var(--cf-ink-2); }
.bm-xseg[hidden] { display: none; }
.bm-curves { min-height: var(--cf-h-sm); font-size: 13px; }
.bm-curves[aria-pressed="true"] { background: var(--cf-accent-soft); border-color: var(--cf-accent-dim); color: var(--cf-accent); }

/* Рамка на карте - заданный фильтр: тем же языком, что заданные фильтры панели. */
.bm-zoom { display: inline-flex; align-items: center; gap: var(--cf-space-6); height: var(--cf-h-sm); padding: 0 10px 0 12px;
  border: 0; border-radius: var(--cf-radius-pill); background: var(--cf-accent-soft); color: var(--cf-accent);
  font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--cf-dur) ease, transform var(--cf-dur-press) cubic-bezier(.23, 1, .32, 1); }
.bm-zoom:hover { background: var(--cf-surface-3); }
.bm-zoom:active { transform: scale(.97); }
.bm-zoom[hidden] { display: none; }

/* Легенда - она же переключатель групп: клик выделяет группу, Shift - добавляет. */
.bm-leg { display: flex; flex-wrap: wrap; gap: 2px var(--cf-space-4); margin: var(--cf-space-12) 0 var(--cf-space-4) -8px; }
.bm-g { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; border: 0; border-radius: var(--cf-radius-pill);
  background: none; color: var(--cf-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--cf-dur-fast) ease, opacity var(--cf-dur) ease; }
.bm-g i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bm-g span { color: var(--cf-ink-3); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.bm-g:hover { background: var(--cf-surface-2); }
.bm-g.is-off { opacity: .45; }
.bm-g[aria-pressed="true"] { background: var(--cf-surface-2); box-shadow: inset 0 0 0 1px var(--cf-line-strong); }

.bm-plot { position: relative; height: 480px; margin: 0 -6px; border-radius: var(--cf-radius-md); outline: none; }
.bm-plot:focus-visible { box-shadow: 0 0 0 2px var(--cf-accent); }
.bm-plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bm-over { cursor: crosshair; }
.bm-home { position: absolute; top: 8px; right: 14px; background: var(--cf-surface); box-shadow: inset 0 0 0 1px var(--cf-line-strong); gap: var(--cf-space-6); }
.bm-home:hover { background: var(--cf-surface-2); }
.bm-home[hidden] { display: none; }
.bm-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--cf-space-24); color: var(--cf-ink-3); font-size: 14px; text-align: center; }
.bm-empty[hidden] { display: none; }

/* Подсказка - инверсный пузырь, как у графиков сайта. */
.bm-tip { position: absolute; z-index: 5; width: 300px; padding: 12px 14px; border-radius: var(--cf-radius-md);
  background: var(--cf-tooltip-bg); color: var(--cf-tooltip-ink); box-shadow: var(--cf-shadow-tooltip);
  font-size: 12.5px; line-height: 1.4; pointer-events: none; }
.bm-tip[hidden] { display: none; }
.bm-tip__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cf-space-10); }
.bm-tip__h b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.bm-tip__h .cf-rt { flex: none; }
.bm-tip__isin { margin-top: 2px; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; opacity: .6; }
.bm-tip__y { display: flex; align-items: baseline; gap: var(--cf-space-8); margin: var(--cf-space-8) 0 var(--cf-space-10); }
.bm-tip__y strong { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bm-tip__y span { opacity: .72; }
.bm-tip dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.bm-tip dt { opacity: .68; }
.bm-tip dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bm-tip__mates { display: flex; align-items: center; gap: 8px; margin-top: var(--cf-space-10); opacity: .8; }
.bm-tip__mates i { width: 16px; height: 0; border-top: 1.5px solid currentColor; }
.bm-tip__go { margin-top: var(--cf-space-8); opacity: .55; font-size: 12px; }

.bm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--cf-space-16); margin-top: var(--cf-space-8);
  font-size: 12.5px; color: var(--cf-ink-3); }
.bm-count { color: var(--cf-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.bm-key { display: inline-flex; align-items: center; gap: 7px; }
.bm-key[hidden] { display: none; }
.bm-k-size { width: 14px; height: 10px; flex: none; background:
  radial-gradient(circle at 3px 6px, var(--cf-ink-3) 2.2px, transparent 2.6px),
  radial-gradient(circle at 10px 5px, var(--cf-ink-3) 4px, transparent 4.4px); }
.bm-k-ring { width: 9px; height: 9px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--cf-ink-3); }
.bm-k-ofz { width: 18px; height: 0; flex: none; border-top: 1.5px dashed var(--cf-chart-muted); }
.bm-hint { margin-left: auto; }

/* Кнопка «Карта» в строке итога - соседка «Новых размещений», тот же облик. */
.bm-toggle svg { width: 16px; height: 16px; }

@media (hover: none) { .bm-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .bm-g, .bm-zoom { transition: none; } }

@media (max-width: 767px) {
  .bm { margin: 0 0 var(--cf-space-12); padding: var(--cf-space-14) var(--cf-space-12) var(--cf-space-12); border-radius: var(--cf-radius-lg); }
  .bm-head { gap: var(--cf-space-8); }
  .bm-ctl { width: 100%; }
  .bm-curves { display: none; }
  .bm-leg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; }
  .bm-leg::-webkit-scrollbar { display: none; }
  .bm-g { flex: none; }
  .bm-plot { height: 360px; margin: 0 -4px; }
  .bm-tip { left: 6px; right: 6px; top: auto; bottom: 46px; width: auto; }
}

/* На телефоне «Новые размещения» уходят в ряд наборов, а карта остаётся в строке итога. */
@media (max-width: 767px) { .ss-bar .bm-toggle { display: inline-flex; } }