/* Мобильные экраны M-* (телефон, ширина до 767 px, вплоть до 360 px).
   Разметка M-* лежит в странице рядом с разметкой компьютера (portal/mobile/**); показывает нужную
   только этот файл — по ширине окна, без определения устройства. Общие стили и токены — hub.css
   (прототип, без изменений): здесь лишь то, что в прототипе задано рамкой телефона 390×844 и что
   для настоящего экрана нужно сделать текучим. */

/* Компьютер: мобильная разметка скрыта (и из дерева доступности). */
.m-root, .m-chrome { display: none; }

@media (max-width: 767px) {
  /* Где у маршрута есть экран M-*, разметка компьютера скрыта целиком. */
  /* !important: у разметки компьютера display задан в атрибуте style. */
  body.has-m > .hub:not(.m-root):not(.m-chrome) { display: none !important; }
  .m-root { display: flex; }
  .m-chrome { display: block; }

  body { background: var(--bg, #F4F6FA); }

  /* Рамка телефона из прототипа → текучий экран */
  .m-root.phone { max-width: none; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .m-root .mbody { overflow: visible; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .m-root .mhead { min-width: 0; }
  .m-root .mhead > h1, .m-root .mhead h1 { min-width: 0; }

  /* Нижняя навигация: закреплена у нижнего края; число пунктов зависит от роли */
  .m-root .tabbar, .m-chrome .tabbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
  .tabbar > a { min-height: 54px; }
  /* Панель «Ещё» открыта — подсвечена вкладка «Ещё», остальные не активны */
  body:has(#m-more:target) .tabbar > a.active { color: var(--text-3) !important; font-weight: 500; }
  body:has(#m-more:target) .tabbar > a.active > .pill { background: transparent; color: inherit; }
  body:has(#m-more:target) .tabbar > a.m-more-tab { color: var(--primary-ink) !important; font-weight: 600; }
  body:has(#m-more:target) .tabbar > a.m-more-tab > .pill { background: var(--primary-soft); color: var(--primary-fg); }

  /* M-More: панель поверх экрана, над нижней навигацией; открывается ссылкой #m-more (:target) */
  .m-more {
    display: none; position: fixed; z-index: 30; left: 0; right: 0; top: 0;
    bottom: calc(60px + max(24px, env(safe-area-inset-bottom, 0px)));
    overflow-y: auto; overscroll-behavior: contain; background: var(--bg); outline: none;
  }
  .m-more:target { display: block; }
  .m-more .mbody { padding-bottom: 24px; }

  /* Экраны без M-версии: разметка компьютера под нижней навигацией, без боковой панели */
  body:not(.has-m) .sidebar { display: none; }
  body:not(.has-m) .topbar { padding: 10px 16px; gap: 10px; }
  body:not(.has-m) .topbar .d-ctx, body:not(.has-m) .topbar .d-search, body:not(.has-m) .topbar .d-user { display: none !important; }
  body:not(.has-m) .main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* Сенсорные цели не меньше 44 px */
  .m-root .btn, .m-root .tag, .m-root .m-opt, .m-root .row, .m-chrome .btn { min-height: 44px; }
  .m-root .btn-sm { height: 44px; }
  .m-root .btn-icon { width: 44px; height: 44px; }
  .m-root .tag { height: auto; padding-top: 6px; padding-bottom: 6px; }
  .m-root .seg > button { min-height: 44px; }
  .m-root a.m-doclink, .m-root a.h4 { color: var(--text); }
  .m-root a.m-doclink { display: inline-block; padding: 2px 0; }
  .m-root .h4, .m-root .h2, .m-root .h3, .m-root .t-sm, .m-root .t-xs { overflow-wrap: anywhere; }
  .m-root .chip { max-width: 100%; height: auto; min-height: 24px; white-space: normal; }
  .m-root .btn { max-width: 100%; }
  .m-root textarea.input-ml { min-height: 48px; }

  /* Варианты фильтра в листе: целая строка — цель нажатия */
  .m-opt { display: flex; gap: 10px; align-items: center; padding: 0 4px; cursor: pointer; }
  .m-opt > input { width: 20px; height: 20px; flex: none; }

  /* Лист (прототип: .sheet) на элементе dialog: фокус и Esc даёт браузер */
  dialog.m-sheet {
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: auto;
    max-height: 90vh; max-height: 90dvh; overflow-y: auto; border: 0; color: var(--text);
    padding: 8px 16px max(32px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-2);
  }
  dialog.m-sheet:not([open]) { display: none; }

  /* Состояние загрузки после отправки формы: результаты приглушены, повтор нажатия не нужен */
  .m-root [aria-busy="true"] { opacity: .55; transition: opacity var(--dur-2, .15s); }

  /* Переход к пункту из поиска: фрагмент обведён и не прячется под шапкой */
  .m-root .doc-unit { scroll-margin-top: 16px; }
  .m-root .doc-unit.is-target, .m-root .doc-unit:target { padding: 6px 8px; }

  /* Вход (M-Login): экран на всю высоту */
  .m-login { min-height: 100vh; min-height: 100dvh; }
  .m-login .m-hero-title { text-wrap: balance; }
}

@media (max-width: 359px) {
  .m-root .mbody { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-root *, .m-root *::before, .m-root *::after, .m-chrome *, .m-chrome *::before, .m-chrome *::after,
  dialog.m-sheet, dialog.m-sheet::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Вкладки карточки: в hub.css состояние .seg задано через aria-pressed, у вкладок — aria-selected. */
.seg > button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font-weight: 600; }