/* Плотность хрома WebClient.

   Проблема, которую решает файл: на планшете вьюпорт по ширине «десктопный»
   (iPad — 1024 CSS px), поэтому включается ветка вёрстки, рассчитанная на мышь:
   appbar 48px, подписи ленты 10px, подписи групп Ribbon 9px. Экран при этом
   пальцевой и держится в руках. Плотность пикселей (dpr) тут ни при чём —
   CSS-пиксель её уже нормализует; дело именно в том, что тач-устройство
   получает мышиную плотность.

   Механизм: один множитель --app-ui-scale и производные от него токены хрома.
   Всё, что должно расти на планшете, подписано на токен, а не на литерал в px.
   Новый элемент хрома подключается одной переменной и не требует правок здесь.

   Карточки и контент страниц сознательно НЕ подписаны на масштаб: они свёрстаны
   на rem/grid и на планшете читаются нормально. Масштабируем хром, а не всё. */

:root {
    --app-ui-scale: 1;

    /* Оболочка: appbar, крошки, боковая лента. База = текущая десктопная плотность. */
    --app-appbar-height: calc(48px * var(--app-ui-scale));
    --app-chrome-icon-size: calc(24px * var(--app-ui-scale));
    --app-chrome-tap-size: calc(40px * var(--app-ui-scale));
    --app-chrome-label-size: calc(0.875rem * var(--app-ui-scale));
    --app-avatar-size: calc(32px * var(--app-ui-scale));

    --app-rail-width: calc(84px * var(--app-ui-scale));
    --app-rail-item-height: calc(56px * var(--app-ui-scale));
    --app-rail-icon-size: calc(24px * var(--app-ui-scale));
    --app-rail-label-size: calc(10px * var(--app-ui-scale));
    --app-rail-caption-size: calc(9px * var(--app-ui-scale));
    --app-rail-section-label-size: calc(11px * var(--app-ui-scale));

    /* Лента редакторов: Word, читалка Fb2, просмотрщик Pdf (AppRibbon + WordRibbon). */
    --app-ribbon-group-label-size: calc(9px * var(--app-ui-scale));
    --app-ribbon-command-label-size: calc(10px * var(--app-ui-scale));
    --app-ribbon-command-width: calc(56px * var(--app-ui-scale));
    --app-ribbon-control-height: calc(28px * var(--app-ui-scale));
    --app-ribbon-text-size: calc(12px * var(--app-ui-scale));
    --app-ribbon-tab-size: calc(13px * var(--app-ui-scale));
}

/* ── Тиры ──────────────────────────────────────────────────────────────────────
   Автотир: пальцевой указатель на «десктопном» вьюпорте — это планшет.
   Действует, только пока пользователь не выбрал плотность явно: UiDensityService
   ставит data-ui-density на <html>, а для режима «Автоматически» снимает атрибут.
   Значение "auto" обрабатываем тоже — на случай, если атрибут всё же выставлен. */

@media (pointer: coarse) and (min-width: 768px) {
    :root:not([data-ui-density]),
    :root[data-ui-density="auto"] {
        --app-ui-scale: 1.25;
    }
}

:root[data-ui-density="compact"] {
    --app-ui-scale: 1;
}

:root[data-ui-density="comfortable"] {
    --app-ui-scale: 1.25;
}

:root[data-ui-density="large"] {
    --app-ui-scale: 1.45;
}

/* ── Тач-цели ──────────────────────────────────────────────────────────────────
   Отдельно от масштаба: 44px — минимум Apple HIG независимо от выбранной
   плотности. max() даёт «не меньше 44, но и не меньше масштабированного». */

@media (pointer: coarse) {
    .app-main-appbar .mud-icon-button,
    .app-main-appbar .mud-button-root,
    .app-main-appbar .notification-bell-activator {
        min-width: max(44px, var(--app-chrome-tap-size));
        min-height: max(44px, var(--app-chrome-tap-size));
    }

    .app-ribbon__cell .mud-icon-button,
    .word-ribbon__cell .mud-icon-button,
    .app-ribbon__select,
    .word-ribbon__select {
        min-height: 44px;
    }
}