/* Calcolatori universali - meta-page with sub-tools in tab navigation.
 * Generic patterns (tabs/grid/input/select/actions/field) live in the
 * design system. This file carries: section wrapper, custom result
 * card with success/error variants, percentage mode chip selector,
 * BMI gradient bar visualisation. */

.calc-section { display: flex; flex-direction: column; gap: 1rem; }

/* ===== Result panel (gradient card with success/error variants) ===== */

.calc-result {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #86efac;
    border-radius: 12px;
    padding: 1.2rem;
    margin-top: 1rem;
}

.calc-result.is-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
}

.calc-result-main {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    margin: 0 0 0.5rem 0;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.calc-result-label {
    text-align: center;
    color: var(--c-ink-soft, #334155);
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
}

.calc-result-detail {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.95rem;
}

.calc-result-row strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    color: #0f172a;
}

/* ===== Percentage mode chip selector (sub-tab inside Percentage tab) ===== */

.calc-perc-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}

.calc-perc-mode {
    background: var(--c-bg, #f8fafc);
    border: 1px solid var(--c-line, #e2e8f0);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--c-ink-soft, #334155);
    transition: all 120ms;
}

.calc-perc-mode:hover {
    border-color: var(--c-blue, #0065c0);
    color: var(--c-blue, #0065c0);
}

.calc-perc-mode.is-active {
    background: var(--c-blue, #0065c0);
    color: #fff;
    border-color: var(--c-blue, #0065c0);
    font-weight: 600;
}

/* ===== BMI gradient bar visualisation ===== */

.calc-bmi-bar {
    height: 24px;
    background: linear-gradient(to right, #60a5fa 0%, #4ade80 30%, #fbbf24 50%, #fb923c 70%, #ef4444 90%);
    border-radius: 4px;
    margin: 0.8rem 0 0.4rem;
    position: relative;
    overflow: visible;
}

.calc-bmi-marker {
    position: absolute;
    top: -8px;
    bottom: -8px;
    width: 4px;
    background: #0f172a;
    border-radius: 2px;
    transition: left 200ms;
}

.calc-bmi-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--c-ink-mute, #64748b);
    margin-top: 0.2rem;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.calc-bmi-disclaimer {
    font-size: 0.78rem;
    color: var(--c-ink-mute, #64748b);
    margin-top: 0.6rem;
    font-style: italic;
}

@media print {
    .calc-result { page-break-inside: avoid; }
    .tools-panel { display: block !important; page-break-after: always; }
}

.calc-bmi-value { color: var(--bmi-color, var(--c-ink)); }
.calc-bmi-cat {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--bmi-color, var(--c-ink));
}