/* Zidos Trail v9 · «Движение денег» и «Семья»: значки, шеврон, график, вкладки второго уровня.
   Размеры значков и графика раньше не задавал ни один файл v9 (svg растягивался до ширины карточки). */

/* вкладки второго уровня (Траты · Чеки · …) и сегменты: капсулы, цели ≥ 44 px */
:is(#page-cashflow, #page-family, #page-rules) .page-head .shell-section-nav {
  flex: 1 0 100%;
  display: flex;
  gap: 2px;
  padding: 3px;
  min-width: 0;
  background: var(--well-deep);
  border-radius: 999px;
}

:is(#page-cashflow, #page-family, #page-rules) .page-head .shell-section-nav a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 14px/1.2 var(--sans);
  text-align: center;
}

:is(#page-cashflow, #page-family, #page-rules) .page-head .shell-section-nav a[aria-current="page"] {
  background: var(--panel);
  color: var(--ink);
}

:is(#page-cashflow, #page-family) .seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--well-deep);
  border-radius: 999px;
}

:is(#page-cashflow, #page-family) .seg button {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  transition: background-color var(--fade) var(--ease), color var(--fade) var(--ease);
}

/* скользящая подложка оболочки (.r6-seg-pill) — вне потока, без transition (reduced-motion) */
:is(#page-cashflow, #page-family) .seg.r6-seg-slide { position: relative; }

:is(#page-cashflow, #page-family) .r6-seg-pill {
  position: absolute;
  left: 0;
  z-index: 0;
  background: var(--panel);
  pointer-events: none;
  transition-property: none !important;
}

:is(#page-cashflow, #page-family) .seg.r6-seg-slide > button { position: relative; z-index: 1; }

:is(#page-cashflow, #page-family) .seg button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
}

/* значок категории / вида операции: глиф 22 px в круге 40; цвет и тон подложки приходят из inline-стиля */
:is(#page-cashflow, #page-family) .catic {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-inline-end: 12px;
  border-radius: 50%;
}

:is(#page-cashflow, #page-family) .catic svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* шеврон раскрытия долга */
.debt-chevron {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
}

.debt-chevron svg {
  display: block;
  width: 20px;
  height: 20px;
}

.debt-friend-head[aria-expanded="true"] .debt-chevron { transform: rotate(90deg); }

/* график «Пришло и ушло»: на всю ширину карточки, высота 280 (JS читает clientWidth/clientHeight) */
#page-cashflow .chart {
  position: relative;
  height: 280px;
  margin-top: 14px;
  cursor: crosshair;
  touch-action: pan-y;
}

#page-cashflow .chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* подписи и столбцы графика: подписи — абсолютные span поверх svg, фон-подсветка слота прозрачен */
#page-cashflow .chart .lbl {
  position: absolute;
  font: 400 11px/14px var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}

#page-cashflow .chart .ylbl { left: 0; width: 44px; text-align: right; transform: translateY(-50%); }
#page-cashflow .chart .xlbl { bottom: 22px; transform: translateX(-50%); }
#page-cashflow .chart .cfx { font-size: 12px; color: var(--ink-3); }
#page-cashflow .chart .cfx.on { color: var(--ink); font-weight: 500; }
#page-cashflow .chart .cfv { display: none; }
#page-cashflow .chart .cfnet { font-weight: 600; transform: translate(-50%, 0); }
#page-cashflow .chart .cfnet.pos { color: var(--positive); }
#page-cashflow .chart .cfnet.neg { color: var(--danger); }
#page-cashflow .chart .cfm .cfbg { fill: transparent; }
#page-cashflow .chart .cfm.on .cfbg { fill: var(--well); }
#page-cashflow .chart .cfm[data-cfm] { cursor: pointer; }
#page-cashflow .chart .cfm:focus-visible { outline: none; }
#page-cashflow .chart .cfm:focus-visible .cfbg { stroke: var(--focus); stroke-width: 2; }
#page-cashflow .chart line { stroke: var(--well-deep); }
#page-cashflow .chart pattern line { stroke: var(--ink-3); }

/* действия в шапке: вторичные капсулы 44 px, как на «Лимитах» и «Тратах» */
:is(#page-cashflow, #page-family, #page-rules, #page-integrations) .page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

:is(#page-cashflow, #page-family, #page-rules, #page-integrations) .page-actions :is(.btn-ghost, .btn-brand, .btn-key),
:is(#page-rules, #page-integrations) :is(.btn-ghost, .btn-brand, .more),
#page-rules #rlSug :is(button, a),
#cfGoalCard .goal-form .btn-ghost {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* «Добавить долг» — основное действие карточки: чернильная капсула 44 px */
#page-family .debt-card-actions .btn-brand {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 500 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

#page-family .debt-card-actions svg { width: 16px; height: 16px; flex: none; }

/* цель сбережений */
#cfGoalCard .goal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#cfGoalCard .goal-form label { flex: 1 0 100%; color: var(--ink-2); font: 400 13px/1.4 var(--sans); }

#cfGoalCard .goal-form input {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  color: var(--ink);
  font: 400 16px/1.2 var(--sans);
}

/* строки «Откуда пришло» / «Куда ушло»: подпись и сумма в строку, полоска доли под ними */
#page-cashflow .rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}

#page-cashflow .rank-row .num { text-align: right; font-variant-numeric: tabular-nums; }
#page-cashflow .rank-row .tr { grid-column: 1 / -1; }
#page-cashflow .rank-row .track { height: 6px; border-radius: 999px; background: var(--well-deep); overflow: hidden; }
/* заливка доли — inline var(--data-1) (синий старой палитры): в v9 приход — зелёный, расход — чернила */
#page-cashflow .rank-row .track i { display: block; height: 100%; border-radius: inherit; background: var(--ink-3) !important; }
#cfIn .rank-row .track i { background: var(--positive) !important; }

/* пополнения и переводы: значок, подпись с датой, сумма */
#page-cashflow .acc__mv {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 14px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}

#page-cashflow .acc__mvic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--well);
  font-style: normal;
}

#page-cashflow .acc__mvd { display: block; color: var(--ink-2); font-size: 12px; }
#page-cashflow .acc__mva { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* долги друзьям: строка-заголовок 56 px */
#page-family .debt-friend-head {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}

#page-family .debt-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--well);
  font: 500 14px/1 var(--sans);
}

#page-family .debt-balances { color: var(--ink-2); font: 400 13px/1.3 var(--sans); text-align: right; }
#page-family .debt-balances b { color: var(--ink); font-weight: 500; }

/* логотипы сервисов в общих операциях: марка — одним цветом чернил (синий — цвет данных, не интерфейса) */
#page-family .hg-service { color: var(--ink) !important; }

/* ===== круг 3: недооформленные блоки двух страниц ===== */

/* легенда графика: точки цвета, перенос по словам, зазор между подписями */
#page-cashflow #cfKey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  color: var(--ink-2);
  font: 400 13px/1.3 var(--sans);
}

#page-cashflow #cfKey .key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
#page-cashflow #cfKey .key i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
#page-cashflow #cfKey .key i.dash { background: transparent; border: 1.5px dashed var(--ink-3); }

/* итог месяца: крупный итог и строки «название слева, сумма справа» */
#page-cashflow .cf-nums { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
#page-cashflow .cf-result { display: grid; gap: 2px; }
#page-cashflow .cf-result .l { color: var(--ink-2); font: 500 13px/1.3 var(--sans); }
#page-cashflow .cf-result .v { font: 600 32px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
#page-cashflow .cf-result .v.pos { color: var(--positive); }
#page-cashflow .cf-result .v.neg { color: var(--danger); }
#page-cashflow .cf-result .s { color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
#page-cashflow .cf-sel { color: var(--ink-2); font: 400 13px/1.3 var(--sans); }
#page-cashflow .cf-sel .muted { color: var(--ink-3); }
#page-cashflow .cf-metrics { display: flex; flex-direction: column; gap: 8px; }

#page-cashflow .cf-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
}

#page-cashflow .cf-metrics .l { color: var(--ink); font: 500 14px/1.3 var(--sans); }
#page-cashflow .cf-metrics .v { text-align: right; font: 600 16px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
#page-cashflow .cf-metrics .v.pos { color: var(--positive); }
#page-cashflow .cf-metrics .v.muted { color: var(--ink-2); }
#page-cashflow .cf-metrics .s { grid-column: 1 / -1; color: var(--ink-2); font: 400 12px/1.4 var(--sans); }

/* цель сбережений: быстрый выбор — капсулы */
#cfGoalCard .goal-body { display: grid; gap: 12px; }
#cfGoalCard .goal-body p { margin: 0; color: var(--ink-2); font: 400 14px/1.45 var(--sans); }
#cfGoalCard .goal-chips { display: flex; flex-wrap: wrap; gap: 8px; }

#cfGoalCard .goal-chips .chip {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

/* ежемесячный доход: значок, две строки текста, действия под ними */
#incomeTemplates .it-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  padding: 8px 0;
}

#incomeTemplates .it-row .op-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#incomeTemplates .it-row .op-m b { font: 500 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
#incomeTemplates .it-row .op-m span { color: var(--ink-2); font: 400 13px/1.3 var(--sans); }
#incomeTemplates .it-row .op-m b .r29-quiet-pill { margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--well); font: 400 12px/1.3 var(--sans); }
#incomeTemplates .it-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

#incomeTemplates .it-act .btn-ghost {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

#incomeTemplates .it-note { margin: 4px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }

/* общие операции семьи: строка как в «Тратах» — значок 40, название и подпись, сумма справа */
#page-family .family-op {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

#page-family .family-op > :is(.hg-service, .ava, .ava-sky) {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--well);
  color: var(--ink);
  font: 500 14px/1 var(--sans);
  font-style: normal;
}

#page-family .family-op > :is(.hg-service, .ava) svg { width: 22px; height: 22px; }
#page-family .family-op > .hg-service[data-service-logo] { border-radius: 12px; }
#page-family .family-op > div { min-width: 0; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
#page-family .family-op .family-name { display: block; font: 500 14px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
#page-family .family-op .family-owner { display: inline; margin-inline-end: 4px; }
#page-family .family-op .family-owner::after { content: " ·"; }
#page-family .family-op .family-meta { display: inline; }
#page-family .family-op .family-meta > * { display: inline; }
#page-family .family-op .family-meta time { margin-inline-start: 4px; }

#page-family .family-op .family-amt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font: 500 14px/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

#page-family .family-op .family-amt :is(small, .pend, .op-pend) { color: var(--ink-2); font: 400 12px/1.3 var(--sans); }
#page-family .family-op .family-amt svg { width: 12px; height: 12px; vertical-align: -1px; margin-inline-end: 4px; }
#page-family #famShared > .more, #page-family .s4-shared > .more { margin-top: 8px; }
#page-family .family-note { margin: 0 0 8px; color: var(--ink-2); font: 400 13px/1.4 var(--sans); }

/* участники: аватар 40, имя, подписи, действия */
:is(#page-family, #page-integrations) .setrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; }
#page-family .mcell { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 220px; }
#page-family .mcell > div { min-width: 0; display: grid; gap: 2px; }
#page-family .mcell .ava { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--well); color: var(--ink); font: 500 14px/1 var(--sans); }
#page-family .member-name { font: 500 15px/1.3 var(--sans); color: var(--ink); }
:is(#page-family, #page-integrations) .setrow .d { color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
:is(#page-family, #page-integrations) .setrow .state { font-weight: 500; }
:is(#page-family, #page-integrations) .setrow .state.ok { color: var(--positive); }
:is(#page-family, #page-integrations) .setrow .state.miss { color: var(--ink-3); }
:is(#page-family, #page-integrations) .setrow .num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

/* цвета точек легенды — те же, что у столбцов графика (inline-токены старой палитры в v9 не заданы) */
#page-cashflow #cfKey .key:nth-child(1) i { background: var(--ok) !important; }
#page-cashflow #cfKey .key:nth-child(2) i { background: var(--text-main) !important; }

/* журнал: строки дохода/перевода/возврата долга (.ifrow) — той же сетки, что пополнения; значки везде 40 */
#page-cashflow .ifrow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 8px 0;
}

#page-cashflow .ifrow .catic { margin: 0; }
#page-cashflow .ifrow .op-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#page-cashflow .ifrow .op-m b { font: 500 14px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
#page-cashflow .ifrow .op-m span { color: var(--ink-2); font: 400 12px/1.4 var(--sans); }
#page-cashflow .ifrow .op-m .sub-t { font-style: normal; }
#page-cashflow .ifrow .op-m .sub-t::before { content: " · "; white-space: pre; }
#page-cashflow .ifrow .op-a { text-align: right; white-space: nowrap; font: 500 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
#page-cashflow .ifrow .op-a.pos { color: var(--positive); }
#page-cashflow .ifrow .op-a.muted { color: var(--ink-2); }
#page-cashflow .acc__mvic { width: 40px; height: 40px; }
#page-cashflow .acc__mv { grid-template-columns: 40px minmax(0, 1fr) auto; }

/* раскрытая карточка пополнения: пары «название — значение» */
#page-cashflow .acc__mvx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0 0 8px; padding: 12px 16px; border-radius: 16px; background: var(--well); font: 400 13px/1.4 var(--sans); }
#page-cashflow .acc__mvx[hidden] { display: none; }
#page-cashflow .acc__mvx dt { color: var(--ink-2); }
#page-cashflow .acc__mvx dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
#page-cashflow .ch .more { white-space: nowrap; min-height: 44px; }

/* месяц уже в капсуле периода */
:is(#page-cashflow, #page-family) .page-head h1 .h-sub { display: none; }

:is(#page-cashflow, #page-family) .page-head > .shell-section-nav { order: 3; }

/* Телефон: действия — одна строка капсул с прокруткой без полосы, а не перенос 2+1 */
@media (max-width: 599.98px) {
  :is(#page-cashflow, #page-family, #page-rules, #page-integrations) .page-actions {
    flex-wrap: wrap;
  }

  :is(#page-cashflow, #page-family) .page-actions > * { flex: 1 1 auto; white-space: nowrap; }
}

/* Компьютер: мозаика в 12 колонок, как «Обзор» и «Анализ» (desktop.css, desk-analytics.css) */
@media (min-width: 1024px) {
  :is(#page-cashflow, #page-family) .page-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    grid-auto-flow: row dense;
  }

  /* «+ Трата» в верхней панели компьютера: здесь её нет, как на остальных экранах */
  body:has(:is(#page-cashflow, #page-family).active) .shell-expense { display: none; }

  :is(#page-cashflow, #page-family) .page-inner > * { min-width: 0; margin: 0; }
  :is(#page-cashflow, #page-family) .page-inner > :is(.g2, .b-split) { display: contents; }
  :is(#page-cashflow, #page-family) .g2 > .card,
  #page-family .b-split > .card { margin: 0; }
  #page-cashflow #cfPeriodNote { grid-column: 1 / -1; }

  :is(#page-cashflow, #page-family) .page-head > .shell-section-nav { order: 2; flex: 0 1 auto; width: auto; max-width: 100%; }
  :is(#page-cashflow, #page-family) .page-head > .shell-section-nav a { flex: 0 1 auto; padding: 8px 20px; white-space: nowrap; }

  /* «Движение денег»: график 8 колонок, справа цель, «Пришло» и ежемесячный доход; ниже «Ушло» и журнал по 6 */
  #page-cashflow .page-inner > .card:has(#cfNums) { grid-column: 1 / span 8; grid-row: span 3; }
  #page-cashflow #cfGoalCard,
  #page-cashflow .g2 > .card:has(#cfIn),
  #page-cashflow #incomeTemplates { grid-column: 9 / span 4; }
  #page-cashflow .g2 > .card:has(#cfOut) { grid-column: 1 / span 6; }
  #page-cashflow .page-inner > .card:has(#cfList) { grid-column: 7 / span 6; }
  #page-cashflow :is(#cfOut, #cfList) { max-height: 280px; overflow-y: auto; }

  /* «Семья»: общие операции 8 колонок, справа долги и участники */
  #page-family #familySharedCard { grid-column: 1 / span 8; grid-row: span 2; }
  #page-family .debt-card,
  #page-family #familyMembers { grid-column: 9 / span 4; }

  #page-family .debt-card .ch { flex-wrap: wrap; gap: 12px; }

  /* узкий компьютер: правой колонке шире, строки долгов и участников не переносятся */
  @media (max-width: 1279.98px) {
    #page-family #familySharedCard { grid-column: 1 / span 7; }
    #page-family .debt-card,
    #page-family #familyMembers { grid-column: 8 / span 5; }
  }

  /* «Семья» без прокрутки страницы: плотнее строки участников и итог долгов */
  #page-family #debtTotals { margin-block: 8px; }
  #page-family .setrow { padding-block: 8px; }
  #page-family .debt-card-actions .btn-brand { white-space: nowrap; }

  /* строки и поле цели не тянутся на всю карточку */
  #page-cashflow :is(#cfNums .cf-result, #cfNums .cf-metrics, #cfIn, #cfOut, #cfList, #cfGoalCard .goal-body, #incomeTemplates .it-row),
  #page-family #famShared { max-width: 720px; }
}

@media (min-width: 1680px) {
  :is(#page-cashflow, #page-family) .page-inner { gap: 20px; }
}

/* ===== W8 Y4: история долга (раскрытая карточка друга) ===== */
#page-family .debt-timeline { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

#page-family .debt-timeline li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--well);
  color: var(--ink);
  font: 500 14px/1.3 var(--sans);
}

#page-family .debt-timeline time { color: var(--ink-3); font: 400 13px/1.3 var(--sans); }
#page-family .debt-timeline li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
#page-family .debt-timeline li > div > span,
#page-family .debt-timeline li > div > small { flex: 1 0 100%; display: block; min-width: 0; overflow-wrap: anywhere; }
#page-family .debt-timeline small { color: var(--ink-2); font: 400 13px/1.3 var(--sans); }
#page-family .debt-timeline .num { text-align: right; white-space: nowrap; font: 600 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; }

#page-family .debt-timeline .more {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--well-deep);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

/* запись о возврате: время и «Возврат · сумма» с кнопкой отмены под ней */
#page-family .debt-timeline li > span:not(.num) { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* действия раскрытого долга: «Поделиться» — чернильная капсула, как «Добавить долг» */
#page-family .debt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }

#page-family .debt-actions .btn-brand {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

/* Источники: та же строка 40 / имя и подпись / сумма, раскрытие на месте. */
#r32Sources { display: grid; gap: 8px; }
.r32-source-note { margin: 0 0 4px; color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
.r32-source > summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; }
.r32-source > summary::-webkit-details-marker { display: none; }
.r32-source > summary:has(.r32-source-icon) { grid-template-columns: 40px minmax(0, 1fr) auto 20px; }
.r32-source > summary > i { display: none; }
.r32-source > summary::after { content: ""; width: 20px; height: 20px; background: var(--ink-2); -webkit-mask: var(--r32-chevron) center/contain no-repeat; mask: var(--r32-chevron) center/contain no-repeat; transition: rotate var(--mid) var(--ease); }
.r32-source[open] > summary::after { rotate: 180deg; }
.r32-source-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel); font: 500 16px/1 var(--sans); }
.r32-source > summary > span:has(b), .r32-source .op-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r32-source > summary b, .r32-source .op-m b { color: var(--ink); font: 500 14px/1.3 var(--sans); overflow-wrap: anywhere; }
.r32-source > summary small, .r32-source .op-m > span { color: var(--ink-2); font: 400 12px/1.4 var(--sans); overflow-wrap: anywhere; }
.r32-source-amount { color: var(--ink); font: 500 14px/1.3 var(--sans); white-space: nowrap; }
.r32-source > div { min-width: 0; }
.r32-source > div > p { margin: 8px 0; color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
.r32-source .op { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.r32-source :is(.ava, .hg-service) { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 500 14px/1 var(--sans); }
.r32-source :is(.ava, .hg-service) svg { width: 22px; height: 22px; }
.r32-source .op-a { display: grid; white-space: nowrap; gap: 2px; text-align: right; font: 500 14px/1.3 var(--sans); }
.r32-source .op-a small { color: var(--ink-2); font: 400 12px/1.4 var(--sans); }

/* Интеграции: подписи и значения остаются внутри строки своего источника. */
#page-integrations .setrow > div:first-child { min-width: 0; flex: 1 1 180px; }
#page-integrations .setrow .d { margin-top: 2px; }
#page-integrations .entry-picker { display: grid; gap: 6px; margin: 12px 0; font: 400 13px/1.4 var(--sans); }
#page-integrations .entry-picker > span { color: var(--ink-2); }
#page-integrations dl { display: grid; gap: 8px; margin: 12px 0; font: 400 13px/1.4 var(--sans); }
#page-integrations dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#page-integrations dt { color: var(--ink-2); }
#page-integrations dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
#page-integrations .mail-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-start: auto; border-radius: 50%; background: var(--well); color: var(--ink); list-style: none; cursor: pointer; }
#page-integrations .mail-menu > summary::-webkit-details-marker { display: none; }
#page-integrations .mail-menu[open] { flex-basis: 100%; }
#page-integrations .mail-menu > div { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 16px; background: var(--well); }
#page-integrations .mail-menu button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--panel); color: var(--ink); font: 500 13px/1.3 var(--sans); text-align: left; cursor: pointer; }

/* Правила и наборы: действие принадлежит своей строке, тон вместо разделителей. */
#page-rules .more.back { display: inline-flex; align-self: flex-start; width: max-content; gap: 6px; padding: 0 4px; background: transparent; color: var(--ink-2); }
#page-rules .more.back svg { flex: none; width: 20px; height: 20px; }
#page-rules #rlSug :is(button, a) { background: var(--panel); }
#page-rules :is(.rl-hint, .rlset-lead) { color: var(--ink-2); font: 400 13px/1.5 var(--sans); }
#page-rules :is(#rlList, #rlSug, #rlSets) { display: grid; gap: 12px; }
#page-rules :is(.rl, .rl-sug) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--well); }
#page-rules :is(.rl-t, .rl-sug > div) { flex: 1 1 180px; min-width: 0; font: 400 14px/1.5 var(--sans); overflow-wrap: anywhere; }
#page-rules :is(.rl-s, .rl-source, .rl-sug .muted) { color: var(--ink-2); font: 400 12px/1.4 var(--sans); }
#page-rules :is(.rl-grip, .rl-n) { flex: none; color: var(--ink-2); }
#page-rules .rl-grip svg { width: 20px; height: 20px; }
#page-rules .rl-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#page-rules .rl-a .iconbtn { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; }
#page-rules .rl-a .iconbtn svg { width: 18px; height: 18px; }
#page-rules button:disabled { opacity: .45; cursor: default; }
#page-rules .rlset > summary, #page-rules .rlset-more > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; font: 500 14px/1.4 var(--sans); }
#page-rules :is(.rlset, .rlset-more) > summary::-webkit-details-marker { display: none; }
#page-rules :is(.rlset, .rlset-more) > summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-inline-start: auto; background: var(--ink-2); -webkit-mask: var(--r32-chevron) center/contain no-repeat; mask: var(--r32-chevron) center/contain no-repeat; }
#page-rules :is(.rlset, .rlset-more)[open] > summary::after { rotate: 180deg; }
#page-rules .rlset-flag { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--well); font-size: 22px; }
#page-rules .rlset-name { min-width: 0; overflow-wrap: anywhere; }
#page-rules .rlset-body { display: grid; gap: 8px; padding-top: 12px; }
#page-rules .rlset-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border-radius: 16px; background: var(--well); cursor: pointer; }
#page-rules .rlset-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
#page-rules .rlset-row-t { min-width: 0; font: 400 14px/1.5 var(--sans); overflow-wrap: anywhere; }
#page-rules :is(.rl-t, .rlset-row-t, .rl-sug) b { font-weight: 500; }
#page-rules .rlset-row-t svg { width: 18px; height: 18px; margin-inline: 4px; vertical-align: middle; }
#page-rules .rlset-row-n { grid-column: 2; color: var(--ink-2); font: 400 12px/1.4 var(--sans); }
#page-rules .rlset-more { display: grid; gap: 8px; }
#page-rules .rlset-foot { display: flex; justify-content: flex-end; padding-top: 4px; }