/* ═══════════════════════════════════════════
   rentvsbuy.css  v1.0
   Rent vs Buy Calculator – specific styles
   Extends calc-global.css — cards, sliders, hero, result-grid,
   bar-chart (.bar-item/.bar-track/.bar-fill), and insights are
   all shared from there already.
═══════════════════════════════════════════ */

/* .ded-note is only defined in it.css within the shared system,
   not in calc-global.css — must be declared locally here too
   (same fix applied in cgt.css). */
.ded-note {
    font-size: .68rem;
    color: var(--slate);
    margin-top: 4px;
    margin-bottom: .5rem;
    line-height: 1.4;
    padding: 0 2px;
}

/* Result grid: Upfront Cost + Total Rent side-by-side, EMI+Maintenance full width */
.card .result-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
}
.card .result-grid .result-item.full { grid-column: 1 / -1 !important; }
@media (max-width: 420px) {
    .card .result-grid { grid-template-columns: 1fr !important; }
}

/* Comparison bars — slightly taller than the default EMI summary bars
   for better legibility as a standalone visual (not a supporting aside) */
.bar-item { margin-bottom: 14px; }
.bar-item:last-child { margin-bottom: 0; }
.bar-track { height: 10px; }
.bar-header { font-size: .78rem; font-weight: 600; color: var(--ink); }
.bar-header span:last-child { font-family: var(--font-mono); font-weight: 700; color: var(--navy); }