/* ============================================================================
 * breakdown.css - tc-breakdown
 * ----------------------------------------------------------------------------
 * SCHICHT 1. Beitrags-Leiste: zerlegt eine Gesamtzahl in positive/negative
 * Beitraege (Balken + Ledger). Z.B. Machtfaktor = + Rating/XP/Wirtschaft ...
 * minus Verletzungen/Gefallene. Macht abstrakte Summen greifbar.
 *
 * THEME-GETRIEBEN. Segment-/Punkt-Farben werden INLINE gesetzt (Daten je
 * Beitrag; Erd-/Gold-Toene = Gewinn, Oxblood = Abzug).
 *
 * Struktur:
 *   .tc-breakdown
 *     .tc-breakdown__head    ( __title . __total )
 *     .tc-breakdown__bar     ( .tc-breakdown__seg * n ; width + background inline )
 *     .tc-breakdown__ledger
 *       .tc-breakdown__row   ( __dot[inline bg] . __name . __val(--pos/--neg) )
 * ============================================================================ */

.tc-breakdown__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.tc-breakdown__title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tc-text-muted); }
.tc-breakdown__total { font-family: var(--tc-font-body, sans-serif); font-weight: 700; font-size: 1.5rem; color: var(--tc-highlight); font-variant-numeric: tabular-nums; line-height: 1; }
.tc-breakdown__bar { display: flex; height: 14px; border-radius: var(--tc-radius-full, 9999px); overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid var(--tc-border-subtle); }
.tc-breakdown__seg { height: 100%; }
.tc-breakdown__ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 5px 16px; margin-top: 12px; }
.tc-breakdown__row { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; }
.tc-breakdown__dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.tc-breakdown__name { flex: 1; min-width: 0; color: var(--tc-text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-breakdown__val { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tc-breakdown__val--pos { color: var(--tc-success, #4ade80); }
.tc-breakdown__val--neg { color: var(--tc-danger, #f87171); }