/* Единые роли компонентов (Аудит 3.0).
   Единственный источник размеров, радиусов и шрифтов для кнопок, чипов статусов,
   строк списков, плиток иконок, заголовков и шторок. Подключается последним стилем
   на каждом экране; значения берутся из токенов app.css.
   Старые локальные правила, которые задавали эти свойства, удалены — поэтому слой
   работает без !important. Не возвращайте размер, радиус или шрифт роли в экранные
   стили: check-ui-consistency.mjs падает на новом варианте и на !important здесь.
   Витрина ролей — server/public/components.html. */

/* ── Кнопки: основная, вторичная, текстовая. 48 px, радиус 16, 15/600. ── */
:is(
  .button,
  .home-insight-action,
  .health-v3-next-step > button,
  .review-v3-actions > button,
  .section-coach-next,
  .literacy-primary,
  .welcome-v3-primary,
  .welcome-v3-secondary,
  .account-created-actions a,
  .feature-preview-telegram,
  .metric-tip-button,
  .health-statement-upload,
  .home-v3-empty-help,
  .v2-empty-help,
  .hosted-cashback-upload,
  .bank-add-button.bank-add-button-primary
):not(.button-reset):not(.filter):not(.chip) {
  min-height: var(--button-h);
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  font-weight: var(--button-weight);
  line-height: var(--button-line);
  letter-spacing: 0;
}
:is(.button, .button.full):not(.secondary):not(.button-danger):not(.button-reset):not(.sheet-footer-back):not(:disabled),
.status-actions .button.full:not(.secondary),
.rv-sheet-actions .button:not(.secondary),
.transfer-review-actions .button:not(.secondary),
.credit-review-actions .button:not(.secondary) {
  border-color: var(--inverse);
  background: var(--inverse);
  color: var(--on-inverse);
}
.sheet-footer-back { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.transfer-review-actions .button,
.credit-review-actions .button { padding: 8px 12px; }
/* Внутри шторок «Обновить данные» опции выбора остаются строками, а не кнопками. */
.modal-root .sheet .data-bank-sheet-card .bank-add-button:not(.bank-add-button-primary) { border-radius: var(--radius-m); }

/* ── Badge: 24 px, радиус 12, 12/600, четыре тона + ошибка. ── */
:is(
  .cashback-review-chip,
  .cheat-list-warning,
  .credit-rate-chip,
  .feature-preview-soon,
  .health-v3-preliminary,
  .home-v3-recalculating,
  .literacy-chip,
  .metric-status-chip,
  .money-preliminary,
  .rv-status,
  .savings-fresh-chip,
  .savings-stale-chip,
  .statement-file-result,
  .v2-demo-badge,
  .welcome-v3-badge,
  .index-metric-preliminary-chip
) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: var(--badge-h);
  height: auto;
  padding: 2px var(--badge-pad);
  border: 0;
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-weight);
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
/* Тоны */
:is(.cashback-review-chip, .cheat-list-warning, .health-v3-preliminary, .metric-status-chip.is-warning, .money-preliminary, .rv-status.rv-warn, .savings-stale-chip) {
  background: var(--warn-bg); color: var(--warn-text);
}
:is(.credit-rate-chip.ok, .literacy-chip.is-good, .metric-status-chip.is-good, .savings-fresh-chip, .statement-file-result.ok, .welcome-v3-badge) {
  background: var(--ok-bg); color: var(--ok-text);
}
:is(.home-v3-recalculating, .literacy-chip:not(.is-good), .statement-file-result.active, .statement-file-result.wait, .v2-demo-badge) {
  background: var(--fill); color: var(--ink-2);
}
.feature-preview-soon { background: var(--info-bg); color: var(--info-text); }
.statement-file-result.bad { background: var(--bad-bg); color: var(--bad-text); }
/* «Предварительно» везде с иконкой часов. */
.money-preliminary::before { content: '◷'; font-weight: 600; }
/* Счётчик в сегменте остаётся круглым, но в тоне «внимание». */
.review-count-badge { background: var(--warn-bg); color: var(--warn-text); font-weight: var(--badge-weight); }

/* ── ListRow: иконка 40 · r12, заголовок 15/500, подпись 13/400, сумма 15/600. ── */
:is(.transaction-icon, .income-operation-icon, .expense-operation-icon, .credit-payment-icon,
    .transfer-operation-icon, .money-row-icon, .rv-row-icon, .cashback-category-icon,
    .operation-sheet-icon, .profile-v2-tile, .next-step-icon, .choice-icon) {
  flex: 0 0 var(--row-icon);
  width: var(--row-icon);
  height: var(--row-icon);
  border-radius: var(--row-icon-radius);
}
:is(.transaction-copy, .income-operation-copy, .expense-operation-copy, .credit-payment-copy,
    .transfer-operation-copy, .money-row-copy, .rv-row-copy, .operation-details-copy,
    .operation-sheet-identity > span:not([class]), .profile-v2-row-copy) > strong,
.cashback-category-label > span:not(.cashback-category-icon) {
  font-size: var(--row-title-size);
  font-weight: var(--row-title-weight);
  line-height: 20px;
}
:is(.transaction-copy, .income-operation-copy, .expense-operation-copy, .credit-payment-copy,
    .transfer-operation-copy, .rv-row-copy, .operation-details-copy,
    .operation-sheet-identity > span:not([class]), .profile-v2-row-copy) > :is(span, small, em) {
  font-size: var(--row-meta-size);
  font-weight: 400;
  line-height: 18px;
}
:is(.transaction-sum, .income-operation-amount, .expense-operation-amount, .operation-details-amount,
    .money-row-value, .credit-payment-row > b, .transfer-operation > b, .operation-sheet-identity > b,
    .cheat-bank-row > strong, .cashback-editor-row > strong) ,
.rv-row-amount > strong {
  font-size: var(--row-amount-size);
  font-weight: var(--row-amount-weight);
  line-height: 20px;
}
.rv-row-amount > small { font-size: 12px; font-weight: 400; }

/* ── Плитки иконок: 40 · r12 в строках, 32 · r10 в компактных местах. ── */
:is(.home-v3-feature-icon, .v2-empty-ghost-icon) {
  flex: 0 0 var(--row-icon-compact);
  width: var(--row-icon-compact);
  height: var(--row-icon-compact);
  border-radius: var(--row-icon-compact-radius);
}

/* ── Карточки: внешняя r20, вложенная r12. ── */
:is(.cheat-bank-rows, .cheat-list, .cashback-editor-rows, .card.card-lg) { border-radius: var(--radius-xl); }
:is(.home-v3-banks-row, .operation-sheet-identity) { border-radius: var(--radius-m); }
:is(.home-v3-stale, .home-v3-processing, .cashback-editor-warning) { border-radius: var(--radius-xl); }
.review-v3-operation-meta > b,
.profile-v2-chain > .current {
  display: inline-flex; align-items: center; min-height: var(--badge-h); height: auto;
  padding: 2px var(--badge-pad); border-radius: var(--badge-radius);
  font-size: var(--badge-font-size); font-weight: var(--badge-weight); line-height: 16px;
}
.review-v3-operation-meta > b { background: var(--fill); color: var(--ink-2); }
.profile-v2-chain > .current { background: var(--ok-bg); color: var(--ok-text); }

/* ── Типографика: экран 20/600, секция 17/600, группа 15/600, подпись 12/600 капс. ── */
:is(.screen-header .screen-title, .screen-header h1, .review-v3-header h1, .rv-header .screen-title) {
  font-size: var(--type-screen-size);
  font-weight: var(--type-screen-weight);
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
}
.rv-header { min-height: var(--tap-min); }
/* Секция между карточками */
.profile-v2-group-heading {
  font-size: var(--type-section-size); font-weight: var(--type-heading-weight);
  line-height: 22px; letter-spacing: 0; text-transform: none;
}
/* Группа: месяц, день, подзаголовок внутри карточки или шторки */
:is(.feed-date, .indicator-month-heading h2, .credit-month-heading h2, .transfer-group-heading h2,
    .savings-group-heading h2, .profile-v2-history-heading h2, .rv-section-head h2, .cheat-section-heading,
    .home-v3-history-heading > strong, .review-v3-question, .metric-tip-copy h2, .transfer-review-card h3,
    .credit-review-card > h2, .cashback-check-sheet h3, .rv-history h3, .rv-cancel-guide h3) {
  font-size: var(--type-group-size); font-weight: var(--type-heading-weight);
  line-height: 20px; letter-spacing: 0; text-transform: none;
  color: var(--text);
}
/* Подпись (eyebrow) внутри карточки */
:is(.metric-section-title, .next-step-copy h2, .home-v3-ghost h2, .v2-empty-ghost h2, .fh-empty-preview > h2, .home-card-title:not(h1),
    .literacy-weak-topics h2, .notifications-list-heading h2) {
  font-size: var(--type-label-size); font-weight: var(--type-heading-weight);
  line-height: 16px; letter-spacing: var(--type-label-tracking); text-transform: uppercase;
}
/* Подпись над крупной суммой — обычный текст, без капса */
.indicator-details-summary-card > h2,
.indicator-details-summary-card > h2 > span { text-transform: none; letter-spacing: 0; }
/* Заголовок шторки и пустого состояния — 20/600 обычным регистром */
.modal-root .sheet :is(h1, h2):not(.feed-date),
html[data-catalogue-sheet-preview] .sheet h2,
:is(.fh-empty h2, .home-v3-empty-intro h2, .feature-preview-card h2, .statement-status-sheet h2, .import-status h2) {
  font-size: 20px; font-weight: 600; line-height: 26px;
  letter-spacing: 0; text-transform: none;
}
/* Ручка шторки — одна: 44 × 28 */
.modal-root .sheet .grab { height: 28px; }

/* ── PeriodPicker: «Август 2026 ⌄» на «Деньгах» и в «Кешбэке». ── */
.period-picker,
.cheat-months .period-picker {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-min); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font: 600 14px/20px var(--font-sans); white-space: nowrap;
}
.period-picker:disabled { opacity: 1; cursor: default; }
.period-options { display: grid; gap: 8px; }
.period-options .money-row { justify-content: flex-start; min-height: 52px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); font: 500 15px/20px var(--font-sans); }
.period-options .money-row[aria-current="date"] { border-color: var(--text); font-weight: 600; }

/* ── Поддержка: одна точка входа — «Написать в поддержку» в профиле, FAQ, входе и ошибках. ── */
.telegram-support-widget { display: none; }

/* Одно основное действие на экран и шторку: второе и следующие становятся вторичными. */
.button.button:not(.secondary):not(.button-danger) ~ .button.button:not(.secondary):not(.button-danger),
.sheet-footer-actions ~ .sheet-footer-actions .button.button.button:not(.secondary):not(.button-danger) {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

/* Зона нажатия 44 px у компактных элементов без изменения их вида. */
:is(.cashback-review-chip, .cheat-list-warning)::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
.modal-root .sheet .grab::after { top: 10px; }

/* ── Канонические классы для новых экранов (витрина: components.html). ──
   Те же токены, что у ролей выше; отдельные правила, чтобы не менять специфичность старых списков. */
.text-action {
  min-height: var(--tap-min); padding: 0 4px; border: 0; background: transparent;
  color: var(--accent-strong); font: 600 14px var(--font); cursor: pointer;
}
.badge {
  display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
  min-height: var(--badge-h); padding: 2px var(--badge-pad); border: 0; border-radius: var(--badge-radius);
  background: var(--fill); color: var(--ink-2);
  font-size: var(--badge-font-size); font-weight: var(--badge-weight); line-height: 16px;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.badge.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge.badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.badge-info { background: var(--info-bg); color: var(--info-text); }
.badge.badge-bad { background: var(--bad-bg); color: var(--bad-text); }
.icon-tile {
  display: inline-grid; place-items: center; flex: 0 0 var(--row-icon);
  width: var(--row-icon); height: var(--row-icon); border-radius: var(--row-icon-radius);
  background: var(--surface-sub); color: var(--text-secondary);
}
.icon-tile.icon-tile-compact {
  flex-basis: var(--row-icon-compact); width: var(--row-icon-compact); height: var(--row-icon-compact);
  border-radius: var(--row-icon-compact-radius);
}
.icon-tile .ui-icon { width: 20px; height: 20px; }
.icon-tile.icon-tile-compact .ui-icon { width: 18px; height: 18px; }
.prototype-page .type-screen { font-size: var(--type-screen-size); font-weight: var(--type-screen-weight); line-height: 26px; letter-spacing: 0; text-transform: none; }
.prototype-page .type-section { font-size: var(--type-section-size); font-weight: var(--type-heading-weight); line-height: 22px; letter-spacing: 0; text-transform: none; }
.prototype-page .type-group { font-size: var(--type-group-size); font-weight: var(--type-heading-weight); line-height: 20px; letter-spacing: 0; text-transform: none; }
.prototype-page .type-label { font-size: var(--type-label-size); font-weight: var(--type-heading-weight); line-height: 16px; letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }