/* История операций To Be — буфер «Неучтённые компоненты» (ds/pending-histobe.js; макеты PFM 20015:236747, ветка History fi0nG1n5xLMuKI6udtmNwO) */

/* ---------- IconChip — Chips Color=White {Icon=true} без текста, 44×36 (лента 20015:236748: поиск, сортировка) ---------- */
.u-ichip { display: inline-grid; place-items: center; flex: none; width: 44px; height: 36px; border-radius: 20px; background: var(--c-actions-tertiary-white); color: var(--c-graphic-primary); transition: transform .12s ease; }
.u-ichip .u-ic { width: 20px; height: 20px; }
.u-ichip:active { transform: scale(.96); }
.u-ichip.is-on { background: var(--c-actions-primary); color: var(--c-graphic-inverse-static-primary); }
.u-ichip.is-sk { pointer-events: none; }

/* ---------- FinCard — плашки «Расходы» / «Доходы» ленты (Card-filter, отвязан в макете): 164×126, r20, $Surface/Widget, pad 16/12/16/16, gap 24 ---------- */
.u-fcards { display: flex; gap: 16px; padding: 0 16px; }
.u-fcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 16px 12px 16px 16px; border-radius: 20px; background: var(--c-surface-widget); text-align: left; transition: transform .12s ease; }
.u-fcard:not(.is-sk):active { transform: scale(.97); }
.u-fcard__chart { position: relative; width: 40px; height: 30px; }
.u-fcard__bars { display: flex; gap: 2px; align-items: flex-end; height: 30px; }
.u-fcard__bars i { width: 6px; border-radius: 2px; background: var(--c-actions-tertiary-grey-pressed); }
.u-fcard__bars i.is-cur { background: var(--g-graphic-secondary); }
.u-fcard.is-income .u-fcard__bars i.is-cur { background: var(--u-fin-income, var(--c-graphic-success)); }
.u-fcard__bars.is-draw i { transform-origin: bottom; animation: u-fcard-grow .5s cubic-bezier(.32, .72, 0, 1) both; }
.u-fcard__bars.is-draw i:nth-child(2) { animation-delay: .04s; } .u-fcard__bars.is-draw i:nth-child(3) { animation-delay: .08s; } .u-fcard__bars.is-draw i:nth-child(4) { animation-delay: .12s; }
@keyframes u-fcard-grow { from { transform: scaleY(0); } }
.u-fcard__chart > .u-fcard__swap { position: absolute; left: 0; top: 0; animation: u-fin-fade .32s ease both; }
.u-fcard__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.u-fcard__t { color: var(--c-text-secondary); }
.u-fcard__v { color: var(--c-text-primary); white-space: nowrap; overflow: hidden; }
@keyframes u-fin-fade { from { opacity: 0; } }

/* ---------- FinHero — шапка аналитики: продукт ⌄, сумма, график (динамика ↔ бублик); блок 310 в обоих видах (макеты 20015:236991 и 20015:237183) ----------
   Динамика: VSpacing l · «Карта Uzum ⌄» Body M Secondary · VSpacing s · сумма Title 1 [32] (копейки Secondary) · VSpacing xxl · график 156 · VSpacing l.
   Бублик: кольцо 286 сверху; в центре «Карта Uzum ⌄» (y 96) · 12 · сумма Title 2 [28] (y 128) · 12 · «В феврале» Body M Secondary (y 170). */
/* Движение — токены переходов ДС: сдвиг — --tr-modal-ms / --tr-modal-ease (420 мс), проявление — --tr-fade-ms / --tr-fade-ease (240 мс).
   Динамика ↔ бублик: столбики уходят вниз и гаснут, бублик приезжает сверху той же траекторией и длительностью (и наоборот). */
.u-fhero { position: relative; height: 310px; overflow: hidden; --fh-ease: var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)); --fh-ms: var(--tr-modal-ms, 420ms); --fh-fade: var(--tr-fade-ms, 240ms) var(--tr-fade-ease, ease); }
.u-fhero__bars { position: absolute; left: 0; right: 0; top: 130px; height: 156px; transition: opacity var(--fh-fade), transform var(--fh-ms) var(--fh-ease); }
/* бублик во всю ширину: свайп периодов с превью соседей у краёв экрана (FinPager peek), кольцо 286 — по центру */
.u-fhero__donut { position: absolute; left: 0; right: 0; top: 0; height: 286px; display: flex; justify-content: center; transition: opacity var(--fh-fade), transform var(--fh-ms) var(--fh-ease); }
.u-fhero__donut > div { width: 100%; }
.u-fhero.is-donut .u-fhero__bars { opacity: 0; transform: translateY(24px); pointer-events: none; }
.u-fhero.is-bars .u-fhero__donut { opacity: 0; transform: translateY(-24px); pointer-events: none; }
/* верх уходящего / приезжающего кольца растворяется в полупрозрачном градиенте цвета фона под шапкой (а не обрезается краем);
   в покое бублика градиента нет — верх кольца не тронут. Цвет — фон контекста (--par-base экрана, иначе $Surface/Main) */
.u-fhero__fade { position: absolute; left: 0; right: 0; top: 0; height: 32px; pointer-events: none; background: linear-gradient(var(--par-base, var(--c-surface-main)), transparent); opacity: 1; transition: opacity var(--fh-ms) var(--fh-ease); }
.u-fhero.is-donut .u-fhero__fade { opacity: 0; }
.u-fhero__head { position: absolute; left: 0; right: 0; top: 24px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: transform var(--fh-ms) var(--fh-ease); }
.u-fhero.is-donut .u-fhero__head { transform: translateY(72px); }
.u-fhero__label { display: inline-flex; align-items: center; gap: 4px; height: 20px; color: var(--c-text-secondary); pointer-events: auto; white-space: nowrap; transition: transform .12s ease; }
.u-fhero__label:active { transform: scale(.96); }
.u-fhero__label .u-ic { width: 16px; height: 16px; color: var(--c-graphic-secondary); }
.u-fhero__label.is-static { pointer-events: none; }
.u-fhero__amount { margin-top: 12px; height: 34px; white-space: nowrap; color: var(--c-text-primary); transform-origin: 50% 0; transition: transform var(--fh-ms) var(--fh-ease); }
.u-fhero.is-donut .u-fhero__amount { transform: scale(.875); }
.u-fhero__cents { color: var(--c-text-secondary); transition: color var(--fh-fade); }
.u-fhero.is-donut .u-fhero__cents { color: var(--c-text-primary); }
.u-fhero__cap { position: absolute; top: 74px; left: 24px; right: 24px; text-align: center; color: var(--c-text-secondary); white-space: nowrap; opacity: 0; transition: opacity var(--fh-fade); }
.u-fhero.is-donut .u-fhero__cap { opacity: 1; transition: opacity var(--fh-fade) 180ms; }
.u-fhero.no-anim *, .u-fhero.no-anim { transition: none !important; }
.u-fhero__sk { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* компактная шапка без графика (страницы «Смотреть все»): VSpacing l · подпись · VSpacing s · сумма · VSpacing l */
.u-fhero.is-plain { height: auto; overflow: visible; padding: 24px 0; }
.u-fhero.is-plain .u-fhero__head { position: static; }
/* смена данных (Расходы ↔ Доходы, период) — содержимое плавно сменяется на месте */
.u-fin-swap { animation: u-fin-swap var(--tr-pop-ms, 320ms) var(--tr-pop-ease, cubic-bezier(.32, .72, 0, 1)) both; }
.u-fin-swap.is-l { --fin-dx: -16px; } .u-fin-swap.is-r { --fin-dx: 16px; }
@keyframes u-fin-swap { from { opacity: 0; transform: translateX(var(--fin-dx, 0)); } }

/* Roll — смена числа как механический счётчик: ячейка обрезана по высоте строки, новый знак въезжает снизу, прежний уезжает вверх и гаснет
   к трети пути (без шлейфа); ширина числа — плавно (FLIP в коде, по правому краю: обёртка rtl, содержимое ltr — при наезде лишнее уходит влево).
   Время и кривая — общие токены смены данных --fin-roll-ms / --fin-roll-ease (их же берёт морфинг FinDonut). */
/* Roll — смена числа целиком, как появление графика при бублик ↔ динамика: сдвиг 24 px за --tr-modal-ms по --tr-modal-ease, проявление — --tr-fade-*.
   Те же переменные (--fin-roll-*) берёт морфинг долей FinDonut внутри шапки — цифры и доли меняются синхронно. */
.u-fhero, .u-roll-w { --fin-roll-ms: var(--tr-modal-ms, 420ms); --fin-roll-ease: var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)); }
.u-roll-w { position: relative; display: inline-flex; justify-content: center; white-space: nowrap; vertical-align: top; }
.u-roll__in, .u-roll__out { display: inline-block; white-space: nowrap; }
.u-roll__out { position: absolute; left: 50%; top: 0; translate: -50% 0; }
.u-roll-w.is-anim .u-roll__in { animation: u-roll-in-up var(--tr-modal-ms, 420ms) var(--tr-modal-ease, ease) both, u-roll-fade-in var(--tr-fade-ms, 240ms) var(--tr-fade-ease, ease) both; }
.u-roll-w.is-anim .u-roll__out { animation: u-roll-out-up var(--tr-modal-ms, 420ms) var(--tr-modal-ease, ease) both, u-roll-fade-out var(--tr-fade-ms, 240ms) var(--tr-fade-ease, ease) both; }
.u-roll-w.is-anim.is-down .u-roll__in { animation-name: u-roll-in-down, u-roll-fade-in; }
.u-roll-w.is-anim.is-down .u-roll__out { animation-name: u-roll-out-down, u-roll-fade-out; }
@keyframes u-roll-in-up { from { transform: translateY(24px); } }
@keyframes u-roll-in-down { from { transform: translateY(-24px); } }
@keyframes u-roll-out-up { to { transform: translateY(-24px); } }
@keyframes u-roll-out-down { to { transform: translateY(24px); } }
@keyframes u-roll-fade-in { from { opacity: 0; } }
@keyframes u-roll-fade-out { to { opacity: 0; } }

/* FinSwap — смена графика по гранулярности: по горизонтали на 40 px (to-r — слева направо, to-l — справа налево), уходящий плавно гаснет за всё
   время перехода, новый проявляется; сдвиг и проявление — --tr-modal-ms / --tr-modal-ease */
.u-fswap { position: relative; height: 100%; }
.u-fswap__l { height: 100%; display: flow-root; } /* свой BFC: отрицательные поля графика (FinBars __sc) не схлопываются наружу — уходящий слой (absolute) стоит ровно там же, что в потоке, без прыжка вверх */
.u-fswap__l.is-out { position: absolute; inset: 0; pointer-events: none; animation: u-fswap-out var(--tr-modal-ms, 420ms) var(--tr-modal-ease, ease) both; }
.u-fswap__l.is-in { animation: u-fswap-in var(--tr-modal-ms, 420ms) var(--tr-modal-ease, ease) both; }
.u-fswap__l.to-r { --fsw-out: 40px; --fsw-in: -40px; }
.u-fswap__l.to-l { --fsw-out: -40px; --fsw-in: 40px; }
@keyframes u-fswap-out { to { transform: translateX(var(--fsw-out)); opacity: 0; } }
@keyframes u-fswap-in { from { transform: translateX(var(--fsw-in)); opacity: 0; } }

/* ---------- XlsDoc — превью выписки xls (в U.Widget: лист с отступом 16) ---------- */
.u-xls { padding: 16px; }
.u-xls__file { display: flex; align-items: center; gap: 12px; }
.u-xls__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c-container-grey); color: var(--c-graphic-primary); }
.u-xls__fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-primary); }
.u-xls__head { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; margin-bottom: 16px; color: var(--c-text-primary); }
.u-xls__head b { margin-bottom: 4px; }
.u-xls__meta { color: var(--c-text-primary); }
.u-xls__meta i { font-style: normal; color: var(--c-text-secondary); margin-right: 6px; }
.u-xls__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; border-top: 1px solid var(--c-border-divider); border-left: 1px solid var(--c-border-divider); }
.u-xls__c { padding: 6px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-primary); border-right: 1px solid var(--c-border-divider); border-bottom: 1px solid var(--c-border-divider); }
.u-xls__c.is-h { background: var(--c-container-grey); }
.u-xls__c.is-num { text-align: right; }
.u-xls__more { margin-top: 8px; text-align: center; color: var(--c-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .u-fhero *, .u-fhero, .u-fcard__bars i, .u-fin-swap, .u-fcard__swap, .u-roll__in, .u-roll__out, .u-roll-w, .u-fswap__l { transition: none !important; animation: none !important; }
}

.u-fhero__skbars { display: flex; gap: 8px; justify-content: flex-end; align-items: flex-end; height: 156px; padding: 0 16px; overflow: hidden; }

/* ---------- Цвета категорий «Наличные» и «Кредиты» (UZ_FIN.CATS cash / loan, состав операций клиента на панели «Истории операций» To Be) ----------
   В группе токенов Category gradients (tokens.css, --c-cat-<id>-start|end, --g-cat-<id>) этих категорий нет; в макетах PFM их тоже нет. До решения дизайнеров —
   из палитры ДС: «Наличные» — серебристый blue-black 300 → 700 (как монеты и банкомат), «Кредиты» — тёмный фирменный brand 700 → 900. Плитка FinRow и доля бублика берут эти токены. */
.uz, .uz[data-uz-theme] {
  --c-cat-cash-start: var(--p-blue-black-300);
  --c-cat-cash-end: var(--p-blue-black-700);
  --c-cat-loan-start: var(--p-brand-700);
  --c-cat-loan-end: var(--p-brand-900);
  --g-cat-cash: linear-gradient(180deg, var(--c-cat-cash-start), var(--c-cat-cash-end));
  --g-cat-loan: linear-gradient(180deg, var(--c-cat-loan-start), var(--c-cat-loan-end));
}
.u-li.u-pli-tile-cat-cash .u-tile { background: var(--g-cat-cash); }
.u-li.u-pli-tile-cat-loan .u-tile { background: var(--g-cat-loan); }