/* FinBars / FinDonut / FinPager — графики финансовой аналитики (буфер; ds/pending-fin.js, макеты PFM 20015:236991, 20015:288564, 20015:237183, 20015:236748) */

/* ---------- FinBars ---------- */
/* цвета выбранного: расходы (--fe-*) и доходы (--fi-*) — зарегистрированные свойства: смена grad (категория) перекрашивает градиент плавно, без вспышки */
@property --fe-a { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --fe-b { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --fi-a { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --fi-b { syntax: "<color>"; inherits: true; initial-value: transparent; }
/* длительность и кривая морфинга (доли бублика, переходы столбиков между вкладками) — те же, что у смены цифр U.pending.Roll; в шапке аналитики
   (.u-fhero) ds/pending-histobe.css задаёт их = --tr-modal-ms / --tr-modal-ease (420 мс), как переход динамика ↔ бублик */
:root { --fin-roll-ms: var(--tr-fade-ms, 240ms); --fin-roll-ease: var(--tr-push-ease, cubic-bezier(.32, .72, 0, 1)); }
.u-fbars { position: relative; --fbm: var(--fin-roll-ms, 420ms) var(--fin-roll-ease, cubic-bezier(.32, .72, 0, 1));
  --fe-a: var(--c-graphic-gradient-default-start); --fe-b: var(--c-graphic-gradient-default-end); --fi-a: var(--c-graphic-success); --fi-b: var(--c-graphic-success);
  transition: opacity .24s cubic-bezier(0, 0, .2, 1), --fe-a .3s var(--tr-fade-ease, ease), --fe-b .3s var(--tr-fade-ease, ease), --fi-a .3s var(--tr-fade-ease, ease), --fi-b .3s var(--tr-fade-ease, ease); }
.u-fbars.is-hidden { opacity: 0; pointer-events: none; }
.u-fbars__sc { overflow-x: auto; overflow-y: hidden; padding: 24px 0 32px; margin: -24px 0 -32px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.u-fbars__sc::-webkit-scrollbar { display: none; }
/* цвет неактивного столбика — им же пустые периоды и серые доли бублика */
.u-fbars, .u-fbars-mini, .u-fdonut { --fin-idle: var(--c-container-shimmer-start); }
/* ряд AL:H gap 8 (у пар «Все» — 20, меняется плавно); по центру, если столбики не заполняют ширину (год); иначе шире экрана — прокрутка, текущий у правого поля 16 */
.u-fbars__row { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 0 16px; width: max-content; min-width: 100%; box-sizing: border-box; justify-content: center; transition: gap var(--fbm); }
.u-fbars--pair .u-fbars__row { gap: 20px; }
/* колонка периода: 56 (у пар — 48, плавно), во всю высоту ряда; столбики и подпись — слои с геометрией из JS (left / width / bottom / height / opacity) */
.u-fbars__c { position: relative; flex: none; display: block; height: 156px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; z-index: 1;
  -webkit-tap-highlight-color: transparent; outline: none; transform-origin: 50% 100%; transition: transform .12s ease, width var(--fbm); }
.u-fbars__c:active { transform: scale(.96); }
.u-fbars__c:focus-visible .u-fbars__b { box-shadow: 0 0 0 2px var(--c-graphic-accent); }
/* столбик: одиночный 56 × h, r12 (в макете на столбиках эффект @Bottom sheet, но на рендере макета тени не видно — без тени, вопрос дизайнерам); половина пары 22, r6 */
.u-fbars__b { position: absolute; display: block; border-radius: 12px; background: var(--fin-idle); transform-origin: 50% 100%;
  transition: left var(--fbm), width var(--fbm), bottom var(--fbm), height var(--fbm), border-radius var(--fbm), opacity var(--tr-fade-ms, 240ms) var(--tr-fade-ease, ease), transform .42s var(--tr-push-ease, cubic-bezier(.32, .72, 0, 1)); }
.u-fbars--pair .u-fbars__b { border-radius: 6px; }
.u-fbars__b.is-zero { border-radius: 2px; } /* период без операций — полоска 4 px; у выбранного — цвет выбранного */
.u-fbars__b.is-nt { transition: none; } /* кадр подготовки перекрашивания и прятанье уходящего — без перехода */
.u-fbars__c.is-on .u-fbars__b.is-exp { background: linear-gradient(180deg, var(--fe-a), var(--fe-b)); }
.u-fbars__c.is-on .u-fbars__b.is-inc { background: linear-gradient(180deg, var(--fi-a), var(--fi-b)); }
/* подпись: у одиночного — Caption внизу внутри столбика (pad 10); у пары — под парой (gap 4), уезжает вниз плавно */
.u-fbars__label { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1; text-align: center; white-space: nowrap; color: var(--c-text-secondary); pointer-events: none;
  transition: bottom var(--fbm), color var(--fbm); }
.u-fbars--pair .u-fbars__label { bottom: 0; }
/* подпись на выбранном одиночном: в макете Text/Inverse Static Primary; в тёмной теме столбик расходов белый — Graphic/Inverse Primary; у пар и пустого — Text/Primary */
.u-fbars.is-m-exp:not(.has-grad) .u-fbars__c.is-on .u-fbars__label { color: var(--c-graphic-inverse-primary); }
.u-fbars.is-m-exp.has-grad .u-fbars__c.is-on .u-fbars__label, .u-fbars.is-m-inc .u-fbars__c.is-on .u-fbars__label { color: var(--c-text-inverse-static-primary); }
.u-fbars.u-fbars .u-fbars__c.is-on.is-zero .u-fbars__label, .u-fbars.u-fbars--pair .u-fbars__c.is-on .u-fbars__label { color: var(--c-text-primary); }
/* подписи в две строки (недели) */
.u-fbars.is-two .u-fbars__label { white-space: normal; padding: 0 2px; overflow-wrap: anywhere; }
/* среднее — пунктир по завершённым периодам (только avg=true; по умолчанию не рисуется — правка 21.10) */
.u-fbars__avg { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--c-graphic-disabled); pointer-events: none; z-index: 0; }
/* рост от оси при первом показе (кривая переходов ДС), текущий — первым; при перемонтировании (смена гранулярности) экран передаёт animate=false */
.u-fbars.is-grow .u-fbars__b { animation: u-fbars-grow .5s var(--tr-push-ease, cubic-bezier(.32, .72, 0, 1)) both; animation-delay: calc(min(var(--i, 0), 8) * 28ms); }
.u-fbars.is-grow .u-fbars__label, .u-fbars.is-grow .u-fbars__avg { animation: u-fbars-fade .3s ease .25s both; }
/* скрыт (бублик): столбики опускаются к оси */
.u-fbars.is-hidden .u-fbars__b { transform: scaleY(0); }
@keyframes u-fbars-grow { from { transform: scaleY(0); } }
@keyframes u-fbars-fade { from { opacity: 0; } }
/* миниатюра в плашке: 40 × 30, 4 столбика 6 × до 30, gap 2, r2, прижаты к низу */
.u-fbars-mini { display: inline-flex; align-items: flex-end; gap: 2px; width: 40px; height: 30px; vertical-align: bottom; }
.u-fbars-mini > i { display: block; width: 6px; border-radius: 2px; background: var(--fin-idle); }
.u-fbars-mini > i.is-zero { border-radius: 1px; }
.u-fbars-mini.is-expense > i.is-cur:not(.is-zero) { background: var(--g-graphic-secondary); }
.u-fbars-mini.is-income > i.is-cur:not(.is-zero) { background: var(--c-graphic-success); }

/* ---------- FinDonut ---------- */
.u-fdonut { position: relative; flex: none; margin: 0 auto; }
.u-fdonut > svg { position: absolute; inset: 0; display: block; overflow: visible; }
.u-fdonut__empty { stroke: var(--fin-idle); }
/* серые доли: остаток в миниатюре и превью соседних периодов (ghost); смена ghost — растворением (кривая fade ДС) */
.u-fdonut__idle { stroke: var(--fin-idle); }
.u-fdonut__color, .u-fdonut__ghost { transition: opacity .2s var(--tr-fade-ease, cubic-bezier(0, 0, .2, 1)); }
.u-fdonut__ghost { opacity: 0; }
.u-fdonut.is-ghost .u-fdonut__color { opacity: 0; }
.u-fdonut.is-ghost .u-fdonut__ghost { opacity: 1; }
/* рисование по часовой — JS (requestAnimationFrame, кривая --tr-fade-ease): дуги растут со скруглённым передним концом */
.u-fdonut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.u-fdonut__center > * { pointer-events: auto; }
.u-fdonut--mini { margin: 0; display: inline-block; vertical-align: bottom; }

/* ---------- FinPager ---------- */
.u-fpager { position: relative; }
.u-fpager__sc { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; outline: none; touch-action: pan-x pan-y; }
.u-fpager__sc::-webkit-scrollbar { display: none; }
.u-fpager__sc.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.u-fpager__page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* peek: поля по peek + gap с каждой стороны (паддинг — инлайн из пропа), страница = ширина без полей, привязка по центру; соседи масштабируются из JS */
.u-fpager--peek .u-fpager__sc { box-sizing: border-box; }
.u-fpager--peek .u-fpager__page { scroll-snap-align: center; }
/* масштаб соседей — у внутреннего слоя: страница (точка привязки scroll-snap) не трансформируется, иначе привязка съезжает с центра */
.u-fpager--peek .u-fpager__in { transform-origin: 50% 50%; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .u-fbars *, .u-fbars, .u-fbars-mini *, .u-fdonut * { animation: none !important; transition: none !important; }
}

/* ---------- Демо на странице буфера ---------- */
.u-fin-demo { width: 375px; max-width: 100%; margin: 0 auto; background: var(--c-surface-main); }
.u-fin-demo__sum { margin: 0; padding: 0 24px; text-align: center; color: var(--c-text-primary); }
.u-fin-demo__note { margin: 4px 0 0; text-align: center; color: var(--c-text-secondary); }
.u-fin-demo__minis { display: flex; align-items: flex-end; gap: 16px; padding: 16px 16px 0; }
.u-fin-demo__minis > span { display: flex; flex-direction: column; gap: 8px; }
.u-fin-demo__minis b { font-weight: inherit; color: var(--c-text-secondary); }
.u-fin-demo__btn { margin-left: auto; }
.u-fin-demo__page { display: flex; justify-content: center; padding: 12px 0; }
.u-fin-demo__center { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--c-text-primary); }
.u-fin-demo__muted { color: var(--c-text-secondary); }
.u-fin-demo__legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px 0; color: var(--c-text-secondary); }
.u-fin-demo__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; }

/* Плитка категории для U.pending.ListItem tile="cat-<id>" lead={ icon, paint: белый } (UZ_FIN.CATS[id].tile / .lead): AddLeft IconContainer с градиентом категории, макет 20015:236991 */
.u-li.u-pli-tile-cat-shop .u-tile { background: var(--g-cat-shop); }
.u-li.u-pli-tile-cat-transfer .u-tile { background: var(--g-cat-transfer); }
.u-li.u-pli-tile-cat-home .u-tile { background: var(--g-cat-home); }
.u-li.u-pli-tile-cat-cafe .u-tile { background: var(--g-cat-cafe); }
.u-li.u-pli-tile-cat-edu .u-tile { background: var(--g-cat-edu); }
.u-li.u-pli-tile-cat-health .u-tile { background: var(--g-cat-health); }
.u-li.u-pli-tile-cat-telecom .u-tile { background: var(--g-cat-telecom); }
.u-li.u-pli-tile-cat-charity .u-tile { background: var(--g-cat-charity); }
.u-li.u-pli-tile-cat-finance .u-tile { background: var(--g-cat-finance); }
.u-li.u-pli-tile-cat-transport .u-tile { background: var(--g-cat-transport); }
.u-li.u-pli-tile-cat-taxi .u-tile { background: var(--g-cat-taxi); }
.u-li.u-pli-tile-cat-fun .u-tile { background: var(--g-cat-fun); }
.u-li.u-pli-tile-cat-clothes .u-tile { background: var(--g-cat-clothes); }
.u-li.u-pli-tile-cat-beauty .u-tile { background: var(--g-cat-beauty); }
.u-li.u-pli-tile-cat-travel .u-tile { background: var(--g-cat-travel); }
.u-li.u-pli-tile-cat-auto .u-tile { background: var(--g-cat-auto); }
.u-li.u-pli-tile-cat-salary .u-tile { background: var(--g-cat-salary); }
.u-li.u-pli-tile-cat-transfer-in .u-tile { background: var(--g-cat-transfer-in); }
.u-li.u-pli-tile-cat-cashback .u-tile { background: var(--g-cat-cashback); }
.u-li.u-pli-tile-cat-refund .u-tile { background: var(--g-cat-refund); }
.u-li.u-pli-tile-cat-interest .u-tile { background: var(--g-cat-interest); }