/* BMI calculator (/bmi-calculator): only what is the app's own, the BMI scale. Panels, tiles, fields, buttons, the table
   and the colours come from the app kit (css/app-kit, docs/app-kit.md); the category colours are the kit's state tokens
   (info, success, warning, danger). Loaded only on this app's page (StylePaths). */

/* --- The scale: coloured bands from BMI 15 to 45, the marker at the user's BMI, ticks at the category edges ----
       A number line, so it runs left to right on a right-to-left page too. */

.bmi-landing-app .bmi-scale {
    padding: 2.3rem 0 0.4rem;
    direction: ltr;
}

/* The bar and its marker share this box, so the marker's line crosses the bar. */
.bmi-landing-app .bmi-scale-track {
    position: relative;
}

.bmi-landing-app .bmi-scale-bands {
    display: flex;
    height: 1rem;
    overflow: hidden;
    border-radius: var(--ak-radius-pill);
}

.bmi-landing-app .bmi-band {
    flex: 1 1 0;
    min-width: 0;
}

.bmi-landing-app .bmi-band--under { background: color-mix(in srgb, var(--ak-info) 70%, var(--ak-panel)); }
.bmi-landing-app .bmi-band--normal { background: var(--ak-success); }
.bmi-landing-app .bmi-band--over { background: var(--ak-warning); }
.bmi-landing-app .bmi-band--obese1 { background: color-mix(in srgb, var(--ak-danger) 65%, var(--ak-panel)); }
.bmi-landing-app .bmi-band--obese2 { background: color-mix(in srgb, var(--ak-danger) 82%, var(--ak-panel)); }
.bmi-landing-app .bmi-band--obese3 { background: var(--ak-danger); }

/* The marker: the value in the colour of the user's category above the bar (set by the script), a line across it. */
.bmi-landing-app .bmi-scale-marker {
    --bmi-pos: 50%;
    --bmi-color: var(--ak-accent);
    position: absolute;
    top: -2.1rem;
    bottom: -0.35rem;
    left: var(--bmi-pos);
    width: 0;
    transition: left 240ms var(--ak-ease);
}

.bmi-landing-app .bmi-scale-marker::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 0;
    left: -2px;
    width: 4px;
    border-radius: 2px;
    background: var(--ak-text);
    box-shadow: 0 0 0 2px var(--ak-panel);
}

.bmi-landing-app .bmi-scale-value {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 0.05rem 0.45rem;
    border-radius: var(--ak-radius-pill);
    background: var(--bmi-color);
    color: var(--ak-on-accent);
    font-size: var(--ak-fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* The ticks at the category edges (positions from the script). */
.bmi-landing-app .bmi-scale-ticks {
    position: relative;
    height: 1.2rem;
    margin-top: 0.35rem;
    color: var(--ak-muted);
    font-size: var(--ak-fs-xs);
    font-variant-numeric: tabular-nums;
}

.bmi-landing-app .bmi-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
}

.bmi-landing-app .bmi-tick::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    left: 50%;
    width: 1px;
    height: 0.3rem;
    background: var(--ak-border);
}

/* --- Feet and inches side by side ----------------------------------------------------------------------------- */

.bmi-landing-app .bmi-pair > .ak-affix {
    flex: 1 1 0;
    min-width: 0;
}

/* The table's swatches line up with the text. */
.bmi-landing-app .bmi-table .ak-swatch {
    vertical-align: 0.05em;
}

.bmi-landing-app .ak-note .ak-icon {
    color: var(--ak-muted);
}