/* Карточка фонда недвижимости (zpif/.html) в облике Coinbase.
*
* Страница живёт на zpif-card.css из прототипа v2: Manrope, моноширинные
* деньги, лаймовые плитки «Доходность выплат» и «Полная доходность»,
* подчёркивание-маркер у арендатора, подписи 9-10 px. Этот слой переводит её
* на cfpro-design-system, не трогая разметку и генератор: включается
* классом html.zcb в scripts/zpif-card.tpl.html, по ?old - прежний вид.
*
* Как устроен: старые переменные страницы (--ink, --g*, --lime, --hero-*)
* переназначены на токены системы - так всё, что на них держится, встаёт в
* новую палитру само, в обеих темах. Ниже - то, что переменными не лечится:
* шрифт, тени панелей, плитки-близнецы, таблица параметров на телефоне.
*
* Только токены /lib/cf/tokens.css. Создано 25.09.2026. */
:root.zcb[data-theme] {
--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-line); --g50: var(--cf-canvas); --white: var(--cf-surface);
--up: var(--cf-up); --up-soft: var(--cf-up-soft); --down: var(--cf-down); --down-soft: var(--cf-down-soft);
--warn: var(--cf-amber); --warn-soft: var(--cf-amber-soft);
--lime-soft: var(--cf-accent-soft); --lime-ink: var(--cf-accent); --lime600: var(--cf-accent);
--chart-line: var(--cf-accent); --chart-label: var(--cf-ink-3);
--hero-bg: var(--cf-surface); --hero-bd: var(--cf-line); --hero-sub: var(--cf-ink-3); --hero-num: var(--cf-ink);
--hero-inset: var(--cf-surface-2); --hero-inset-bd: transparent;
--mark: transparent; --mark-line: transparent; --shadow: none;
}
html.zcb body {
background: var(--cf-canvas); color: var(--cf-ink);
font-family: var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
html.zcb main, html.zcb main * { font-family: var(--font-sans) !important; }
html.zcb main .tag.mono { font-family: var(--font-mono) !important; }
html.zcb main { max-width: var(--cf-content-max); }
/* ── шапка ─────────────────────────────────────────────────────────────── */
html.zcb .crumbs { font-size: 13px; color: var(--cf-ink-3); }
html.zcb .crumbs a { color: var(--cf-ink-2); }
html.zcb .identity h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; color: var(--cf-ink); }
html.zcb .identity p { max-width: var(--cf-prose-max); color: var(--cf-ink-2); font-size: 15px; line-height: 1.55; }
html.zcb .tags { gap: var(--cf-space-6); }
html.zcb .tag {
display: inline-flex; align-items: center; min-height: var(--cf-h-tag); padding: 0 var(--cf-space-10);
border: 0; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2);
font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
html.zcb .tag.mono { color: var(--cf-ink); font-size: 12px; font-weight: 500; }
/* ── лента ключевых чисел: одна панель вместо десяти плиток ──────────── */
html.zcb .metric-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; overflow: hidden;
border: 1px solid var(--cf-line); border-radius: var(--cf-radius-xl); background: var(--cf-surface);
}
html.zcb .decision-stat, html.zcb .decision-stat.primary {
min-height: 0; padding: var(--cf-space-18) var(--cf-space-20); border: 0; border-radius: 0; background: none;
box-shadow: inset -1px 0 0 var(--cf-line), inset 0 -1px 0 var(--cf-line);
}
/* Главное число шириной в две ячейки: одиннадцать показателей ложатся
ровными рядами на 6, 3 и 2 колонки, без пустого хвоста. */
html.zcb .decision-stat.primary { grid-column: span 2; }
html.zcb .decision-stat span { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; line-height: 1.35; }
html.zcb .decision-stat strong, html.zcb .decision-stat.primary strong {
margin: var(--cf-space-8) 0 var(--cf-space-4); color: var(--cf-ink);
font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
}
html.zcb .decision-stat.primary strong { font-size: 28px; letter-spacing: -0.035em; }
html.zcb .decision-stat small { color: var(--cf-ink-3); font-size: 12.5px; line-height: 1.4; }
html.zcb .decision-stat.good strong, html.zcb .decision-stat.up strong { color: var(--cf-up); }
html.zcb .decision-stat.bad strong, html.zcb .decision-stat.down strong, html.zcb .decision-stat.negative strong { color: var(--cf-down); }
/* Отклонение от РСП - не «хорошо/плохо», а положение цены: без светофора. */
html.zcb .decision-stat[data-live-disc-box] strong { color: var(--cf-ink); }
/* ── панели ────────────────────────────────────────────────────────────── */
html.zcb .panel, :root.zcb[data-theme="dark"] .panel:not(.return-card) {
border: 1px solid var(--cf-line); border-radius: var(--cf-radius-xl); background: var(--cf-surface); box-shadow: none;
}
html.zcb .section-title h2, html.zcb .seo-copy h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; }
html.zcb .section-title p { color: var(--cf-ink-3); font-size: 14px; }
html.zcb .details-head h2, html.zcb .object-copy h3, html.zcb .benchmark-head h3, html.zcb .section-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
html.zcb .details-head span, html.zcb .details-scroll-hint { font-size: 12.5px; font-weight: 400; color: var(--cf-ink-3); }
html.zcb .details-table th { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; background: none; }
html.zcb .details-table td { color: var(--cf-ink); font-size: 14px; font-weight: 600; }
html.zcb .doc-chip {
min-height: var(--cf-h-sm); padding: 0 var(--cf-space-12); border: 1px solid var(--cf-line-strong);
border-radius: var(--cf-radius-pill); background: var(--cf-surface); color: var(--cf-ink); font-size: 13px; font-weight: 600;
}
html.zcb .doc-chip:hover { background: var(--cf-surface-2); }
/* Арендатор: имя без лаймового маркера - лайм не бывает данными. */
html.zcb .tenant-hero strong { background: none; box-shadow: none; padding: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
html.zcb .tenant-hero span, html.zcb .tenant-row span, html.zcb .fact span { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; }
html.zcb .tenant-row b, html.zcb .fact b { color: var(--cf-ink); font-size: 15px; font-weight: 600; }
html.zcb .tenant-main { background: var(--cf-surface-2); color: var(--cf-ink); }
html.zcb .tenant-main span { color: var(--cf-ink-3); }
/* Полная доходность: была лаймовой плиткой - теперь панель с крупным
числом, знак числа - его цвет. */
html.zcb .return-card, :root.zcb[data-theme="dark"] .return-card { background: var(--cf-surface); border: 1px solid var(--cf-line); }
html.zcb .return-card > span { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; }
html.zcb .return-number { font-size: 48px; font-weight: 700; letter-spacing: -0.04em; color: var(--cf-ink); }
html.zcb .return-card p { color: var(--cf-ink-2); font-size: 13.5px; }
html.zcb .return-breakdown div { border: 0; border-radius: var(--cf-radius-md); background: var(--cf-surface-2); }
html.zcb .return-breakdown span { color: var(--cf-ink-3); font-size: 12.5px; }
html.zcb .return-breakdown b, html.zcb .return-breakdown strong { color: var(--cf-ink); font-size: 15px; }
/* Сравнение с ориентирами: фонд - синий (цвет «это мы»), ориентиры -
нейтральные, отрицательный результат - красный как знак числа. */
html.zcb .bench-label { color: var(--cf-ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
html.zcb .bench-label small { color: var(--cf-ink-3); font-size: 12px; font-weight: 400; }
html.zcb .bench-track { height: 10px; background: var(--cf-surface-2); }
html.zcb .bench-fill { background: var(--cf-ink-3); }
html.zcb .bench-row[data-benchmark="fund"] .bench-fill { background: var(--cf-accent); }
html.zcb .bench-fill.negative, html.zcb .bench-row.negative .bench-fill { background: var(--cf-down); }
html.zcb .bench-value { color: var(--cf-ink); font-size: 14px; font-weight: 600; }
html.zcb .benchmark-period { border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2); font-size: 12px; font-weight: 600; }
html.zcb .benchmark-note { color: var(--cf-ink-3); font-size: 12.5px; }
html.zcb .payout-summary > span { color: var(--cf-ink-3); font-size: 13px; }
html.zcb .payout-number { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; }
html.zcb .summary-item { font-size: 14.5px; border-top-color: var(--cf-line); }
html.zcb .summary-item span { color: var(--cf-ink-2); }
html.zcb .payout-table th, html.zcb .compare-table th { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; background: none; text-transform: none; letter-spacing: 0; }
html.zcb .payout-table td, html.zcb .compare-table td { font-size: 14px; }
html.zcb .payout-note { color: var(--cf-ink-3); font-size: 12.5px; }
html.zcb .status { min-height: var(--cf-h-badge); align-items: center; padding: 0 var(--cf-space-8); font-size: 12px; font-weight: 600; }
html.zcb .compare-table tr.current td { background: var(--cf-accent-soft); }
html.zcb .seo-copy p, html.zcb .seo-copy li { color: var(--cf-ink-2); font-size: 15px; line-height: 1.65; max-width: var(--cf-prose-max); }
html.zcb .seo-card { border-color: var(--cf-line); background: var(--cf-surface-2); }
html.zcb .seo-card p { font-size: 13.5px; }
html.zcb :is(a, button, summary, input):focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
@media (max-width: 1100px) {
html.zcb .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html.zcb .docs-strip > span, html.zcb .docs-strip > b, html.zcb .docs-strip strong { color: var(--cf-ink-3); font-size: 13px; font-weight: 500; }
/* ── телефон ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
html.zcb main { padding-left: var(--cf-space-16); padding-right: var(--cf-space-16); }
html.zcb .identity h1 { font-size: 27px; line-height: 1.15; }
html.zcb .identity p { font-size: 14.5px; }
html.zcb .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.zcb .decision-stat, html.zcb .decision-stat.primary { padding: var(--cf-space-14) var(--cf-space-16); }
html.zcb .decision-stat strong { font-size: 18px; }
html.zcb .decision-stat.primary strong { font-size: 30px; }
/* Расширенные параметры: таблица на три пары колонок, которую надо было
смахивать вбок, на телефоне - список «подпись - значение». */
html.zcb .details-scroll-hint { display: none !important; }
html.zcb .details-table { overflow: visible; }
html.zcb .details-table table, html.zcb .details-table tbody { display: block; min-width: 0 !important; width: 100%; }
html.zcb .details-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
html.zcb .details-table th, html.zcb .details-table td {
display: block; padding: var(--cf-space-12) var(--cf-space-16); border-bottom: 1px solid var(--cf-line);
width: auto !important; min-width: 0 !important; max-width: none !important;
white-space: normal; overflow-wrap: break-word; text-align: left;
}
html.zcb .details-table td { text-align: right; }
html.zcb .details-head { padding: var(--cf-space-16); }
/* График выплат: четыре колонки уезжали за край. На телефоне строка -
статус и событие слева, дата и сумма справа. */
html.zcb .payout-table { overflow: visible; }
html.zcb .payout-table table { display: block; min-width: 0 !important; }
html.zcb .payout-table thead { display: none; }
html.zcb .payout-table tbody { display: block; }
html.zcb .payout-table tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--cf-space-12); row-gap: var(--cf-space-4);
padding: var(--cf-space-12) var(--cf-space-16); border-bottom: 1px solid var(--cf-line);
}
html.zcb .payout-table td { display: block; padding: 0; border: 0; white-space: normal; }
html.zcb .payout-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
html.zcb .payout-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--cf-ink-2); font-size: 14px; }
html.zcb .payout-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
html.zcb .payout-table td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; color: var(--cf-ink-2); font-size: 13.5px; }
html.zcb .payout-note { padding: var(--cf-space-12) var(--cf-space-16); }
html.zcb .section-title h2, html.zcb .seo-copy h2 { font-size: 22px; }
html.zcb .tenant-hero strong { font-size: 23px; }
html.zcb .return-number { font-size: 40px; }
html.zcb .bench-row { grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) 60px; gap: var(--cf-space-8); }
html.zcb .bench-label { font-size: 12.5px; }
html.zcb .bench-label small { font-size: 11.5px; }
html.zcb .bench-value { font-size: 13px; }
html.zcb .payout-number { font-size: 34px; }
html.zcb .seo-copy { padding: var(--cf-space-20) var(--cf-space-16); }
}
/* «Долг: нет» зелёным и «есть» красным - светофор оценки, система его не
допускает: цвет только у знака числа. */
html.zcb .details-table .good, html.zcb .details-table .bad { color: var(--cf-ink); }
html.zcb .docs-strip { border-color: var(--cf-line); border-radius: var(--cf-radius-xl); background: var(--cf-surface); padding: var(--cf-space-12) var(--cf-space-16); }