/*
  Раскладки. Здесь и только здесь решается, где что стоит и какой ширины.
  Компоненты про это не знают — поэтому их можно ставить куда угодно.

  Две раскладки, а не одна «резиновая»:
    до 900  — вертикаль, одна колонка, действия под большой палец
    от 900  — горизонталь, боковое меню, содержимое в сетке
*/

/* ================= Полотно ================= */
.wrap{max-width:var(--w-wide);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-narrow{max-width:var(--w-narrow)}
.wrap-text{max-width:var(--w-text)}
.band{padding-top:var(--band);padding-bottom:var(--band)}

/* ================= Стопка ================= */
/* Вертикальный ритм задаётся здесь, а не полями компонентов: так один
   и тот же блок в разных местах стоит по-разному, не меняя себя. */
.stack{display:grid;gap:var(--s16)}
.stack-sm{gap:var(--s8)}
.stack-lg{gap:var(--s24)}
.stack-xl{gap:var(--s32)}

/* ================= Ряд ================= */
.hrow{display:flex;align-items:center;gap:var(--s12)}
.hrow-between{justify-content:space-between}
.hrow-end{justify-content:flex-end}
.hrow-wrap{flex-wrap:wrap}
.spacer{margin-left:auto}

/* ================= Сетка карточек ================= */
.grid{display:grid;gap:var(--s20);grid-template-columns:1fr}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ================= Липкая шапка ================= */
.appbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s8);
  padding:var(--s16) var(--pad);
  margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  background:var(--glass);border-bottom:1px solid transparent;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  transition:border-color var(--norm) var(--ease);
}
.appbar.is-stuck{border-bottom-color:var(--line)}

/* ================= Нижняя навигация: только телефон ================= */
/* Отдельный UX, а не сжатый десктоп: до основных разделов дотягивается
   большой палец, не меняя хвата. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;
  padding:var(--s8) var(--s8) calc(var(--s8) + env(safe-area-inset-bottom));
  background:var(--glass);border-top:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:var(--r-field);
  color:var(--steel-2);font-size:11px;line-height:13px;
  transition:color var(--fast) var(--ease);
}
.tabbar a[aria-current="page"]{color:var(--text)}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Чтобы содержимое не пряталось под панелью. */
.has-tabbar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* ================= Боковое меню: только десктоп ================= */
.shell{display:block}
.sidebar{display:none}

@media (min-width:900px){
  .shell{
    display:grid;grid-template-columns:248px minmax(0,1fr);
    gap:var(--s40);align-items:start;
    max-width:var(--w-wide);margin:0 auto;
    padding:var(--s32) var(--pad) var(--s72);
  }
  .sidebar{
    display:block;position:sticky;top:var(--s32);
    background:var(--ink-2);border-radius:var(--r-card);padding:var(--s12);
    box-shadow:var(--ring);
  }
  .sidebar a{
    display:flex;align-items:center;gap:var(--s12);
    padding:11px 12px;border-radius:var(--r-field);
    color:var(--silver-1);font-size:15px;font-weight:500;
    transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
  }
  .sidebar a:hover{background:var(--ink-3);color:var(--text)}
  .sidebar a[aria-current="page"]{background:var(--ink-4);color:var(--text)}
  .sidebar svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .sidebar hr{border:0;border-top:1px solid var(--line);margin:var(--s8) 4px}

  /* На десктопе нижняя панель не нужна — есть боковое меню. */
  .tabbar{display:none}
  .has-tabbar{padding-bottom:0}
  /*
    Колонка расширяется, но не на всю ширину экрана: строка на 1900 px
    нечитаема, а действие в конце строки оказывается в другом конце
    монитора. Снимать ограничение можно будет, когда появится боковое
    меню и содержимое встанет в сетку.
  */
  .wrap-narrow{max-width:720px}
  .appbar{position:static;background:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;border:0;padding-left:0;padding-right:0;margin:0}
}

/* ================= Только для одного из режимов ================= */
.only-mobile{display:initial}
.only-desktop{display:none}
@media (min-width:900px){
  .only-mobile{display:none}
  .only-desktop{display:initial}
}