/* Donation tiers card - cause, self-reported meter, tier radio cards, link button. */
.dt { display: grid; gap: 12px; }
.dt-org { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--e-accent-fg); overflow-wrap: anywhere; }
.dt-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dt-org .dt-i { fill: currentColor; stroke: none; }
.dt-title { margin: -4px 0 0; font-size: 1.28em; line-height: 1.25; font-weight: 750; letter-spacing: -.015em; overflow-wrap: anywhere; }
.dt-story { margin: -4px 0 0; color: var(--e-ink-2); font-size: .94em; line-height: 1.5; overflow-wrap: anywhere; }

.dt-progress { padding: 11px 13px; border-radius: var(--e-radius-sm); background: var(--e-hero); border: 1px solid color-mix(in srgb, var(--e-accent) 12%, transparent); }
.dt-figs { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-size: .9em; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }
.dt-figs strong { font-size: 1.35em; font-weight: 800; color: var(--e-ink); letter-spacing: -.02em; }
.dt-pct { margin-left: auto; font-weight: 750; color: var(--e-accent-fg); }
.dt-track { height: 10px; margin-top: 8px; border-radius: 999px; background: color-mix(in srgb, var(--e-ink) 10%, var(--e-bg)); overflow: hidden; }
.dt-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--e-accent) 0%, var(--e-accent-2) 100%); }
html.e-custom-accent .dt-fill { background: var(--e-accent); }
.dt-self { margin: 6px 0 0; font-size: .74em; color: var(--e-ink-3); }

.dt-freq { justify-self: start; }
.dt-tiers { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.dt-legend { padding: 0; margin-bottom: 8px; font-size: .84em; font-weight: 650; color: var(--e-ink-2); }
.dt-tier { position: relative; }
.dt-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dt-tl {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--e-line-strong); border-radius: var(--e-radius-sm); background: var(--e-bg);
    transition: border-color .15s var(--e-ease), background-color .15s var(--e-ease);
}
.dt-tl:hover { border-color: color-mix(in srgb, var(--e-accent) 55%, var(--e-line-strong)); }
.dt-radio:focus-visible + .dt-tl { outline: 2px solid var(--e-focus); outline-offset: 2px; }
.dt-radio:checked + .dt-tl { border-color: var(--e-accent); background: var(--e-hero); box-shadow: inset 0 0 0 1px var(--e-accent); }
.dt-amt { flex: none; min-width: 64px; font-size: 1.18em; font-weight: 800; letter-spacing: -.02em; color: var(--e-accent-fg); font-variant-numeric: tabular-nums; }
.dt-tx { display: grid; gap: 1px; min-width: 0; font-size: .88em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.dt-tx strong { color: var(--e-ink); font-weight: 700; }
.dt-other { max-width: 240px; }

.dt-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; font-size: 1em; text-decoration: none; text-align: center; }
.dt-cta .dt-i { width: 17px; height: 17px; }
.dt-where { margin: -4px 0 0; font-size: .78em; color: var(--e-ink-3); text-align: center; overflow-wrap: anywhere; }
.dt-tax { margin: 0; padding-top: 10px; border-top: 1px solid var(--e-line); font-size: .78em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.dt-issues { padding-left: 28px; }

@media (max-width: 360px) {
    .dt-title { font-size: 1.15em; }
    .dt-tl { gap: 9px; padding: 9px 10px; }
    .dt-amt { min-width: 52px; font-size: 1.08em; }
}
html[data-compact="1"] .dt { gap: 9px; }
html[data-compact="1"] .dt-tl { min-height: 44px; padding: 7px 10px; }