/* ── Accent: Purple AI theme ──
   Aliases onto the shared violet family in ta.css. --ai is the text role; plain
   #8B5CF6 measures 4.23:1 on white. */
:root { --ai: var(--violet-ink); --ai-lt: var(--violet-lt); }

/* ── Page Header ── */
.tr-page-hdr { padding: var(--ta-hdr-pad) 0; border-bottom: 1px solid var(--bd); margin-bottom: var(--ta-sec-gap); }
.tr-breadcrumb { font-size: 11px; color: var(--tx3); margin-bottom: 5px; }
/* Underlined at rest: violet against the crumb's own --tx3 is 1.23:1, so colour
   alone cannot mark the link inside the sentence (SC 1.4.1). */
.tr-breadcrumb a { color: var(--ai); text-decoration: underline; text-underline-offset: 2px; }
.tr-title { font-size: 26px; font-weight: 900; color: var(--tx); letter-spacing: -.5px; }
.tr-title span { color: var(--ai); }
.tr-subtitle { font-size: 13px; color: var(--tx2); margin-top: 6px; max-width: 640px; line-height: 1.5; }

/* ── Hero Stats — columns and gutters both come from .row .row-cols-* ── */
.tr-stats { margin-bottom: var(--ta-sec-gap); }
.tr-stat { padding: 18px 20px; height: 100%; }
.tr-stat.hero { background: linear-gradient(135deg, var(--ai-lt), transparent); border-color: rgba(139,92,246,.3); }
.tr-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tx3); margin-bottom: 6px; }
.tr-stat-val { font-size: 30px; font-weight: 900; color: var(--tx); letter-spacing: -1px; line-height: 1; }
.tr-stat-val.ai { color: var(--ai); }
.tr-stat-val.up { color: var(--green-ink); }
.tr-stat-val.dn { color: var(--red-ink); }
.tr-stat-sub { font-size: 11px; color: var(--tx3); margin-top: 6px; }

/* ── Cards ── */
.tr-card { overflow: hidden; }
.tr-card-hdr { --bs-card-cap-padding-x: 18px; --bs-card-cap-padding-y: 14px; }
.tr-card-ttl { font-size: 13px; font-weight: 800; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.tr-card-sub { font-size: 10px; color: var(--tx3); }

/* ── Main Layout ── */
.tr-main { margin-bottom: var(--ta-sec-gap); }

/* ── Ledger Table — borders, hover and spacing come from .table ── */
.tr-ledger { --bs-table-cell-padding-x: 14px; --bs-table-cell-padding-y: 12px; margin-bottom: 0; }
.tr-ledger th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tx3); padding-top: 10px; padding-bottom: 10px; }
.tr-ledger td { font-size: 12.5px; color: var(--tx2); }
.tr-ledger > tbody > tr:last-child > td { border-bottom-width: 0; }
.tr-sym { font-size: 13px; font-weight: 800; color: var(--tx); }
.tr-claim { font-size: 12px; color: var(--tx2); line-height: 1.45; max-width: 340px; }
.tr-claim a { color: var(--ai); text-decoration: none; font-size: 11px; }
.tr-claim a:hover { text-decoration: underline; }
.tr-outcome { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.tr-outcome.hit { background: var(--green-lt); color: var(--green-ink); }
.tr-outcome.miss { background: var(--red-lt); color: var(--red-ink); }
.tr-outcome.open { background: var(--ai-lt); color: var(--ai); }
.tr-level { font-weight: 700; color: var(--tx); white-space: nowrap; }
.tr-date { font-size: 11px; color: var(--tx3); white-space: nowrap; }

/* ── Pagination ── */
.tr-pagination { padding: 14px 18px; }

/* ── Reporter Scorecard — rows come from .list-group ── */
.rp-list { --bs-list-group-item-padding-x: 16px; --bs-list-group-item-padding-y: 12px; }
.rp-item { gap: 10px; }
.rp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ai-lt); color: var(--ai); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.rp-info { flex: 1; min-width: 0; }
.rp-name { font-size: 12.5px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-record { font-size: 10px; color: var(--tx3); }
.rp-acc { font-size: 14px; font-weight: 900; white-space: nowrap; }
.rp-acc.good { color: var(--green-ink); }
.rp-acc.mid { color: var(--amber-ink); }
.rp-acc.bad { color: var(--red-ink); }

/* ── Symbol Breakdown — rows come from .list-group ── */
.sb-list { --bs-list-group-item-padding-x: 16px; --bs-list-group-item-padding-y: 10px; }
.sb-item { gap: 10px; }
.sb-sym { width: 70px; font-size: 12px; font-weight: 800; color: var(--tx); flex-shrink: 0; }
.sb-bar { flex: 1; height: 6px; background: var(--red-lt); border-radius: 3px; overflow: hidden; }
.sb-fill { height: 100%; background: var(--green); border-radius: 3px; }
.sb-pct { width: 62px; text-align: right; font-size: 11px; font-weight: 700; color: var(--tx2); flex-shrink: 0; }

/* ── Open Calls — rows come from .list-group ── */
.oc-list { --bs-list-group-item-padding-x: 16px; --bs-list-group-item-padding-y: 12px; }
.oc-top { margin-bottom: 4px; }
.oc-claim { font-size: 11.5px; color: var(--tx2); line-height: 1.45; }

/* ── Methodology note ── */
.tr-note { font-size: 11.5px; color: var(--tx3); line-height: 1.6; padding: 14px 18px; background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r); margin-bottom: var(--ta-sec-gap); }
.tr-note b { color: var(--tx2); }

/* ── Empty state ── */
.tr-empty { padding: 40px 20px; text-align: center; color: var(--tx3); font-size: 13px; }