/* Утилиты раскладки личного кабинета.

   Правило контейнера: максимальную ширину задаёт ТОЛЬКО контейнер
   (`main` или `.l-page`), карточка ширину не задаёт никогда — она заполняет
   ячейку сетки. Иначе получается то, с чего началась эта работа: контейнер
   разрешает 1080px, а карточка внутри сама себя ужимает до 560px.

   Брейкпоинты — ровно три: 560px, 860px, 1240px. CSS-переменные внутри
   @media не работают, поэтому значения написаны литералами; что других
   значений в этом файле нет, проверяет tests/test_design_tokens.py. */

.l-page { width: 100%; max-width: var(--l-w, var(--w-app)); min-width: 0;
  margin: 0 auto; padding: var(--sp-5) 4% var(--sp-7); }
.l-page--form  { --l-w: var(--w-form); }
.l-page--read  { --l-w: var(--w-read); }
.l-page--focus { --l-w: var(--w-focus); }
.l-page--wide  { --l-w: var(--w-wide); }
.l-page--full  { --l-w: var(--w-full); }

/* Доска и данные к ней: две колонки от 860px. */
.l-split { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5); align-items: start; }

/* Итог или дашборд: три зоны от 1240px, две от 860px. */
.l-triad { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5); align-items: start; }

/* Список карточек — всегда сетка, никогда колонка. */
.l-cards { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--l-min, 260px), 1fr)); }

.l-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Липкой боковой колонка становится только там, где есть третья зона:
   на узком экране она перекрыла бы доску. */
.l-sticky { position: static; }

@media (min-width: 860px) {
  .l-split { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
  .l-triad { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
}

@media (min-width: 1240px) {
  .l-triad { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) minmax(280px, 320px); }
  .l-sticky { position: sticky; top: 80px; }
}