/* /board ("Доска") — .page-title/.page-subtitle приходят глобально из portfolio-builder.css, .chart-period-buttons — глобально из bond-diagnostics-shared.css (тот же виджет периода, что у графика цены бумаги). Здесь только то, что специфично для доски. */ .board-page-container { max-width: 1080px; margin: 0 auto; padding: 20px; font-family: var(--font-primary); } /* На телефоне карточки и так уже edge-to-edge по ширине контейнера (см. фикс выравнивания выше) — узкий боковой паддинг здесь напрямую и есть зазор "край карточки — край экрана". Цель — 2мм на iPhone 16 Pro (393px CSS-viewport / 71.5мм физической ширины ≈ 5,5px/мм → 11px), по просьбе пользователя 2026-08-23 (сначала было 3мм/8px, затем сужено до 2мм). Задаём 3px, а не 11px: нигде в проекте не обнуляет дефолтный браузерный margin (8px, см. чат) - реальный зазор складывается из body-margin + этот паддинг, 8+3=11px≈2мм. Сам sitewide body-margin:0 не трогаем здесь — отдельный, более широкий по охвату фикс, см. чат. Только left/right — вертикальные отступы не трогаем. */ @media (max-width: 640px) { .board-page-container { padding-left: 3px; padding-right: 3px; } } .board-header { margin-bottom: 24px; } .board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; } @media (max-width: 780px) { /* minmax(0, 1fr), не голый 1fr — иначе трек грида не может сжаться ниже min-content содержимого (см. CLAUDE.md "CSS Grid track + min- width" и уже встречавшийся тут .reports-list): длинный неразрывный URL в footnote "Дефолты по рейтингам — эталон" (raexpert.ru/...pdf) раздувал .board-grid-defaults на 16px шире соседних карточек — те самые "плавающие" края на PWA/мобильном (баг найден 2026-08-23). min-width:0 на самой карточке — обязательная вторая половина фикса, один minmax() трек без него не помогает. */ .board-grid { grid-template-columns: minmax(0, 1fr); } .board-grid > .card { min-width: 0; } } /* Десктоп-раскладка (2026-08-19, по просьбе пользователя): ставка ЦБ + индекс МосБиржи в верхнем ряду по 2, курсы валют строкой ниже по 3 — отдельные грид-контейнеры, а не один на 4/5 карточек (разное число колонок в каждом ряду). PWA/мобильный вид (<=780px, правило выше) сознательно не трогаем, к нему вернёмся отдельно. Сама SVG внутри карточки ужимается сама (width:100% + aspect-ratio на .rate-chart) — здесь только хром карточки. */ @media (min-width: 900px) { .board-page-container { max-width: 1280px; } .board-grid-primary { grid-template-columns: repeat(2, 1fr); } .board-grid-currencies { grid-template-columns: repeat(3, 1fr); } .board-grid-defaults { grid-template-columns: repeat(2, 1fr); } .board-grid-financials { grid-template-columns: repeat(2, 1fr); } .board-grid-yield-calendar { grid-template-columns: repeat(2, 1fr); } .card { padding: 16px 16px 14px; border-radius: 12px; } .card-title { font-size: 13px; } .card-source { font-size: 10px; } .card-flag { font-size: 14px; } .headline-value { font-size: 23px; } .headline-delta { font-size: 11px; padding: 2px 7px; margin-bottom: 3px; } .sub-note { font-size: 11px; margin: 2px 0 10px; } .chart-period-buttons { gap: 4px; margin-bottom: 10px; } .chart-period-buttons button { padding: 3px 8px; font-size: 10px; } .board-pattern-note { font-size: 11px; padding: 8px 10px; margin-top: 10px; } .card-footnote { font-size: 10px; margin-top: 10px; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 22px 18px; } /* Внутренние поля карточки слева/справа — до ~2мм/11px на телефоне, той же просьбой, что и внешний зазор выше (см. .board-page-container). Верх/низ (20px/18px) не трогаем. Правило должно идти ПОСЛЕ базового .card {padding} — иначе более позднее по файлу определение с той же специфичностью (0,0,1,0) перебивает media-override, несмотря на совпавшее условие. */ @media (max-width: 640px) { .card { padding-left: 11px; padding-right: 11px; } } .card-eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .card-title-group { display: flex; align-items: center; gap: 8px; } .card-flag { font-size: 16px; line-height: 1; } .card-title { font-size: 15px; font-weight: 700; margin: 0; } .card-source { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .headline-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .headline-value { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .headline-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 5px; } .headline-delta.up { background: var(--poor-soft); color: var(--poor); } .headline-delta.down { background: var(--good-soft); color: var(--good); } .headline-delta.flat { background: var(--surface-2); color: var(--text-muted); } .headline-delta.neutral { background: var(--surface-2); color: var(--text); } .sub-note { color: var(--text-muted); font-size: 12.5px; margin: 2px 0 16px; } .sub-note b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .chart-wrap { position: relative; } svg.rate-chart { display: block; width: 100%; aspect-ratio: 640 / 180; height: auto; overflow: visible; } .rate-chart .gridline { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; } .rate-chart .gridlabel { fill: var(--text-faint); font-size: 10.5px; font-family: var(--font-primary); font-variant-numeric: tabular-nums; } .rate-chart .axislabel { fill: var(--text-faint); font-size: 10.5px; font-family: var(--font-primary); } .rate-chart .rate-area { fill: var(--accent-soft); } .rate-chart .rate-line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; } .rate-chart .rate-end-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; } .rate-chart .crosshair-line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; } .rate-chart .crosshair-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none; } /* Подписанные маркеры исторических пиков/впадин (cardEvents, см. board.ejs) - другой цвет (star), а не accent, чтобы не путать с концевой точкой/курсором графика - это "заметное историческое событие", а не "текущее состояние". Крупнее осевых подписей (10.5px/ r нет у них) - должны бросаться в глаза, а не теряться, особенно в компактных карточках курсов на десктопе (см. чат 2026-08-19, "очень мелко и на десктопе не видно"). */ .rate-chart .event-dot { fill: var(--star); stroke: var(--surface); stroke-width: 2; } .rate-chart .event-label { fill: var(--text); font-size: 13px; font-weight: 700; font-family: var(--font-primary); font-variant-numeric: tabular-nums; } .rate-chart .chart-hit { fill: transparent; cursor: crosshair; } .chart-tooltip { position: absolute; top: 4px; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .1s; } .chart-tooltip.visible { opacity: 1; } .chart-tooltip .tt-rate { font-weight: 700; font-variant-numeric: tabular-nums; } .chart-tooltip .tt-date { color: var(--text-muted); margin-left: 6px; } /* Короткий разбор "как часто повторяются пики" под графиком (cardPatternNote, см. board.ejs) - авторский текст на реальных интервалах между событиями из cardEvents, не пересчитывается на клиенте. */ .board-pattern-note { display: flex; gap: 8px; align-items: flex-start; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } .board-pattern-note .board-pattern-note-icon { flex-shrink: 0; color: var(--star); font-size: 13px; line-height: 1.45; } .card-footnote { color: var(--text-faint); font-size: 11.5px; margin-top: 14px; overflow-wrap: break-word; } /* Карточка "Дефолты по рейтингам" (см. чат 2026-08-21, views/partials/ board-default-stats-card.ejs) — статичный столбчатый график, все проценты/высоты уже посчитаны на сервере. Цвета столбцов переиспользуют риск-семантику блока "Риск по эмитентам" на /favorites (--good/--ok/ --poor/--risk-high), а не новую палитру. */ .default-stats-card .card-dek { color: var(--text-muted); font-size: 12.5px; margin: 0 0 18px; } .tier-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .tier-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); } .tier-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Медиана вынесена в статичный текст рядом с легендой, а не плавающая подпись поверх графика (см. чат 2026-08-21) — на узких экранах 6-7 столбцов дают ~50px на колонку, а подпись шире одной колонки почти всегда, при right:0 внутри графика она наезжала на подпись соседнего столбца (n=/%% крайнего бара). Пунктирная линия в графике остаётся, само число — здесь, коллизий с барами при любой ширине уже не будет. */ .median-badge { margin-left: auto; font-weight: 600; color: var(--text); } .default-chart { position: relative; } .default-chart-plot { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 168px; padding-top: 22px; border-bottom: 1.5px solid var(--border-strong); } .default-bar-col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .default-bar-value { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); margin-bottom: 5px; white-space: nowrap; } .default-bar-n { font-size: 9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-bottom: 5px; } .default-bar-fill { width: 100%; max-width: 46px; border-radius: 4px 4px 0 0; } .default-bar-fill.tier-good { background: var(--good); } .default-bar-fill.tier-ok { background: var(--ok); } .default-bar-fill.tier-poor { background: var(--poor); } .default-bar-fill.tier-risk { background: var(--risk-high); } /* Малая выборка (см. THIN_SAMPLE_THRESHOLD в boardController.js) — штриховка вместо сплошной заливки, столбец остаётся видимым, но визуально помечен как ненадёжный. */ .default-bar-fill.thin-sample { opacity: 0.55; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 3px, transparent 3px 7px); } .default-median-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--text-faint); pointer-events: none; } .default-chart-axis { display: flex; gap: 10px; margin-top: 8px; } .default-chart-axis span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-faint); font-weight: 600; } .callout-box { display: flex; gap: 10px; align-items: flex-start; background: var(--risk-high-soft); border-radius: 10px; padding: 11px 13px; margin-top: 18px; font-size: 12.5px; color: var(--text); line-height: 1.45; } .callout-box .callout-icon { flex-shrink: 0; font-size: 14px; line-height: 1.45; } .callout-box b { font-variant-numeric: tabular-nums; } /* Нейтральный вариант — для пояснительных заметок (напр. карточка "Доходность при контролируемом риске", чат 2026-08-29), где красный фон базового .callout-box читался бы как предупреждение, хотя текст просто поясняет методику. */ .callout-box.callout-info { background: var(--surface-2); color: var(--text-muted); } /* Карточка "Ручная загрузка отчётности" (см. board-manual-reports-card.ejs, public/js/board-manual-reports-card.js) — .quarter-filter-buttons переиспользует .chart-period-buttons (bond-diagnostics-shared.css, грузится на каждой странице) один в один, здесь только то, что своё: список в 2 колонки + пейджер. */ .manual-reports-card { margin-bottom: 16px; } .reports-summary-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; } .reports-summary-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .reports-summary-label { font-size: 12.5px; color: var(--text-muted); } .reports-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } @media (max-width: 640px) { .reports-list { grid-template-columns: minmax(0, 1fr); } } .report-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .report-item:hover { background: var(--surface-2); border-color: var(--border-strong); } .report-item.report-item-hidden { display: none; } .emitter-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .emitter-name { font-weight: 600; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emitter-inn { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .report-item-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .period-pills { display: flex; gap: 4px; } .period-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 3px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; } .source-chip.rsbu { background: var(--good-soft); color: var(--good); } .source-chip.ifrs { background: var(--chart-alt); color: var(--accent-contrast); } .reports-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--text-muted); } .reports-pager button { padding: 4px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; font-size: 12px; font-weight: 600; font-family: var(--font-primary); cursor: pointer; } .reports-pager button:hover:not(:disabled) { border-color: var(--border-strong); } .reports-pager button:disabled { opacity: 0.4; cursor: default; } .reports-pager.reports-pager-hidden { display: none; } /* Карточки "Рост долговой нагрузки" и "Покрытие процентов долгом" (см. чат 2026-08-22, views/partials/board-debt-growth-card.ejs и board-interest-coverage-card.ejs) — обе строятся на emitter_quarterly_financials, весь расчёт на сервере (boardController.js), партиалы только рендерят готовые строки. Префикс debt-growth-/coverage- у классов не случаен: в emitters.css уже есть неймспейс .debt-bar/.debt-bar-old/.debt-bar-new под другую карточку (график долга эмитента) — bare .debt-row/.debt-bar-track выглядели бы безопасно, но лучше явный префикс, чем полагаться, что имя ещё не занято (см. CLAUDE.md, гочта про generic bare class). */ .debt-growth-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: 16px 0 8px; } .debt-growth-section-label:first-of-type { margin-top: 0; } .debt-growth-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .debt-growth-row:last-child { border-bottom: none; } .debt-growth-name-col { flex: 0 0 168px; min-width: 0; } .debt-growth-name { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .debt-growth-inn { font-size: 10.5px; color: var(--text-faint); } .debt-growth-bar-col { flex: 1 1 auto; min-width: 0; } .debt-growth-bar-track { background: var(--surface-2); border-radius: 5px; height: 9px; overflow: hidden; } .debt-growth-bar-fill { height: 100%; border-radius: 5px; } .debt-growth-bar-fill.grow { background: var(--risk-high); } .debt-growth-bar-fill.grow-mid { background: var(--poor); } .debt-growth-bar-fill.shrink { background: var(--good); } .debt-growth-period { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; font-variant-numeric: tabular-nums; } .debt-growth-value { flex: 0 0 56px; text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .debt-growth-value.grow { color: var(--risk-high); } .debt-growth-value.shrink { color: var(--good); } /* На узких экранах 168px (имя) + 56px (значение) не оставляют места под период ("Q1'23 · 975 млн ₽ → Q1'26 · 18,3 млрд ₽") — текст переносился на 3-4 строки внутри узкой bar-col, из-за чего строки карточки скакали по высоте (баг найден 2026-08-23 вместе с шириной карточек выше). Переносим bar-col на вторую строку целиком (order+flex-basis:100%) — имя и итоговое значение остаются на одной строке сверху, полоса и период получают всю ширину карточки снизу. */ @media (max-width: 640px) { .debt-growth-row { flex-wrap: wrap; } .debt-growth-name-col { flex: 1 1 auto; order: 1; } .debt-growth-value { order: 2; } .debt-growth-bar-col { order: 3; flex-basis: 100%; margin-top: 6px; } } .coverage-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .coverage-row:last-child { border-bottom: none; } .coverage-name-col { flex: 0 0 150px; min-width: 0; } .coverage-name { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coverage-inn { font-size: 10.5px; color: var(--text-faint); } .coverage-flag { color: var(--ok); font-weight: 600; } .coverage-spark-col { flex: 1 1 auto; min-width: 0; } .coverage-spark-col svg { display: block; width: 100%; height: 30px; } .coverage-pill { flex: 0 0 auto; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; text-align: center; min-width: 56px; } .coverage-pill.risk-high { background: var(--risk-high-soft); color: var(--risk-high); } .coverage-pill.poor { background: var(--poor-soft); color: var(--poor); } .coverage-pill.ok { background: var(--ok-soft); color: var(--ok); } .coverage-pill.good { background: var(--good-soft); color: var(--good); } /* Карточка "Доходность при контролируемом риске" (см. чат 2026-08-23) — boardController.js/computeYieldRiskTable + views/partials/board-yield- risk-card.ejs. .tier-low/.tier-mid здесь — свои, локальные для .yr-yield (не путать с одноимёнными бare-классами в favorites.css: тот файл на /board не подключается, коллизии нет, но во избежание путаницы задаём их только через составной селектор .yr-yield.tier-*). */ .yr-ref { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); padding: 6px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .yr-ref b { color: var(--text-muted); font-variant-numeric: tabular-nums; } .yr-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .yr-row:last-child { border-bottom: none; } .yr-row:hover { background: var(--surface-2); } .yr-rank { flex: 0 0 18px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; } .yr-name-col { flex: 1 1 auto; min-width: 0; } .yr-name { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yr-meta { font-size: 10.5px; color: var(--text-faint); } .yr-meta .rating { color: var(--text-muted); font-weight: 600; } .yr-pill { flex: 0 0 auto; text-align: right; min-width: 74px; } .yr-yield { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; padding: 3px 9px; border-radius: 999px; } .yr-yield.tier-low { background: var(--good-soft); color: var(--good); } .yr-yield.tier-mid { background: var(--ok-soft); color: var(--ok); } .yr-yield.tier-elevated { background: var(--poor-soft); color: var(--poor); } .yr-yield.tier-high { background: var(--risk-high-soft); color: var(--risk-high); } .yr-tier-label { display: block; font-size: 9.5px; color: var(--text-faint); margin-top: 3px; } /* Три чипа-сигнала (рынок/погашение/финансы) под мета-строкой — см. computeRiskSignals() в boardController.js, мокап согласован 2026-08-31. Свои модификаторы состояния (off/on-poor/on-risk/nodata), не составные селекторы поверх .yr-yield.tier-* — это другая шкала (сигнал сработал, а не тир доходности) и других мест переиспользования нет. */ .yr-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-faint); padding-bottom: 10px; margin-bottom: 2px; } .yr-legend-item { display: inline-flex; align-items: center; gap: 4px; } .yr-legend-item .sig-chip { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; } .yr-legend-note { color: var(--text-faint); } /* Переключатель сортировки "Доходность/Дюрация" (мокап 2026-08-31, https://claude.ai/code/artifact/953da1e9-a4b0-4ff6-977e-dcca93356145) — тот же сегментированный контрол, что .fav-period-toggle в favorites.css, но своё имя: favorites.css не подключён на /board. */ .yr-sort-row { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--border); } .yr-sort-label { font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; } .yr-sort-toggle { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .yr-sort-toggle button { display: inline-flex; align-items: center; gap: 3px; border: none; background: transparent; color: var(--text-muted); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; } .yr-sort-toggle button.active { background: var(--accent); color: var(--accent-contrast); } .yr-sort-toggle button:hover:not(.active) { color: var(--text); } .yr-sort-toggle .arrow { font-size: 9px; opacity: 0.85; } .yr-meta .dur { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } /* Теги структурных особенностей выпуска (оферта/амортизация/суборд./ бессрочная, чат 2026-08-31, мокап https://claude.ai/code/artifact/82f297dd-bcc0-428b-9655-2df13c785aab) — --chart-alt/--chart-alt-soft, тот же "отдельное измерение, не risk-цвет" токен, что уже занят паттерном движения цены (см. tokens.css). Строка не рендерится вовсе, если у бумаги нет ни одного тега (см. .ejs). */ .yr-complexity { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .complexity-tag { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--chart-alt-soft); color: var(--chart-alt); cursor: help; line-height: 1.3; } .yr-signals { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .sig-chip { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; line-height: 1; flex-shrink: 0; cursor: help; } .sig-chip.off { background: var(--neutral-pill); color: var(--text-faint); } .sig-chip.on-poor { background: var(--poor-soft); color: var(--poor); } .sig-chip.on-risk { background: var(--risk-high-soft); color: var(--risk-high); } .sig-chip.nodata { background: transparent; color: var(--text-faint); border: 1.3px dashed var(--border-strong); } .ghost-card { border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-faint); background: transparent; } .ghost-card .ghost-icon { width: 30px; height: 30px; border-radius: 9px; border: 1.5px dashed var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-faint); flex-shrink: 0; } .ghost-card .ghost-text { font-size: 12.5px; color: var(--text-muted); } .ghost-card .ghost-text b { color: var(--text); font-weight: 600; } /* Карточка "Календарь отчётности" (см. board-disclosure-calendar-card.ejs, public/js/board-disclosure-calendar-card.js) — .dc-pill переиспользует те же семантические тона --poor/--ok/--good, что и .yr-yield.tier-* выше, но это отдельная шкала (просрочено/скоро/в графике, не риск доходности) - свои классы, не составной селектор поверх .yr-yield. */ .dc-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; } .dc-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; } .dc-stat-n { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .dc-stat-n.n-poor { color: var(--poor); } .dc-stat-n.n-ok { color: var(--ok); } .dc-stat-n.n-good { color: var(--good); } .dc-stat-label { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.3; } .dc-filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .dc-filter-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); border-radius: 999px; padding: 6px 13px; transition: background .15s, color .15s, border-color .15s; } .dc-filter-btn.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .dc-list-hidden { display: none; } .dc-empty { font-size: 12.5px; color: var(--text-muted); padding: 8px 4px; } .dc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border); cursor: pointer; } .dc-row:last-child { border-bottom: none; } .dc-row:hover { background: var(--surface-2); } .dc-name-col { min-width: 0; } /* .dc-name само по себе display:block - идущий следом сиблинг (бейдж) иначе падает на новую строку (block всегда начинает новую строку), поэтому имя+бейдж оборачиваются в один flex-ряд (найдено 2026-08-30, живой скриншот - бейдж съезжал над именем на АО "РКК"). */ .dc-name-line { display: flex; align-items: center; min-width: 0; } .dc-name { font-size: 13.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dc-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .dc-meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .dc-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; } .dc-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; } .dc-pill.poor { background: var(--poor-soft); color: var(--poor); } .dc-pill.ok { background: var(--ok-soft); color: var(--ok); } .dc-pill.filed, .dc-pill.pending { background: var(--good-soft); color: var(--good); } /* Известный дефолт/техдефолт/экстремально низкая цена у эмитента — заливка сплошным --poor (не soft), чтобы визуально явно отличаться от dc-pill.poor ("просто просрочено по паттерну") - это "можно не проверять, там и так беда" сигнал (см. чат 2026-08-30). */ .dc-distress-badge { display: inline-block; flex-shrink: 0; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--poor); color: var(--accent-contrast); font-size: 10px; font-weight: 700; vertical-align: middle; white-space: nowrap; } .dc-pill-sub { font-size: 10.5px; color: var(--text-faint); } .dc-good-strip { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .dc-good-strip-title { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; } .dc-good-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dc-chip { font-size: 11.5px; background: var(--good-soft); color: var(--good); border-radius: 999px; padding: 4px 10px 4px 8px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; cursor: pointer; } .dc-chip-date { color: var(--text-faint); font-weight: 400; font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .dc-summary { gap: 7px; } .dc-stat { padding: 8px 8px; } .dc-stat-n { font-size: 18px; } .dc-stat-label { font-size: 10.5px; } } /* ===== Топ-20 по обороту (тепловая карта, чат 2026-09-17) ===== Мокап: https://claude.ai/artifact/8qvydJHAvcdTW7VbywSC6K. Разметка - views/partials/board-turnover-heatmap-card.ejs, отрисовка - public/js/board-turnover-heatmap.js (данные из data-heatmap-data, инлайн-скрипт запрещён CSP). */ .hm-card { margin-bottom: 20px; } .hm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } /* Тот же язык сегментированного контрола, что .yr-sort-toggle выше в этом файле - разные карточки, поэтому свой namespace, не переиспользуем класс. */ .hm-toggle { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .hm-toggle button { border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 6px; cursor: pointer; } .hm-toggle button.active { background: var(--accent); color: var(--accent-contrast); } .hm-toggle button:hover:not(.active) { color: var(--text); } .hm-asof { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Плашка "живой" сессии на вкладке "Сегодня" - тот же язык, что тумблер "Живые данные" на главной таблице (index-page-logic.js): голубая точка --live для факта живых данных. */ .hm-session-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 7px 10px; background: var(--live-soft); border-radius: 8px; font-size: 11.5px; color: var(--text-muted); } .hm-session-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-soft); flex-shrink: 0; } .hm-session-note b { color: var(--text); font-weight: 700; } .hm-session-note .sess-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--sess-day-soft); color: var(--sess-day); padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 10.5px; } /* Мозаика - плитка растёт занятыми клетками (span) пропорционально доле оборота от лидера периода, цвет - изменение цены за тот же период, нормализованное на самый сильный ход ВНУТРИ текущей вкладки (у облигаций дневной разброс - десятые доли процента, месячный - единицы процентов; общая шкала на все вкладки красила бы "Сегодня"/"Вчера" в сплошной серый). */ .hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 58px; grid-auto-flow: dense; gap: 6px; } .hm-tile { grid-column: span 1; grid-row: span 1; border-radius: 8px; border: 1px solid var(--border); padding: 7px 9px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; cursor: default; min-width: 0; } .hm-tile--wide { grid-column: span 2; } .hm-tile--hero { grid-column: span 2; grid-row: span 2; } .hm-tile--new { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface) 6px, var(--surface) 12px); border-style: dashed; } .hm-tile-secid-row { display: flex; align-items: baseline; gap: 4px; min-width: 0; } .hm-tile-secid { font-size: 11.5px; font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .hm-tile--hero .hm-tile-secid { font-size: 14px; } /* Бейдж валюты номинала - замещающие/юаневые выпуски (см. computeTurnoverHeatmap в boardController.js): цена котируется в валюте, а не в рублях. */ .hm-tile-cur { font-size: 9.5px; font-weight: 700; color: inherit; opacity: .62; flex-shrink: 0; border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; line-height: 1.4; } .hm-tile-chg { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; } .hm-tile--hero .hm-tile-chg { font-size: 19px; } .hm-tile-turnover { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .hm-tile-new-label { font-size: 10px; color: var(--text-faint); font-weight: 600; } .hm-legend { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .hm-legend-bar { flex: 1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--poor) 0%, var(--surface-2) 50%, var(--good) 100%); border: 1px solid var(--border); } @media (max-width: 480px) { .hm-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 52px; } .hm-tile--hero .hm-tile-secid { font-size: 12.5px; } .hm-tile--hero .hm-tile-chg { font-size: 16px; } }