/**
 * Масштаб интерфейса.
 *
 * Корень проблемы: в приложении не было единицы масштаба. Размеры зашиты абсолютными
 * пикселями в сотнях правил (css/main.css, слайкгрид, конфигуратор, шапка), а
 * единственный слой, который живет в rem - Bootstrap - опирается на браузерный дефолт
 * 16px. Поэтому поменять плотность интерфейса было нечем: оставался только зум браузера,
 * а он к тому же расходится с тем, что сверстано в нормальном масштабе.
 *
 * Что сделано: собственные стили переведены из px в rem (значение / 16), скрипт перевода
 * ~/dv-diag/scale/px2rem.py. При корне 16px вид не менялся ни на пиксель - проверено
 * поэкранным сравнением скриншотов. После перевода корневой font-size стал единственной
 * ручкой масштаба для всего интерфейса разом.
 *
 * Ниже эта ручка и выставлена по ширине окна: 80% на ноутбуках (как раньше при зуме
 * браузера 80%), 100% на мониторах от 1900px (как было), с сохранением всех пропорций.
 *
 * Не переведены в rem и масштабируются отдельно:
 *   - рамки и волосинки (<= 2px) - специально, иначе станут дробными и замылятся;
 *   - позиции спрайтов в background - они не тянутся за шрифтом;
 *   - размеры, заданные из JS, - берут коэффициент из этого же корня (window.uiScale);
 *   - инлайн-стили в разметке - вычищаются по мере надобности.
 *
 * Подключается последним в protected/views/layouts/head.php.
 */

/* Ручка зависит от ширины окна: на ноутбуке контента мало и важна плотность, а на мониторе
   места хватает, и при 80% текст становится мелким (поле опросника 10.4px, жалоба клиента с
   монитором 23,8"). Границы в px окна, корневой размер на них не влияет. Размеры из JS
   (window.uiScale) читаются один раз при загрузке страницы. */
html {
    font-size: 80%; /* 12.8px: ноутбуки и MacBook (в том числе 14" в режиме 1800px), окно до 1899px */
}

@media (min-width: 1900px) {
    html {
        font-size: 100%; /* 16px: мониторы FHD 1920px и крупнее - исходный масштаб, как было */
    }
}

/* ------------------------------------------------------------------------------
 * Размеры, заданные мимо стилей приложения, - подтягиваем их к тому же корню.
 * ------------------------------------------------------------------------------ */

/* Логотип в шапке: инлайн-стиль max-width:150px; max-height:50px повторен в двух
   десятках пофирменных меню (protected/views/layouts/menu/main_menu*.php), поэтому
   перебиваем правилом, а не правкой каждого файла. */
.navbar-brand img {
    max-width: 9.375rem !important;
    max-height: 3.125rem !important;
}

/* Картинки в карточке приходят с сервера растром 200px и сами по себе не тянутся
   за масштабом - задаем предел в rem. */
#slick-grid-card img {
    max-width: 12.5rem;
    height: auto; /* иначе растр сожмется по ширине, а высота останется исходной */
}

/* Стрелки потоков в поле сборки - растр 62x16, вставляется из JS без размеров. */
.arrow {
    width: 3.875rem;
    height: auto;
}