/* Вид «полноценный сайт»: обычная шапка, категории сеткой, нижней панели нет.
   Всё здесь и в view-app.css решается ТОЛЬКО атрибутом [data-view=...] на
   корневом элементе — сама разметка одна и та же в обоих видах (см.
   screens.js: applyView()). Медиазапросов по ширине окна здесь нет и быть не
   должно: вид и ширина — разные вещи, вид «сайт» человек может выбрать и на
   узком экране. */
[data-view="site"] .bottom-nav{display:none}
/* Категории сеткой, а не списком: на широком экране одиннадцать строк во всю
   ширину выглядят пустыми (об этом прямо сказано в спеке этапа).
   Число колонок считает сам браузер по свободному месту (auto-fill + minmax),
   а не медиазапрос по ширине окна, — поэтому в узком окне та же сетка сама
   схлопывается в одну колонку и остаётся прежним списком.
   min(100%,…) обязателен: без него карточка минимальной ширины --cat-min
   вылезала бы за край окна уже, чем --cat-min.
   align-items:start — чтобы раскрытая категория тянула вниз только себя, а
   не всю строку сетки вместе с соседями. */
[data-view="site"] #cats{display:grid;align-items:start;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cat-min)),1fr))}
/* Расстояние между карточками в сетке даёт gap; собственный нижний отступ
   карточки прибавился бы к нему и дал бы неровный шаг. */
[data-view="site"] #cats .cat{margin-bottom:0}
/* Снизу достаточно места только под полосу плеера — нижней панели в этом
   виде нет. Считается от высоты самой полосы (--bar-h), а не числом: иначе
   правка полосы роняла бы последнюю строку содержимого под неё. */
[data-view="site"] #screens{padding-bottom:calc(var(--bar-h) + var(--s5))}
[data-view="site"] #bar{bottom:0}
[data-view="site"] header{padding:var(--s6) var(--s4) var(--s4)}
[data-view="site"] .brand{font-size:22px}