/* ═══════════════════════════════════════════════════════════════════════════
   DS MNAV — единая мобильная навигация всех страниц discovery-system.ru.

   Источник правды один: этот файл + ds-mnav.js. Страница ничего не знает
   о мобильном наве — она лишь подключает пару тегов в <head>/перед </body>.

   Правила:
     • >720px  — нав страницы как есть, ничего не меняется;
     • ≤720px  — лого-5 слева + бургер 44×44 справа, ссылки живут в панели
                 на весь экран (56px строка, волосяные разделители);
     • активный пункт читается по .on / .cur / [aria-current] из разметки;
     • панель появляется только на transform/opacity, reduced-motion — без анимации;
     • скрытие легаси-строки включается ТОЛЬКО с html.mnav-ready (его ставит JS):
       без JS на странице остаётся прежний нав, а не пустая полоса.

   z-index: контент страниц 0–100, панель 400 (модалки страниц — выше, если появятся).
   ═══════════════════════════════════════════════════════════════════════════ */

.mnav-btn {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--mn-hair, rgba(255,255,255,.14));
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}
.mnav-btn span {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: var(--mn-ink, #eef2f9);
  border-radius: 1px;
  transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .12s linear;
}
.mnav-btn span::before,
.mnav-btn span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 1.5px;
  background: currentColor;
  background: var(--mn-ink, #eef2f9);
  border-radius: 1px;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.mnav-btn span::before { transform: translateY(-6px); }
.mnav-btn span::after  { transform: translateY(6px); }
.mnav-btn[aria-expanded="true"] span { background: transparent; }
.mnav-btn[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); }
.mnav-btn[aria-expanded="true"] span::after  { transform: translateY(0) rotate(-45deg); }
.mnav-btn:focus-visible {
  outline: 2px solid var(--mn-accent, #8fa8ff);
  outline-offset: 2px;
}

/* ─── панель ─────────────────────────────────────────────────────────────── */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--mn-bg, #0f1730);
  color: var(--mn-ink, #eef2f9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s cubic-bezier(.22,1,.36,1),
              transform .2s cubic-bezier(.22,1,.36,1),
              visibility 0s linear .2s;
  overscroll-behavior: contain;
}
.mnav[data-open="1"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .2s cubic-bezier(.22,1,.36,1),
              transform .2s cubic-bezier(.22,1,.36,1),
              visibility 0s linear 0s;
}

/* светлая тема — если полоса нава стоит на светлом фоне (js выставляет data-theme) */
.mnav[data-theme="light"] {
  --mn-bg: #f2f4f6;
  --mn-ink: #10141f;
  --mn-meta: #5b6478;
  --mn-hair: rgba(16,20,31,.12);
  --mn-accent: #1b2a6b;
}

.mnav-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mn-hair, rgba(255,255,255,.14));
}
.mnav-head .mnav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display, 'Onest', 'IBM Plex Sans', system-ui, sans-serif);
  font-weight: 500; font-size: 15.5px; letter-spacing: -.01em;
  color: var(--mn-ink, #eef2f9); text-decoration: none;
}
.mnav-head .mnav-brand img {
  width: 26px; height: 26px; border-radius: 6px; display: block;
}
.mnav-close {
  width: 44px; height: 44px;
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--mn-hair, rgba(255,255,255,.14));
  border-radius: 10px;
  color: var(--mn-ink, #eef2f9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mnav-close svg { width: 16px; height: 16px; display: block; }
.mnav-close:focus-visible {
  outline: 2px solid var(--mn-accent, #8fa8ff);
  outline-offset: 2px;
}

.mnav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.mnav-list {
  list-style: none;
  margin: 0; padding: 0;
}
.mnav-list li { border-bottom: 1px solid var(--mn-hair, rgba(255,255,255,.14)); }
.mnav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  color: var(--mn-ink, #eef2f9);
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s cubic-bezier(.22,1,.36,1), background-color .15s linear;
}
.mnav-list a .mnav-tick {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 14px;
  color: var(--mn-meta, rgba(238,242,249,.55));
  opacity: 0;
  transition: opacity .15s linear;
}
.mnav-list a[aria-current="page"],
.mnav-list a.on,
.mnav-list a.cur {
  color: var(--mn-accent, #8fa8ff);
  font-weight: 500;
}
.mnav-list a[aria-current="page"] .mnav-tick,
.mnav-list a.on .mnav-tick,
.mnav-list a.cur .mnav-tick { opacity: 1; color: var(--mn-accent, #8fa8ff); }
.mnav-list a:active { background: rgba(143,168,255,.08); }
.mnav-list a:focus-visible {
  outline: 2px solid var(--mn-accent, #8fa8ff);
  outline-offset: -2px;
}

.mnav-foot {
  margin-top: auto;
  flex: 0 0 auto;
  border-top: 1px solid var(--mn-hair, rgba(255,255,255,.14));
}
.mnav-foot .mnav-lab {
  display: block;
  padding: 14px 16px 2px;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mn-meta, rgba(238,242,249,.55));
}
.mnav-foot a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 16px;
  color: var(--mn-ink, #eef2f9);
  font-size: 17px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mnav-foot a + a { border-top: 1px solid var(--mn-hair, rgba(255,255,255,.14)); }
.mnav-foot a:focus-visible {
  outline: 2px solid var(--mn-accent, #8fa8ff);
  outline-offset: -2px;
}

html.mnav-lock, html.mnav-lock body { overflow: hidden; }

/* ─── мобильный режим ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  html.mnav-ready .mnav-btn { display: inline-flex; }

  /* легаси-строка ссылок уходит; лого и бургер остаются в одну линию.
     !important — потому что на service/calculator/system/channel/market у <nav>
     стоит инлайн-стиль display:flex, и без него правило проигрывает. */
  html.mnav-ready header.nav .nav-in > nav { display: none !important; }
  html.mnav-ready nav.top .nav-items { display: none !important; }
  html.mnav-ready nav.top .wrap > a:not(.home) { display: none !important; }

  html.mnav-ready header.nav .nav-in {
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
  }
  html.mnav-ready nav.top { padding: 10px 16px; }
  html.mnav-ready nav.top .wrap {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0;
  }
  html.mnav-ready nav.top a.home {
    flex-basis: auto;
    justify-content: flex-start;
    margin: 0;
  }
  /* лого-5 в мобильной полосе — 26px, как в каноне нава */
  html.mnav-ready header.nav .brand img,
  html.mnav-ready nav.top a.home img { width: 26px; height: 26px; }
  html.mnav-ready header.nav .brand,
  html.mnav-ready nav.top a.home { white-space: nowrap; }
}

/* очень узкие экраны: подпись бренда короче, но не рвётся */
@media (max-width: 359px) {
  html.mnav-ready header.nav .brand,
  html.mnav-ready nav.top a.home span { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav[data-open="1"] { transition: none; transform: none; }
  .mnav-btn span, .mnav-btn span::before, .mnav-btn span::after { transition: none; }
  .mnav-list a, .mnav-list a .mnav-tick { transition: none; }
}

/* sticky ломается об overflow-x:hidden у body — clip не создаёт скролл-контейнер */
html,body{overflow-x:clip}

/* ═══ NAVBAR-HIT: крупная площадь клика, контраст, липкая шапка ═══ */
header.nav{position:sticky;top:0;z-index:60;background:rgba(15,23,48,.94);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.10)}
header.nav .nav-in{min-height:56px!important;height:auto!important;padding-top:8px!important;padding-bottom:8px!important;border-bottom:0!important}
header.nav .brand{min-height:44px;padding:0 8px;border-radius:8px;color:#eef2fb!important}
header.nav .brand:hover{background:rgba(255,255,255,.07)}
header.nav .nav-in > nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
header.nav .nav-in > nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;
  border-radius:8px;color:#c3cde4!important;font-size:14.5px;text-decoration:none}
header.nav .nav-in > nav a:hover{color:#fff;background:rgba(143,168,255,.16)}
header.nav .nav-in > nav a.on,
header.nav .nav-in > nav a[aria-current="page"]{color:#fff!important;background:rgba(143,168,255,.20)}
header.nav .brand img{width:26px;height:26px;border-radius:6px}
@media(max-width:720px){
  header.nav .nav-in{min-height:64px}
}