/* UPDATED CONTAINER LAYOUT */
body.page-id-175 .homepage__nav,
body[class*="returns-calculator"] .homepage__nav,
body.cap-rate-calculator-page .homepage__nav,
body[class*="cap-rate-calculator"] .homepage__nav,
body.cash-on-cash-calculator-page .homepage__nav,
body[class*="cash-on-cash-calculator"] .homepage__nav,
body.buy-vs-rent-calculator-page .homepage__nav,
body.sell-vs-keep-calculator-page .homepage__nav,
body.mortgage-calculator-page .homepage__nav,
body.extra-payments-calculator-page .homepage__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

body.page-id-175 main.site-main,
body[class*="returns-calculator"] main.site-main,
body.buy-vs-rent-calculator-page main.site-main,
body.sell-vs-keep-calculator-page main.site-main,
body.mortgage-calculator-page main.site-main,
body.extra-payments-calculator-page main.site-main {
    padding-top: 72px;
    padding-bottom: 0;
}

.container-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: single column, full width */
    grid-auto-rows: auto;
    max-width: 90% !important;
    margin: 0 auto;
    gap: 16px;
    box-sizing: border-box !important;
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    align-items: start !important;
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .container-wrapper {
        grid-template-columns: 25% 75%; /* Desktop: Form takes 25%, charts take 75% */
        grid-template-rows: auto auto;
        grid-auto-rows: auto;
        grid-auto-flow: row;
        row-gap: 12px;
        column-gap: 32px;
        --calculator-header-height: 72px;
        --calculator-side-gap: 24px;
        --calculator-vertical-gap: 24px;
        overflow: visible;
        align-items: stretch !important;
        grid-template-rows: repeat(9, auto);
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (min-width: 1024px) {
    .min-h-screen.flex.flex-col.font-sans {
        overflow: visible;
        transform: none;
    }
}

/* Reduce gap specifically between Sources & Uses and Bar Chart */
.container-wrapper > #sourcesUsesChart-wrapper + #barChart-wrapper {
    margin-top: 0 !important; /* Match default chart spacing */
}

/* Equity summary card - Full width on mobile, 75% width next to form on desktop */
.container-wrapper > #equity-summary-card-wrapper {
    grid-column: 1;
    width: 100%;
    height: fit-content;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

@media (min-width: 1024px) {
    .container-wrapper > #equity-summary-card-wrapper {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Sources and Uses chart - Full width on mobile, 75% width next to form on desktop */
.container-wrapper > #sourcesUsesChart-wrapper {
    grid-column: 1;
    width: 100%;
    height: fit-content;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .container-wrapper > #sourcesUsesChart-wrapper {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Bar chart - Full width on mobile, 75% width next to form on desktop */
.container-wrapper > #barChart-wrapper {
    grid-column: 1;
    width: 100%;
    height: fit-content;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding-top: 32px;
    position: relative;
}

@media (min-width: 1024px) {
    .container-wrapper > #barChart-wrapper {
        grid-column: 2;
        grid-row: 3;
    }
}

/* All other chart blocks - Full width on mobile, 75% width on desktop */
.container-wrapper > .chart-block,
.container-wrapper > #equity-container,
.container-wrapper > #annual-cashflow-container,
.container-wrapper > #annual-debt-payment-container,
.container-wrapper > #debt-balance-container,
.container-wrapper > #tornado-container,
.container-wrapper > #spreadsheet-container {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: fit-content;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    margin: 0;
}

@media (min-width: 1024px) {
    .container-wrapper > .chart-block,
    .container-wrapper > #equity-container,
    .container-wrapper > #annual-cashflow-container,
    .container-wrapper > #annual-debt-payment-container,
    .container-wrapper > #debt-balance-container,
    .container-wrapper > #tornado-container,
    .container-wrapper > #spreadsheet-container {
        grid-column: 2;
        margin: 0;
    }
}

/* Override overflow for specific containers that need height constraints */
.container-wrapper > #barChart-wrapper,
.container-wrapper > #annual-cashflow-container,
.container-wrapper > #annual-debt-payment-container,
.container-wrapper > #debt-balance-container {
    overflow: hidden;
}

/* Remove white fade on the right side of containers */
.mobile-table-fade-edge,
.table-fade-edge,
#table-container::after,
.chart-block::after {
    display: none;
}

/* Mobile backdrop overlay - Base styles OUTSIDE media query */
.mobile-form-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    touch-action: none;
    /* Ensure backdrop covers everything including header */
    width: 100%;
    height: 100%;
    display: none; /* Hidden by default */
}

.mobile-form-backdrop.active {
    display: block;
    opacity: 1;
}

/* Ensure clean edges on all chart blocks */
.chart-block {
    position: relative;
}

.chart-block::before,
.chart-block::after {
    display: none;
}

/* Remove any gradients that might be causing the fade effect */
.table-wrapper::after,
.mobile-table-scroll::after {
    display: none;
}

/* WordPress columns wrapper - position in grid */
.container-wrapper > .wp-block-columns {
    grid-column: 1;
    width: 100%;
    margin: 0;
    display: block;
    flex-direction: column;
    position: relative;
}

@media (min-width: 1024px) {
    .container-wrapper > .wp-block-columns {
        grid-row: 1 / span -1;
        align-self: stretch;
        min-height: 100%;
        height: auto;
        max-height: none;
        /* Ensure parent container allows sticky positioning */
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1024px) {
    body[class*="returns-calculator"] .container-wrapper > .wp-block-columns {
        grid-column: 1;
        grid-row: 1 / span 9;
        align-self: stretch;
        min-height: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1024px) {
    .container-wrapper > .wp-block-columns > .wp-block-column {
        position: relative;
        height: 100%;
        min-height: 0;
        max-height: none;
        align-self: stretch;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
}

/* WordPress column inside - ensure it doesn't interfere */
.container-wrapper > .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
}

/* FORM CONTAINER - Hidden on mobile (overlay mode), visible on desktop */
.container-wrapper > .wp-block-columns #form-container,
#form-container {
    display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
    .container-wrapper > .wp-block-columns #form-container,
    #form-container {
        display: block;
        width: 100%;
        background-color: #fbfbff;
        border-radius: 0;
        box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
        padding: 14px;
        position: sticky;
        top: calc(var(--calculator-header-height, 72px) + 24px);
        height: calc(100vh - var(--calculator-header-height, 72px) - 24px*2) !important;
        max-height: calc(100vh - var(--calculator-header-height, 72px) - 24px) !important;
        min-height: 0;
        overflow-y: auto;
        box-sizing: border-box;
        align-self: start;
        transition: box-shadow 0.3s ease;
        border: 1px solid #e5e5e5;
        margin-bottom: 0;
        z-index: 2;
    }
}

/* CHART CONTAINER - Main area on the right */
#chart-container {
    width: 75%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;
    margin-left: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    align-items: stretch;
}

/* Ensure all direct children of chart-container stack vertically */
#chart-container > * {
    flex: 0 0 auto;
    float: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    order: 0;
}

/* Force all chart blocks and containers to stack vertically - more specific */
/* EXCLUDE barChart-wrapper and sourcesUsesChart-wrapper from this rule - they use grid positioning */
#chart-container .chart-block,
#chart-container #equity-container,
#chart-container #annual-cashflow-container,
#chart-container #annual-debt-payment-container,
#chart-container #debt-balance-container,
#chart-container #spreadsheet-container {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* INDIVIDUAL CHART BLOCKS - New style for each chart section */
.chart-block {
    display: block;
    float: none;
    clear: both;
    background-color: #fbfbff;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
    padding: 32px;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    border: 1px solid #e5e5e5;
}

.container-wrapper > #spreadsheet-container {
    margin-bottom: 0;
}

body[class*="returns-calculator"] #spreadsheet-container {
    padding-bottom: 0;
}

body[class*="returns-calculator"] .container-wrapper + p,
body[class*="returns-calculator"] p:empty {
    margin: 0;
    padding: 0;
}

.chart-block:hover {
    box-shadow: 0 2px 4px rgba(11, 79, 108, 0.12);
}

#equity-summary-card-wrapper.chart-block:hover {
    box-shadow: none;
}

/* Returns summary card (top block) */
.returns-summary-card {
    position: relative;
}

.returns-summary-card__inner {
    background: #f8f8ff;
    border: 1px solid var(--hy-border, #e5e5e5);
    padding: 32px;
    position: relative;
    z-index: 2;
    box-shadow: var(--hy-shadow, 0 1px 2px rgba(11, 79, 108, 0.08));
}

.returns-summary-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--hy-border, #e5e5e5);
    padding-bottom: 20px;
    margin-bottom: 20px;
    gap: 16px;
}

.returns-summary-card__timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.returns-summary-card__timeline-bar {
    position: relative;
    height: 8px;
    background: #e6e8ee;
    border-radius: 0;
    overflow: hidden;
}

.returns-summary-card__timeline-fill {
    position: absolute;
    inset: 0;
    width: var(--investment-width, 0%);
    background: #00bfff;
    border-radius: 0;
}

.returns-summary-card__timeline-labels {
    position: relative;
    min-height: 18px;
}

.returns-summary-card__timeline-label {
    position: absolute;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.returns-summary-card__timeline-label--investment {
    left: var(--investment-width, 0%);
    transform: translateX(-100%);
    color: #00bfff;
}

.returns-summary-card__timeline-label--mortgage {
    right: 0;
}

.returns-summary-card__title {
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #00356b;
    margin-bottom: 16px;
}

/* Match Returns Summary typography in Sources & Uses */
#sourcesUsesChart-wrapper .subheading {
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #00356b;
    font-weight: 400;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
}

/* Keep Bar Chart header spacing aligned with S&U */
#barChart-wrapper .subheading {
    margin-bottom: 16px;
}

#sourcesUsesChart-wrapper .summary-table td:first-child,
#sourcesUsesChart-wrapper .summary-table td:first-child .oval {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #757575;
}

/* Force Initial Mortgage label to ghost white */
#sourcesUsesChart-wrapper .summary-table td:first-child .oval--initial-mortgage {
    color: var(--ghost-white, #fbfbff);
}

#sourcesUsesChart-wrapper .summary-table td:nth-child(2) {
    font-size: 18px;
    font-weight: 700;
    color: #0b4f6c;
}

#sourcesUsesChart-wrapper.chart-block {
    background-color: #f8f8ff;
    border: 1px solid var(--hy-border, #e5e5e5);
    box-shadow: var(--hy-shadow, 0 1px 2px rgba(11, 79, 108, 0.08));
}

#sourcesUsesChart-wrapper .summary-table {
    background-color: transparent;
}

#sourcesUsesChart-wrapper #table-container,
#sourcesUsesChart-wrapper #charts-container {
    background: #f8f8ff;
}

#sourcesUsesChart-wrapper #sourcesUsesChart {
    background-color: #f8f8ff;
}

/* Remove table outlines in Sources & Uses */
#sourcesUsesChart-wrapper .summary-table {
    border: none;
    box-shadow: none;
}

#sourcesUsesChart-wrapper .summary-table tr,
#sourcesUsesChart-wrapper .summary-table td {
    border-bottom: none;
}

.returns-summary-card__right {
    text-align: right;
}

.returns-summary-card__eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hy-muted-foreground, #757575);
    margin-bottom: 6px;
}

.returns-summary-card__metric {
    font-size: 18px;
    font-weight: 700;
    color: #0b4f6c;
}

#summary-irr {
    color: var(--bright-sky, #01baef);
    font-size: 40px;
    line-height: 1;
}

.returns-summary-card__metric--small {
    font-size: 18px;
    color: #0b4f6c;
}

.returns-summary-card__metric--positive {
    color: #16a34a;
    font-size: 18px;
}

.returns-summary-card__metric--negative {
    color: #dc2626;
    font-size: 18px;
}

.returns-summary-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.returns-summary-card__grid > div {
    background: var(--hy-muted, #f2f4f8);
    border: 1px solid var(--hy-border, #e5e5e5);
    padding: 16px;
}

.returns-summary-card__border,
.returns-summary-card__shadow {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(1, 186, 239, 0.2);
    transform: translate(12px, -12px);
    z-index: 1;
}

.returns-summary-card__shadow {
    border: none;
    background: rgba(1, 186, 239, 0.05);
    transform: translate(-12px, 12px);
    z-index: 0;
}

#equity-summary-card-wrapper .returns-summary-card__border,
#equity-summary-card-wrapper .returns-summary-card__shadow {
    display: none;
}

@media (max-width: 640px) {
    .returns-summary-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .returns-summary-card__right {
        text-align: left;
    }

    .returns-summary-card__metric {
        font-size: 32px;
    }

    #summary-irr {
        font-size: 36px;
    }

    .returns-summary-card__grid {
        grid-template-columns: 1fr;
    }
}

/* Color accents for different chart blocks */
body[class*="returns-calculator"] #sourcesUsesChart-wrapper,
#sourcesUsesChart-wrapper {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin-top: 0;
    padding: 32px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
    background: #f8f8ff;
}

#barChart-wrapper {
    border-top: 2px solid #20bf71;
    height: auto;
    max-height: 580px;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Fix canvas inside barChart-wrapper - force constraints */
#barChart-wrapper canvas#barChart {
    max-height: 480px;
    height: auto;
    display: block;
    margin-bottom: 0;
}

/* Make equity container expand to fit its content */
#equity-container {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-bottom: 20px;
}

/* Ensure the table container expands */
#equity-summary-table-container {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

/* Fix table layout to ensure it displays completely */
#equity-summary-table-container table {
    height: auto;
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}

/* Ensure chart block padding isn't restricting space */
.chart-block#equity-container {
    padding-bottom: 30px;
}

#annual-cashflow-container {
    border-top: 2px solid #7adfbb;
    height: auto;
    max-height: 700px;
    overflow: hidden;
    position: relative;
}

/* Fix canvas inside annual-cashflow-container - force constraints */
#annual-cashflow-container canvas#annualCashFlowChart {
    max-height: 500px;
    height: auto;
    display: block;
}

/* Mobile-specific height increase for annual cash flow chart to show full legend */
@media (max-width: 768px) {
    #annual-cashflow-container {
        max-height: none;
        min-height: 500px;
        padding-bottom: 20px;
    }
    
    #annual-cashflow-container canvas#annualCashFlowChart {
        max-height: none;
        height: 450px !important;
        min-height: 450px;
    }
    
    /* Buy vs Rent calculator - prevent chart legends from being cut off */
    body.buy-vs-rent-calculator-page #networth-comparison-container.chart-block,
    body.buy-vs-rent-calculator-page #expenses-comparison-container.chart-block,
    body.buy-vs-rent-calculator-page #home-equity-container.chart-block {
        overflow: visible;
    }
}

#annual-debt-payment-container {
    border-top: 2px solid #168761;
    height: auto;
    max-height: 700px;
    overflow: hidden;
    position: relative;
}

/* Fix canvas inside annual-debt-payment-container - force constraints */
#annual-debt-payment-container canvas#annualDebtPaymentChart {
    max-height: 500px;
    height: auto;
    display: block;
}

#debt-balance-container {
    border-top: 2px solid #01baef;
    height: auto;
    max-height: 600px;
    overflow: hidden;
    position: relative;
}

/* Fix canvas inside debt-balance-container - force constraints */
#debt-balance-container canvas#debtBalanceChart {
    max-height: 500px;
    height: auto;
    display: block;
}

#spreadsheet-container {
    border-top: 2px solid #20bf71;
    overflow: visible;
}

#spreadsheet-container.chart-block {
    overflow: visible;
    position: relative;
}

/* Sensitivity Tornado Chart */
#tornado-container {
    margin-top: 33px;
}

#tornado-chart-wrapper {
    margin-top: 16px;
    min-height: 400px;
}

.sensitivity-status {
    font-size: 12px;
    color: var(--muted-foreground, #757575);
    margin-bottom: 8px;
    font-style: italic;
}

#sensitivity-loading {
    color: var(--primary, #01baef);
}

/* Spreadsheet export controls */
#spreadsheet-container .spreadsheet-export-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#spreadsheet-container .spreadsheet-export-button {
    padding: 10px 18px;
    background-color: var(--hy-primary, #01baef);
    color: var(--hy-primary-foreground, #fbfbff);
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
}

#spreadsheet-container .spreadsheet-export-button:hover {
    background-color: var(--hy-dark, #0b4f6c);
    box-shadow: 0 2px 4px rgba(11, 79, 108, 0.12);
}

#spreadsheet-container .spreadsheet-export-button:active {
    transform: translateY(0);
}

/* Spreadsheet table styling */
#cashflow-detail-table {
    border: 1px solid var(--hy-border, #e5e5e5);
    background-color: var(--hy-background, #fbfbff);
    color: var(--hy-foreground, #0b4f6c);
    border-radius: 0;
    overflow: visible; /* Changed from hidden to visible to allow sticky positioning */
}

#cashflow-detail-table th {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    border-bottom: 1px solid var(--hy-border, #e5e5e5);
}

#cashflow-detail-table th.spreadsheet-month-header span {
    display: block;
    line-height: 1.2;
    text-align: center;
}

#cashflow-detail-table td {
    color: var(--hy-foreground, #0b4f6c);
}

#cashflow-detail-table td:first-child {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hy-muted-foreground, #757575);
    font-weight: 600;
}

#spreadsheet-container .spreadsheet-table-wrapper {
    overflow: auto;
    position: relative;
    max-height: 500px;
    display: block;
}

#cashflow-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
}

#cashflow-detail-table thead th:first-child {
    left: 0;
    z-index: 30;
}

#cashflow-detail-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
}

#cashflow-detail-table th,
#cashflow-detail-table td {
    background-clip: padding-box;
}

#cashflow-detail-table th:first-child,
#cashflow-detail-table td:first-child {
    box-shadow: 2px 0 0 var(--hy-border, #e5e5e5);
}

/* Ensure proper alignment within blocks */
.chart-content {
    display: block; /* Changed from flex to block for vertical stacking */
    width: 100%;
    box-sizing: border-box;
}

/* KEEP ORIGINAL TABLE & CHART CONTAINERS */
#table-container {
    width: 33%; 
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
    min-height: 350px; /* Set minimum height */
}

#charts-container {
    width: 66%; 
    float: right;
    height: 350px; /* Initial height before dynamic adjustment */
    position: relative;
    box-sizing: border-box;
}

#sourcesUsesChart {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%; /* Prevent overflow */
}

/* Sensitivity Analysis Table and Chart Containers (same layout as S&U) */
#sensitivity-table-container {
    width: 33%; 
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
    min-height: 350px;
}

#tornado-chart-container {
    width: 66%; 
    float: right;
    height: 350px;
    position: relative;
    box-sizing: border-box;
}

#tornadoChart {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%;
}

/* Sensitivity table styling */
#sensitivity-table-container .summary-table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    border: none;
    box-shadow: none;
    table-layout: fixed;
}

#sensitivity-table-container .summary-table th {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--yale-blue, #0b4f6c);
    font-weight: 400;
    padding: 12px 8px;
    text-align: left;
    background: rgba(11, 79, 108, 0.15);
    border: none;
    width: 33.33%;
}

#sensitivity-table-container .summary-table tbody tr {
    background: var(--hy-muted, #f2f4f8);
}

#sensitivity-table-container .summary-table td {
    padding: 12px 8px;
    border: none;
    font-size: 14px;
    color: var(--yale-blue, #0b4f6c);
    width: 33.33%;
    word-wrap: break-word;
}

#sensitivity-table-container .summary-table td:first-child {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--yale-blue, #0b4f6c);
    font-weight: 400;
    white-space: normal;
}

#sensitivity-table-container .summary-table td:nth-child(2),
#sensitivity-table-container .summary-table td:nth-child(3) {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* Tornado container styling (match S&U) */
#tornado-container.chart-block {
    background-color: #f8f8ff;
    border: 1px solid var(--hy-border, #e5e5e5);
    box-shadow: var(--hy-shadow, 0 1px 2px rgba(11, 79, 108, 0.08));
    padding: 32px;
    box-sizing: border-box;
    overflow: hidden;
}

#tornado-container #sensitivity-table-container,
#tornado-container #tornado-chart-container {
    background: #f8f8ff;
}

/* Clearfix for tornado container (ensure floated elements are contained) */
#tornado-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Tornado container heading (match S&U) */
#tornado-container .subheading {
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #00356b;
    font-weight: 400;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 8px;
}

/* Sensitivity status indicator */
#tornado-container .sensitivity-status {
    clear: both;
    margin-bottom: 16px;
}

/* Drop and pulse animation for mobile green button */
@keyframes drop-and-pulse {
    /* Drop from above - start completely off-screen */
    0% {
        transform: translateY(-400px) scale(1);
        opacity: 0;
    }
    /* Start becoming visible as it drops */
    2% {
        opacity: 1;
    }
    /* Land with slight bounce */
    15% {
        transform: translateY(0) scale(1.05);
    }
    /* Settle */
    25% {
        transform: translateY(0) scale(1);
    }
    /* First pulse - up */
    40% {
        transform: translateY(0) scale(1.1);
    }
    /* First pulse - down */
    55% {
        transform: translateY(0) scale(1);
    }
    /* Second pulse - up */
    70% {
        transform: translateY(0) scale(1.1);
    }
    /* Second pulse - down */
    85%, 100% {
        transform: translateY(0) scale(1);
    }
}

/* Mobile-specific styles for Sources & Uses section */
@media (max-width: 768px) {
    /* Breadcrumb top margin on mobile */
    .rank-math-breadcrumbs-wrapper {
        margin-top: 72px !important;
    }
    
    /* Prevent horizontal scrolling on mobile */
    body {
        overflow-x: hidden;
    }
    
    /* Critical fix for entire container on mobile */
    .container-wrapper {
        max-width: 95%;
        width: 95%;
        margin: 0 auto;
        padding: 0;
        gap: 10px;
    }
    
    /* Convert side-by-side layout to stacked */
    #table-container, #charts-container,
    #sensitivity-table-container, #tornado-chart-container {
        width: 100%;
        float: none;
        margin-bottom: 20px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Ensure table cells don't overflow */
    #table-container table td {
        white-space: nowrap;
    }
    
    /* Fix table cells that contain currency values */
    #table-container table td:nth-child(2),
    #table-container .currency-cell {
        text-align: right;
        white-space: nowrap;
    }
    
    /* Create scrollable container for table if needed */
    #table-container,
    #sensitivity-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix sensitivity table cells that contain values */
    #sensitivity-table-container table td:nth-child(2),
    #sensitivity-table-container table td:nth-child(3) {
        text-align: center;
        white-space: nowrap;
    }
    
    /* Make sure chart maintains proper aspect ratio */
    #charts-container,
    #tornado-chart-container {
        height: 300px;
        margin-top: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix source uses chart wrapper on mobile */
    #sourcesUsesChart-wrapper {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 15px;
    }
    
    /* Fix chart content container */
    .chart-content {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix canvas overflow */
    canvas {
        max-width: 100%;
    }
    
    /* Small screens need smaller padding */
    .chart-block {
        padding: 15px;
    }
    
    /* Form container as overlay on mobile */
    #form-container {
        display: none !important; /* Override desktop display */
        width: 90%;
        max-width: 500px;
        min-width: 90%;
        position: fixed;
        top: 7.5vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        height: calc(100vh - 7.5vh);
        max-height: calc(100vh - 7.5vh);
        min-height: calc(100vh - 7.5vh);
        overflow: hidden;
        margin: 0;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 16px 48px rgba(0, 0, 0, 0.15);
        padding: 0;
        box-sizing: border-box;
        flex-direction: column;
        background-color: #fbfbff;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
    }
    
    /* Close bar styling */
    .mobile-form-close-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 24px 0 0;
        background-color: #fbfbff;
        border-bottom: 1px solid #e5e5e5;
        flex-shrink: 0;
        min-height: 56px;
    }
    
    .mobile-form-close {
        background: none;
        border: none;
        color: #757575;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
    }
    
    .mobile-form-close:hover,
    .mobile-form-close:active {
        color: #0b4f6c;
        background-color: #e5e5e5;
    }
    
    .mobile-form-close span {
        display: block;
        line-height: 1;
        font-weight: normal;
    }
    
    /* Show form container when active on mobile */
    #form-container.mobile-visible {
        display: flex !important; /* Override the display: none */
        flex-direction: column;
        height: calc(100vh - 7.5vh);
        max-height: calc(100vh - 7.5vh);
        min-height: calc(100vh - 7.5vh);
        opacity: 1;
        border-radius: 0;
    }
    
    /* Scrollable content wrapper */
    .mobile-form-content-wrapper {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 24px;
        box-sizing: border-box;
        /* Prevent scroll chaining to parent page */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    
    /* Lock body scroll when mobile form is open */
    html.mobile-form-open,
    html.mobile-form-open body {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
        touch-action: none;
    }
    
    /* Mobile backdrop overlay - removed, now at root level */
    
    /* Mobile floating button */
    .mobile-form-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #01baef;
        color: #fbfbff;
        border: none;
        outline: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        z-index: 5;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        padding: 8px;
        transition: none;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Hide button when form is open */
    html.mobile-form-open .mobile-form-toggle,
    html.mobile-form-open #mobile-form-toggle-portal .mobile-form-toggle,
    html.mobile-form-open #mobile-form-toggle-portal,
    #form-container.mobile-form-open ~ .mobile-form-toggle,
    #form-container.mobile-visible ~ .mobile-form-toggle,
    body.mobile-form-open .mobile-form-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Remove outline on focus */
    .mobile-form-toggle:focus {
        outline: none;
        border: none;
    }
    
    /* Show button and trigger animation when charts are ready */
    .mobile-form-toggle.charts-ready {
        display: flex;
        animation: none;
    }
    
    /* Lock button in final position after animation completes */
    .mobile-form-toggle.animation-complete {
        animation: none;
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
        display: flex;
    }
    
    /* Ensure button stays visible once charts-ready class is added */
    .mobile-form-toggle.charts-ready.animation-complete {
        display: flex;
        animation: none;
    }
    
    .mobile-form-toggle:hover,
    .mobile-form-toggle:active,
    .mobile-form-toggle:focus {
        transform: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
        outline: none;
        border: none;
    }
    
    .mobile-form-toggle span {
        display: block;
        line-height: 1.2;
        word-wrap: break-word;
    }

    /* Reduce padding between header, toggle, and first collapsible on mobile */
    .scenario-header {
        margin-bottom: 6px;
    }
    
    /* Share button on mobile */
    .share-scenario-button {
        font-size: 13px;
        padding: 6px 12px;
    }
    
}

/* Hide floating button, backdrop, and close bar on desktop */
@media (min-width: 769px) {
    .mobile-form-toggle,
    .mobile-form-backdrop,
    .mobile-form-close-bar,
    .mobile-form-close {
        display: none;
    }
}

/* KEEP ORIGINAL HEADING STYLES BUT ADJUST FOR NEW LAYOUT */
.subheading {
    color: #00356b;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 16px;
    text-align: left;
    clear: both;
    border-bottom: 0;
    padding-bottom: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Toggle switch styles removed - separate calculator pages now */

/* FORM STYLES */
form {
    margin-bottom: 20px;
    width: 100%;
}

label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #0b4f6c;
    letter-spacing: 0.01em;
}

label:first-child {
    margin-top: 0;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Toggle switch wrapper */
/* Choose Your Scenario Header */
.scenario-header {
    margin-bottom: 24px;
    text-align: center;
}

.scenario-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #0b4f6c;
    letter-spacing: -0.01em;
}

/* Share Scenario Button */
.share-scenario-button {
    margin-top: 16px;
    padding: 12px 24px;
    background-color: #0b4f6c;
    color: #fbfbff;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.share-scenario-button:hover {
    background-color: #01baef;
    box-shadow: 0 2px 4px rgba(11, 79, 108, 0.12);
    transform: translateY(-1px);
}

.share-scenario-button:active {
    background-color: #0b4f6c;
    transform: translateY(0);
}

.share-scenario-button:disabled {
    background-color: #e5e5e5;
    color: #757575;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* Toggle switch removed - separate calculator pages now */

/* Scenario heading above toggle switch */
.scenario-heading {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0b4f6c;
    text-align: center;
}

/* Calculator form base styles */
.calculator-form {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 0 0 0; /* No padding to match spacing with toggle */
    box-sizing: border-box;
}

.calculator-form--active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* Conditional options (hidden by default) */
.conditional-options {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.conditional-options--visible {
    display: block !important;
    opacity: 1;
}

/* Legacy ID selectors for backward compatibility */
#toggle-label {
    display: none;
}

#basic-form,
#advanced-form {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 0 0 0; /* No padding to match spacing with toggle */
    box-sizing: border-box;
}

/* Inactive forms should not affect scrollHeight */
#basic-form:not(.calculator-form--active):not(.active),
#advanced-form:not(.calculator-form--active):not(.active) {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#basic-form.active,
#advanced-form.active,
#basic-form.calculator-form--active,
#advanced-form.calculator-form--active {
    opacity: 1;
    visibility: visible;
    position: relative;
    height: auto;
    min-height: auto;
}

/* Removed conflicting rule that was hiding #advanced-form - the form should be visible when it has calculator-form--active class */

input[type="number"],
input[type="text"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    font-size: 14px;
    color: #0b4f6c;
    font-weight: 400;
    background-color: #fbfbff;
    transition: all 0.2s ease;
    outline: none;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
    border-color: #01baef;
    background-color: #fbfbff;
    box-shadow: 0 0 0 2px rgba(1, 186, 239, 0.1);
    color: #0b4f6c;
}

input[type="number"]:hover,
input[type="text"]:hover,
select:hover,
textarea:hover {
    border-color: #757575;
    background-color: #fbfbff;
}

.input-field--default {
    color: #01baef;
    font-weight: 500;
}

.input-field--user-defined {
    color: #0b4f6c;
    font-weight: 500;
}

input[data-format="currency"]::before {
    content: '$';
    position: absolute;
    left: 10px;
    color: #757575;
}

input[data-format="percent"]::after {
    content: '%';
    position: absolute;
    right: 10px;
    color: #757575;
}

input:focus::before,
input:focus::after {
    color: #0b4f6c;
}

input.user-defined,
.input-field--user-defined {
    color: #0b4f6c;
}

input[type="submit"] {
    background-color: #01baef;
    color: #fbfbff;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
}

input[type="submit"]:hover {
    background-color: #0b4f6c;
    box-shadow: 0 2px 4px rgba(11, 79, 108, 0.12);
    transform: translateY(-1px);
}

input[type="submit"]:active {
    background-color: #0b4f6c;
    transform: translateY(0);
}

input[type="submit"]:disabled {
    background-color: #e5e5e5;
    color: #757575;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* COLLAPSIBLE SECTIONS */
.collapsible {
    margin-bottom: 16px;
    width: 100%;
    display: block;
    border-radius: 0;
    overflow: hidden;
    background-color: transparent;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible:hover {
    background-color: transparent;
}

.collapsible input[type="checkbox"] {
    display: none;
}

.collapsible-header {
    display: flex;
    align-items: center;
    background-color: #fbfbff;
    padding: 14px 18px;
    cursor: pointer;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    font-weight: 600;
    font-size: 18px;
    color: #0b4f6c;
    position: relative;
    transition: all 0.2s ease;
    user-select: none;
}

.collapsible-header:hover {
    background-color: #f5f5f5;
}

.collapsible-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    border: 1px solid #0b4f6c;
    border-radius: 0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    color: #0b4f6c;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    background-color: #fbfbff;
}

.collapsible input[type="checkbox"]:checked + .collapsible-header .collapsible-icon {
    transform: rotate(45deg);
}

.collapsible-content {
    display: block;
    padding: 20px 18px;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-radius: 0;
    background-color: #fbfbff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-top: 0;
}

.collapsible-content--expanded {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.collapsible-content--collapsed {
    display: none;
    opacity: 0;
    transform: translateY(-8px);
}

.collapsible-icon--expanded {
    font-size: 24px;
}

.collapsible-icon--collapsed {
    font-size: 16px;
}

.collapsible input[type="checkbox"]:checked + .collapsible-header .collapsible-icon {
    content: "-";
}

/* Toggle Switch Styles */
.radio-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 0;
    background-color: transparent;
    border: none;
}

/* Hide the actual radio buttons */
.radio-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Override pointer-events for toggle switch groups to make radios clickable */
.radio-group.toggle-switch-group input[type="radio"] {
    pointer-events: auto;
}

/* Toggle switch container for Yes/No options */
.radio-group.toggle-switch-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    width: 56px;
    height: 32px;
}

/* Hide both radio inputs but keep them accessible for label clicks */
.radio-group.toggle-switch-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Hide "No" label visually - don't let it block clicks */
.radio-group.toggle-switch-group input[type="radio"][value="no"] + label {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 32px;
    margin: 0;
    cursor: pointer;
    pointer-events: none !important;
    z-index: 1;
    opacity: 0;
}

/* Style "Yes" label to cover entire toggle area and show toggle visual */
.radio-group.toggle-switch-group input[type="radio"][value="yes"] + label {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 32px;
    margin: 0;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 2;
}

/* Toggle switch track - default off state */
.radio-group.toggle-switch-group input[type="radio"][value="yes"] + label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 32px;
    background-color: #e5e5e5;
    border-radius: 16px;
    transition: background-color 0.3s ease;
}

/* Toggle switch thumb - default off position */
.radio-group.toggle-switch-group input[type="radio"][value="yes"] + label::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateX(0);
}

/* When "Yes" is checked, show toggle in on position */
.radio-group.toggle-switch-group input[type="radio"][value="yes"]:checked + label::before {
    background-color: #01baef;
}

.radio-group.toggle-switch-group input[type="radio"][value="yes"]:checked + label::after {
    transform: translateX(24px);
}

/* Toggle switch hover state */
.radio-group.toggle-switch-group:hover input[type="radio"][value="yes"] + label::before {
    background-color: #d0d0d0;
}

.radio-group.toggle-switch-group:hover input[type="radio"][value="yes"]:checked + label::before {
    background-color: #00a8d4;
}

/* Toggle switch label text */
.radio-group.toggle-switch-group label span {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    color: #0b4f6c;
    white-space: nowrap;
    pointer-events: none;
}

/* Segmented toggle switch for multiple options (e.g., 15/30 years, 5/10/15 years) */
.radio-group.segmented-toggle-group {
    display: inline-flex;
    background-color: #f5f5f5;
    border-radius: 4.5px;
    padding: 2px;
    gap: 2px;
}

.radio-group.segmented-toggle-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.radio-group.segmented-toggle-group label {
    position: relative;
    display: inline-block;
    padding: 4.5px 9px;
    margin: 0;
    font-size: 9.75px;
    font-weight: 500;
    color: #757575;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 37.5px;
    pointer-events: auto;
}

/* Segmented toggle checked state */
.radio-group.segmented-toggle-group input[type="radio"]:checked + label {
    background-color: #01baef;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(1, 186, 239, 0.3);
}

/* Segmented toggle hover state */
.radio-group.segmented-toggle-group label:hover {
    color: #0b4f6c;
    background-color: #e8e8e8;
}

.radio-group.segmented-toggle-group input[type="radio"]:checked + label:hover {
    background-color: #00a8d4;
    color: #ffffff;
}

/* Remove default label styling for toggle switches */
.radio-group.toggle-switch-group label,
.radio-group.segmented-toggle-group label {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* TOOLTIPS */
.tooltip {
    position: fixed;
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 10001;
    opacity: 0.9;
    pointer-events: none;
    white-space: normal;
    max-width: 250px;
    word-wrap: break-word;
    line-height: 1.4;
}

.tooltip--clickable {
    pointer-events: auto;
    padding-right: 28px;
}

.tooltip__close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.tooltip__close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.info-icon {
    color: #757575;
    margin-left: 6px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.info-icon:hover {
    color: #01baef;
}

/* ANIMATIONS */
.fade-in {
    opacity: 1;
    transition: opacity 1.8s ease-in-out;
}

.fade-out {
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    pointer-events: none;
}

/* OVAL STYLING */
.oval {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure Initial Mortgage oval text is ghost white */
.oval--initial-mortgage {
    color: var(--ghost-white, #fbfbff);
}

/* Ensure HEL and Loan Fees oval text is ghost white */
.oval--hel,
.oval--loan-fees {
    color: var(--ghost-white, #fbfbff);
}

.oval:hover {
    transform: scale(1.1);
}

/* SUMMARY TABLE STYLING */
.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    background-color: #fbfbff;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
    border-radius: 0;
    overflow: hidden;
    margin-top: 0; /* Removed extra space above Equity box */
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
}

.summary-table tr {
    border-bottom: 1px solid #e5e5e5;
    transition: background-color 0.2s ease;
}

.summary-table tr:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}

.summary-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e5e5e5;
    color: #757575;
}

/* Remove table lines in Equity Summary at Sale */
#equity-summary-table-container {
    background-color: #fbfbff;
}

#equity-summary-table-container .summary-table {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(11, 79, 108, 0.08);
    background-color: #fbfbff;
    display: table;
    width: 100%;
}

#equity-summary-table-container .summary-table tr,
#equity-summary-table-container .summary-table td {
    border-bottom: none;
}

#equity-summary-table-container .summary-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

#equity-summary-table-container .summary-table .equity-summary-indent td:first-child {
    padding-left: 30px;
}

/* Equity summary boxed rows (match S&U total styling) */
#equity-summary-table-container .summary-table .equity-summary-box td {
    background: var(--hy-muted, #f2f4f8);
    border: none;
}

#equity-summary-table-container .summary-table .equity-summary-box--re-etf td {
    background: rgba(11, 79, 108, 0.15);
    border: none;
}

#equity-summary-table-container .summary-table .equity-summary-box--single td:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#equity-summary-table-container .summary-table .equity-summary-box--single td:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#equity-summary-table-container .summary-table .equity-summary-box--start td:first-child {
    border-top-left-radius: 4px;
}

#equity-summary-table-container .summary-table .equity-summary-box--start td:last-child {
    border-top-right-radius: 4px;
}

#equity-summary-table-container .summary-table .equity-summary-box--end td:first-child {
    border-bottom-left-radius: 4px;
}

#equity-summary-table-container .summary-table .equity-summary-box--end td:last-child {
    border-bottom-right-radius: 4px;
}

#equity-summary-table-container .summary-table .equity-summary-box--start td {
    border-bottom: 0;
}

#equity-summary-table-container .summary-table .equity-summary-box--end td {
    border-top: 0;
}

/* Totals rows styled like summary gray cards (Sources & Uses only) */
#sourcesUsesChart-wrapper .summary-table__total td {
    background: var(--hy-muted, #f2f4f8);
    border: 1px solid var(--hy-border, #e5e5e5);
    color: var(--hy-foreground, #0b4f6c);
    font-weight: 600;
}

#sourcesUsesChart-wrapper .summary-table__total td:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#sourcesUsesChart-wrapper .summary-table__total td:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#sourcesUsesChart-wrapper .summary-table__total:hover td {
    background: var(--hy-muted, #f2f4f8);
}

/* Bold left column */
.summary-table td:first-child {
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #757575;
}

/* Right-align numbers */
.summary-table .currency-cell {
    text-align: right;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap; /* Prevent wrapping of currency values */
    color: #0b4f6c;
}

/* Ensure all numeric cells are nowrap for proper alignment */
.summary-table td:nth-child(2) {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
    color: #0b4f6c;
}

/* Rounded corners for polish */
.summary-table tr:first-child td:first-child {
    border-top-left-radius: 2px;
}

.summary-table tr:first-child td:last-child {
    border-top-right-radius: 2px;
}

.summary-table tr:last-child td:first-child {
    border-bottom-left-radius: 2px;
}

.summary-table tr:last-child td:last-child {
    border-bottom-right-radius: 2px;
}

/* Removed spacing row styling - spacing row no longer exists */

/* Fade-in animation for table appearance */
#equity-container .summary-table {
    animation: fadeInTable 0.6s ease-in-out;
/* 	animation: none !important; */
}

@keyframes fadeInTable {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE BEHAVIOR */
@media (max-width: 992px) {
    .container-wrapper {
        flex-direction: column;
        max-width: 95% !important;
        width: 95% !important;
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 0;
    }
    
    #form-container, #chart-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Exclude mobile - mobile form container has its own styling */
    @media (min-width: 769px) {
        #form-container {
            position: relative;
            max-height: none;
            margin-bottom: 20px;
        }
    }
    
    .chart-block {
        margin-bottom: 20px;
        padding: 15px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    #table-container, #charts-container,
    #sensitivity-table-container, #tornado-chart-container {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 0 15px 0 !important;
    }
    
    #charts-container,
    #tornado-chart-container {
        margin-top: 20px;
        height: auto;
        min-height: 350px;
    }
    
    /* Ensure all chart canvases fit within their containers */
    canvas {
        max-width: 100% !important;
    }
    
    /* Ensure all tables can scroll horizontally if needed */
    #table-container, 
    #sensitivity-table-container,
    #equity-summary-table-container,
    #spreadsheet-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile styles for very small screens */
@media (max-width: 480px) {
    .container-wrapper {
        max-width: 100% !important;
        width: 92% !important; /* Slightly smaller to ensure no overflow */
        margin: 0 auto;
        padding: 0;
    }
    
    .chart-block {
        padding: 10px;
    }
    
    .subheading {
        font-size: 20px !important;
    }
    
    /* Make tables more compact */
    .summary-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Smooth transitions for chart canvas */
#sourcesUsesChart {
    width: 100% !important;
    height: 100% !important;
    transition: opacity 0.3s ease, height 0.3s ease-in-out;
    will-change: opacity, height; /* Hardware acceleration hint */
    max-width: 100%; /* Prevent overflow */
}

/* Smooth transitions for containers */
#charts-container {
    width: 66%; 
    float: right;
    position: relative;
    transition: height 0.3s ease-in-out;
    will-change: height; /* Hardware acceleration hint */
    box-sizing: border-box;
}

/* Ensure table animations are also smooth */
.summary-table {
    width: 100%;
    margin-bottom: 0px;
    height: auto !important;
    transition: opacity 0.3s ease;
    will-change: opacity; /* Hardware acceleration hint */
    box-sizing: border-box;
}

/* Prevent layout shifts during animation */
#sourcesUsesChart-wrapper {
    position: relative;
    overflow: hidden; /* Prevent content from spilling out during transitions */
    box-sizing: border-box !important;
    width: 100%;
    max-width: 100%;
}

/* Ensure chart content container doesn't cause jumps */
#sourcesUsesChart-wrapper .chart-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

/* Proper clear fix that doesn't cause layout issues */
.clear-float {
    clear: both;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content: "";
    display: block;
}


/* Mobile scrollable table wrapper - useful for tables with many columns */
.mobile-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile-specific adjustments for collapsibles */

/* Mobile-specific adjustments */
@media (max-width: 991px) {
  /* Adjust spacing between collapsible sections */
  .collapsible {
    margin-bottom: 10px;
  }
  
  /* Larger header for mobile */
  .collapsible-header {
    font-size: 22px;
    padding: 10px 12px;
    min-height: 40px;
    line-height: 1.3;
    border: 1px solid #e5e5e5;
    border-radius: 0;
  }
  
  /* Smaller icon for mobile */
  .collapsible-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-width: 1px;
    font-size: 14px;
    line-height: 14px;
  }
  
  /* Make sure content doesn't have excessive padding */
  .collapsible-content {
    padding: 8px;
    transition: opacity 0.3s ease-out;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-radius: 0;
    margin-top: 0;
  }
}

/* Mobile Form Height Fix */
/* Tablet size only (769px-991px) - skip mobile where form is fixed */
@media (min-width: 769px) and (max-width: 991px) {
  /* Adjust form container height for tablet size only */
  #form-container {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
    padding: 12px !important;
  }

  /* Make basic form more compact */
  #basic-form {
    padding-bottom: 0 !important;
  }

  /* Make inputs more compact */
  input[type="number"],
  input[type="text"],
  select,
  textarea {
    padding: 8px !important;
    margin: 4px 0 !important;
  }

  /* Make labels more compact */
  label {
    margin-top: 8px !important;
    font-size: 14px !important;
  }

  /* Adjust collapsed content display */
  .collapsible input[type="checkbox"]:not(:checked) + .collapsible-header + .collapsible-content {
    display: none !important;
    height: 0 !important;
  }

  /* Make form adapt to form type - only active form should be relative */
  #basic-form.calculator-form--active,
  #advanced-form.calculator-form--active,
  #basic-form.active,
  #advanced-form.active {
    min-height: unset !important;
    height: auto !important;
    position: relative !important;
  }
  
  /* Inactive form should remain absolutely positioned to not affect layout */
  #basic-form:not(.calculator-form--active):not(.active),
  #advanced-form:not(.calculator-form--active):not(.active) {
    position: absolute !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Reduce vertical space between form elements */
  .radio-group {
    margin: 4px 0 !important;
  }

  /* Only expand height when advanced form is active */
  /* Make sure collapsed form doesn't waste space */
  .collapsible:not(:first-child) {
    margin-top: 10px !important;
  }
}

/* Mobile Font Size Fix */
@media (max-width: 991px) {
  /* Reduce form heading size */
  #form-container h2.subheading {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  
  /* Form inputs and labels */
  #form-container label {
    font-size: 13px !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }
  
  #form-container input[type="text"],
  #form-container input[type="number"],
  #form-container select {
    font-size: 13px !important;
    padding: 6px 8px !important;
    height: auto !important;
    margin: 4px 0 !important;
  }
  
  .radio-group {
    gap: 5px !important;
    margin: 4px 0 !important;
  }
  
  .radio-group label {
    font-size: 12px !important;
    margin-top: 0 !important;
  }
  
  .info-icon {
    font-size: 12px !important;
  }
  
  .slider:before {
    font-size: 12px !important;
  }
}


/* Even smaller for very small devices */
@media (max-width: 480px) {
  .collapsible-header {
    font-size: 15px !important;
    padding: 6px 8px !important;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
  }
  
  .collapsible-icon {
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
  }
  
  #form-container label {
    font-size: 12px !important;
  }
}

@media (max-width: 991px) {
  #equity-summary-table-container * {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile form toggle styles handled by floating button above */