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

.ideal-weight-range {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* The five-estimate comparison. The healthy range row is the answer; the four
   formula rows are context, so the range row is the one that reads first. */
.formula-table {
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.formula-table th[scope="row"] {
    font-weight: 600;
}

.formula-table .formula-row-range {
    background: color-mix(in srgb, var(--calculator-color, #6366f1) 10%, white);
}

.formula-table .formula-row-range th,
.formula-table .formula-row-range td {
    border-bottom-width: 2px;
}

/* Frame size panel - the differentiator, so it gets its own card treatment
   rather than sitting as a footnote under the table. */
.frame-panel {
    border-left: 4px solid var(--calculator-color, #6366f1);
    background: #fff;
}

.frame-panel .frame-badge {
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
}

.height-chart-scroll {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
}

.height-chart-table {
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.height-chart-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}

.height-chart-table tbody td,
.height-chart-table tbody th {
    font-size: .875rem;
}

/* The reader's own height on a child page. Colour alone would not be enough,
   so the row also carries a left rule. */
.height-chart-table tbody tr.height-row-active {
    background: color-mix(in srgb, var(--calculator-color, #6366f1) 14%, white);
    box-shadow: inset 3px 0 0 var(--calculator-color, #6366f1);
    font-weight: 600;
}

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

/* YMYL disclaimer. Deliberately not collapsible and not visually de-emphasised
   into invisibility - it has to stay legible next to the numbers. */
.medical-disclaimer {
    border-left: 4px solid #b02a37;
}

.medical-disclaimer p:last-child {
    margin-bottom: 0;
}

.profile-links {
    columns: 6 6rem;
    column-gap: 1rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.profile-links li {
    break-inside: avoid;
    font-size: .875rem;
    padding: .1rem 0;
}

.profile-links a.active {
    font-weight: 700;
    text-decoration: none;
}

@media print {
    .height-chart-scroll {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    .sticky-mobile-total,
    .page-header .breadcrumb,
    .related-calculators-plain,
    .profile-links,
    .quick-tips {
        display: none !important;
    }

    .medical-disclaimer {
        border: 1px solid #000;
    }
}

@media (max-width: 575.98px) {
    .height-chart-scroll {
        max-height: 420px;
    }

    .height-chart-table tbody td,
    .height-chart-table tbody th,
    .height-chart-table thead th {
        font-size: .8rem;
        padding: .35rem .4rem;
    }

    .profile-links {
        columns: 3 4rem;
    }
}