/* Every pair uses one shared scale for both bars. */
.compare-screen { --compare-current: #728079; }
.compare-notice { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.compare-notice .icon { flex: none; width: 20px; height: 20px; }
.compare-summary { padding: 20px; }
.compare-eyebrow { margin: 0 0 12px; font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.compare-legend, .compare-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.compare-legend { font-size: .77rem; font-weight: 700; }
.compare-legend > span { display: flex; align-items: center; gap: 6px; }
.compare-legend > span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.compare-current { color: var(--compare-current); }
.compare-new { color: var(--brand-deep); }
.compare-pair { margin-top: 16px; }
.compare-label { font-size: .83rem; font-weight: 650; line-height: 1.35; margin: 0 0 6px; overflow-wrap: anywhere; }
.compare-value { min-width: 0; }
.compare-value strong { display: block; font-size: clamp(1.03rem, 4.8vw, 1.35rem); line-height: 1.3; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.compare-value small { font-size: .72rem; color: var(--ink-2); }
.compare-bars { display: grid; gap: 4px; margin-top: 7px; }
.compare-track { height: 5px; background: var(--track); border-radius: 20px; overflow: hidden; }
.compare-track > span { display: block; height: 100%; background: currentColor; border-radius: inherit; transition: width .25s ease; }
.compare-current.compare-track { color: #a9b1ac; }
.compare-new.compare-track { color: var(--brand); }
.compare-negative { color: var(--red); }
.compare-track .compare-negative-fill { background: var(--red); }
.compare-left { border-top: 1px solid var(--border); padding-top: 16px; }
.compare-difference { margin: 16px 0 0; padding: 11px 12px; border-radius: 12px; background: var(--brand-tint); font-size: .86rem; font-weight: 650; line-height: 1.45; }
.compare-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.compare-quick-actions > .btn { min-width: 0; padding-inline: 9px; font-size: .85rem; }
.compare-section { padding: 0; overflow: hidden; }
.compare-section > summary { font-size: .98rem; font-weight: 700; padding: 18px; cursor: pointer; }
.compare-section[open] > summary { border-bottom: 1px solid var(--border); }
.compare-section-content { padding: 14px 18px 0; }
.compare-category { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.compare-category:last-child { border-bottom: 0; }
.compare-section > .compare-category { margin: 0 18px; }
.compare-section > .compare-legend { margin: 16px 18px 0; }
.compare-section > .btn { margin: 14px 18px; width: calc(100% - 36px); }
.compare-section > .field-hint { padding: 0 18px; }
.compare-row-actions { display: flex; gap: 20px; align-items: center; margin-top: 6px; }
.compare-row-actions .link-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; text-align: left; }
.compare-row-actions .icon { width: 15px; height: 15px; }
.compare-editor { padding: 20px; margin: 16px 0; border: 1px solid var(--brand); border-radius: var(--radius-card); background: var(--surface); }
.compare-editor h2 { font-size: 1.1rem; margin: 0 0 16px; }
.compare-editor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.compare-editor-actions .btn { flex: 1; }
.compare-debt-estimate { padding: 12px; border-radius: 12px; background: var(--brand-tint); line-height: 1.5; font-size: .9rem; }
.compare-debt-options { margin: 14px 0; }
.compare-debt-options summary { cursor: pointer; font-size: .88rem; font-weight: 650; margin-bottom: 14px; }
.compare-refresh { padding: 14px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; background: var(--surface); }
.compare-refresh p, .compare-footer-note { font-size: .8rem; line-height: 1.5; color: var(--ink-2); }
.compare-refresh p { margin: 0 0 10px; }
.compare-footer-note { margin: 16px 4px; }
@media (prefers-reduced-motion: reduce) { .compare-track > span { transition: none; } }

.compare-payoff { margin-top: 12px; font-size: .8rem; line-height: 1.5; }
.compare-payoff > span { display: block; color: var(--ink-2); font-size: .75rem; margin-bottom: 3px; }