/* =====================================================================
   sidebar.css — левый навигационный рельс кабинета (/me).
   Макет Figma «sidebar new» (node 796:6577), спек снят 1:1: рельс 288,
   белая карта r16, пункты h44 pad12, активный — подложка --c-bg r12.

   Своя таблица стилей (НЕ header.css): header.css общий с тренажёром,
   его трогать нельзя. Рельс живёт ТОЛЬКО в кабинете и замещает верхнюю
   шапку на десктопе; на мобилке сворачивается в шторку, сверху — тонкая
   полоска (гамбургер + лого + выход).

   Слои по ширине:
   — десктоп (≥769): body.has-rail — flex-row [рельс | контент]; рельс —
     липкая колонка во всю высоту; .ashell__top/.__backdrop скрыты.
   — мобилка (≤768): рельс — off-canvas панель (transform), сверху липкая
     полоска .ashell__top; открытие — data-open="true" на .ashell.

   Токены — из tokens.css (грузит account.html). Цвета макета:
   #191919→--c-ink, #666666→--c-muted-lp, #F3F3F3→--c-bg, #FFF→--c-surface.
   ===================================================================== */

/* #chrome — контейнер, куда остров рендерит рельс/шапку. Прозрачен для
   лейаута (display:contents), чтобы .ashell/.hdr стали прямыми флекс-детьми
   body и рельс встал колонкой рядом с .page. */
#chrome { display: contents; }

/* ---- Рельс: общая разметка (десктоп-колонка / мобилка-шторка) ---- */
.rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 288px;
  padding: 28px 16px 16px;
  background: var(--c-surface);
  border-radius: 16px;
}

.rail__top { display: flex; flex-direction: column; gap: 24px; }
/* Навигация из групп (макет «sidebar-current»): 24px между группами, 8px под
   заголовком, 4px между пунктами. */
.rail__nav { display: flex; flex-direction: column; gap: 24px; }
.rail__group { display: flex; flex-direction: column; gap: 8px; }
.rail__group-items { display: flex; flex-direction: column; gap: 4px; }
/* Заголовок группы: Medium 12/14, приглушён, выровнен по левому паддингу пунктов. */
.rail__group-label {
  padding: 0 12px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--c-muted-lp);
}
.rail__bottom { display: flex; flex-direction: column; gap: 4px; }

/* Логотип-словомарка сверху рельса (тот же бренд-ассет, что в шапке). */
.rail__logo { display: inline-flex; align-items: center; padding: 0 12px; text-decoration: none; }
.rail__logo-img { display: block; height: 20px; width: auto; }

/* Пункт меню — строка иконка+текст, h44 pad12 r12 gap8 (Menu_button).
   Радиус единый (12) для дефолта/ховера/активного — B-«скругления». */
.side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--c-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: var(--tracking);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.side-item__icon { flex: none; display: inline-flex; width: 20px; height: 20px; }
.side-item__icon svg { width: 20px; height: 20px; display: block; }
/* Однострочный лейбл: не переносится, длинный уходит в многоточие. */
.side-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Кликабельные пункты (поддержка, пользователь) слегка приглушены по макету
   (opacity .9) и подсвечиваются на ховере. */
.side-item--link { opacity: .9; }
.side-item--link:hover { background: var(--c-bg); opacity: 1; }

/* Кликабельная навигация по разделам (кнопки): ховер как у ссылок. Активный
   не подсвечивается ховером — он уже выбран. */
.side-item--btn:not(.side-item--active):hover { background: var(--c-bg); }

/* Активный пункт — текущий раздел: подложка --c-bg, r12, тёмный текст Medium. */
.side-item--active {
  background: var(--c-bg);
  border-radius: 12px;
  font-weight: 500;
  cursor: default;
}

/* «Скоро» — задел под будущие фичи: некликабельны, приглушены, с бейджем.
   Иконки на currentColor — цвет ведёт `color` пункта (тут muted). */
.side-item--soon { color: var(--c-muted-lp); cursor: default; }
.side-item--soon .side-item__label { opacity: .9; }
.side-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--c-bg);
  color: var(--c-muted-lp);
  font-size: 12px;
  line-height: 12px;
}

/* Профиль (icon + ник) — сейчас disabled: фича в разработке. Приглушён и
   некликабелен, но БЕЗ бейджа «скоро» (в отличие от side-item--soon). Выход
   вынесен отдельным последним пунктом рельса (см. .rail__bottom). */
.side-item--disabled { color: var(--c-muted-lp); cursor: default; opacity: .5; }
.side-user__nick { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Мобильная верхняя полоска (гамбургер + лого + выход) ---- */
.ashell__top { display: none; }
.ashell__backdrop { display: none; }
.ashell__ham, .ashell__top-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}
.ashell__ham:hover, .ashell__top-logout:hover { background: var(--c-bg); }
.ashell__ham svg, .ashell__top-logout svg { width: 22px; height: 22px; }
.ashell__top-logo { display: inline-flex; align-items: center; text-decoration: none; }
.ashell__top-logo-img { display: block; height: 22px; width: auto; }

/* =====================================================================
   Десктоп (≥769): рельс — липкая колонка слева, контент справа.
   ===================================================================== */
@media (min-width: 769px) {
  /* height:auto ОБЯЗАТЕЛЕН: account.css/styles.css ставят html,body{height:100%},
     из-за чего флекс-линия обрезалась вьюпортом — колонка рельса не росла с
     контентом, sticky не имел хода и рельс уезжал при длинной истории (п.1
     ревью Андрея). Тело с рельсом должно расти с контентом. */
  body.has-rail { display: flex; align-items: stretch; height: auto; min-height: 100%; }
  body.has-rail .page { flex: 1 1 auto; min-width: 0; }
  /* Тренажёр (T-92): рядом с рельсом живёт активный экран SPA (.stage),
     а не .page — тянем его так же. */
  body.has-rail .stage.is-active { flex: 1 1 auto; min-width: 0; }

  /* .ashell тянется на всю высоту (min 100vh, растёт с контентом) — рельс внутри
     липкий: остаётся на месте при скролле длинной истории. */
  .ashell {
    flex: 0 0 auto;
    min-height: 100vh;
    padding: 12px 0 12px 12px;
    display: flex;
  }
  .ashell .rail { position: sticky; top: 12px; height: calc(100vh - 24px); }
}

/* =====================================================================
   Мобилка (≤768): off-canvas шторка + верхняя полоска.
   ===================================================================== */
@media (max-width: 768px) {
  .ashell__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 12px 16px;
    background: var(--c-bg);
  }

  /* Рельс уезжает за левый край; выезжает по data-open. */
  .ashell .rail {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 100vh;
    width: min(288px, 82vw);
    border-radius: 0 16px 16px 0;
    transform: translateX(-100%);
    transition: transform .24s ease;
    will-change: transform;
  }
  .ashell[data-open="true"] .rail { transform: none; }

  /* Затемнение под шторкой. */
  .ashell[data-open="true"] .ashell__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .32);
  }

  /* Лого рельса прячем в шторке — он уже есть в верхней полоске. */
  .ashell .rail__logo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ashell .rail { transition: none; }
}