/* Section: Built for provider transitions (#provider-transitions). Two traces: a hard break versus a continuous history.
   Independent of the other sections. Needs section-base.css. */

.trn__card { padding: var(--s-6); display: grid; gap: var(--s-7); }
.trn__row { display: grid; gap: var(--s-3); }
.trn__label { margin: 0; font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3); }
.trn__trace { border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.02); padding: var(--s-3) var(--s-4); }
.trn__trace svg { display: block; width: 100%; height: auto; }
.trn__line { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trn__break { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-dasharray: 3 4; }
.trn__caps { display: flex; justify-content: space-between; gap: var(--s-3); font: 400 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--t-4); }
.trn__caps .trn__mid { color: var(--t-2); text-align: center; }
.trn__row--ok .trn__mid { color: var(--t-body); }
.trn__note { margin: var(--s-6) auto 0; max-width: 62ch; text-align: center; color: var(--t-2); }
.trn__chip { display: flex; justify-content: center; margin-top: var(--s-5); }
@media (max-width: 719.98px) { .trn__card { padding: var(--s-4); } .trn__caps { font-size: 11px; } }