/* Multifamily Payment & DSCR Calculator — tokens via clever-design-tokens (BIF theme). */

.clvr-mf-dscr-calc,
.clvr-mf-dscr-calc *,
.clvr-mf-dscr-calc *::before,
.clvr-mf-dscr-calc *::after {
    box-sizing: border-box;
}

.clvr-mf-dscr-calc {
    container-type: inline-size;
    width: 100%;
    margin: var(--clvr-sp-8, 2rem) auto;
    padding: var(--clvr-sp-6, 1.5rem);
    font-family: var(--clvr-font, "Poppins", arial, sans-serif);
    color: var(--clvr-text, #22293b);
    line-height: 1.5;
    background: var(--clvr-bg, #ffffff);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}

/* Author display values must not defeat the [hidden] attribute the JS toggles. */
.clvr-mf-dscr-calc [hidden] {
    display: none !important;
}

/* -- Header -- */
.clvr-mf-dscr-calc .mfd-header {
    text-align: center;
    margin-bottom: var(--clvr-sp-6, 1.5rem);
}
.clvr-mf-dscr-calc .mfd-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-sp-2, 0.5rem);
    margin: 0;
    font-family: var(--clvr-font-heading, "Poppins", arial, sans-serif);
    font-size: 1.625rem;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
}
.clvr-mf-dscr-calc .mfd-heading-icon {
    color: var(--clvr-orange, #DBA450);
    flex-shrink: 0;
}
.clvr-mf-dscr-calc .mfd-intro {
    max-width: 560px;
    margin: var(--clvr-sp-2, 0.5rem) auto 0;
    color: var(--clvr-text-secondary, #4b698b);
    font-size: 0.9375rem;
}

/* -- Grid: inputs | results in wide containers -- */
.clvr-mf-dscr-calc .mfd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--clvr-sp-6, 1.5rem);
}
@container (min-width: 680px) {
    .clvr-mf-dscr-calc .mfd-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--clvr-sp-8, 2rem);
    }
}

.clvr-mf-dscr-calc .mfd-section-title {
    margin: 0 0 var(--clvr-sp-4, 1rem);
    font-size: 0.8125rem;
    font-weight: var(--clvr-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-mf-dscr-calc .mfd-section-title--gap {
    margin-top: var(--clvr-sp-6, 1.5rem);
}

/* ============================================================
   INPUTS
   ============================================================ */
.clvr-mf-dscr-calc .mfd-field {
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-mf-dscr-calc .mfd-field--inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--clvr-sp-3, 0.75rem);
    align-items: end;
}
.clvr-mf-dscr-calc .mfd-inline-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.clvr-mf-dscr-calc .mfd-inline-item .mfd-select,
.clvr-mf-dscr-calc .mfd-inline-item .mfd-input-row {
    margin-top: auto;
}

.clvr-mf-dscr-calc .mfd-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--clvr-weight-semibold, 600);
    color: var(--clvr-text, #22293b);
    margin-bottom: var(--clvr-sp-2, 0.5rem);
}
.clvr-mf-dscr-calc .mfd-label-note {
    display: block;
    font-weight: var(--clvr-weight-normal, 400);
    color: var(--clvr-text-muted, #86a5c6);
    font-size: 0.75rem;
}

.clvr-mf-dscr-calc .mfd-input-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--clvr-border, #bfcbde);
    border-radius: var(--clvr-radius-sm, 4px);
    background: var(--clvr-bg, #ffffff);
    overflow: hidden;
    transition: box-shadow var(--clvr-transition, 200ms ease),
                border-color var(--clvr-transition, 200ms ease);
}
.clvr-mf-dscr-calc .mfd-input-row:hover {
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}
.clvr-mf-dscr-calc .mfd-input-row:focus-within {
    border-color: var(--clvr-orange, #DBA450);
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: -2px;
    box-shadow: none;
}
.clvr-mf-dscr-calc .mfd-input-row--narrow {
    max-width: 160px;
}
.clvr-mf-dscr-calc .mfd-input-prefix,
.clvr-mf-dscr-calc .mfd-input-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--clvr-sp-3, 0.75rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    color: var(--clvr-text-secondary, #4b698b);
    font-weight: var(--clvr-weight-semibold, 600);
    font-size: 0.9375rem;
}
.clvr-mf-dscr-calc .mfd-number {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: var(--clvr-sp-3, 0.75rem);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    color: var(--clvr-text, #22293b);
    background: transparent;
    min-height: 44px;
}
.clvr-mf-dscr-calc .mfd-number:focus { outline: none; }
.clvr-mf-dscr-calc .mfd-number::-webkit-outer-spin-button,
.clvr-mf-dscr-calc .mfd-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clvr-mf-dscr-calc .mfd-number[type=number] { -moz-appearance: textfield; }

.clvr-mf-dscr-calc .mfd-select {
    width: 100%;
    border: 1px solid var(--clvr-border, #bfcbde);
    border-radius: var(--clvr-radius-sm, 4px);
    padding: var(--clvr-sp-3, 0.75rem);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    background: var(--clvr-bg, #ffffff);
    color: var(--clvr-text, #22293b);
    min-height: 44px;
    cursor: pointer;
    transition: box-shadow var(--clvr-transition, 200ms ease),
                border-color var(--clvr-transition, 200ms ease);
}
.clvr-mf-dscr-calc .mfd-select:hover {
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}
.clvr-mf-dscr-calc .mfd-select:focus {
    border-color: var(--clvr-orange, #DBA450);
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: -2px;
    box-shadow: none;
}

/* Sliders — orange fill up to the thumb via --clvr-slider-fill (set by JS). */
.clvr-mf-dscr-calc .mfd-slider {
    --clvr-slider-fill: 50%;
    display: block;
    width: 100%;
    margin-top: var(--clvr-sp-3, 0.75rem);
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(
        to right,
        var(--clvr-orange, #DBA450) 0%,
        var(--clvr-orange, #DBA450) var(--clvr-slider-fill),
        var(--clvr-bg-tint, #F0F5FA) var(--clvr-slider-fill),
        var(--clvr-bg-tint, #F0F5FA) 100%
    );
    border-radius: var(--clvr-radius-pill, 9999px);
    outline: none;
}
.clvr-mf-dscr-calc .mfd-slider::-moz-range-track {
    height: 6px;
    background: var(--clvr-bg-tint, #F0F5FA);
    border-radius: var(--clvr-radius-pill, 9999px);
}
.clvr-mf-dscr-calc .mfd-slider::-moz-range-progress {
    height: 6px;
    background: var(--clvr-orange, #DBA450);
    border-radius: var(--clvr-radius-pill, 9999px);
}
.clvr-mf-dscr-calc .mfd-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clvr-blue, #14244A);
    border: 2px solid var(--clvr-bg, #ffffff);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.25));
    cursor: pointer;
}
.clvr-mf-dscr-calc .mfd-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clvr-blue, #14244A);
    border: 2px solid var(--clvr-bg, #ffffff);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.25));
    cursor: pointer;
}
.clvr-mf-dscr-calc .mfd-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: 2px;
}
.clvr-mf-dscr-calc .mfd-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: 2px;
}

/* ============================================================
   RESULTS
   ============================================================ */
.clvr-mf-dscr-calc .mfd-validation {
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid var(--clvr-warning, #ff9800);
    border-radius: var(--clvr-radius, 8px);
    color: var(--clvr-text, #22293b);
    font-size: 0.9375rem;
    margin-bottom: var(--clvr-sp-4, 1rem);
}

/* Primary DSCR card — white, with the state carried by chip + gauge
   (the big value stays navy so contrast always passes). */
.clvr-mf-dscr-calc .mfd-primary {
    padding: var(--clvr-sp-4, 1rem) var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-bg, #ffffff);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-mf-dscr-calc .mfd-primary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--clvr-sp-3, 0.75rem);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-mf-dscr-calc .mfd-primary-value {
    font-size: 2.5rem;
    font-weight: var(--clvr-weight-bold, 700);
    line-height: 1.1;
    color: var(--clvr-blue, #14244A);
    font-variant-numeric: tabular-nums;
}
.clvr-mf-dscr-calc .mfd-primary-label {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clvr-text-secondary, #4b698b);
    margin-top: var(--clvr-sp-1, 0.25rem);
}

/* Band chip — tinted background + colored border + dark label
   (state color is never the only signal; the label carries it). */
.clvr-mf-dscr-calc .mfd-band {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: var(--clvr-sp-1, 0.25rem) var(--clvr-sp-3, 0.75rem);
    border-radius: var(--clvr-radius-pill, 9999px);
    font-size: 0.8125rem;
    font-weight: var(--clvr-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--clvr-border, #bfcbde);
    color: var(--clvr-text, #22293b);
    background: var(--clvr-bg-subtle, #f5f8fc);
}
.clvr-mf-dscr-calc .mfd-band.is-excellent,
.clvr-mf-dscr-calc .mfd-band.is-strong {
    background: rgba(14, 193, 143, 0.12);
    border-color: var(--clvr-success, #0ec18f);
    color: #0a7a5b;
}
.clvr-mf-dscr-calc .mfd-band.is-marginal {
    background: rgba(255, 152, 0, 0.12);
    border-color: var(--clvr-warning, #ff9800);
}
.clvr-mf-dscr-calc .mfd-band.is-fail {
    background: rgba(244, 67, 54, 0.10);
    border-color: var(--clvr-error, #f44336);
}

/* Gauge — 0 → 2.0× track with the 1.0× minimum and the target tick. */
.clvr-mf-dscr-calc .mfd-gauge-track {
    position: relative;
    height: 10px;
    background: var(--clvr-bg-tint, #F0F5FA);
    border-radius: var(--clvr-radius-pill, 9999px);
    overflow: visible;
}
.clvr-mf-dscr-calc .mfd-gauge-fill {
    height: 100%;
    width: 0;
    border-radius: var(--clvr-radius-pill, 9999px);
    background: var(--clvr-success, #0ec18f);
    transition: width var(--clvr-transition, 200ms ease),
                background var(--clvr-transition, 200ms ease);
}
.clvr-mf-dscr-calc .mfd-gauge-fill.is-marginal { background: var(--clvr-warning, #ff9800); }
.clvr-mf-dscr-calc .mfd-gauge-fill.is-fail { background: var(--clvr-error, #f44336); }
.clvr-mf-dscr-calc .mfd-gauge-tick {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 18px;
    transform: translateX(-50%);
    background: var(--clvr-text-light, #bfcbde);
}
.clvr-mf-dscr-calc .mfd-gauge-tick--target {
    background: var(--clvr-blue, #14244A);
    left: 62.5%;
}
.clvr-mf-dscr-calc .mfd-gauge-scale {
    position: relative;
    height: 1.2rem;
    margin-top: var(--clvr-sp-2, 0.5rem);
    font-size: 0.6875rem;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-mf-dscr-calc .mfd-gauge-scale span {
    position: absolute;
    transform: translateX(-50%);
}
.clvr-mf-dscr-calc .mfd-gauge-scale span:nth-child(1) { left: 0; transform: none; }
.clvr-mf-dscr-calc .mfd-gauge-scale span:nth-child(2) { left: 50%; }
.clvr-mf-dscr-calc .mfd-gauge-scale span:nth-child(3) {
    left: 62.5%;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
}
.clvr-mf-dscr-calc .mfd-gauge-scale span:nth-child(4) { left: auto; right: 0; transform: none; }

/* Stat rows — label left, value right, so any digit count fits. */
.clvr-mf-dscr-calc .mfd-stat-cards {
    display: flex;
    flex-direction: column;
    gap: var(--clvr-sp-2, 0.5rem);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-mf-dscr-calc .mfd-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--clvr-sp-3, 0.75rem);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
}
.clvr-mf-dscr-calc .mfd-stat-name {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-sp-2, 0.5rem);
    min-width: 0;
}
.clvr-mf-dscr-calc .mfd-stat-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-mf-dscr-calc .mfd-stat-svg { width: 1.1em; height: 1.1em; }
.clvr-mf-dscr-calc .mfd-stat-value {
    font-size: 1.25rem;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.clvr-mf-dscr-calc .mfd-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clvr-text-secondary, #4b698b);
}

/* Max-loan card — the "what could I borrow" payoff, navy for emphasis. */
.clvr-mf-dscr-calc .mfd-maxloan {
    padding: var(--clvr-sp-4, 1rem) var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-blue, #14244A);
    color: var(--clvr-text-inverse, #ffffff);
    border-radius: var(--clvr-radius, 8px);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-mf-dscr-calc .mfd-maxloan-head {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-sp-2, 0.5rem);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
/* White icon on navy (accent icons on navy fail contrast — never use them here). */
.clvr-mf-dscr-calc .mfd-maxloan-icon {
    width: 1.2em;
    height: 1.2em;
    color: var(--clvr-text-inverse, #ffffff);
}
.clvr-mf-dscr-calc .mfd-maxloan-value {
    font-size: 2rem;
    font-weight: var(--clvr-weight-bold, 700);
    line-height: 1.2;
    margin-top: var(--clvr-sp-1, 0.25rem);
    color: var(--clvr-text-inverse, #ffffff);
    font-variant-numeric: tabular-nums;
}
.clvr-mf-dscr-calc .mfd-maxloan-note {
    margin: var(--clvr-sp-2, 0.5rem) 0 0;
    padding-top: var(--clvr-sp-2, 0.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.clvr-mf-dscr-calc .mfd-bands-note {
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-sp-2, 0.5rem);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-mf-dscr-calc .mfd-note-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 2px;
}

/* Rate-cost callout — full width below the input/results grid. */
.clvr-mf-dscr-calc .mfd-rate-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-sp-3, 0.75rem);
    margin-top: var(--clvr-sp-6, 1.5rem);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    background: var(--clvr-bg-tint, #F0F5FA);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-left: 3px solid var(--clvr-orange, #DBA450);
    border-radius: var(--clvr-radius, 8px);
    font-size: 0.875rem;
    color: var(--clvr-text-secondary, #4b698b);
}
.clvr-mf-dscr-calc .mfd-rate-callout-text a {
    color: var(--clvr-orange-dark, #C3862A);
    font-weight: var(--clvr-weight-semibold, 600);
}
.clvr-mf-dscr-calc .mfd-rate-callout-text a:hover {
    color: var(--clvr-blue, #14244A);
}
.clvr-mf-dscr-calc .mfd-rate-callout-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 2px;
    color: var(--clvr-orange-dark, #C3862A);
}
.clvr-mf-dscr-calc .mfd-rate-callout-text p { margin: 0 0 var(--clvr-sp-2, 0.5rem); }
.clvr-mf-dscr-calc .mfd-rate-callout-text p:last-child { margin: 0; }

/* ============================================================
   CTA + DISCLAIMER
   ============================================================ */
.clvr-mf-dscr-calc .mfd-cta {
    margin-top: var(--clvr-sp-6, 1.5rem);
    padding: var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    text-align: center;
}
.clvr-mf-dscr-calc .mfd-cta-heading {
    font-size: 1.125rem;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
    margin-bottom: var(--clvr-sp-2, 0.5rem);
}
.clvr-mf-dscr-calc .mfd-cta-text {
    font-size: 0.9375rem;
    color: var(--clvr-text-secondary, #4b698b);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-mf-dscr-calc .mfd-cta-text p { margin: 0 0 var(--clvr-sp-2, 0.5rem); }
.clvr-mf-dscr-calc .mfd-cta-text p:last-child { margin: 0; }

.clvr-mf-dscr-calc a.mfd-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-sp-2, 0.5rem);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-orange, #DBA450);
    border-radius: var(--clvr-btn-radius, 9999px);
    font-weight: var(--clvr-weight-bold, 700);
    font-size: 1rem;
    text-decoration: none;
    min-height: 44px;
    transition: background var(--clvr-transition, 200ms ease);
}
/* Defend the label color against the theme's global link color. */
.clvr-mf-dscr-calc a.mfd-cta-button,
.clvr-mf-dscr-calc a.mfd-cta-button:link,
.clvr-mf-dscr-calc a.mfd-cta-button:visited,
.clvr-mf-dscr-calc a.mfd-cta-button:hover,
.clvr-mf-dscr-calc a.mfd-cta-button:focus,
.clvr-mf-dscr-calc a.mfd-cta-button:active {
    color: var(--clvr-on-accent, #14244A) !important;
}
.clvr-mf-dscr-calc a.mfd-cta-button:hover {
    background: var(--clvr-orange-dark, #C3862A);
}
.clvr-mf-dscr-calc a.mfd-cta-button:focus-visible {
    outline: 2px solid var(--clvr-blue, #14244A);
    outline-offset: 2px;
}
.clvr-mf-dscr-calc .mfd-cta-icon { width: 1em; height: 1em; }

.clvr-mf-dscr-calc .mfd-disclaimer {
    margin: var(--clvr-sp-4, 1rem) 0 0;
    font-size: 0.75rem;
    color: var(--clvr-text-muted, #86a5c6);
    line-height: 1.5;
}

@container (max-width: 420px) {
    .clvr-mf-dscr-calc { padding: var(--clvr-sp-4, 1rem); }
    .clvr-mf-dscr-calc .mfd-primary-value { font-size: 2rem; }
    .clvr-mf-dscr-calc .mfd-field--inline { grid-template-columns: 1fr; }
    .clvr-mf-dscr-calc .mfd-primary-top { flex-wrap: wrap; }
}

/* Narrow containers: smaller heading so the icon stays beside the text. */
@container (max-width: 480px) {
    .clvr-mf-dscr-calc .mfd-heading { font-size: 1.25rem; }
}