/* BMI calculator (bmi_calculator) — скевоморфный стрелочный прибор, перенос со старого сайта
   владельца (tolstometr.ru). Корпус, шкала, фигурки, стрелка, накладка табло и лампа — картинки
   в assets/images/; они стоят в абсолютных координатах сцены 567×727 (координаты — из config.php,
   приходят инлайновыми --x/--y/--w/--h). Сцена целиком масштабируется под ширину: js_originals/bmi.js
   ставит на .bmi transform: scale(k) и высоту обёртки.

   МОБАЙЛ. Прибор — картинка, разбирать его на CSS-примитивы нечего, поэтому мобильной раскладки
   как таковой нет: сцена просто сжимается. Чтобы вместе с ней не сжались органы управления,
   поля/переключатели/кнопка масштабируются ОБРАТНО — коэффициент --bmi-comp считает тот же JS
   (comp ≈ 0.7/k, потолок 1.15), и все их размеры выражены через него. Так после сжатия сцены
   шрифт поля на экране остаётся ~24px при любой ширине. По вертикали места меньше, поэтому
   отступы и padding растут медленнее — через --bmi-vcomp.

   Палитра снята пипеткой с оригинальных PNG (циферблат #ffffdc, дерево #812700/#6f2303,
   табличка кнопки #fff2e3→#ffe0c2 с надписью #351604, подписи полей #dcc281 — как в оригинале).

   Префикс классов .bmi. */

.bmi {
    --bmi-comp: 1;                 /* обратный масштаб органов управления, ставит bmi.js */
    --bmi-vcomp: 1;                /* он же для вертикали — растёт вдвое медленнее (места по высоте меньше) */

    --bmi-dial: #ffffdc;           /* циферблат */
    --bmi-ink: #1c1208;            /* текст по циферблату */
    --bmi-ink-soft: #8a6a3a;       /* подсказка до расчёта */
    --bmi-gold: #dcc281;           /* подписи на дереве */
    --bmi-wood-dark: #4d1600;      /* утопленные элементы на дереве */
    --bmi-plate-top: #fff2e3;      /* табличка кнопки */
    --bmi-plate-bottom: #ffe0c2;
    --bmi-plate-ink: #351604;
    --bmi-plate-edge: #1e1c1b;
    --bmi-field: #ffffdd;          /* поле ввода */
    --bmi-error: #ffd9a8;          /* строка ошибки на дереве */
    --bmi-off-plate: #d9d2c8;      /* неактивная кнопка — нейтральная, не полупрозрачно-цветная */
    --bmi-off-ink: #7c7268;

    --bmi-serif: Georgia, "Times New Roman", Times, serif;

    position: relative;
    width: 100%;
    max-width: 567px;
    /* Обёртка обязана СЖИМАТЬСЯ до ширины колонки. Без этих двух строк она берёт ширину
       своего содержимого (сцена — 567px) и на телефоне не масштабируется вовсе: раньше её
       держал `overflow: hidden` (он обнуляет min-content), а его пришлось снять ради рожи. */
    min-width: 0;
    margin: 0 auto;
    /* overflow НЕ скрываем: из-за корпуса вправо выезжает рожа (см. .bmi__peek).
       Сцена в обёртку вписана точно, а вылет рожи ограничивает сам bmi.js — по месту,
       которое реально есть в окне, поэтому горизонтальной полосы не появляется. */
    /* до первого замера в bmi.js высоту держит пропорция сцены */
    aspect-ratio: 567 / 727;
}

.bmi__scene {
    position: relative;
    width: var(--scene-w);
    height: var(--scene-h);
    transform-origin: 0 0;
    -webkit-user-select: none;
    user-select: none;
}

/* Корпус — картинка, а не фон: только так за него можно спрятать рожу (z-index 0 против 1). */
.bmi__case { position: absolute; left: 0; top: 0; z-index: 1; }

/* Рожа в покое стоит целиком за корпусом. Поворот — вокруг точки, заданной в config.php. */
.bmi__peek {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    z-index: 0;
    transform-origin: var(--ox) var(--oy);
    pointer-events: none;
}

/* Блоки сцены стоят по координатам из config.php. */
.bmi__dial,
.bmi__lamps,
.bmi__verdict,
.bmi__comment,
.bmi__needle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
}

.bmi__dial   { z-index: 2; }
.bmi__needle { z-index: 3; }
.bmi__bezel  { position: absolute; left: 0; top: 0; z-index: 6; }
.bmi__lamps  { z-index: 7; pointer-events: none; }
.bmi__verdict, .bmi__comment { z-index: 8; }
.bmi__form   { z-index: 9; }

/* --- Циферблат: сектор зоны + фигурки --- */

.bmi__sector, .bmi__fig { position: absolute; }

.bmi__sector { display: none; }
.bmi__sector.is-on { display: block; animation: bmi-in .2s ease-out both; }

/* Покой — залитые фигурки. Во время замера все гаснут до контура, а в конце
   загорается цветом только та, в зону которой пришла стрелка. */
.bmi__fig { display: none; }
.bmi__fig.is-brown { display: block; }
.bmi__dial.is-lit .bmi__fig.is-brown { display: none; }
.bmi__dial.is-lit .bmi__fig.is-transparent { display: block; }
.bmi__dial.is-lit .bmi__fig.is-transparent.is-win { display: none; }
.bmi__dial.is-lit .bmi__fig.is-color.is-win { display: block; animation: bmi-nod .5s ease-in-out 2; }

@keyframes bmi-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes bmi-nod { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* --- Стрелка: крутится сам блок, картинка вынесена вверх от точки вращения --- */

.bmi__needle img { display: block; margin-top: -176px; margin-left: 3px; }

/* --- Табло: лампа под стеклом и число индекса --- */

.bmi__lamp {
    position: absolute;
    left: 173px;
    bottom: -94px;
    display: none;
}
.bmi__lamp.is-on { display: block; animation: bmi-in .2s ease-out both; }

.bmi__readout {
    position: absolute;
    left: 178px;
    bottom: -50px;
    display: block;
    width: 130px;
    font-family: var(--bmi-serif);
    font-size: 52px;
    line-height: 1;
    text-align: center;
    color: var(--bmi-ink);
}

/* --- Строки по циферблату --- */

.bmi__verdict {
    font-family: var(--bmi-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--bmi-ink);
}
.bmi__verdict.is-hint { font-weight: 400; font-size: 17px; color: var(--bmi-ink-soft); }

.bmi__comment {
    font-family: var(--bmi-serif);
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    color: var(--bmi-ink);
}

/* --- Панель ввода на деревянной части корпуса --- */

.bmi__form {
    /* Свободная зона дерева — от низа чёрной накладки (479) до нижнего канта корпуса.
       Панель центрируется в ней: иначе она прижималась к низу и над ней зияла пустая доска.
       Низ полосы (52px) взят ЗАМЕРОМ корпуса: дерево кончается на y=707 по центру и на 683
       по бокам, ниже идут кант и тень. При прежних 24px кнопка на телефоне упиралась в кант. */
    position: absolute;
    left: 0;
    right: 0;
    top: 482px;
    bottom: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Ширина панели = натуральная ширина ряда полей в футах/фунтах — 344px, замерено в браузере
   bmi_check.js). Она зафиксирована, чтобы при переходе на сантиметры кнопка и переключатели
   не прыгали вслед за более узким рядом. */
.bmi__panel {
    width: calc(344px * var(--bmi-comp));
    margin: 0 auto;
}

/* Переключатели разведены по краям панели: левый край — над первым полем, правый — над
   последним. Ряды панели так стоят по одной сетке, а не «каждый по своему центру». */
.bmi__switches {
    display: flex;
    justify-content: space-between;
    gap: calc(16px * var(--bmi-comp));
    margin-bottom: calc(7px * var(--bmi-vcomp));
}
.bmi__switch {
    display: inline-flex;
    padding: calc(2px * var(--bmi-vcomp));
    border-radius: calc(6px * var(--bmi-comp));
    background: rgba(0, 0, 0, .28);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.bmi__sw {
    min-width: calc(44px * var(--bmi-comp));
    padding: calc(2px * var(--bmi-vcomp)) calc(10px * var(--bmi-comp));
    border: 0;
    border-radius: calc(4px * var(--bmi-comp));
    background: transparent;
    font-family: var(--bmi-serif);
    font-size: calc(15px * var(--bmi-comp));
    line-height: calc(21px * var(--bmi-comp));
    color: var(--bmi-gold);
    cursor: pointer;
    outline: none;
}
.bmi__sw .bi { font-size: calc(16px * var(--bmi-comp)); }
.bmi__sw.is-on {
    background: linear-gradient(var(--bmi-plate-top), var(--bmi-plate-bottom));
    color: var(--bmi-plate-ink);
}

.bmi__fields {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: calc(30px * var(--bmi-comp));
}
/* Ряд полей занимает всю панель: в футах он ровно по её краям, в сантиметрах — по центру. */
.bmi__fields { width: 100%; }
.bmi__field { display: flex; flex-direction: column; align-items: center; }

.bmi__label {
    /* Подпись центрируется над САМИМИ полями: единица («ft», «lb») теперь стоит ВНУТРИ поля,
       а не хвостом за ним, и больше не тянет подпись вбок. Раньше центр подписи уезжал
       на 7–12px вправо — владелец увидел это первым же взглядом. */
    margin-bottom: calc(6px * var(--bmi-vcomp));
    font-family: var(--bmi-serif);
    font-size: calc(17px * var(--bmi-comp));
    font-weight: 700;
    line-height: 1.35;
    color: var(--bmi-gold);
}
.bmi__inputs { display: inline-flex; gap: calc(10px * var(--bmi-comp)); }

/* Поле = кремовая табличка, внутри неё число и его единица. */
.bmi__box {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: calc(88px * var(--bmi-comp));
    padding: calc(2px * var(--bmi-vcomp)) calc(8px * var(--bmi-comp));
    border: 1px solid var(--bmi-wood-dark);
    border-top-left-radius: calc(13px * var(--bmi-comp));
    border-bottom-right-radius: calc(13px * var(--bmi-comp));
    background: var(--bmi-field);
}
.bmi__box.is-wide { width: calc(128px * var(--bmi-comp)); }
.bmi__box.is-bad { border-color: #b03a1c; animation: bmi-shake .34s ease-in-out; }

.bmi__unit {
    padding-left: calc(5px * var(--bmi-comp));
    font-family: var(--bmi-serif);
    font-size: calc(15px * var(--bmi-comp));
    font-weight: 700;
    color: var(--bmi-ink-soft);
}

.bmi__in {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--bmi-serif);
    font-size: calc(36px * var(--bmi-comp));
    line-height: 1.2;
    text-align: right;
    color: var(--bmi-ink);
    outline: none;               /* браузерное обрамление поля на сайте выключено глобально */
    -moz-appearance: textfield;
}

@keyframes bmi-shake {
    0%, 100% { transform: translateX(0) }
    25% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
}

.bmi__go {
    display: block;
    /* Кнопка НЕ во всю панель: сплошная светлая полоса во всю ширину читалась как плашка,
       а не как кнопка. Кегль оставлен прежним по просьбе владельца — уменьшены ширина
       и вертикальные поля. */
    width: calc(240px * var(--bmi-comp));
    margin-top: calc(8px * var(--bmi-vcomp));
    margin-inline: auto;
    padding: calc(4px * var(--bmi-vcomp)) calc(20px * var(--bmi-comp));
    border: 2px solid var(--bmi-plate-edge);
    border-radius: calc(3px * var(--bmi-comp));
    background: linear-gradient(var(--bmi-plate-top), var(--bmi-plate-bottom));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
    font-family: var(--bmi-serif);
    font-size: calc(30px * var(--bmi-comp));
    font-weight: 700;
    line-height: 1.25;
    color: var(--bmi-plate-ink);
    cursor: pointer;
    outline: none;
}
.bmi__go:active { transform: translate(1px, 2px); }
/* Нечего пересчитывать — кнопка гаснет НЕЙТРАЛЬНО (правило `[форма]`), а не полупрозрачным цветом. */
.bmi__go:disabled {
    background: var(--bmi-off-plate);
    border-color: #6f6a63;
    box-shadow: none;
    color: var(--bmi-off-ink);
    cursor: default;
    transform: none;
}

/* Строка ошибки стоит ПОД панелью и вне потока: место под неё резервировать не нужно
   (интерфейс всё равно не прыгает), а в потоке она съедала высоту, из-за которой кнопка
   уезжала к нижнему канту корпуса. */
.bmi__msg {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 20px;
    font-family: var(--bmi-serif);
    font-size: calc(14px * var(--bmi-comp));
    line-height: calc(18px * var(--bmi-vcomp));
    color: var(--bmi-error);
}

@media (prefers-reduced-motion: reduce) {
    .bmi__sector.is-on, .bmi__lamp.is-on, .bmi__dial.is-lit .bmi__fig.is-color.is-win { animation: none; }
    .bmi__box.is-bad { animation: none; }
}