/* Transparency - page-specific layout only.
 *
 * Loads AFTER styles.css and css/shared.css and only ADDS selectors: every class here is new
 * (.trn-*) or a compound of an existing class with a new one (.dtable td.trn-target,
 * .tiles-mini.trn-tiles), so nothing the home page or another inner page uses can move.
 *
 * Everything else - .phero, .strip, .dtable, .band--sage, .band--forest, .acc, .donut, .chip,
 * .bar, .badges, .notice, .tiles-mini, .empty, .cta - comes from the shared sheets unchanged.
 */

/* ------------------------------------------------------------------ 1. The funds table */
/* Six columns is a lot on a projector, so the money columns are pinned narrow and the two
   reading columns take the slack. Below 700px shared.css stacks the whole thing into cards. */
.trn-funds .dtable { table-layout: fixed; }
.trn-funds thead th:nth-child(1) { width: 19%; }
.trn-funds thead th:nth-child(2) { width: 26%; }
.trn-funds thead th:nth-child(3),
.trn-funds thead th:nth-child(4),
.trn-funds thead th:nth-child(5) { width: 11%; }
.trn-funds thead th:nth-child(6) { width: 22%; }

.trn-fund { display: block; }
.trn-fund__name { display: block; margin-bottom: 7px; overflow-wrap: anywhere; }
.trn-fund .chip { font-size: .68rem; padding: 5px 10px; }
.trn-fund .chip .icon { width: 14px; height: 14px; }

.trn-purpose { color: var(--muted); font-size: .88rem; }
.trn-avail { font-weight: 800; color: var(--forest); }

/* the last column: a bar for a target, a held-back note for the reserve, a chip for neither */
.trn-target .bar { width: 100%; min-width: 0; margin-bottom: 7px; }
.trn-target__note { margin: 0; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.trn-target__note strong { color: var(--forest); }
.trn-target__met { color: var(--leaf-dark); font-weight: 700; }
.trn-target--reserve .chip { margin-bottom: 7px; }
.trn-target--reserve .trn-target__note { color: var(--forest); font-weight: 600; }

/* totals: the same stripe as the header, set off with a heavier rule */
.trn-funds tfoot th, .trn-funds tfoot td { background: var(--sage-2); border-top: 2px solid var(--sage-3); border-bottom: 0; font-weight: 800; color: var(--forest); padding: 14px 16px; }
.trn-funds tfoot th { font-size: .9rem; }

.trn-keys { margin-top: var(--gap); }
.trn-keys .notice { height: 100%; }

@media (max-width: 1023px) {
  .trn-funds .dtable { font-size: .86rem; }
  .trn-funds .dtable th, .trn-funds .dtable td { padding: 12px 12px; }
}

/* stacked cards on a phone: the two long cells read as blocks, not as right-aligned rows,
   and the totals row gets the same card treatment shared.css gives the body rows */
@media (max-width: 699px) {
  .trn-funds .dtable { table-layout: auto; }
  .trn-funds .dtable tbody th { text-align: left; }
  .trn-fund { text-align: left; }
  .dtable td.trn-purpose, .dtable td.trn-target { display: block; text-align: left; }
  .dtable td.trn-purpose::before, .dtable td.trn-target::before { display: block; margin-bottom: 6px; }
  .trn-funds tfoot, .trn-funds tfoot tr, .trn-funds tfoot th, .trn-funds tfoot td { display: block; width: 100%; }
  .trn-funds tfoot tr { border: 1px solid var(--sage-3); border-radius: var(--radius); overflow: hidden; }
  .trn-funds tfoot th, .trn-funds tfoot td { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; text-align: right; padding: 11px 14px; border-top: 0; border-bottom: 1px solid var(--sage-3); }
  .trn-funds tfoot tr > :last-child { border-bottom: 0; }
  .trn-funds tfoot th::before, .trn-funds tfoot td::before { content: attr(data-label); flex: none; font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; }
  .trn-funds tfoot td:not([data-label])::before { content: none; }
  .dtable td.trn-total__blank { display: none; }
}

/* ------------------------------------------------------------------ 2. Where it went */
.trn-spend { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-lg); align-items: start; }
.trn-spend__chart { padding: clamp(20px, 2.6vw, 32px); }
.trn-spend__period { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.trn-spend__key { min-width: 0; }
.trn-spend__key h3 { margin: 0 0 14px; }

.trn-key { margin: 0; display: grid; gap: 0; }
.trn-key__label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; font-weight: 800; color: var(--forest); font-size: .96rem; padding-top: 14px; border-top: 1px solid var(--sage-3); }
.trn-key > dt:first-child { padding-top: 0; border-top: 0; }
.trn-key__figure { font-size: .82rem; font-weight: 700; color: var(--leaf-dark); font-variant-numeric: tabular-nums; }
.trn-key__text { margin: 4px 0 14px; font-size: .88rem; color: var(--muted); }
.trn-key > dd:last-child { margin-bottom: 0; }

@media (max-width: 899px) { .trn-spend { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ 3. Reports */
.trn-reports { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-lg); align-items: start; }
.trn-reports__copy p:last-child { margin-bottom: 0; }
.trn-reports__copy > p:not(.notice) { color: var(--muted); }
.trn-reports__copy > p:first-child { color: var(--ink); font-size: 1.05rem; }
.tiles-mini.trn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.trn-reg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-lg); align-items: center; }
.trn-reg h3 { margin: 0; }
.trn-reg p { margin: 0; }
.trn-reg .badges { margin-top: 4px; }
.trn-reg__note { max-width: 78ch; }

@media (max-width: 899px) {
  .trn-reports, .trn-reg { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .tiles-mini.trn-tiles { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ 4. Policies */
.trn-policy__note { margin-top: clamp(26px, 3vw, 40px); max-width: 108ch; }