/* public/css/calculators/house-affordability-calculator.css
   Page-specific styles for the house affordability calculator. Loaded after
   loan-calculator.css, which supplies the shared .input-panel /
   .result-card / .quick-tips-list styling. */

/* --- Debt-to-income gauge ------------------------------------------- */

.dti-gauge {
    height: 14px;
    border-radius: 999px;
    background: var(--bs-secondary-bg, #e9ecef);
    overflow: hidden;
}

.dti-gauge .progress-bar {
    border-radius: 999px;
    /* The bar re-colours as the ratio crosses 36% and 43%, so ease the width
       and the colour together rather than snapping between states. */
    transition: width .35s ease, background-color .35s ease;
}

.dti-gauge-scale small {
    font-size: .72rem;
}

/* --- Affordability range cards -------------------------------------- */

.affordability-range .range-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.affordability-range .range-card:hover {
    transform: translateY(-2px);
}

.affordability-range .range-card .h4 {
    font-variant-numeric: tabular-nums;
}

.affordability-range .range-card-moderate {
    /* The moderate card is the headline answer - lift it out of the row. */
    background: var(--bs-primary-bg-subtle, #f4f4ff);
}

/* --- Payment composition -------------------------------------------- */

.composition-table {
    font-variant-numeric: tabular-nums;
    margin-bottom: 0;
}

.composition-table tbody td,
.composition-table thead th,
.composition-table tfoot th {
    font-size: .875rem;
}

.composition-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}

/* Swatches tie each table row to its slice in the doughnut. */
.comp-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: .5rem;
    vertical-align: baseline;
    background: #adb5bd;
}

.comp-swatch-pi { background: var(--calculator-color, #6366f1); }
.comp-swatch-tax { background: #f59e0b; }
.comp-swatch-ins { background: #0ea5e9; }
.comp-swatch-hoa { background: #8b5cf6; }
.comp-swatch-pmi { background: #dc3545; }

/* --- Rate sensitivity ----------------------------------------------- */

.sensitivity-table {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sensitivity-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}

.sensitivity-table tbody td {
    font-size: .875rem;
}

/* --- Charts ---------------------------------------------------------- */

.chart-box {
    position: relative;
    height: 320px;
}

.chart-box.chart-box-sm {
    height: 260px;
}

/* --- Down payment slider --------------------------------------------- */

#downPaymentRange {
    accent-color: var(--calculator-color, #6366f1);
}

#pmiNote {
    font-size: .78rem;
    text-align: right;
    max-width: 65%;
}

/* --- Deep links ------------------------------------------------------ */

.next-step-card {
    border-left: 4px solid var(--calculator-color, #6366f1) !important;
}

/* The range and the breakdown are the point of the page - keep them on
   paper and drop the interactive chrome. */
@media print {
    .sticky-mobile-total,
    .page-header .breadcrumb,
    #calcTabs,
    .next-step-card,
    .related-calculators-plain,
    .quick-tips,
    #downPaymentRange {
        display: none !important;
    }

    .tab-content > .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

    .affordability-range .range-card {
        break-inside: avoid;
    }
}

@media (max-width: 575.98px) {
    .composition-table tbody td,
    .composition-table thead th,
    .composition-table tfoot th,
    .sensitivity-table tbody td,
    .sensitivity-table thead th {
        font-size: .8rem;
        padding: .35rem .4rem;
    }

    .chart-box.chart-box-sm {
        height: 220px;
    }

    #pmiNote {
        max-width: 60%;
    }
}