/* ============================================================================
   finance.css — экран калькулятора сделки (мод finance, «Финмодели») на системе ядра.
   ----------------------------------------------------------------------------
   Слой мода: только семантические токены ядра (ядро/tokens.css) и ui-классы
   (ядро/primitives.css). Своих hex, px-кеглей и теней нет — кроме токенов --fin-*
   ниже: это места, где ядру не хватает шкалы. Они же — кандидаты в ядро
   (перевод-на-токены_v1.md, раздел «Чего не хватило»).

   Раскладка — как страница записи при свёрнутом сайдбаре: строка инструментов,
   лист во всю ширину, справа закреплённая панель «Ответ» (как «Детали» ядра).
   ============================================================================ */

:root {
  /* --- Кандидаты в ядро: шкала, которой нет в tokens.css ------------------ */
  --fin-answer-width: 360px;           /* панель ответа: «Детали» ядра 320 — число и пояснение не помещались в строку */
  --fin-read-width: 860px;             /* ширина чтения условий: фраза — в одну-две строки */
  --fin-title-size: 40px;              /* = заголовок записи ядра (.database-record-page-header), там числом */
  --fin-section-size: 19px;            /* = заголовок 3-го уровня ядра (.block-heading3), там числом */
  --fin-verdict-size: 24px;            /* = заголовок 2-го уровня ядра (.block-heading2), там числом */
  --fin-number-size: 18px;             /* число ответа и ответ «Подробнее» — один кегль на экране */
  --fin-phrase-line: 1.65;             /* фраза-отчёт: один блок на строку, пунктиры не слипаются */
  /* текст состояния — читаемый на холсте оттенок --sev-* (так калькулятор realty пишет
     предупреждение: color-mix с основным текстом) */
  --fin-good-text: color-mix(in srgb, var(--sev-good) 70%, var(--text-primary));
  --fin-bad-text: color-mix(in srgb, var(--sev-critical) 88%, var(--text-primary));
  --fin-warn-text: color-mix(in srgb, var(--sev-warning) 78%, var(--text-primary));
  /* подсветка места, куда привела ссылка, и отличий в сравнении вариантов */
  --fin-mark: var(--accent-soft);
  /* ряды графиков — контентная палитра ядра, порядок постоянный, проверено
     валидатором различимости (в т. ч. для дальтоников) в обеих темах */
  --fin-series-1: var(--color-blue-dot);
  --fin-series-2: var(--color-orange-dot);
  --fin-series-3: var(--color-purple-dot);
  --fin-series-4: var(--color-green-icon);
  --fin-series-5: var(--color-pink-dot);
  --fin-in: var(--fin-series-1);       /* аренда и доходы, «деньги от владения» */
  --fin-refund: var(--fin-series-4);   /* возврат НДС, продажа */
  --fin-out: var(--color-red-dot);     /* расходы, «дольше» */
  --fin-loan: var(--fin-series-3);
  --fin-tax: var(--fin-series-2);
  --fin-faster: var(--fin-series-4);   /* «что влияет»: быстрее */
}
:root[data-theme="dark"] {
  /* светлее не надо: на тёмном холсте оранжевый ядра (#e48233) выходит из полосы светлоты */
  --fin-series-2: #d27428;
  --fin-series-4: #4a9f44;             /* зелёный иконок тёмной темы слишком светлый для ряда */
}

/* ============================================================================
   0. БАЗА страницы (в ядре — styles.css; здесь только то, что нужно листу)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
}
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 var(--space-2); }
b, strong { font-weight: 600; }
.muted { color: var(--text-secondary); }
.nw { white-space: nowrap; }
.fin-icon { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================================================================
   1. ОБОЛОЧКА: строка инструментов, свёрнутый сайдбар, лист, панель «Ответ»
   ============================================================================ */
.fin-shell { min-height: 100vh; padding-right: var(--fin-answer-width); }

/* строка инструментов — как у ядра: капсулы на средней линии, крошки текстом */
.fin-toolbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--shell-gap);
  background: var(--surface-canvas);
}
.fin-toolbar .ui-capsule {
  --ctl-h: calc(var(--toolbar-control-h) - 2 * var(--toolbar-inset));
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--toolbar-inset);
}
.fin-crumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-line);
  white-space: nowrap;
}
.fin-crumbs .fin-icon { width: var(--icon-ui); height: var(--icon-ui); }
.fin-crumbs .is-db { color: var(--color-green-icon); }
.fin-crumbs .sep { color: var(--text-tertiary); width: var(--icon-sm); height: var(--icon-sm); }
.fin-crumbs b { overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-weight: 500; }
.fin-toolbar .spacer { flex: 1; }
/* полоса прототипа — не часть продукта: тихая подпись и переключатели в своей капсуле */
.fin-proto { padding-left: var(--space-3) !important; }
.fin-proto-label { margin-right: var(--space-2); color: var(--text-tertiary); font-size: var(--type-caption-size); font-weight: 600; letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }
.fin-proto .ui-segmented { --ctl-h: calc(var(--toolbar-control-h) - 2 * var(--toolbar-inset)); }
.fin-proto a.ui-btn { --ctl-h: calc(var(--toolbar-control-h) - 2 * var(--toolbar-inset)); }

/* место свёрнутого сайдбара: палочка у левого края, как в ядре */
.fin-rail {
  position: fixed;
  z-index: var(--z-sidebar);
  top: 50%;
  left: calc((var(--sidebar-rail-w) - 4px) / 2);
  width: 4px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transform: translateY(-50%);
}

/* лист во всю ширину: отступ слева — место палочки + шаг шкалы */
.fin-page { padding: 0 var(--space-8) calc(var(--space-8) * 3) calc(var(--sidebar-rail-w) + var(--space-8)); }
.fin-title {
  margin: var(--space-6) 0 var(--space-6);
  font-size: var(--fin-title-size);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
}
.fin-title .ui-pill { vertical-align: middle; letter-spacing: 0; }

/* заголовки разделов листа */
h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fin-section-size);
  font-weight: 670;
  line-height: 1.3;
  letter-spacing: var(--type-heading-tracking);
}
.sec-h { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.sec-h h2 { margin: 0; }
.sec-act { display: flex; align-items: center; gap: var(--space-2); }

/* условия слева, график рядом (решение владельца 08.10: «из чего итог» — рядом
   с условиями): поменял условие — видно, сколько оно дало. График держится на
   виду при прокрутке условий. */
.work { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.work > section:last-child { position: sticky; top: var(--toolbar-h); }
.more-wrap { margin-top: calc(var(--space-8) + var(--space-4)); }

/* панель «Ответ» — закреплённая панель ядра (page-panel.is-docked): холст, линия
   слева, без тени, блика и скругления; шапка — на линии строки инструментов */
.side {
  position: fixed;
  z-index: var(--z-sidebar);
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--fin-answer-width);
  display: flex;
  flex-direction: column;
  border-left: var(--hairline) solid var(--divider);
  background: var(--surface-canvas);
}
.side-head { height: var(--toolbar-h); flex: none; display: flex; align-items: center; padding: 0 var(--space-5); }
.side-head h2,
.sbox > h3 {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-ui-size);
  font-weight: 500;
  line-height: var(--type-ui-line);
  letter-spacing: 0;
}
.side-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-3) var(--space-8); }
.sbox { padding: var(--space-4) var(--space-2); border-top: var(--hairline) solid var(--divider); }
.sbox.ans-box { padding-top: 0; border-top: 0; }
.sbox > h3 { margin-bottom: var(--space-2); }
.ans-top { display: none; }

/* ============================================================================
   2. УСЛОВИЯ — строки-фразы, под строкой её настройки
   ============================================================================ */
.list { border-top: var(--hairline) solid var(--divider); }
.row { border-bottom: var(--hairline) solid var(--divider); }
.row-main {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border: 0;
  border-radius: var(--r-row);
  background: none;
  text-align: left;
  font-size: var(--type-body-size);
  line-height: var(--fin-phrase-line);
  text-wrap: pretty;
  transition: background-color var(--dur-fast);
}
.row-main:hover { background: var(--surface-hover); }
.row-main .txt, .row-main .q { flex: 1; min-width: 0; }
.row-main { align-items: center; }
.chev { flex: none; align-self: center; color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-out); }
.chev .fin-icon { display: block; }
.open > .row-main .chev, .mcard.open .chev { transform: rotate(180deg); }
.row.aside .txt { color: var(--text-secondary); }
.row.aside .v { opacity: .6; }

/* Строка условия — кусок отчёта: имя мелко сверху (опора для глаза), фраза,
   посчитанное — тихой строкой ниже. Цвет — только направление денег, тем же
   цветом, что на графике «Из чего итог» рядом: синее — приходят, красное —
   уходят, серое — не деньги. Блоком — одно главное число строки; остальные
   значения — полужирным текстом с пунктиром «можно поменять»
   (замечание владельца 08.10: цвет по роду значения понимания не даёт). */
.c-name { display: block; margin-bottom: 2px; color: var(--text-secondary); font-size: var(--type-tag-size); font-weight: 600; line-height: var(--type-tag-line); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }
.c-txt { display: block; }
.c-txt::first-letter { text-transform: uppercase; }
.v {
  margin: 0 2px;
  padding: 1px 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--v-bg);
  box-shadow: inset 0 0 0 1px var(--v-edge);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--dur-fast);
}
/* каждая переменная — блок в тонкой рамке своего цвета: видно, где какая, блоки не слипаются */
/* Цвет переменной — как ссылки в формуле Google Таблиц: у каждой переменной строки свой цвет
   по порядку во фразе, её поле в настройках того же цвета. Пять оттенков из проверенной
   категориальной палитры (кандидат в ядро): соседние различимы и при дальтонизме, в обеих темах.
   Блок — светлая заливка оттенка и рамка, текст обычный тёмный. */

:root { --fin-hue-1: #2a78d6; --fin-hue-2: #eb6834; --fin-hue-3: #1baf7a; --fin-hue-4: #4a3aa7; --fin-hue-5: #e87ba4; --fin-hue-tint: 17%; --fin-hue-tint-hover: 28%; --fin-hue-edge: 52%; }
:root[data-theme="dark"] { --fin-hue-1: #3987e5; --fin-hue-2: #d95926; --fin-hue-3: #199e70; --fin-hue-4: #9085e9; --fin-hue-5: #d55181; --fin-hue-tint: 26%; --fin-hue-tint-hover: 40%; --fin-hue-edge: 70%; }
.v { --v-dot: var(--color-gray-dot); }
[data-hue="1"] { --v-dot: var(--fin-hue-1); }
[data-hue="2"] { --v-dot: var(--fin-hue-2); }
[data-hue="3"] { --v-dot: var(--fin-hue-3); }
[data-hue="4"] { --v-dot: var(--fin-hue-4); }
[data-hue="5"] { --v-dot: var(--fin-hue-5); }
.v, [data-hue] {
  --v-bg: color-mix(in srgb, var(--v-dot) var(--fin-hue-tint), transparent);
  --v-pill: color-mix(in srgb, var(--v-dot) var(--fin-hue-tint-hover), transparent);
  --v-edge: color-mix(in srgb, var(--v-dot) var(--fin-hue-edge), transparent);
}
.v:not(.calc, .need):hover { background: var(--v-pill); }
/* связь с полем настроек: наведи на поле — его переменная во фразе загорается, и наоборот */
.v.is-linked { background: var(--v-pill); box-shadow: inset 0 0 0 1px var(--v-edge), 0 0 0 2px var(--v-dot); }
/* посчитанное — обычный текст фразы: блок = можно поправить, без блока = посчитано из других */
.v.calc { margin: 0; padding: 0; background: none; box-shadow: none; }
/* пересчёт на м² — в скобках, чуть мельче и тише основной фразы */
.paren { color: var(--text-secondary); font-size: 0.86em; white-space: nowrap; }
.paren .v { margin: 0; padding: 0; background: none; box-shadow: none; color: inherit; font-weight: 500; }
.paren .v[data-f]:hover, .paren .v.is-linked { color: var(--text-primary); text-decoration: underline 1px; text-underline-offset: 3px; }
.v.v.need { background: var(--sev-warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sev-warning) 28%, transparent); color: var(--fin-warn-text); }
/* в варианте: значение отличается от базы — кольцо цвета акцента */
.v.chg { box-shadow: inset 0 0 0 1px var(--v-edge), 0 0 0 1.5px var(--accent); }
.row.aside .v { color: var(--text-secondary); }
button.v.need { cursor: pointer; }

/* открытая строка — карточка в волосяной рамке: фраза сверху, под ней свойства */
.row.open { margin: var(--space-2) 0; border-bottom-color: transparent; border-radius: var(--r-card); }
.row.open > .row-main { border-radius: var(--r-card) var(--r-card) 0 0; background: none; }
.editor { --nest-r: var(--r-control); padding: 0 var(--space-4) var(--space-4) var(--space-3); font-size: var(--type-data-size); }

/* ФОКУС: открыта строка — она главная. Остальные условия сложены в одну строку
   и приглушены (как сложенный сайдбар), варианты, «ещё учесть» и «подробнее» —
   в тени. На виду — то, что меняется от правки: график рядом и ответ справа
   («до правки — …»). Наведение на сложенную строку возвращает ей цвет —
   нажатие переводит фокус на неё. */
.fin-shell.is-focus :is(.fin-vbar, .add, .more-wrap, .list > .row:not(.open), .sec-h .sec-act) { opacity: .42; transition: opacity var(--dur-base) var(--ease-out); }
.fin-shell.is-focus :is(.fin-vbar, .add, .more-wrap, .list > .row:not(.open)):hover { opacity: 1; }
.fin-shell.is-focus .list > .row:not(.open) > .row-main { padding-block: var(--space-2); font-size: var(--type-data-size); line-height: var(--type-data-line); }
.fin-shell.is-focus .list > .row:not(.open) .txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-shell.is-focus .list > .row:not(.open) .v { padding-block: 0; }
.fin-shell.is-focus .list > .row:not(.open) :is(.c-name, .c-txt) { display: inline; margin-right: var(--space-2); }
.row.open { box-shadow: inset 0 0 0 var(--hairline) var(--line-hover); }
.was { margin-top: 2px; color: var(--text-tertiary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }

/* настройки — строки свойств, как в карточке записи ядра: подпись слева, значение справа */
.fields { display: grid; gap: var(--space-1); margin-top: var(--space-1); }
.f { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-width: 0; min-height: calc(var(--ctl-h) + var(--space-1)); }
.f > .ui-label { display: block; margin: 0; color: var(--text-secondary); font-size: var(--type-ui-size); font-weight: 500; line-height: var(--type-ui-line); }
/* подпись — вровень с полем, даже если под полем пояснение или подпись в две строки */
.f { align-items: start; }
.f > .ui-label { padding-top: calc((var(--ctl-h) - var(--type-ui-line)) / 2); }
.f-val { min-height: var(--ctl-h); }
.f-val { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
/* поле под число, а не во всю ширину: рядом встаёт «в год | в месяц» */
/* ширина поля — по содержимому: число или подсказка плюс единица; растёт, пока печатаете.
   Не уже 64 px — чтобы попасть пальцем; название своей строки — широкое поле */
.f-val > .in.ui-field { width: auto; min-width: 64px; max-width: 100%; }
.f-val > .in.ui-field.is-wide { width: 280px; }
.in > input { field-sizing: content; min-width: 2ch; max-width: 22ch; }
.in.is-wide > input { field-sizing: fixed; }
.f-hint { flex-basis: 100%; color: var(--text-tertiary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }
.f-gap { height: var(--hairline); margin: var(--space-2) 0; background: var(--divider); }
/* поле: ввод + единица внутри одной формы (ui-field-compound), утоплено — как в ядре */
.in > input { font-variant-numeric: tabular-nums; font-weight: 500; }
/* поле и выбранный сегмент — цвета своей переменной во фразе; текст тёмный */
/* поле в покое — лёгкая заливка цвета своей переменной, рамка обычная (цветная рамка читалась бы как фокус);
   цветная рамка — только когда поле в работе: в нём курсор или наведена его переменная во фразе */
.editor .in.ui-field[data-hue] { background: var(--v-bg); }
.editor .in.ui-field.is-linked { box-shadow: inset 0 0 0 1px var(--v-dot); }
.editor .in.ui-field[data-hue]:focus-within { background: var(--surface-canvas); box-shadow: inset 0 0 0 1px var(--v-dot), 0 0 0 3px var(--v-pill); }
.editor .seg[data-hue] > button[aria-pressed="true"] { background: var(--v-bg); color: var(--text-primary); }
.editor .seg.is-linked > button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--v-dot); }
.in > .unit-t { flex: none; color: var(--text-tertiary); font-size: var(--type-ui-size); white-space: nowrap; }
.in > select.unit {
  flex: none !important;
  width: auto;
  height: calc(var(--ctl-h) - 6px) !important;
  padding: 0 var(--space-1);
  border-radius: calc(min(var(--r-control), var(--nest-r)) - 3px);
  color: var(--text-secondary);
  font-size: var(--type-ui-size);
  cursor: pointer;
}
.in > select.unit:hover { background: var(--surface-hover); color: var(--text-primary); }

/* выбор одного из нескольких — сегменты ядра; длинные варианты — столбиком,
   тем же треком: без переносов в капсуле и без прокрутки вбок */
.seg.ui-segmented { max-width: 100%; }
.seg.is-stack {
  --nest-r: var(--r-control);
  height: auto;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.seg.is-stack > button { height: calc(var(--ctl-h) - 2 * var(--seg-inset)); justify-content: flex-start; flex: none; }

.note { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.note:empty { display: none; }
.note b { color: var(--fin-bad-text); }
.ed-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.ed-actions.start { justify-content: flex-start; }

/* части расхода: название, оценка, сумма, убрать; «+ часть» — последней, справа */
/* части — те же строки «подпись | поле», что и свойства: все поля в одну колонку */
.parts { display: grid; gap: var(--space-1); margin-top: var(--space-1); }
.part .tag { color: var(--fin-warn-text); font-size: var(--type-tag-size); white-space: nowrap; }
.part.est .in.ui-field { box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface-2); }
/* название части — правится на месте; текст стоит ровно по колонке подписей */
.part .pname.ui-field { width: calc(100% + var(--ctl-px) - 3px); margin-left: calc(3px - var(--ctl-px)); background: transparent; box-shadow: none; color: var(--text-secondary); font-size: var(--type-ui-size); font-weight: 500; }
.part .pname.ui-field:hover { box-shadow: inset 0 0 0 1px var(--line); }
.part .pname.ui-field:focus { background: var(--surface-canvas); color: var(--text-primary); }
.sub-h { margin: var(--space-1) 0; font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.f-meta { display: block; color: var(--text-tertiary); font-size: var(--type-tag-size); font-weight: 400; line-height: var(--type-tag-line); }

/* «Ещё учесть» — кнопки ядра; «+ своё…» — последней */
.add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.add-label { color: var(--text-secondary); font-size: var(--type-ui-size); margin-right: var(--space-1); }
.add-wrap { position: relative; }
/* меню типов у «+ своё…» — парит: стекло, контур --edge-float, один блик --rim
   сверху и снизу; открывается целиком (вниз, если влезает, иначе вверх) */
.types {
  position: absolute;
  z-index: var(--z-dropdown);
  left: 0;
  top: calc(100% + var(--space-1));
  width: 320px;
  padding: var(--popover-inset);
  border: var(--hairline) solid var(--edge-float);
  border-radius: var(--r-popover);
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--rim), var(--elev-raised);
  --nest-r: calc(var(--r-popover) - var(--popover-inset));
}
.types.up { top: auto; bottom: calc(100% + var(--space-1)); }
.types button {
  width: 100%;
  display: grid;
  gap: 1px;
  padding: 6px var(--space-3);
  border: 0;
  border-radius: var(--nest-r);
  background: none;
  text-align: left;
}
.types button:hover { background: var(--surface-hover); }
.types b { font-size: var(--type-menu-title-size); line-height: var(--type-menu-title-line); font-weight: 500; }
.types span { color: var(--text-secondary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }

/* куда привела ссылка — подсвечено, пока не нажмёте другое */
.hl { border-radius: var(--r-control); background: var(--fin-mark); box-shadow: 0 0 0 var(--space-1) var(--fin-mark); }

/* ссылки внутри текста: тонкое подчёркивание, цвет текста (синий — у денег) */
.lnk, .lnk-in, .link-in { text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: var(--line-hover); }
.lnk-in, .link-in { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.lnk-in { font-weight: 600; }
.lnk-in:hover, .link-in:hover, button:hover > .lnk { text-decoration-color: currentColor; }

/* ============================================================================
   3. ОТВЕТ — вердикт, лесенка чисел, разложение
   ============================================================================ */
.head { display: block; width: 100%; padding: var(--space-1) 0 0; border: 0; background: none; text-align: left; }
.head .big { display: block; font-size: var(--fin-verdict-size); font-weight: 690; line-height: 1.25; letter-spacing: -0.018em; }
.head .sub { display: block; margin-top: var(--space-1); font-size: var(--type-data-size); line-height: var(--type-data-line); }
.head.ok .sub { color: var(--fin-good-text); }
.head.bad .sub { color: var(--fin-bad-text); }
.head.def .sub { color: var(--text-secondary); }
.head.need .big { color: var(--text-tertiary); }
.head.need .sub { color: var(--text-secondary); }
button.head:hover .big { text-decoration: underline 1px; text-underline-offset: 5px; text-decoration-color: var(--line-hover); }

.caveats, .defaults { color: var(--text-secondary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }
.caveats { margin-top: var(--space-1); }
.defaults { margin-top: var(--space-3); }
.caveats button, .defaults button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline 1px dotted; text-underline-offset: 3px; }
.caveats button:hover, .defaults button:hover { color: var(--text-primary); }

/* лесенка: вложить → приносит в год → заработать → можно заплатить */
.klist { margin: var(--space-4) 0 var(--space-1); border-top: var(--hairline) solid var(--divider); }
.krow {
  width: 100%;
  display: grid;
  grid-template-areas: "k n" "s n";
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  row-gap: 1px;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-bottom: var(--hairline) solid var(--divider);
  background: none;
  text-align: left;
  transition: background-color var(--dur-fast);
}
.krow:hover { background: var(--surface-hover); }
.krow.sel { background: var(--surface-current); color: var(--text-current); }
.krow .k { grid-area: k; font-size: var(--type-data-size); line-height: var(--type-data-line); }
.krow .s { grid-area: s; color: var(--text-secondary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }
.krow .n {
  grid-area: n;
  align-self: center;
  font-size: var(--fin-number-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--type-heading-tracking);
  white-space: nowrap;
}
.krow .n.ok { color: var(--fin-good-text); }
.krow .n.bad { color: var(--fin-bad-text); }
.hint { margin: var(--space-2) 0 0; color: var(--text-tertiary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }

/* из чего сложилось число — тем же цветом, что выбранная строка лесенки */
.explain { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-3); border-radius: var(--r-row); background: var(--surface-current); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.explain .hint { color: var(--text-secondary); }
.deps { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: 1.9; }
.deps button { margin-right: var(--space-3); padding: 0; border: 0; background: none; color: var(--text-primary); text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: var(--line-hover); }
.bd { display: grid; margin: var(--space-2) 0 var(--space-1); }
.bd-r { width: calc(100% + 2 * var(--space-1)); display: flex; justify-content: space-between; gap: var(--space-3); margin: 0 calc(-1 * var(--space-1)); padding: 3px var(--space-1); border: 0; border-radius: var(--r-xs); background: none; text-align: left; font-size: var(--type-ui-size); }
button.bd-r:hover { background: var(--surface-hover); }
.bd-r b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-t, .bd-r.sum { margin-top: var(--space-1); padding-top: 6px; border-top: var(--hairline) solid var(--line-strong); border-radius: 0; font-weight: 600; }
.bd-r.miss { color: var(--fin-warn-text); }
.bd-n { margin: -1px 0 5px; color: var(--text-secondary); font-size: var(--type-tag-size); line-height: var(--type-tag-line); }
.to-check { display: none; }

/* ============================================================================
   4. ГРАФИК — карточка с вкладками-чипами
   ============================================================================ */
.ccard { padding: var(--space-3) var(--space-4) var(--space-3); border-radius: var(--r-card); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.ctabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.chart { touch-action: pan-y; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.yr { min-height: 20px; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.yr b { color: var(--text-primary); }
.empty { padding: 48px var(--space-3); color: var(--text-secondary); text-align: center; font-size: var(--type-data-size); line-height: 2; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-1); color: var(--text-secondary); font-size: var(--type-tag-size); }
.legend i { display: inline-block; width: 14px; height: 0; margin-right: 5px; border-top: 2px solid; vertical-align: middle; }
.legend i.box { height: 10px; border: 0; border-radius: 2px; }
/* оси и сетка — тихие, подписи — третичным текстом */
.ax-grid { stroke: var(--line-soft); }
.ax-zero { stroke: var(--line-hover); }
.ax-label { fill: var(--text-tertiary); font-size: var(--type-caption-size); font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.ax-target { stroke: var(--line-hover); stroke-dasharray: 3 4; }
.ax-guide { stroke: var(--text-primary); stroke-opacity: .22; }
.ch-note { font-size: var(--type-caption-size); font-family: var(--font-sans); font-weight: 600; }

/* «Из чего итог» — лесенка: полоса начинается там, где кончилась прошлая;
   синее — приходит, красное — уходит, светлее — продажа (прогноз);
   «до продажи» и итог — полосой цвета текста от нуля */
.wbs { display: grid; }
.wb { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px; align-items: center; gap: var(--space-3); min-height: 32px; padding: 0 var(--space-1); border: 0; border-radius: var(--r-xs); background: none; text-align: left; font-size: var(--type-ui-size); }
button.wb:hover { background: var(--surface-hover); }
.wb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb .track { position: relative; align-self: stretch; }
.wb .track i { position: absolute; }
.wb .zero { top: 0; bottom: 0; width: 1px; background: var(--line-hover); }
.wb .bar { top: 50%; height: 14px; border-radius: 3px; transform: translateY(-50%); }
.wb .wb-conn { top: 0; height: calc(50% - 7px); width: 0; border-left: 1px dashed var(--line-hover); }
.wb.in .bar { background: var(--fin-in); }
.wb.out .bar { background: var(--fin-out); }
.wb.fc .bar { opacity: .5; }
.wb .vl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb.sub, .wb.tot { margin-top: var(--space-1); border-top: var(--hairline) solid var(--divider); border-radius: 0; font-weight: 600; }
.wb.sub { margin-bottom: var(--space-1); }
.wb.sub .bar { background: var(--text-tertiary); }
.wb.tot .bar { background: var(--text-primary); }
.wb.tot { min-height: 40px; }
.wb.tot .vl { font-size: var(--fin-number-size); }
.wb-legend { margin-top: var(--space-3); }
.legend i.box.fc { background: var(--fin-in); opacity: .5; }

/* «По годам»: выбранный год — полосой под столбцом; строка года — числами */
.ax-band { fill: var(--surface-hover); }
.ch-halo { paint-order: stroke; stroke: var(--surface-canvas); stroke-width: 4px; stroke-linejoin: round; }
.ystats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-1) 0 var(--space-2); }
.ys { display: grid; gap: 1px; }
.ys small { color: var(--text-tertiary); font-size: var(--type-caption-size); }
.ys b { color: var(--text-primary); font-size: var(--type-data-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.ys.net b { font-size: var(--fin-number-size); }
.legend i.dot { width: 8px; height: 8px; border: 1.5px solid var(--text-primary); border-radius: 50%; }
.legend .unit { margin-left: auto; color: var(--text-tertiary); }

.hbars, .wfs { display: grid; gap: 2px; }
.hbar, .wf {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  text-align: left;
  font-size: var(--type-ui-size);
}
.hbar { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; }
.wf { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; }
:is(button.hbar, button.wf):hover { background: var(--surface-hover); }
:is(.hbar, .wf) .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf .nm small { display: block; color: var(--text-secondary); font-size: var(--type-caption-size); }
.hbar .track { height: 10px; overflow: hidden; border-radius: var(--r-xs); background: var(--surface-2); }
.hbar .track i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--fin-out); }
.hbar.tn { color: var(--text-secondary); }
.hbar.tn .track i { background: var(--color-default-dot); }
:is(.hbar, .wf) .vl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf .track { position: relative; height: 14px; }
.wf .track i { position: absolute; top: 0; bottom: 0; }
.wf .track .zero { width: 1px; top: -5px; bottom: -5px; background: var(--line-hover); }
.wf .track .bar { border-radius: 3px; }
.wf.up .bar { background: var(--fin-in); }
.wf.dn .bar { background: var(--fin-out); }
.wf.tot .bar { background: var(--text-primary); }
.wf.tot { margin-top: var(--space-1); padding-top: var(--space-2); border-top: var(--hairline) solid var(--divider); border-radius: 0; font-weight: 600; }
.wf .vl { min-width: 92px; text-align: right; }
.wf .bar.fast { background: var(--fin-faster); }
.wf .bar.slow { background: var(--fin-out); }
.wf .vl .g, .wf .vl .r { font-weight: 600; }
.imp-h { padding: 0 var(--space-1) var(--space-2); color: var(--text-secondary); font-size: var(--type-ui-size); }
.imp-h b { color: var(--text-primary); }
.imp-h .g, .imp-h .r { font-weight: 600; }
.imp-h .g { color: var(--fin-good-text); }
.imp-h .r { color: var(--fin-bad-text); }
.hsep { margin: var(--space-3) var(--space-1) 2px; color: var(--text-tertiary); font-size: var(--type-overline-size); font-weight: 700; letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }

/* ============================================================================
   5. ПОДРОБНЕЕ — плитки с вопросом и ответом, раскрытая — во всю ширину
   ============================================================================ */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }
.mcard { border-radius: var(--r-row); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.mcard.open { grid-column: 1 / -1; background: var(--surface-2); box-shadow: none; }
.mcard-h {
  width: 100%;
  display: grid;
  grid-template-areas: "q chev" "a a";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--r-row);
  background: none;
  text-align: left;
  transition: background-color var(--dur-fast);
}
.mcard:not(.open) .mcard-h:hover { background: var(--surface-hover); }
.mcard-h .q { grid-area: q; color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.mcard-h .term { color: var(--text-tertiary); font-size: var(--type-tag-size); }
.mcard-h .a { grid-area: a; font-size: var(--fin-number-size); font-weight: 600; line-height: 1.35; letter-spacing: var(--type-heading-tracking); font-variant-numeric: tabular-nums; }
.mcard-h .chev { grid-area: chev; }
.a.ok { color: var(--fin-good-text); }
.a.bad { color: var(--fin-bad-text); }
.needs { color: var(--fin-warn-text); font-weight: 500; }
.mcard .body { padding: 0 var(--space-4) var(--space-4); font-size: var(--type-data-size); line-height: var(--type-data-line); }
.mcard .body p { margin: var(--space-1) 0 var(--space-2); }
.slack { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-4); align-items: baseline; margin: 2px 0 var(--space-2); }
.slack .nm { padding: 0; border: 0; background: none; text-align: left; font-weight: 500; text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: var(--line-hover); }
.slack .nm.thin { color: var(--fin-bad-text); font-weight: 600; }
.slack .d { color: var(--text-secondary); font-size: var(--type-ui-size); white-space: nowrap; }

/* таблицы — как таблица базы: тихие линии, цифры моноширинные */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 6px var(--space-2); border-top: var(--hairline) solid var(--divider); text-align: right; }
.tbl th { color: var(--text-secondary); font-size: var(--type-tag-size); font-weight: 500; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl .neg { color: var(--fin-bad-text); }
.tbl tr.tot td { font-weight: 600; }
.tbl-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--type-ui-size); }
.vtbl { margin-top: 6px; font-size: var(--type-tag-size); table-layout: fixed; }
.vtbl th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.vtbl th:first-child, .vtbl td:first-child { width: 2.6em; }

/* ============================================================================
   5б. ВАРИАНТЫ — вкладками под заголовком: сегменты ядра, копия — последней
   ============================================================================ */
.fin-vbar { margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.fin-vars { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fin-vars .spacer { flex: 1; }
.fin-vtabs > button { gap: var(--space-2); }
.fin-vtabs .vt-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.fin-vtabs .vt-n { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fin-vtabs > button[aria-pressed="true"] .vt-n { color: var(--text-secondary); }
.fin-vnote { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.fin-compare { margin-top: var(--space-3); padding: var(--space-1) var(--space-4) var(--space-2); border-radius: var(--r-card); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.fin-compare th.is-cur, .fin-compare td.is-cur { background: var(--surface-2); }
.fin-compare td.diff { background: var(--fin-mark); font-weight: 600; }
.fin-compare tr.what td { color: var(--text-secondary); font-size: var(--type-tag-size); white-space: normal; text-align: left; vertical-align: top; }

/* ============================================================================
   6. ПАНЕЛЬ: проверить, объект
   ============================================================================ */
.chk-need { padding: var(--space-1) var(--space-2) 6px; font-size: var(--type-ui-size); line-height: 2; }
.chk { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 6px var(--space-2); border: 0; border-radius: var(--r-control); background: none; text-align: left; font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.chk:hover { background: var(--surface-hover); }
.chk span { color: var(--text-secondary); white-space: nowrap; }
.chk b { font-weight: 600; white-space: nowrap; }
.chk.bad span, .chk.warn span, .chk.info span { color: var(--text-primary); }
.chk.bad b { color: var(--fin-bad-text); }
.chk.warn b { color: var(--fin-warn-text); }
.chk.info b { font-weight: 500; }
#check .chk:is(.warn, .info, .bad) { flex-direction: column; align-items: flex-start; gap: 1px; }
#check .chk:is(.warn, .info, .bad) :is(span, b) { white-space: normal; text-align: left; }
.olist { display: grid; gap: 3px; padding: 0 var(--space-2); font-size: var(--type-ui-size); }
.olist div { display: flex; justify-content: space-between; gap: var(--space-3); }
.side .hint { padding: 0 var(--space-2); }

/* ============================================================================
   7. УЗКИЙ ЭКРАН И ТЕЛЕФОН — панель уходит под лист, ответ — наверх
   ============================================================================ */
/* строка «Окупится за…» снизу парит — плавающая панель ядра (.ui-float): стекло,
   контур --edge-float, блик --rim сверху и снизу в обеих темах */
.mbar { display: none; }
.mb { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; text-align: left; }
.mb b { font-size: var(--type-body-size); line-height: var(--type-body-line); }
.mb span { color: var(--text-secondary); font-size: var(--type-ui-size); }
.mb.ok span { color: var(--fin-good-text); }
.mb.bad span { color: var(--fin-bad-text); }

@media (max-width: 1180px) {
  .fin-shell { padding-right: 0; }
  .side { position: static; width: auto; border-left: 0; background: none; }
  .side-head { display: none; }
  .side-body { overflow: visible; padding: 0 calc(var(--space-8) - var(--space-2)) var(--space-8) calc(var(--sidebar-rail-w) + var(--space-8) - var(--space-2)); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 var(--space-6); }
  .side .ans-box { display: none; }
  .ans-top { display: block; margin-bottom: var(--space-6); }
  .ans-top .klist { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); column-gap: var(--space-5); }
  .ans-top .to-check { display: inline-flex; margin-top: var(--space-2); }
  .mbar { display: block; position: fixed; z-index: var(--z-sticky); left: var(--shell-gap); right: var(--shell-gap); bottom: calc(var(--shell-gap) + env(safe-area-inset-bottom)); padding: var(--space-2) var(--space-4); }
  body.top-vis .mbar { display: none; }
  .fin-page { padding-bottom: 110px; }
}
@media (max-width: 860px) {
  .work { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .work > section:last-child { position: static; }
}
@media (max-width: 560px) {
  .fin-rail, .fin-crumbs, .fin-proto-label { display: none; }
  .fin-toolbar { gap: var(--space-2); }
  .fin-page { padding: 0 var(--space-3) 110px; }
  .side-body { padding: 0 var(--space-1) var(--space-8); }
  .fin-title { margin: var(--space-3) 0 var(--space-4); font-size: calc(var(--fin-title-size) * .8); }
  .row-main { font-size: var(--type-data-size); padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2); }
  .head .big { font-size: calc(var(--fin-verdict-size) * .92); }
  .ans-top .klist { grid-template-columns: minmax(0, 1fr); }
  .wf { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; }
  .wf .vl { min-width: 70px; }
  .hbar { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; }
  .tbl .hide-sm { display: none; }
  .vtbl { font-size: var(--type-caption-size); }
  .vtbl th, .vtbl td { padding: 4px 3px; }
  .f { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .f-val > .in.ui-field.is-wide { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-shell.is-focus * { transition: none; }
  .chev, .row-main, .krow, .mcard-h { transition: none; }
}

/* ============================================================================
   Демо calc.bemyapp.ru: шапка расчёта («Мои расчёты», сохранено, ссылка, новый) и главная
   ============================================================================ */
.fin-crumbs a { color: var(--text-secondary); text-decoration: none; }
.fin-crumbs a:hover { color: var(--text-primary); }
.fin-save { color: var(--text-tertiary); font-size: var(--type-caption-size); white-space: nowrap; }
.fin-save.is-bad { color: var(--fin-bad-text); }
.fin-acts .ui-btn { --ctl-h: calc(var(--toolbar-control-h) - 2 * var(--toolbar-inset)); }
.fin-title.js-title { cursor: text; }
.fin-title.is-empty { color: var(--text-tertiary); }
.fin-home { box-sizing: border-box; min-height: 100vh; max-width: 640px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.fin-home .fin-title { margin: var(--space-6) 0 var(--space-3); }
.fin-home-lead { margin: 0 0 var(--space-5); color: var(--text-secondary); font-size: var(--type-data-size); line-height: 1.5; }
.fin-home-h { margin: var(--space-8) 0 var(--space-2); font-size: var(--fin-section-size); font-weight: 650; }
.fin-home-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-2); border-top: var(--hairline) solid var(--divider); border-radius: var(--r-control); color: var(--text-primary); text-decoration: none; }
.fin-home-row:hover { background: var(--surface-hover); }
.fin-home-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fin-home-row span { color: var(--text-tertiary); white-space: nowrap; }
.fin-home-note { margin-top: var(--space-4); color: var(--text-tertiary); font-size: var(--type-caption-size); }
@media (max-width: 560px) {
  .fin-crumbs { display: flex; }
  .fin-crumbs .is-db, .fin-crumbs .sep, .fin-crumbs .js-title, .fin-save, .fin-acts .lbl-long { display: none; }
}