/* ================================================================
   CUSTM · мобильный слой (mobile.css)
   Подключается ПОСЛЕДНИМ в <head> — после app.css и после <style>
   самой страницы, поэтому перебивает их правила без гонки со
   специфичностью. !important стоит там, где страница задаёт то же
   свойство инлайном или своим блоком (padding .wrap, сетки).
   Точки: 900px — планшет/телефон, 560px — узкий телефон.
   ================================================================ */

/* Элементы мобильной шапки js/sidebar.js вставляет на любой ширине
   (чтобы не гадать при ресайзе) — на десктопе их просто не видно. */
@media (min-width:901px){
  #navBurger,#navHead,#navBackdrop,#mobtop{display:none!important;}
}

@media (max-width:900px){

  /* ---------- шапка: сайдбар превращается в липкую полосу 56px ----------
     Пункты меню уезжают в выездной ящик слева (js/sidebar.js),
     вместо пяти рядов кнопок, которые раньше съедали пол-экрана.
     ВАЖНО: никакого backdrop-filter на aside — filter/backdrop-filter
     делает элемент containing block для position:fixed потомков, и
     выездной ящик (nav) оказывался заперт внутри полосы 56px. */
  /* z-index'ы: aside — стековый контекст, поэтому z-index ящика внутри
     него меряется относительно aside, а не страницы. Отсюда порядок:
     backdrop 60 < aside 80 (с ящиком внутри) < чат-панель 90. */
  aside{
    position:sticky;top:0;z-index:80;
    height:56px;flex-wrap:nowrap;gap:8px;padding:0 10px;
    background:#0a0b0e;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid var(--line);
  }
  body.hasbg aside{background:#0a0b0e;}

  .brand{flex:0 1 auto;min-width:0;padding:0;gap:9px;}
  .brand .mark{width:24px;height:24px;}
  .brand .name{font-size:18px;}
  .brand .beta{margin-top:0;align-self:center;font-size:8px;padding:2px 4px;}

  /* кнопка-бургер (вставляет sidebar.js) */
  #navBurger{
    flex:none;width:38px;height:38px;padding:0;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid rgba(255,255,255,.13);border-radius:10px;
    color:var(--text);cursor:pointer;
  }
  #navBurger svg{width:19px;height:19px;}
  #navBurger:active{background:rgba(255,255,255,.07);}

  /* слот под кнопки шапки (конверт/профиль) — прижат вправо */
  #mobtop{margin-left:auto;flex:none;display:flex;align-items:center;}
  #mobtop #topbtns{margin-left:0;gap:8px;}

  /* ---------- выездное меню ---------- */
  nav{
    position:fixed;top:0;left:0;bottom:0;z-index:2;
    width:min(82vw,310px);
    flex-direction:column;flex-wrap:nowrap;gap:0;
    padding:14px 0 26px;
    background:#0d1117;border-right:1px solid var(--line);border-bottom:none;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform .24s ease;
    box-shadow:14px 0 40px rgba(0,0,0,.5);
  }
  html.nav-open nav{transform:none;}

  #navHead{
    flex:none;
    display:flex;align-items:center;justify-content:space-between;
    padding:4px 16px 14px;margin-bottom:6px;
    border-bottom:1px solid var(--line-soft);
  }
  #navHead .nh-t{
    font-family:var(--font-display);font-weight:600;font-size:13px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted-3);
  }
  #navClose{
    background:none;border:none;color:var(--muted);
    font-size:22px;line-height:1;padding:2px 8px;cursor:pointer;
  }

  #navBackdrop{
    position:fixed;inset:0;z-index:60;background:rgba(4,6,9,.62);
    opacity:0;pointer-events:none;transition:opacity .24s ease;
  }
  html.nav-open #navBackdrop{opacity:1;pointer-events:auto;}
  /* фон намеренно НЕ блокируем overflow:hidden — на iOS это сбрасывает
     позицию прокрутки; ящик держит свой скролл через overscroll-behavior */

  /* пункты в ящике: иконка + название + подпись, крупная зона нажатия */
  nav .tab{
    /* flex:1 1 auto из app.css растянул бы 10 пунктов на всю высоту ящика */
    flex:0 0 auto;
    display:grid;grid-template-columns:20px 1fr;column-gap:14px;row-gap:2px;
    align-items:center;
    padding:12px 18px;border-left:3px solid transparent;border-bottom:none;
  }
  nav .tab .ticon{display:block;grid-row:1 / span 2;width:20px;height:20px;}
  nav .tab .tt{grid-column:2;font-size:15px;color:var(--text);}
  nav .tab.active .tt{color:#fff;}
  nav .tab .ts{grid-column:2;display:block;font-size:11px;line-height:1.3;white-space:normal;}
  nav .tab:hover,nav .tab.active{
    border-left:3px solid var(--accent);border-bottom:none;transform:none;
  }

  /* ---------- контент ----------
     Страницы переопределяют .wrap своим <style> (padding 44px 60px) —
     на телефоне это оставляло от ширины экрана меньше половины. */
  .wrap{max-width:100%!important;padding:20px 14px 72px!important;}
  .hero{max-width:100%!important;padding:22px 14px 44px!important;}
  .topbar{padding:14px 14px 0!important;}
  .top{flex-wrap:wrap;gap:10px;margin-bottom:20px!important;}

  main h1,.wrap h1,.hero h1{font-size:clamp(26px,7.6vw,38px)!important;line-height:1.08;}
  .sub,.hsub{font-size:14.5px;}

  /* сетки: всё в одну колонку — minmax(300..340px) не влезает в экран */
  .grid,.pgrid,.choices,.teams,.msgr,.sidegrid,.cols2{grid-template-columns:1fr!important;}
  .cols2{gap:22px!important;}

  /* карточки — компактнее, скруглений меньше не нужно */
  .card{padding:18px!important;}

  /* ничто не должно вылезать за экран */
  img,svg,video,canvas{max-width:100%;}
  pre,code{overflow-x:auto;max-width:100%;}
  .wrap table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* формы: 16px — иначе iOS зумит страницу при фокусе */
  .wrap input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .wrap select,.wrap textarea,
  .modal input,.modal select,.modal textarea,
  .form input,.form select{font-size:16px!important;}
  .form{flex-direction:column;}
  .form input,.form select,.form button{width:100%;min-width:0;}

  /* пальцем по кнопке — не мышкой */
  .btn,.login,.djoin,.plink{min-height:42px;}
  .btn:hover,.card:hover,a.card:hover,.choice:hover{transform:none;}

  /* модалка на всю ширину */
  .overlay{padding:12px!important;align-items:flex-start!important;padding-top:60px!important;}
  .modal{max-width:100%!important;padding:20px 16px!important;max-height:82vh;overflow-y:auto;}

  /* Магазин: стопка лотов веером вправо — десктопная ховер-штука, на
     телефоне она уезжала за экран (translateX по --i). Разбираем стопку
     в обычный столбец: display:contents делает карточки ячейками .grid. */
  .lot-group{position:static;display:contents;cursor:default;}
  .lot-group::after{display:none;}
  .stack-item.peek,.lot-group.open .stack-item.peek{
    position:static!important;transform:none!important;
    width:auto;height:auto;z-index:auto;
    opacity:1!important;filter:none!important;pointer-events:auto!important;
    box-shadow:none!important;cursor:pointer;
  }

  /* чат-панель поверх липкой шапки */
  #dmdock{z-index:90;}
}

/* ---------- узкий телефон ---------- */
@media (max-width:560px){
  .wrap{padding:16px 12px 64px!important;}
  .hero{padding:18px 12px 38px!important;}
  .card{padding:15px!important;}
  .stats{gap:18px!important;}
  .meta{gap:12px!important;}
  main h2{margin-top:26px!important;}
  .btnrow .btn{flex:1 1 auto;}
}
