/*
  Витрина: РАСКЛАДКА экрана списка. Бюджет первого экрана — 300 КБ, и эти килобайты
  должны быть домами, а не оформлением. Ни сборщика, ни фреймворка, ни чужих шрифтов.

  Кнопка, карточка дома и свойства здесь НЕ ОПИСАНЫ — они в komponenty.css, одни
  на всю витрину. До 15.09.2026 этот файл держал свои копии .otmetit, .karta и .cena:
  страница сверки показывала одно, клиент видел другое. Здесь только то, что есть
  у одной этой страницы: первый экран, лента, панель подборки, анимации 2 и 3.

  Числа взяты из исследования, а не на глаз:
    • текст от 16 px — иначе iOS увеличивает страницу при фокусе;
    • тач-цели от 44 pt;
    • контраст не ниже 4.5:1;
    • отступ от краёв ≥16 px — на iOS свайп от края закрывает мини-приложение.

  ТОКЕНЫ — ТОЛЬКО ИЗ tema.css. Ни одного цвета, радиуса, шрифта или длительности литералом.
*/

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--kraya) env(safe-area-inset-bottom);
  background: var(--fon);
  color: var(--tekst);
  font: var(--font-tekst);
  font-feature-settings: "tnum" 1;
  /* Как в core: тонкое сглаживание, без него системный шрифт на светлом стекле жирнит */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Сцена под всем: цветные пятна на холсте, слой на весь экран, не скроллится (core) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--scena);
  pointer-events: none;
}

/* Цифры табличные: площадь, дата прайса, счёт не пляшут по ширине. */
.chislo { font-family: var(--shrift-cifry); font-variant-numeric: tabular-nums; }

/*
  ПЕРВЫЙ ЭКРАН — как в каталоге core (16.09.2026): шапка с датой прайса, плитки
  разделов, таблица цен, дальше лента. По левому краю, на оси карточек.
*/
.shapka { padding: var(--otstup-24) 0 var(--otstup-8); }

.marka {
  margin: 0 0 var(--otstup-8);
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.obeshchanie {
  margin: 0;
  font: var(--font-zagolovok-ekrana);
  letter-spacing: var(--trekking-zagolovka);
  text-wrap: balance;
}

.shapka-prays {
  margin: var(--otstup-8) 0 0;
  font: var(--font-cifry);
  color: var(--tusklyy);
}

/* Плитки разделов — .kg-tile core: стекло, обложка 16:10 сверху, имя и подпись */
.razdely {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--otstup-16);
  margin: var(--otstup-16) 0 var(--otstup-32);
}

.razdel {
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--karta);
  -webkit-backdrop-filter: var(--steklo);
  backdrop-filter: var(--steklo);
  border: var(--liniya-1) solid var(--karta-liniya);
  border-radius: var(--skruglenie-karty);
  box-shadow: var(--ten), var(--ten-blik);
  transition: transform var(--podyom) var(--krivaya-podyom), box-shadow var(--podyom) var(--krivaya-podyom);
}

@media (hover: hover) {
  .razdel:hover {
    transform: translateY(-3px);
    box-shadow: var(--ten-podnyataya), var(--ten-blik);
  }
}

@media (prefers-reduced-motion: reduce) {
  .razdel:hover { transform: none; }
}

.razdel:focus-visible {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: 2px;
}

.razdel .kadr-oblozhka { border-radius: var(--skruglenie-karty) var(--skruglenie-karty) 0 0; }

.razdel-telo { display: block; padding: var(--otstup-16); }

.razdel-imya {
  display: block;
  font: var(--font-imya-karty);
  letter-spacing: var(--trekking-imeni);
}

.razdel-meta {
  display: block;
  margin-top: var(--otstup-4);
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.razdel-stroka {
  display: block;
  margin-top: var(--otstup-8);
  font: var(--font-tekst);
  color: var(--tekst);
}

.razdel-cena {
  display: block;
  margin-top: var(--otstup-8);
  font: var(--font-cena-karty);
  letter-spacing: var(--trekking-imeni);
  color: var(--akcent);
}

/* Заголовок ленты под плитками разделов */
.lenta-zagolovok {
  margin: 0 0 var(--otstup-12);
  font: var(--font-imya-karty);
  letter-spacing: var(--trekking-imeni);
}

.lenta-zagolovok { scroll-margin-top: var(--otstup-16); }

/* Экраны посёлков */
.posyolki-ekran,
.posyolok-ekran { padding-top: var(--otstup-8); }

.posyolki { margin-top: var(--otstup-24); }

/* Лента. Запас снизу под панель подборки ставит komponenty.css на body — пока панель видна. */
.lenta {
  display: grid;
  gap: var(--otstup-16);
  /* Якорь «Смотреть дома» не ставит карточку вплотную к краю окна */
  scroll-margin-top: var(--otstup-16);
}

/*
  БЮДЖЕТ ПЕРВОГО ЭКРАНА — 300 КБ, и держится он здесь.

  loading="lazy" сам по себе его не держит: браузер грузит кадры с запасом
  в два-три экрана вперёд, и замер 16.09.2026 дал 311 КБ на шести обложках,
  из которых человек видел одну. content-visibility снимает с карточек вне экрана
  и отрисовку, и загрузку их кадров — экран становится ровно экраном.

  contain-intrinsic-size обязателен рядом: без него у неотрисованной карточки
  нулевая высота, полоса прокрутки прыгает под пальцем. Число — это высота
  карточки с обложкой 16:10 на телефоне; точность здесь не нужна, нужен порядок.
*/
.lenta .karta-doma {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.lenta-pusto {
  margin: 0;
  font: var(--font-tekst);
  color: var(--tusklyy);
}

/* Телефон: кнопка первого экрана на всю ширину, под большой палец. */
@media (max-width: 699px) {
  .k-lente { align-self: stretch; }
}

@media (min-width: 700px) {
  body { max-width: var(--kolonka); margin: 0 auto; }
  .lenta { grid-template-columns: 1fr 1fr; }
}

/* Тёмная тема — целиком в tema.css: и по prefers-color-scheme, и по data-tema. */

/*
  Панель подборки и её анимация проявления (№2 из бюджета трёх) — в komponenty.css:
  панель стоит на всех четырёх экранах, а не только в ленте. До 16.09.2026 стили
  жили здесь, и страница дома, которая грузит dom.css вместо этого файла,
  показывала панель голым текстом в самом низу документа (найдено владельцем).
  Анимация №1 (отметка дома) — там же, рядом с карточкой и кнопкой.
*/

/*
  3. Фото, 240 мс — описано в komponenty.css рядом с кадром: обложка в ленте и кадр
  на странице дома проявляются одинаково, и правило у них одно. Метку data-zhdyot
  ставит kadr.js.
*/

/*
  ПАНЕЛЬ ЛЕНТЫ: поиск и порядок. Показывает её lenta.js — до этого она скрыта
  атрибутом hidden, и :not([hidden]) нужен по той же причине, что у подсказки
  таблицы: display перебивает hidden молча.
*/
.lenta-panel:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otstup-8);
  margin-bottom: var(--otstup-16);
}

/* Одна строка, как .kg-toolbar core: поиск тянется, список порядка справа. Подписей
   над полями нет — подсказка внутри поля и aria-label; высота — тач-цель 44 */
.lenta-poisk { flex: 1 1 100%; }      /* поиск своей строкой, под ним два списка в ряд */
.lenta-poryadok,
.lenta-posyolok { flex: 1 1 140px; }

.lenta-panel .pole-vvod { min-height: var(--tach); }

/*
  Список порядка — ВЫПУКЛЫЙ, как select в core: выпуклое нажимают, во вдавленное
  вводят. Стрелка нарисована рамками псевдоэлемента обёртки, как галочка в kp.html
  core: ни картинки, ни url(), ни домена в CSS (сторож П6 ловит даже xmlns в data:).
*/
.lenta-poryadok,
.lenta-posyolok { position: relative; }

.lenta-poryadok::after,
.lenta-posyolok::after {
  content: "";
  position: absolute;
  right: var(--otstup-16);
  top: 50%;
  width: var(--otstup-8);
  height: var(--otstup-8);
  border-right: var(--liniya-2) solid var(--tusklyy);
  border-bottom: var(--liniya-2) solid var(--tusklyy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.lenta-select {
  padding-right: var(--otstup-48);
  background: var(--karta-plotnaya);
  box-shadow: var(--ten-vypuklaya);
  cursor: pointer;
}

.lenta-select:focus {
  box-shadow: var(--ten-vypuklaya), inset 0 0 0 var(--liniya-1) var(--akcent);
}

.lenta-nichego:not([hidden]) { flex: 1 1 100%; }

.lenta-poisk-podpis {
  display: block;
  margin-bottom: var(--otstup-4);
  font: var(--font-podpis);
  color: var(--tusklyy);
}

/* Пустой результат: словами и с выходом одним нажатием */
.lenta-nichego:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otstup-8);
  margin: 0;
  font: var(--font-tekst);
  color: var(--tusklyy);
}

/* Сброс — ссылка по виду, кнопка по сути: он ничего не отправляет */
.lenta-sbros {
  padding: 0;
  border: 0;
  background: none;
  color: var(--akcent);
  font: var(--font-tekst);
  text-decoration: underline;
  cursor: pointer;
}

.lenta-sbros:focus-visible {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: var(--otstup-4);
}

/* Скрытая поиском карточка не занимает место в сетке */
.lenta .karta-doma[hidden] { display: none; }