/* polish.css
   Owner: the final visual layer shared by every page. Typography scale,
   surface treatment, form controls, brand mark, and editorial heroes.
   Loaded after responsive.css and before print.css. Colors come from
   tokens.css only. */

/* Typography */
body {
    font-family: var(--font-sans);
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.dashboard-body,
.page-body {
    background:
        radial-gradient(1100px 520px at 50% -180px, var(--page-glow), transparent 72%),
        var(--dash-bg);
}

.noise,
.global-vignette,
.page-body .noise {
    display: none;
}

.dashboard-header h1,
.hero-copy h1,
.page-hero h1,
.page-body .page-hero h1,
.page-panel h2,
.page-body .page-panel h2,
.dashboard-card h2,
.calculator-card .dashboard-card-header h2,
.decision-calculator h2,
.summary-box p {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.dashboard-header h1 {
    max-width: 21ch;
    margin-top: 14px;
    font-size: clamp(2.4rem, 4.1vw, 3.9rem);
    line-height: 1.02;
}

.calculator-hero .hero-copy h1,
.page-body .calculator-hero h1 {
    max-width: 12ch;
    margin-top: 12px;
    font-size: clamp(2.6rem, 5vw, 4.25rem);
    line-height: 1;
}

.page-body .page-hero h1 {
    max-width: 17ch;
    margin-top: 14px;
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    line-height: 1.02;
}

.page-panel h2,
.page-body .page-panel h2 {
    max-width: 24ch;
    font-size: clamp(1.75rem, 3.1vw, 2.3rem);
    line-height: 1.1;
}

.dashboard-card h2,
.calculator-card .dashboard-card-header h2,
.decision-calculator h2 {
    font-size: clamp(1.6rem, 2.3vw, 1.95rem);
    line-height: 1.1;
}

.page-panel h3,
.page-body .page-panel h3,
.dashboard-card h3 {
    font-family: var(--font-sans);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.summary-box p {
    font-size: 1.3rem;
    line-height: 1.4;
}

.section-kicker,
.eyebrow,
.page-body .page-hero .eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

.dashboard-header p,
.hero-copy p,
.page-body .page-hero p {
    color: var(--dash-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.last-updated,
.hero-copy .last-updated,
.dashboard-header .last-updated,
.page-body .page-hero .last-updated {
    margin-top: 12px;
    color: var(--dash-subtle);
    font-size: 0.78rem;
    font-weight: 550;
    letter-spacing: 0.01em;
}

/* Numbers read as figures, not code */
.metric-value,
.result-strip strong,
.result-definition-grid dd,
.trust-metric strong,
.table-shell td,
.input-field,
.range-label-row span {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.metric-value,
.result-strip strong,
.result-definition-grid dd {
    font-weight: 620;
    letter-spacing: -0.025em;
}

.metric-card-primary .metric-value {
    font-weight: 600;
    letter-spacing: -0.04em;
}

.metric-card-primary .metric-card-header > span:first-child {
    color: var(--dash-result-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.12em;
}

.metric-card-primary .trend-positive {
    color: var(--dash-result-accent);
}

/* Brand mark shared by every header */
.dashboard-logo {
    background: var(--brand-mark-image) center / cover no-repeat;
    color: transparent;
    font-size: 0;
    border-radius: 10px;
    box-shadow: var(--dash-shadow);
}

.brand-lockup {
    display: grid;
    grid-template-columns: 36px auto;
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    min-height: 44px;
}

.brand-lockup::before {
    content: "";
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-mark-image) center / cover no-repeat;
    box-shadow: var(--dash-shadow);
}

.brand-lockup .brand-name,
.page-body .brand-name {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.brand-lockup .brand-mark,
.page-body .brand-mark {
    grid-column: 2;
    grid-row: 2;
    color: var(--dash-subtle);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.dashboard-brand strong {
    font-weight: 400;
    font-size: 17px;
}

/* Navigation on content and calculator pages */
.page-body .site-nav {
    border: 1px solid var(--dash-border-light);
    background: var(--nav-surface);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: var(--dash-shadow-raised);
}

.page-body .nav-link {
    color: var(--dash-muted);
    font-size: 0.86rem;
    font-weight: 550;
}

.page-body .nav-link[aria-current="page"] {
    background: var(--dash-primary-soft);
    color: var(--dash-primary-text);
}

.page-body .nav-link:hover,
.page-body .nav-link:focus-visible {
    background: var(--dash-hover);
    color: var(--dash-heading);
    transform: none;
}

/* The homepage notes panel sits in the results column, so it sizes to its content.
   It fades up like the other cards: a slide from the right pushed it past the viewport edge. */
.advisor-panel,
.dashboard-body .advisor-panel {
    top: auto;
    height: auto;
    min-height: 0;
    animation-name: fadeInUp;
}

.advisor-feed {
    overflow: visible;
}

/* Surfaces */
.dashboard-card,
.metric-card,
.decision-calculator,
.plain-result-card,
.calculator-page .page-panel {
    border: 1px solid var(--dash-border-light);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow-raised);
}

.metric-card-primary {
    border-color: var(--dash-result-border);
    background: var(--dash-result-surface);
}

.decision-calculator {
    gap: 20px;
    padding: 24px;
}

.plain-result-card {
    padding: 18px 20px;
    border-left: 3px solid var(--dash-primary);
    border-radius: 4px 14px 14px 4px;
    box-shadow: none;
    font-weight: 550;
}

.result-strip {
    gap: 10px;
}

.result-strip article {
    padding: 16px;
    border: 1px solid var(--dash-border-light);
    border-radius: 14px;
    background: var(--dash-bg);
}

.result-strip article:first-child {
    border-color: var(--dash-result-border);
    background: var(--dash-result-surface);
}

.result-strip article:first-child span {
    color: var(--dash-result-muted);
}

.result-strip article:first-child strong {
    color: var(--dash-result-text);
}

.result-strip span,
.result-definition-grid dt {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.1em;
}

.result-strip strong {
    margin-top: 8px;
    font-size: clamp(20px, 2.2vw, 27px);
}

.result-definition-grid div {
    border: 1px solid var(--dash-border-light);
    border-radius: 12px;
    background: var(--dash-bg);
}

/* Form controls */
.dashboard-form label,
.decision-calculator label {
    color: var(--dash-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.input-field {
    min-height: 48px;
    border: 1px solid var(--dash-border);
    border-radius: 11px;
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow);
    color: var(--dash-heading);
    font-size: 15.5px;
    font-weight: 550;
}

.input-field:hover {
    border-color: var(--input-hover-border);
}

.input-field:focus,
.input-field:focus-visible {
    border-color: var(--dash-primary);
    background: var(--dash-surface);
    box-shadow: 0 0 0 4px var(--interactive-tint-12);
    transform: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--range-track);
}

input[type=range]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 2px solid var(--dash-primary);
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow-raised);
}

input[type=range]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--range-track);
}

input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--dash-primary);
    border-radius: 50%;
    background: var(--dash-surface);
}

.calculator-mode-nav,
.segmented-control,
.currency-group {
    border: 1px solid var(--dash-border-light);
    border-radius: 12px;
    background: var(--dash-hover);
}

.calculator-mode-nav .dashboard-nav-link {
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
}

.calculator-mode-nav .dashboard-nav-link.active-mode,
.currency-btn.active,
.currency-btn.text-white {
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow-raised);
    color: var(--dash-primary-text);
}

.preset-button {
    border: 1px solid var(--dash-border-light);
    border-radius: 14px;
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow);
}

.preset-button:hover,
.preset-button:focus-visible {
    border-color: var(--dash-primary);
    background: var(--dash-surface);
    transform: translateY(-1px);
}

.preset-button strong {
    font-size: 0.88rem;
    font-weight: 620;
}

.advanced-toggle {
    color: var(--dash-primary-text);
    font-weight: 600;
}

/* Buttons */
.button-primary,
.export-button,
.dashboard-body .button-primary,
.page-body .button-primary {
    border: 1px solid var(--dash-primary);
    border-radius: 11px;
    background: var(--dash-primary);
    box-shadow: inset 0 1px 0 var(--button-highlight), var(--dash-shadow-raised);
    color: var(--text-on-primary-soft);
    font-weight: 600;
}

.button-primary:hover,
.button-primary:focus-visible,
.export-button:hover,
.export-button:focus-visible {
    border-color: var(--primary-strong);
    background: var(--primary-strong);
    transform: none;
}

.button-secondary,
.date-selector,
.dashboard-body .button-secondary,
.page-body .button-secondary {
    border: 1px solid var(--dash-border);
    border-radius: 11px;
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow);
    color: var(--dash-heading);
    font-weight: 600;
}

.button-secondary:hover,
.button-secondary:focus-visible {
    border-color: var(--input-hover-border);
    background: var(--dash-hover);
    transform: none;
}

.date-selector {
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--dash-muted);
    font-size: 12.5px;
    cursor: default;
}

.date-selector span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dash-primary-text);
    font-weight: 650;
}

.date-selector span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dash-primary);
    box-shadow: 0 0 0 3px var(--interactive-tint-14);
}

/* Editorial hero for guides, policies, and scenario pages */
.page-body:not(.calculator-page) .page-hero {
    max-width: 900px;
    margin: 56px auto 28px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-body:not(.calculator-page) .page-hero::before,
.page-body:not(.calculator-page) .page-hero::after {
    display: none;
}

.page-body:not(.calculator-page) .page-layout {
    border-color: var(--dash-border-light);
    border-radius: 20px;
    background: var(--dash-surface);
}

.page-body .trust-metric {
    border: 1px solid var(--dash-border-light);
    border-radius: 14px;
    background: var(--dash-surface);
}

/* Scenario pages place panels directly in main, outside .page-layout */
.page-body:not(.calculator-page) main > .page-panel {
    margin-top: 18px;
    border: 1px solid var(--dash-border-light);
    border-bottom: 1px solid var(--dash-border-light);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow-raised);
}

/* Multi-debt input rows (debt avalanche vs snowball calculator) */
.debt-rows {
    display: grid;
    gap: 12px;
}

.debt-row {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--dash-border-light);
    border-radius: 14px;
    background: var(--dash-bg);
}

.debt-row-legend {
    padding: 0 6px;
    color: var(--accent-gold);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.debt-row-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) 44px;
    align-items: end;
    gap: 10px;
}

.debt-row .debt-remove {
    width: 44px;
    min-width: 44px;
    min-height: 48px;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
}

.debt-add {
    min-height: 44px;
}

.debt-row .debt-remove:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cash-rate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.calculator-validation {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--warning-bg);
    color: var(--dash-heading);
    font-size: 0.92rem;
    font-weight: 550;
}

/* FAQ disclosure */
.calculator-page summary,
.page-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    font-weight: 620;
}

.calculator-page summary::-webkit-details-marker,
.page-panel summary::-webkit-details-marker {
    display: none;
}

.calculator-page summary::after,
.page-panel summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--dash-primary-text);
    font-size: 1.2rem;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.calculator-page details[open] > summary::after,
.page-panel details[open] > summary::after {
    transform: rotate(45deg);
}

/* Tables */
.table-shell th {
    color: var(--dash-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Footer */
.page-body .footer-link-pill,
.dashboard-footer-links a {
    color: var(--dash-muted);
    font-weight: 550;
}

.page-body .footer-link-pill:hover,
.page-body .footer-link-pill:focus-visible,
.dashboard-footer-links a:hover,
.dashboard-footer-links a:focus-visible {
    color: var(--dash-primary-text);
}

/* On one-column calculator pages the inputs come right after the heading,
   and the intro paragraphs follow the calculator. */
@media (max-width: 900px) {
    .calculator-page .calculator-hero {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .calculator-page .calculator-hero .hero-copy {
        display: contents;
    }

    .calculator-page .calculator-hero .hero-copy > p:not(.last-updated) {
        order: 2;
    }

    .calculator-page .calculator-hero .decision-calculator {
        order: 1;
        margin: 20px 0 6px;
    }
}

@media (max-width: 720px) {
    .page-body .site-nav {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 6px;
    }

    .page-body .brand-lockup {
        width: 100%;
        justify-content: start;
    }

    .page-body .nav-links {
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        scrollbar-width: none;
        -webkit-mask-image: var(--rail-fade);
        mask-image: var(--rail-fade);
    }

    .page-body .nav-links::-webkit-scrollbar {
        display: none;
    }

    .page-body .nav-links .nav-link:last-child {
        margin-right: 32px;
    }
}

@media (max-width: 640px) {
    .dashboard-header h1 {
        font-size: clamp(2rem, 8.6vw, 2.4rem);
    }

    .dashboard-header p {
        margin-top: 8px;
        font-size: 14.5px;
        line-height: 1.55;
    }

    .calculator-hero .hero-copy h1,
    .page-body .calculator-hero h1,
    .page-body .page-hero h1 {
        font-size: clamp(2.3rem, 10vw, 2.9rem);
    }

    .page-body:not(.calculator-page) .page-hero {
        margin-top: 36px;
    }

    .calculator-mode-nav {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .calculator-mode-nav::-webkit-scrollbar {
        display: none;
    }

    .calculator-mode-nav .dashboard-nav-link {
        flex: 1 0 auto;
        scroll-snap-align: start;
    }

    .result-strip article:first-child {
        grid-column: 1 / -1;
    }

    .debt-row-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cash-rate-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .debt-row-grid > div:first-child {
        grid-column: 1 / -1;
    }

    .debt-row .debt-remove {
        justify-self: end;
    }

    .calculator-card .dashboard-card-header {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .dashboard-actions .date-selector {
        flex: 0 1 auto;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calculator-page summary::after,
    .page-panel summary::after {
        transition: none;
    }
}

/* Highlight the selected compounding row in the APR to APY table */
.table-shell tr[aria-current="true"] td {
    background: var(--dash-primary-soft);
    color: var(--dash-heading);
    font-weight: 650;
}

.calculator-page .table-shell .rate-table {
    min-width: 440px;
}

.calculator-page .rate-table th:first-child,
.calculator-page .rate-table td:first-child {
    width: 34%;
    overflow-wrap: normal;
}

/* Wide tables scroll sideways inside their frame on phones instead of breaking words */
.calculator-page .table-shell table:has(th:nth-child(5)) {
    min-width: 600px;
}

.calculator-page .table-shell table:has(th:nth-child(5)) th,
.calculator-page .table-shell table:has(th:nth-child(5)) td {
    overflow-wrap: normal;
}

.bill-row-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
}

.table-shell tr[data-short="true"] td:last-child {
    color: var(--dash-danger);
    font-weight: 650;
}

@media (max-width: 640px) {
    .bill-row-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 44px;
        grid-template-areas:
            "name name name remove"
            "amount amount due due";
    }

    .bill-row-grid > div:first-child {
        grid-area: name;
    }

    .bill-row-grid > div:nth-child(2) {
        grid-area: amount;
    }

    .bill-row-grid > div:nth-child(3) {
        grid-area: due;
    }

    .bill-row-grid .debt-remove {
        grid-area: remove;
    }
}

@media (max-width: 400px) {
    .bill-row-grid {
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-areas:
            "name remove"
            "amount amount"
            "due due";
    }
}