/* Удержания: аналитика по чужой книге.
 *
 * ⚠️ ЭКРАН НЕ ДОЛЖЕН ВЫГЛЯДЕТЬ КАК ФИНАНСОВЫЙ ОТЧЁТ. Суммы здесь настоящие
 * (1,7 млн ₽ за пятнадцать месяцев), но в ДДС и ОПиУ они не входят. Поэтому
 * подпись сверху — не украшение, а часть смысла, и она стоит ПЕРЕД цифрами.
 */

.dd-note {
  margin-bottom: var(--s3);
  padding: 10px var(--s3);
  border-left: 3px solid var(--ink-3);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-footnote);
  line-height: var(--lh-body);
}
.dd-warn {
  margin-bottom: var(--s3);
  padding: 10px var(--s3);
  border-radius: var(--r-control);
  background: var(--expense-soft);
  color: var(--ink);
  font-size: var(--t-footnote);
}

/* Четыре плитки: всего · вернули · не вернули · в работе. */
.dd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.dd-card {
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--surface);
}
.dd-card-label { font-size: var(--t-footnote); color: var(--ink-3); }
.dd-card-sum {
  margin-top: 4px;
  font-size: var(--t-title3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dd-card-meta { margin-top: 2px; font-size: var(--t-caption); color: var(--ink-3); }
/* Цветом кодируем «хорошо/плохо», а не «больше/меньше»: вернувшиеся деньги —
 * это хорошо, даже когда их много. */
.dd-card.good .dd-card-sum { color: var(--income); }
.dd-card.bad .dd-card-sum { color: var(--expense); }
.dd-card.warn .dd-card-sum { color: var(--ink-2); }

/* Полоски вместо диаграммы: разрезов три, и каждый читается сверху вниз
 * списком — так видно и порядок, и вес, и точные суммы одновременно. */
.dd-bar { padding: 8px 0; }
.dd-bar + .dd-bar { border-top: .5px solid var(--hairline); }
.dd-bar-head { display: flex; align-items: baseline; gap: var(--s2); }
.dd-bar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-bar-sum { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; }
.dd-track {
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.dd-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.dd-bar-meta { margin-top: 4px; font-size: var(--t-caption); color: var(--ink-3); }

/* Список строк. */
.dd-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 10px var(--s4);
}
.dd-row + .dd-row { border-top: .5px solid var(--hairline); }
.dd-r-title { font-size: var(--t-callout); }
.dd-r-meta {
  margin-top: 2px;
  font-size: var(--t-caption);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-r-right { flex: none; text-align: right; }
.dd-r-sum { font-variant-numeric: tabular-nums; font-weight: 500; }
/* ⚠️ Значок результата объявлен ЗДЕСЬ и с собственным префиксом, а не как
 * общий `.pill`. Каркас (`layout.css`) правит только его владелец: класс с
 * общим именем, заведённый из экрана, разъедется с чужим при первой же
 * параллельной правке. */
.dd-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--t-caption2);
  font-weight: 500;
  white-space: nowrap;
}
.dd-pill.won { background: var(--income-soft); color: var(--income); }
.dd-pill.lost { background: var(--expense-soft); color: var(--expense); }
.dd-pill.pending { background: var(--surface-2); color: var(--ink-3); }

.dd-sync {
  margin-top: var(--s3);
  font-size: var(--t-caption);
  color: var(--ink-3);
  text-align: center;
}