/* Оболочка: сайдбар и нижний таб-бар. Владелец: таск 28.

   ЯКОРЬ 900 — граница, на которой сайдбар превращается в таб-бар. Та же, что
   в styles.css: там задан отступ главной колонки под панели (--sidebar-w слева
   и --tabbar-h снизу), здесь — сами панели. Двух правил на одну границу быть
   не должно, поэтому отступов <main> тут нет ни одного.

   Файл написан «от узкого»: по умолчанию виден таб-бар и шапка телефона,
   от 900 px — сайдбар. Свою палитру оболочка не заводит: все цвета — токены
   из styles.css. */

/* ------------------------- шапка телефона ------------------------- */

/* Узел рисуется всегда, даже пустым: его верхний отступ и есть то, что уводит
   первую строку экрана из-под чёлки. Строку синхронизации в него кладёт
   ui/syncline.js — до проводки (таск 38) она пуста, и остаётся только отступ. */
.shell-topline {
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
}

/* ---------------------------- таб-бар ---------------------------- */

.shell-tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  /* Пять равных пунктов: подпись «Покупки» вдвое длиннее «Я», и без равных
     долей мишени разъедутся. */
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* Полоса «Домой» на iPhone: панель поднимается над ней, а не прячется под. */
  padding-bottom: env(safe-area-inset-bottom);
}

.shell-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--tabbar-h);
  /* Мишень от 44 px во всю ширину доли — попадание пальцем, а не значком. */
  padding: 8px 4px;
  text-decoration: none;
  color: var(--ink-2);
}

.shell-tab .shell-label {
  font: 400 var(--fs-caption)/1.2 var(--font-caption);
  letter-spacing: .01em;
}

.shell-tab:hover { color: var(--ink); }

.shell-tab.active {
  color: var(--ink);
  font-weight: 600;
}

/* Значок текущего раздела — зелёный: цвет здесь дублирует жирность подписи,
   а не заменяет её. --accent под риском, и в навигации ему делать нечего. */
.shell-tab.active .shell-icon { color: var(--sage); }

/* ---------------------------- сайдбар ---------------------------- */

.shell-side { display: none; }

@media (min-width: 900px) {
  .shell-topline,
  .shell-tabs { display: none; }

  /* Единственное правило оболочки, которое трогает чужой класс, и оно здесь
     вынужденно. `.app` — колоночный флекс, а `.app-main` в styles.css получает
     и `width: 100%`, и `margin-left: var(--sidebar-w)`: в колоночном флексе
     ширина считается от контейнера, а отступ прибавляется снаружи — и на экране
     1280–1520 px колонка вылезает вправо ровно на ширину сайдбара, страница
     едет вбок. Ширина ужимается на ту же величину, которую отняли отступом.
     Место этому правилу — в styles.css, рядом с самим отступом (таск 26/38). */
  .app-main { width: calc(100% - var(--sidebar-w)); }

  .shell-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: var(--sidebar-w);
    padding: 22px 16px 16px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    /* Разделов семь, но у экрана бывает 600 px в высоту: список прокручивается
       сам, а не выталкивает строку синхронизации за край. */
    overflow-y: auto;
  }
}

.shell-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px;
  font: 800 20px/1.2 var(--font-display);
  letter-spacing: -.014em;
  color: var(--ink);
}

/* Знак в плитке: --sage под ним и --bg в нём. Пара выбрана так, чтобы работать
   в обеих темах — в тёмной --sage светлеет, а --bg темнеет, и контраст
   переворачивается вместе с ними. */
.shell-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--sage);
  color: var(--bg);
}

.shell-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shell-group-title { padding: 0 8px; }

.shell-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
}

.shell-item .shell-label { font: 400 var(--fs-body)/1.3 var(--font-text); }

.shell-item .shell-icon { color: var(--sage); }

.shell-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.shell-item.active {
  background: var(--sage-soft);
  color: var(--ink);
}

.shell-item.active .shell-label { font-weight: 600; }

/* Подвал сайдбара: строка синхронизации прижата к низу, а не идёт следом
   за списком разделов, — так она стоит на одном месте при любом их числе. */
.shell-foot {
  margin-top: auto;
  padding-top: var(--gap);
}