/* Mortgage calculator (/mortgage-calculator): what is its own. Panels, tiles, fields, buttons, the table, the chart frame
   and the colours come from the app kit (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* The remaining balance has the app's own teal (the line in the chart and the payment tile). */
.mortgage-landing-app {
    --mg-line: #0f766e;
}

.dark .mortgage-landing-app > .filter-landing-controls,
.mortgage-landing-app[data-theme="dark"] > .filter-landing-stage {
    --mg-line: #2dd4bf;
}

/* Key figures: the monthly payment is the wider, accented tile (with linear repayment it also shows the last payment).
   Each strip has the colour of the matching chart series. */
.mortgage-landing-app .ak-stats.mg-summary {
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
}

.mortgage-landing-app .mg-stat-payment { --ak-stat-color: var(--mg-line); }
.mortgage-landing-app .mg-stat-paid { --ak-stat-color: color-mix(in srgb, var(--ak-series-1) 55%, transparent); }
.mortgage-landing-app .mg-stat-interest { --ak-stat-color: color-mix(in srgb, var(--ak-series-2) 50%, transparent); }
.mortgage-landing-app .mg-stat-payoff { --ak-stat-color: var(--ak-accent); }

.mortgage-landing-app .mg-stat-payment .ak-stat-label {
    color: var(--ak-text);
    font-weight: 600;
}

.mortgage-landing-app .mg-stat-sub {
    font-variant-numeric: tabular-nums;
}

.mortgage-landing-app .mg-stat-sub output {
    color: var(--ak-text);
    font-weight: 700;
}

.mortgage-landing-app .mg-swatch-balance { --ak-swatch: var(--mg-line); border-top-width: 3px; }
.mortgage-landing-app .mg-swatch-principal { --ak-swatch: color-mix(in srgb, var(--ak-series-1) 55%, transparent); }
.mortgage-landing-app .mg-swatch-interest { --ak-swatch: color-mix(in srgb, var(--ak-series-2) 50%, transparent); }

.mortgage-landing-app .mg-chart {
    cursor: crosshair;
    touch-action: pan-y;
}

.mortgage-landing-app .mg-chart:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 3px;
}

.mortgage-landing-app .mg-table .mg-strong {
    font-weight: 700;
}

.mortgage-landing-app .mg-table thead th {
    white-space: normal;
    vertical-align: bottom;
}

/* Term: [ 30 ] years [ 0 ] months */
.mortgage-landing-app .mg-term {
    gap: 0.6rem;
}

.mortgage-landing-app .mg-unit {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.mortgage-landing-app .mg-unit span {
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
    white-space: nowrap;
}

/* Narrower stages: the monthly payment gets its own row above the other three figures. */
@container (max-width: 640px) {
    .mortgage-landing-app .ak-stats.mg-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mortgage-landing-app .ak-stats.mg-summary > .mg-stat-payment {
        grid-column: 1 / -1;
    }
}

/* Phones: two tiles a row, the payment and the payoff date across the full width. */
@container (max-width: 460px) {
    .mortgage-landing-app .ak-stats.mg-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mortgage-landing-app .ak-stats.mg-summary > .mg-stat-payoff {
        grid-column: 1 / -1;
    }

    .mortgage-landing-app .ak-panel-head {
        align-items: flex-start;
    }
}