/* ═══════════════════════════════════════════════════════════════════════════
   GRAMATON.PRO — T5: АДАПТИВ ВЕБ-ЛК ПОД МОБИЛЬНЫЕ (mobile-first)
   ТЗ T5 (2026-09-19, builder). Дополнение к T0 (дашборд) и T1 (ui-kit).

   Подключается ПОСЛЕ инлайнового <style> страницы, поэтому переопределяет
   стили T0, не перетирая их файл (структура T0 сохранена 1:1).

   Брейкпоинты (T5 п.1): база 360 → 480 → 768 → 1024 → 1200 → 1440 → 1600.
   Никаких фиксированных px-ширин страниц: только max-width + % / minmax(0,1fr).
   Цвета — только через токены темы (--om-*), поэтому 5 тем
   (Космо / ОлдМани / Неон / Крем / Роял) не ломаются.
   Эталон: gramaton_app_new/lib/screens/dashboard_screen.dart (сетка 3 колонки)
           + main_screen.dart (нижнее меню с центральной кнопкой «Ассистент»).

   Логика шапки: ≤1239px — компактная (бренд + «Dashboard» + «⋯»), т.к. до 1240px
   полный набор кнопок (5 тем + Профиль/Настройки/Мессенджер/Выйти) не влезает
   в одну строку и распирал шапку до 138px (замер: 1200px → 138px; 1240px → 96px).
   ≥1240px — полная (темы + Профиль/Настройки/Мессенджер/Выйти) в одну строку.
   ВАЖНО: это НЕ тот же брейкпоинт, что сетка сервисов (5 колонок уже с 1200px, ТЗ п.6).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. БАЗА (от 360px) ──────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
/* T5 п.2 (нет гориз. скролла) + T5 п.5/п.8 (шапка sticky реально липнет).
   ───────────────────────────────────────────────────────────────────────────
   ПОЧЕМУ ИМЕННО `clip`, А НЕ `hidden` (регресс, найден на приёмке T5):
   gramaton-theme.css содержит `body.om-bg { overflow-x: hidden !important;
   overflow-y: auto !important; }`. При `overflow-x: hidden` ось Y вычисляется
   в `auto`, поэтому BODY становится скролл-контейнером. Скроллится при этом
   documentElement, а не body → `position: sticky` у шапки привязывается к
   скролл-порту body, который не двигается, и шапка уезжает вместе с контентом:
       было: scrollY=156 → .om-header.getBoundingClientRect().top = -144
       стало: scrollY=156 → .om-header.getBoundingClientRect().top = 0
   `overflow-x: clip` НЕ создаёт скролл-порт (CSS Overflow 3), а `visible` по Y
   совместим с `clip` (в отличие от пары hidden/visible, где visible → auto),
   поэтому body перестаёт быть скролл-контейнером и sticky снова привязан к
   корневому скроллеру. Горизонтальное переполнение при этом по-прежнему
   обрезается: с искусственным элементом width:2000px
   documentElement.scrollWidth остаётся равным innerWidth. */
/* ВАЖНО про специфичность: theme-switcher.js (loadCSS) дописывает css темы в КОНЕЦ
   <head>, поэтому при переключении на «ОлдМани» gramaton-theme.css снова оказывается
   ПОСЛЕ mobile-t5.css. У того правила специфичность (0,1,1) + !important, поэтому
   селектор ниже намеренно специфичнее — иначе при смене темы sticky снова ломался
   (замер: ОлдМани, scrollY=167 → headerTop=-155). */
html body.om-bg,
html:root body.om-bg {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.om-page { width: 100%; max-width: 1280px; margin: 0 auto; }

/* ── 1. Типографика: основной текст ≥14px, подписи ≥12px (T5 п.4) ────────── */
.dash-hero__greet   { font-size: 13px; }
.dash-hero__sub     { font-size: 14px; }             /* e-mail / подзаголовок — читаемый текст */
.dash-hero__label   { font-size: 12px; letter-spacing: 0.12em; }
.dash-hero__caption { font-size: 12px; }
.dash-hero__name    { font-size: clamp(19px, 5.4vw, 21px); overflow-wrap: anywhere; }
.dash-hero__value   { font-size: clamp(26px, 8.6vw, 30px); }
.dash-rating        { min-height: 34px; font-size: 13px; }
.dash-rating__label { font-size: 12px; }
.dash-tile__name    { font-size: 13px; overflow-wrap: anywhere; }
.dash-tile__note    { font-size: 12px; letter-spacing: 0.06em; }

/* ── 2. Тач-таргеты ≥44×44, зазор ≥8px (T5 п.3) ──────────────────────────── */
.om-header .om-btn {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.om-header-actions { gap: 8px; }
.dash-nav { gap: 8px; }
.theme-switch { gap: 8px; }
.theme-switch button { min-height: 44px; font-size: 12px; padding: 10px 14px; }
.more-menu__panel a { min-height: 48px; font-size: 15px; }

/* ── 3. Сетка сервисов: 3 → 4 (≥768) → 5 (≥1200) → 6 (≥1600) (T5 п.6) ───── */
.dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-tile { min-width: 0; min-height: 88px; }
@media (min-width: 480px) {
  .dash-grid { gap: 12px; }
  .dash-tile { min-height: 92px; }
}
@media (min-width: 768px) {
  .dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-tile { min-height: 94px; }
}
@media (min-width: 1024px) {
  .om-header { position: sticky; top: 0; z-index: 50; }
}
@media (min-width: 1200px) {
  .dash-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1440px) {
  .om-page { padding-left: 32px; padding-right: 32px; }
  .dash-grid { gap: 14px; }
}
@media (min-width: 1600px) {
  .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── 4. КОМПАКТНАЯ ШАПКА ≤1239px: sticky, safe-area, «⋯» (T5 п.5, п.8) ───── */
@media (max-width: 1239px) {
  .om-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: row;                /* сбрасываем column из тем и 480px */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    margin-bottom: 14px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));   /* T5 п.8 */
    border-radius: 0 0 var(--om-radius-md) var(--om-radius-md);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .om-header-left { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
  .om-header-actions { flex: 0 0 auto; gap: 8px; }
  .dash-nav { display: none; }                     /* действия уходят в «⋯» */
  .theme-switch--desktop { display: none; }        /* темы — в «⋯» */
  .dash-brand { font-size: 17px; }
  .dash-appbar { font-size: 13px; padding: 5px 10px 5px 8px; max-width: 46vw; }
  .dash-appbar .ic { width: 16px; height: 16px; }
  .more-menu { display: block; }
  .more-menu > summary {
    min-width: 44px; min-height: 44px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
  }
  .more-menu__panel {
    left: auto; right: 0; top: calc(100% + 8px);
    min-width: 240px;
    max-width: calc(100vw - 24px);      /* T5 п.5: не уезжает за экран */
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    gap: 6px; padding: 10px;
  }
  .theme-switch--panel {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0; border: 0; background: transparent;
  }
  .theme-switch--panel button { flex: 1 1 auto; justify-content: center; }
  .more-menu__sep { height: 1px; background: var(--om-gold-border-light); margin: 4px 2px; }
  .more-menu__title {
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--om-text-muted); padding: 2px 12px 0;
  }
}

/* ── 5. ДЕСКТОП ≥1240px: полная шапка, дубли скрыты ──────────────────────── */
@media (min-width: 1240px) {
  .om-header { position: sticky; top: 0; z-index: 50; }
  .theme-switch--panel { display: none; }
}

/* ── 6. МОБИЛЬНЫЙ ≤768px: место под нижнее меню (T5 п.8, п.10) ───────────── */
@media (max-width: 768px) {
  /* T5 п.10: контент не перекрывается нижним меню + safe-area (T5 п.8) */
  .om-page { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 7. 480px: подтягиваем внутренние отступы ───────────────────────────── */
@media (max-width: 480px) {
  .om-header { border-radius: 0 0 var(--om-radius) var(--om-radius); }
  .dash-hero { padding: 16px; }
  .dash-services { padding: 14px 12px; }
  .ui-card { padding: 14px; }
}

/* ── 8. Гарантия контраста нижнего меню во всех 5 темах ─────────────────── */
.ui-tabbar--app { color: var(--om-text-secondary); }
.ui-tabbar--app .ui-tabbar__item { color: var(--om-text-muted); }
@media (max-width: 768px) {
  .ui-tabbar--app { background: color-mix(in srgb, var(--om-bg-card) 94%, transparent); }
  .ui-tabbar--app .ui-tabbar__item.is-active { color: var(--om-gold); }
}

/* ── 9. Поля ввода 16px на мобильном/планшете и при coarse-pointer (T5 п.4) ──
   ui-kit.css (T1) уже делает поля 16px при ≤768px или coarse pointer. Расширяем
   условие до ≤1024px, чтобы и на планшете в 1024px шрифт поля был 16px (замер:
   было 14px → стало 16px). На десктопе с мышью (≥1025px) остаётся типографика
   ui-kit: iOS-зума при фокусе там нет по определению. */
@media (max-width: 1024px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea, select,
  .ui-input, .ui-select, .ui-textarea { font-size: 16px; }
}
