/*
  lk.css — меню и каркас личного кабинета. Общий файл для клиентского ЛК (/account)
  и провайдерского (/providers/cabinet). Разметку рисует public/lk-nav.js — контракт
  и классы описаны в его шапке.

  Что здесь есть:
    .lk-shell      каркас страницы кабинета: меню + содержимое;
    .lk-nav*       сам список пунктов (вертикальный слева от 760px, полоса вкладок ниже);
    .lk-main       колонка содержимого;
    .lk-tile       карточка-ссылка на раздел для обзора.

  Правила файла:
    • только токены из tokens.css, никаких литеральных цветов;
    • движения нет вовсе — ни transition, ни animation, ни smooth-скролла,
      поэтому prefers-reduced-motion соблюдён по построению (блок в конце это фиксирует);
    • ширины 390 / 760 / 1440: горизонтальной прокрутки у страницы не появляется,
      на узком экране прокручивается только сама полоса пунктов;
    • тап-зона пункта — не меньше var(--tap) (44px).
*/

.lk-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  min-width: 0;
}

/* ── Меню ────────────────────────────────────────────────────────────────── */
/* Узкий экран: полоса вкладок над содержимым. Прокрутка — внутри полосы,
   тело страницы она не растягивает. */
.lk-nav {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-1);
}
.lk-nav-eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.lk-nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.lk-nav-item { flex: 0 0 auto; }
.lk-nav-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-button);
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.lk-nav-label { display: block; }
.lk-nav-hint { font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.lk-nav-link:hover { background: var(--paper-sunk); color: var(--ink); }
.lk-nav-link:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
/* Активный пункт: и класс, и aria-current — компонент ставит оба, стиль реагирует на атрибут,
   потому что он же и доступность. */
.lk-nav-link[aria-current="page"], .lk-nav-link.is-current {
  background: var(--rust-soft);
  color: var(--rust-hover);
  font-weight: 700;
}
.lk-nav-link[aria-current="page"] .lk-nav-hint, .lk-nav-link.is-current .lk-nav-hint { color: var(--rust-hover); }

/* Широкий экран: вертикальный список слева, липнет под шапкой страницы.
   760px — граница из макета; на 760 и шире кабинет уже двухколоночный. */
@media (min-width: 760px) {
  .lk-shell {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--sp-7);
  }
  .lk-nav {
    position: sticky;
    top: var(--sp-4);
    border-bottom: 0;
    padding-bottom: 0;
  }
  .lk-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    gap: 2px;
  }
  .lk-nav-item { flex: 0 0 auto; }
  .lk-nav-link { width: 100%; }
}

/* ── Содержимое ──────────────────────────────────────────────────────────── */
.lk-main { min-width: 0; }
.lk-main > * + * { margin-top: var(--sp-6); }
/* Обёртка таблицы должна быть содержащим блоком: у .sr-only внутри <th> стоит position: absolute,
   и без этого он «убегает» из прокручиваемой обёртки, находясь уже от body. На узкой колонке
   кабинета подпись последней колонки оказывалась за правым краем и давала странице лишние
   4px горизонтальной прокрутки (замерено: 1444 при 1440; с правилом — ровно 1440). */
.lk-main .table-wrap { position: relative; }

/* Карточка-ссылка на раздел: обзор ведёт в «Мои проверки», «Личные агрегаты» и «Настройки». */
.lk-tile {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}
.lk-tile:hover { border-color: var(--line-strong); }
.lk-tile:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.lk-tile-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
.lk-tile-hint { color: var(--muted); font-size: var(--fs-caption); }
.lk-tile-go { color: var(--rust-hover); font-size: var(--fs-button); font-weight: 700; }
.lk-tile-go .arrow { margin-left: var(--sp-1); }

/* Движения в кабинете нет. Если полосе пунктов когда-нибудь добавят плавную прокрутку,
   при выключенной анимации она обязана остаться мгновенной. */
@media (prefers-reduced-motion: reduce) {
  .lk-nav, .lk-nav-list { scroll-behavior: auto; }
}

/* Гость: кабинета ещё нет, меню разделов не показываем — одна колонка с формой входа.
   Класс ставит страница, когда пользователь не вошёл. */
.lk-shell--guest { grid-template-columns: minmax(0, 1fr); }

/* Плоский каркас: одна колонка на всех ширинах, поэтому меню идёт полосой над содержимым —
   как на узком экране, а не вертикальным списком. Вертикальный список из семи пунктов занимает
   около 280 px, и когда страница понимала, что читатель вошёл, содержимое уезжало вниз на эту
   высоту: 0,113 сдвига из 0,129 на /account у вошедшего. Полоса занимает одну строку и не
   зависит от ширины каркаса, поэтому появление меню больше ничего не двигает. */
.lk-shell--flat { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .lk-shell--flat .lk-nav { position: static; border-bottom: 1px solid var(--line); padding-bottom: var(--sp-1); }
  .lk-shell--flat .lk-nav-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-1); }
  .lk-shell--flat .lk-nav-link { width: auto; }
}
/* Ширину колонки гостю НЕ ограничиваем: внутри секции входа своя сетка (.split), и её колонки
   считаются от ширины окна, а не от контейнера. С ограничением карточка входа сжималась в узкую
   полоску — владелец увидел именно это. Пустая колонка меню и так убрана из раскладки. */
.lk-shell--guest .lk-main { max-width: none; }