/*
  КОМПОНЕНТЫ ВИТРИНЫ: кнопка, поле, карточка дома, диалог, выпадающее меню, таблица.

  Здесь нет ни одного цвета, радиуса или шрифта литералом — только var(--…)
  из tema.css. Нужен новый оттенок — сначала design/design-system.md, потом
  tema.css, и только потом сюда. Состояния описаны в design-system, раздел 4.

  Почему свои компоненты, а не библиотека, — design/refs/ui-komponenty.md.

  НАВЕДЕНИЕ — только под @media (hover: hover): на телефоне наведение залипает
  после тапа, и нажатая кнопка выглядит так, будто её держат.

  data-sostoyanie="navedenie | nazhatie | fokus | obrazec" — показ состояния
  без мыши и клавиатуры. Нужен странице сверки /design-preview: наведение и нажатие
  нельзя «нарисовать» разметкой иначе. Селектор стоит рядом с настоящим
  :hover / :active, а не в отдельном файле — иначе у состояния было бы две правды,
  и страница сверки показывала бы не то, что видит человек.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Иконки: только встроенный SVG ---------------------------------------- */

.znachok {
  flex: none;
  width: var(--znachok);
  height: var(--znachok);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.znachok-otdelno {
  width: var(--znachok-otdelno);
  height: var(--znachok-otdelno);
}

/* --- Фокус с клавиатуры: одинаковый у всего, что нажимается ---------------- */

.knopka:focus-visible,
.knopka[data-sostoyanie~="fokus"],
.dialog-zakryt:focus-visible,
.dialog-zakryt[data-sostoyanie~="fokus"],
.tablica-obertka:focus-visible {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: 2px;
}

/* ========================================================================== */
/* Кнопка                                                                     */
/* ========================================================================== */

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--otstup-8);
  min-height: var(--tach);
  /* design-system просит «поля 0 20», но 20 нет в ряду отступов того же файла.
     Взято 16 из ряда; главная кнопка всё равно на всю ширину. */
  padding: 0 var(--otstup-16);
  font: var(--font-knopka);
  text-align: center;
  text-decoration: none;
  border: var(--liniya-1) solid transparent;
  border-radius: var(--skruglenie-knopki);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--smena-cveta) var(--krivaya),
    border-color var(--smena-cveta) var(--krivaya),
    color var(--smena-cveta) var(--krivaya),
    box-shadow var(--smena-cveta) var(--krivaya),
    transform var(--smena-cveta) var(--krivaya);
}

.knopka-shirokaya {
  width: 100%;
}

.knopka:disabled {
  cursor: default;
}

/* Галочка есть в разметке всегда, видна только у включённой кнопки:
   mark.js меняет aria-pressed, а не разметку. */
.znachok-galochka {
  display: none;
}

.knopka[aria-pressed="true"] .znachok-galochka {
  display: block;
}

/* --- Главная: одна на экран ----------------------------------------------- */

.knopka-glavnaya {
  width: 100%;
  min-height: var(--tach-glavnaya);
  background: var(--akcent);
  color: var(--na-akcente);
  /* Свечение акцента и блик по верхнему краю — кнопка .btn.green из core */
  box-shadow: var(--ten-knopki);
}

@media (hover: hover) {
  .knopka-glavnaya:hover:not(:disabled) {
    background: var(--akcent-navedenie);
    box-shadow: var(--ten-knopki-navedenie);
    transform: translateY(-1px);
  }
}

.knopka-glavnaya[data-sostoyanie~="navedenie"] {
  background: var(--akcent-navedenie);
  box-shadow: var(--ten-knopki-navedenie);
  transform: translateY(-1px);
}

.knopka-glavnaya:active:not(:disabled),
.knopka-glavnaya[data-sostoyanie~="nazhatie"] {
  background: var(--akcent-nazhatie);
  transform: scale(.98);
}

.knopka-glavnaya:disabled {
  background: var(--liniya);
  color: var(--tusklyy);
  box-shadow: none;
}

/* --- Вторичная ------------------------------------------------------------ */

.knopka-vtorichnaya {
  /* .btn.ghost из core: полупрозрачный белый, рамка — акцент на 22%, текст акцентом.
     Полная рамка акцента делала кнопку тяжелее всего остального на экране */
  background: var(--steklo-knopki);
  border-color: var(--akcent-liniya);
  color: var(--akcent);
}

@media (hover: hover) {
  .knopka-vtorichnaya:hover:not(:disabled) {
    background: var(--podlozhka);
    border-color: var(--akcent-liniya-navedenie);
  }
}

.knopka-vtorichnaya[data-sostoyanie~="navedenie"] {
  background: var(--podlozhka);
  border-color: var(--akcent-liniya-navedenie);
}

.knopka-vtorichnaya:active:not(:disabled),
.knopka-vtorichnaya[data-sostoyanie~="nazhatie"] {
  background: var(--podlozhka);
  transform: scale(.98);
}

/* Включена. aria-current — та же роль для ссылки: «вы здесь». */
.knopka-vtorichnaya[aria-pressed="true"],
.knopka-vtorichnaya[aria-current="true"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--na-akcente);
  box-shadow: var(--ten-knopki);
  /* Отметка дома — анимация №1 бюджета, 160 мс */
  transition-duration: var(--anim-otmetka);
}

@media (hover: hover) {
  .knopka-vtorichnaya[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--akcent-navedenie);
    border-color: var(--akcent-navedenie);
  }
}

.knopka-vtorichnaya[aria-pressed="true"][data-sostoyanie~="navedenie"] {
  background: var(--akcent-navedenie);
  border-color: var(--akcent-navedenie);
}

.knopka-vtorichnaya[aria-pressed="true"]:active:not(:disabled),
.knopka-vtorichnaya[aria-pressed="true"][data-sostoyanie~="nazhatie"] {
  background: var(--akcent-nazhatie);
  border-color: var(--akcent-nazhatie);
}

/* Недоступна — цветом, а не прозрачностью: у полупрозрачного текста нет честного контраста */
.knopka-vtorichnaya:disabled {
  background: transparent;
  border-color: var(--liniya);
  color: var(--tusklyy);
}

/* ========================================================================== */
/* Поле формы                                                                 */
/* ========================================================================== */

.pole {
  display: grid;
  gap: var(--otstup-8);
}

.pole-podpis {
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.pole-vvod {
  width: 100%;
  min-height: var(--tach-glavnaya);
  margin: 0;
  padding: 0 var(--otstup-12);
  /* 17 px: мельче 16 iOS увеличивает страницу при фокусе */
  font: var(--font-tekst);
  color: var(--tekst);
  /* Вдавленное стекло — приёмник ввода, как поле поиска в core: выпуклое нажимают,
     во вдавленное вводят */
  background: var(--pole-fon);
  border: var(--liniya-1) solid var(--karta-liniya);
  border-radius: var(--skruglenie-knopki);
  box-shadow: var(--ten-vdavlena);
  appearance: none;
  transition: border-color var(--smena-cveta) var(--krivaya), box-shadow var(--smena-cveta) var(--krivaya);
}

.pole-vvod::placeholder {
  color: var(--tusklyy);
  opacity: 1;
}

@media (hover: hover) {
  .pole-vvod:hover:not(:disabled):not(:focus) {
    border-color: var(--tusklyy);
  }
}

.pole-vvod[data-sostoyanie~="navedenie"] {
  border-color: var(--tusklyy);
}

/* Ошибка: рамка 2 px цветом текста. Красного нет — ошибка это слова, а не второй цвет.
   Ставит сервер через aria-invalid, а не :user-invalid: его нет в iOS 16.0–16.4. */
.pole-vvod[aria-invalid="true"] {
  border-color: var(--tekst);
  box-shadow: inset 0 0 0 var(--liniya-1) var(--tekst);
}

/* Фокус — после ошибки: человек исправляет поле и должен видеть, где он.
   Рамка 1 px плюс внутренняя 1 px — итого 2, без свечения. */
.pole-vvod:focus,
.pole-vvod[data-sostoyanie~="fokus"] {
  outline: none;
  border-color: var(--akcent);
  box-shadow: var(--ten-vdavlena), inset 0 0 0 var(--liniya-1) var(--akcent);
}

.pole-vvod:disabled {
  background: var(--fon);
  color: var(--tusklyy);
  -webkit-text-fill-color: var(--tusklyy);
}

.pole-oshibka {
  display: flex;
  align-items: flex-start;
  gap: var(--otstup-8);
  margin: 0;
  font: var(--font-podpis);
  color: var(--tekst);
}

.pole-oshibka .znachok {
  /* значок по первой строке текста, а не по центру абзаца */
  margin-top: 1px;
}

/* ========================================================================== */
/* Карточка дома                                                              */
/* ========================================================================== */

.karta-doma {
  position: relative;
  overflow: hidden;
  /* Стекло: карточка .kg-card.g из каталога core — полупрозрачный белый с размытием,
     край светлее фона, тень и блик по верхнему краю */
  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:
    background-color var(--anim-otmetka) var(--krivaya),
    border-color var(--anim-otmetka) var(--krivaya),
    box-shadow var(--podyom) var(--krivaya-podyom),
    transform var(--podyom) var(--krivaya-podyom);
}

/* Наведение — подъём на 4 px и тень глубже, как в core. Фото не увеличивается. */
@media (hover: hover) {
  .karta-doma:hover {
    transform: translateY(-4px);
    box-shadow: var(--ten-podnyataya), var(--ten-blik);
  }
}

.karta-doma[data-sostoyanie~="navedenie"] {
  transform: translateY(-4px);
  box-shadow: var(--ten-podnyataya), var(--ten-blik);
}

@media (prefers-reduced-motion: reduce) {
  .karta-doma:hover,
  .karta-doma[data-sostoyanie~="navedenie"] { transform: none; }
}

.karta-doma:has(.karta-doma-ssylka:active),
.karta-doma[data-sostoyanie~="nazhatie"] {
  background: var(--fon);
}

/* Отмечен: три признака сразу — рамка, подложка, включённая кнопка с галочкой.
   Рамка 2 px нарисована внутренней линией, чтобы карточка не прыгала на пиксель.
   .otmechena ставит mark.js; :has — то же самое без скрипта. */
.karta-doma.otmechena,
.karta-doma:has([aria-pressed="true"]) {
  background: var(--podlozhka);
  border-color: var(--akcent);
  box-shadow: inset 0 0 0 var(--liniya-1) var(--akcent), var(--ten);
}

.karta-doma-telo {
  padding: var(--otstup-16);
}

.karta-doma-imya {
  margin: 0 0 var(--otstup-12);
  font: var(--font-imya-karty);
  letter-spacing: var(--trekking-imeni);
  color: var(--tekst);
}

.karta-doma-ssylka {
  color: inherit;
  text-decoration: none;
}

/* Вся карточка — цель ссылки, но кнопка отметки остаётся отдельной целью (выше слоем) */
.karta-doma-ssylka::after {
  content: "";
  position: absolute;
  inset: 0;
}

.karta-doma-ssylka:focus-visible {
  outline: none;
}

.karta-doma:has(.karta-doma-ssylka:focus-visible) {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: 2px;
}

.svoystva {
  display: grid;
  gap: var(--otstup-4);
  margin: 0;
}

.svoystvo {
  display: flex;
  gap: var(--otstup-12);
  align-items: baseline;
}

.svoystvo dt {
  flex: 0 0 auto;
  min-width: 6em;
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.svoystvo dd {
  margin: 0;
  font: var(--font-tekst);
  color: var(--tekst);
}

.svoystvo .cifry {
  font: var(--font-cifry);
}

/* Цена и дата прайса — всегда вместе (И12) */
.karta-doma-cena {
  margin: var(--otstup-16) 0 0;
  padding-top: var(--otstup-12);
  border-top: var(--liniya-1) solid var(--liniya);
}

.karta-doma-cena-chislo {
  display: block;
  font: var(--font-cena-karty);
  letter-spacing: var(--trekking-imeni);
  color: var(--akcent);
}

.karta-doma-cena-data {
  display: block;
  font: var(--font-cifry);
  color: var(--tusklyy);
}

.karta-doma .knopka {
  position: relative; /* над растянутой ссылкой карточки */
  width: 100%;
  margin-top: var(--otstup-16);
}

/* ========================================================================== */
/* Диалог                                                                     */
/* ========================================================================== */

.dialog {
  width: calc(100% - 2 * var(--kraya));
  max-width: var(--shirina-dialoga);
  /* Стабильная высота Telegram: --tg-viewport-height «не успевает» за низом окна */
  max-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--otstup-32));
  /* Телефон: окно внизу, под большим пальцем */
  margin: auto auto calc(var(--otstup-16) + env(safe-area-inset-bottom));
  padding: 0;
  overflow: auto;
  color: var(--tekst);
  background: var(--karta);
  border: var(--liniya-1) solid var(--liniya);
  border-radius: var(--skruglenie-karty);
}

.dialog::backdrop {
  background: var(--zatemnenie);
}

@media (min-width: 700px) {
  .dialog {
    margin: auto;
  }
}

/* Пока окно открыто, страница под ним не прокручивается */
:root:has(.dialog:modal) {
  overflow: hidden;
}

/* Образец открытого окна прямо в потоке страницы — только для сверки */
.dialog[data-sostoyanie~="obrazec"] {
  position: static;
  width: 100%;
  max-height: none;
  margin: 0;
}

/* Всё содержимое во внутренней обёртке: тогда тап, у которого целью оказался
   сам <dialog>, — это тап по затемнению (dialog.js) */
.dialog-vnutri {
  position: relative;
  display: grid;
  gap: var(--otstup-16);
  padding: var(--otstup-24);
}

.dialog-zagolovok {
  margin: 0;
  padding-right: var(--tach);
  font: var(--font-imya);
}

.dialog-tekst {
  margin: 0;
  font: var(--font-tekst);
}

.dialog-knopki {
  display: grid;
  gap: var(--otstup-8);
  margin-top: var(--otstup-8);
}

.dialog-zakryt {
  position: absolute;
  top: var(--otstup-12);
  right: var(--otstup-12);
  display: grid;
  place-items: center;
  width: var(--tach);
  height: var(--tach);
  padding: 0;
  color: var(--tekst);
  background: transparent;
  border: 0;
  border-radius: var(--skruglenie-knopki);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--smena-cveta) var(--krivaya);
}

@media (hover: hover) {
  .dialog-zakryt:hover {
    background: var(--fon);
  }
}

.dialog-zakryt[data-sostoyanie~="navedenie"] {
  background: var(--fon);
}

/* ========================================================================== */
/* Выпадающее меню                                                            */
/* ========================================================================== */

.menu {
  position: relative;
  display: inline-block;
}

.menu-knopka[aria-expanded="true"] {
  background: var(--podlozhka);
}

/* Поворот сразу, без перехода: движение не входит в бюджет анимаций */
.menu-knopka[aria-expanded="true"] .znachok-shevron {
  transform: rotate(180deg);
}

.menu-panel {
  position: absolute;
  top: calc(100% + var(--otstup-4));
  left: 0;
  z-index: 10;
  min-width: var(--shirina-menu);
  max-width: calc(100vw - 2 * var(--kraya));
  margin: 0;
  padding: var(--otstup-4);
  list-style: none;
  background: var(--karta);
  /* Панель лежит поверх контента: её край обязан читаться, поэтому --granica */
  border: var(--liniya-1) solid var(--granica);
  border-radius: var(--skruglenie-karty);
}

.menu-sprava .menu-panel {
  left: auto;
  right: 0;
}

.menu-panel[hidden] {
  display: none;
}

.menu-punkt {
  display: flex;
  align-items: center;
  gap: var(--otstup-12);
  width: 100%;
  min-height: var(--tach);
  margin: 0;
  padding: 0 var(--otstup-12);
  font: var(--font-tekst);
  color: var(--tekst);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: var(--skruglenie-knopki);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--smena-cveta) var(--krivaya);
}

@media (hover: hover) {
  .menu-punkt:hover:not(:disabled) {
    background: var(--fon);
  }
}

.menu-punkt[data-sostoyanie~="navedenie"] {
  background: var(--fon);
}

.menu-punkt:active:not(:disabled),
.menu-punkt[data-sostoyanie~="nazhatie"] {
  background: var(--liniya);
}

/* Кольцо внутрь пункта: снаружи его обрезала бы панель */
.menu-punkt:focus-visible,
.menu-punkt[data-sostoyanie~="fokus"] {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: calc(-1 * var(--liniya-2));
}

.menu-punkt:disabled {
  color: var(--tusklyy);
  cursor: default;
}

.menu-razdelitel {
  height: var(--liniya-1);
  margin: var(--otstup-4) 0;
  background: var(--liniya);
}

/* ========================================================================== */
/* Таблица                                                                    */
/* ========================================================================== */

/*
  На телефоне — сначала уместить, потом прокручивать (design-system, «Таблица»;
  разбор — design/refs/tablica-na-telefone.md). Не влезла — прокручивается обёртка,
  первая колонка закреплена, а tablica.js ставит data-shire и показывает подсказку.
*/

.tablica-blok {
  display: grid;
  gap: var(--otstup-8);
}

/*
  ПОДСКАЗКА «ТАБЛИЦА ШИРЕ ЭКРАНА» ПОКАЗЫВАЕТСЯ ТОЛЬКО КОГДА ОНА ПРАВДА ШИРЕ.
  Скрывает её tablica.js, ставя атрибут hidden, — но `display: flex` этот атрибут
  перебивает, и подсказка висела над таблицей, которая целиком помещается
  на экране. Найдено на живом прогоне 16.09.2026: таблица цен по посёлкам
  занимала 356 px из 356 доступных, а над ней стояло «листайте вбок».

  Селектор :not([hidden]) вместо !important: правило остаётся обычным,
  и его можно переопределить, не вступая в войну важностей.
*/
.tablica-podskazka:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--otstup-8);
  margin: 0;
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.tablica-obertka {
  overflow-x: auto;
  background: var(--karta);
  border: var(--liniya-1) solid var(--liniya);
  border-radius: var(--skruglenie-karty);
  transition: border-color var(--smena-cveta) var(--krivaya);
}

/* Шире экрана и не долистана: правый край темнее — таблица продолжается.
   Без тени и без мягкого перехода: тень в продукте одна (design-system, раздел 3). */
.tablica-obertka[data-shire]:not([data-v-konce]) {
  border-right-color: var(--granica);
}

/* separate, а не collapse: с collapse рамки закреплённой колонки в WebKit
   рисуются неверно (bugs.webkit.org 128486) */
.tablica {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--font-tekst);
  color: var(--tekst);
}

.tablica caption {
  padding: var(--otstup-12);
  font: var(--font-podpis);
  color: var(--tusklyy);
  text-align: left;
}

.tablica th,
.tablica td {
  padding: var(--otstup-12);
  text-align: left;
  vertical-align: baseline;
}

.tablica thead th {
  font: var(--font-podpis-zhirnaya);
  color: var(--tusklyy);
  border-bottom: var(--liniya-1) solid var(--liniya);
}

.tablica tbody th,
.tablica tbody td {
  border-bottom: var(--liniya-1) solid var(--liniya);
}

.tablica tbody tr:last-child > * {
  border-bottom: 0;
}

/* Первая колонка закреплена: при прокрутке вбок видно, чей это ряд.
   Фон обязателен — иначе соседние колонки проступают сквозь неё. */
.tablica tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--karta);
  border-right: var(--liniya-1) solid transparent;
}

.tablica thead tr > :first-child {
  z-index: 2;
}

.tablica tbody th[scope="row"] {
  font: var(--font-tekst);
  color: var(--tekst);
}

.tablica-obertka[data-shire] .tablica tr > :first-child {
  border-right-color: var(--liniya);
}

.tablica td.chislo {
  font: var(--font-cifry);
  white-space: nowrap;
}

.tablica .chislo {
  text-align: right;
}

/* Только ячейка: заголовок колонки — не цена, и акцента в нём нет */
.tablica td.cena {
  color: var(--akcent);
}

/* Вторая строка ячейки: дата прайса у цены, второстепенное свойство у дома */
.tablica .yacheyka-vtoraya {
  display: block;
  font: var(--font-podpis);
  color: var(--tusklyy);
  white-space: normal;
}

.tablica td.chislo .yacheyka-vtoraya {
  font: var(--font-cifry);
}

.tablica .pusto {
  color: var(--tusklyy);
}

/* Строка-ссылка: фон ставится ячейкам, а не строке — у закреплённой колонки свой фон */
@media (hover: hover) {
  .tablica .tablica-stroka-ssylka:hover > * {
    background: var(--fon);
  }
}

.tablica .tablica-stroka-ssylka[data-sostoyanie~="navedenie"] > * {
  background: var(--fon);
}

.tablica .tablica-stroka-ssylka:active > *,
.tablica .tablica-stroka-ssylka[data-sostoyanie~="nazhatie"] > * {
  background: var(--liniya);
}

/* ========================================================================== */
/* Кадр с паспортом (П2)                                                      */
/* ========================================================================== */

/*
  Подпись «Фото» или «Визуализация» — ЧАСТЬ КАДРА, а не украшение: она стоит
  внутри той же <figure> и не может отстать от картинки при вёрстке (П2).
  Плашка сплошная, не прозрачная и не мельче 16 px: подпись, которую не прочитали,
  ничем не отличается от её отсутствия.
*/
.kadr {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--skruglenie-karty);
  background: var(--liniya);
}

.kadr picture { display: block; position: relative; height: 100%; }

.kadr picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Заглушка — свой же кадр в несколько сотен байт, растянутый на всю рамку. Лежит ПОД
  картинкой: загруженное фото накрывает её целиком. Отдельный <img>, а не
  background-image в style=: CSP `style-src 'self'` блокирует встроенный стиль молча
  (найдено 16.09.2026 — заглушка не работала ни разу с момента импорта).
*/
.kadr-zaglushka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Анимация 3 (design-system, раздел 5): фото проявляется поверх заглушки за 240 мс.
  Метку data-zhdyot ставит kadr.js, пока файл едет, и снимает по загрузке; без скрипта
  метки нет и фото видно сразу.
*/
.kadr picture img { transition: opacity var(--anim-foto) var(--krivaya); }
.kadr picture img[data-zhdyot] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .kadr picture img { transition: none; }
}

/* В ленте кадр — обложка модели: 16:10, как в карточке КП (design-system, р. 4) */
.kadr-oblozhka { aspect-ratio: 16 / 10; }

/*
  На странице дома кадр живёт своей высотой: планировку нельзя обрезать по рамке,
  иначе с неё пропадают комнаты. Потолок высоты — чтобы вертикальный план
  не выгонял действие за пределы экрана.
*/
.kadr-polnyy picture img {
  height: auto;
  max-height: 70svh;
  object-fit: contain;
}

.kadr-podpis {
  position: absolute;
  left: var(--otstup-8);
  bottom: var(--otstup-8);
  padding: var(--otstup-4) var(--otstup-8);
  border-radius: var(--skruglenie-knopki);
  background: var(--karta);
  color: var(--tekst);
  font: var(--font-podpis);
}

/* Планировка — документ на белом листе: обрезать и заливать её фоном нельзя */
.kadr-plan { background: var(--karta); }
.kadr-plan picture img { object-fit: contain; }

/* Обложка в карточке ленты: кадр сверху, без полей, скруглён только сверху */
.karta-doma .kadr-oblozhka {
  border-radius: var(--skruglenie-karty) var(--skruglenie-karty) 0 0;
}

/* ========================================================================== */
/* Плитки фактов                                                              */
/* ========================================================================== */

/*
  Устройство из карточки модели core: факты сеткой, значение крупно, подпись мелко.
  Вертикальный список «свойство — значение» читается построчно, плитки — одним
  взглядом, и на телефоне это разница между «прочитал» и «увидел».

  auto-fit minmax: три плитки в ряд на телефоне, шесть на широком, и ни одного
  медиазапроса — сетка схлопывается сама.
*/
.plitki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--otstup-8);
  margin: var(--otstup-24) 0 0;
}

.plitka {
  padding: var(--otstup-12) var(--otstup-16);
  /* Стекло .kg-num из core: радиус внутренний (14), тень и блик */
  background: var(--karta);
  -webkit-backdrop-filter: var(--steklo);
  backdrop-filter: var(--steklo);
  border: var(--liniya-1) solid var(--karta-liniya);
  border-radius: var(--skruglenie-vnutr);
  box-shadow: var(--ten), var(--ten-blik);
}

/* dd идёт первым: значение важнее подписи. Порядок в разметке — смысловой,
   поэтому переставлять их стилями не приходится */
.plitka-znachenie {
  margin: 0;
  font: var(--font-plitka);
  letter-spacing: var(--trekking-imeni);
  color: var(--tekst);
}

.plitka-znachenie.chislo { font: var(--font-plitka); }

.plitka-podpis {
  margin-top: var(--otstup-4);
  font: var(--font-podpis);
  color: var(--tusklyy);
}

/* ========================================================================== */
/* Цена с выбором посёлка                                                     */
/* ========================================================================== */

/*
  Прайс-бокс из core, переложенный на одну колонку телефона: крупная цена,
  переключатель посёлков, условия выбранного. На широком экране блок не липнет
  сбоку — у нас колонка одна до 720 px, и липкий блок отнимал бы у дома ширину.
*/
.cena-blok {
  margin-top: var(--otstup-24);
  padding: var(--otstup-16);
  /* Стекло .kg-pbox из core */
  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);
}

.cena-glavnaya { margin: 0; }

.cena-chislo {
  display: block;
  font: var(--font-cena);
  letter-spacing: var(--trekking-imeni);
  color: var(--akcent);
}

.cena-data {
  display: block;
  font: var(--font-cifry);
  color: var(--tusklyy);
}

/* Крупная цена идёт за выбранным посёлком: строки остальных скрыты атрибутом,
   а display: block выше иначе перебил бы его */
.cena-chislo[hidden],
.cena-data[hidden] { display: none; }

/* Переключатель — ряд обычных вторичных кнопок системы, а не новый компонент */
.cena-vybor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otstup-8);
  margin-top: var(--otstup-16);
}

/*
  Сегменты .kg-seg из core: все кнопки тянутся поровну, выпуклые; включённая —
  тёмная вдавленная (комментарий в core: «своя вдавленность, не nm-in — его белая
  подсветка на тёмном фоне даёт кляксу»). Собрано поверх вторичной кнопки системы.
*/
.cena-vybor-knopka {
  flex: 1 1 auto;
  min-width: 60px;
  background: var(--pole-fon);
  border-color: var(--karta-liniya);
  color: var(--tekst);
  box-shadow: var(--ten-vypuklaya);
}

@media (hover: hover) {
  .cena-vybor-knopka:hover:not(:disabled):not([aria-pressed="true"]) {
    background: var(--karta-plotnaya);
    box-shadow: var(--ten-vypuklaya);
  }
}

.cena-vybor-knopka[aria-pressed="true"] {
  background: var(--tekst);
  border-color: transparent;
  color: var(--fon);
  box-shadow: var(--ten-segmenta);
}

.cena-posyolok {
  margin-top: var(--otstup-16);
  padding-top: var(--otstup-12);
  border-top: var(--liniya-1) solid var(--liniya);
}

.cena-posyolok-imya {
  margin: 0;
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.cena-posyolok-cena { margin: var(--otstup-4) 0 0; }

/* Имя посёлка — ссылка на его экран; подчёркивание, не акцент: это переход, а не действие */
.cena-posyolok-ssylka {
  color: var(--tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.cena-posyolok-uslovia {
  margin: var(--otstup-4) 0 0;
  font: var(--font-podpis);
  color: var(--tekst);
}

.cena-posyolok-uslovia:empty { display: none; }

/* Тип дома рядом с названием: чип, как в карточке модели core.
   Не акцент: акцент стоит ровно в четырёх местах (раздел 1) */
.dom-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--otstup-8);
  padding: var(--otstup-4) var(--otstup-12);
  /* Пилюля .kg-chip из core: мятная подложка, тёмно-зелёный текст */
  border-radius: var(--skruglenie-pilyuli);
  background: var(--chip-fon);
  color: var(--chip-tekst);
  font: var(--font-podpis-zhirnaya);
  letter-spacing: 0;
}

/* Теги модели — пилюли .kg-ptags из core: мятная подложка, тёмно-зелёный текст, 16 px */
.tegi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otstup-8);
  margin: var(--otstup-8) 0 0;
  padding: 0;
  list-style: none;
}

.teg {
  padding: var(--otstup-4) var(--otstup-12);
  border-radius: var(--skruglenie-pilyuli);
  background: var(--chip-fon);
  color: var(--chip-tekst);
  font: var(--font-podpis-zhirnaya);
}

/* Оговорка про акцию под крупной ценой — слова рядом с числом, как в core */
.cena-akciya {
  display: block;
  margin-top: var(--otstup-4);
  font: var(--font-podpis);
  color: var(--tusklyy);
}

/* Мета-строка карточки ленты: площадь · спальни · этажи одной строкой */
.karta-doma-meta {
  margin: var(--otstup-4) 0 0;
  font: var(--font-cifry);
  color: var(--tusklyy);          /* .kg-cmeta core: мета серая, имя и цена — чёрным и акцентом */
}

/* Площадь — крупно и чёрным, как значение плитки факта: по ней сравнивают и по ней
   отсортирована лента (решение владельца 16.09.2026) */
.karta-doma-ploshchad {
  font: var(--font-plitka);
  letter-spacing: var(--trekking-imeni);
  color: var(--tekst);
}

/* Обложка карточки с бейджем типа поверх — .kg-cph + .kg-badge из core:
   матовая пилюля в левом верхнем углу, стекло малого размытия, тень */
.karta-doma-oblozhka { position: relative; }

.karta-doma-badzh {
  position: absolute;
  left: var(--otstup-12);
  top: var(--otstup-12);
  z-index: 1;
  padding: var(--otstup-4) var(--otstup-12);
  border-radius: var(--skruglenie-pilyuli);
  background: var(--pole-fon);
  -webkit-backdrop-filter: var(--steklo-malo);
  backdrop-filter: var(--steklo-malo);
  box-shadow: var(--ten-badzha);
  color: var(--chip-tekst);
  font: var(--font-podpis-zhirnaya);
}

/* Где стоит дом. Не акцент и не жирный: это ориентир, а не решение */
.karta-doma-gde {
  margin: var(--otstup-4) 0 0;
  font: var(--font-podpis);
  color: var(--tusklyy);
}

.karta-doma-gde:empty { display: none; }

/* ========================================================================== */
/* Стекло: поверхности поверх контента (редакция 2 системы, 16.09.2026)         */
/* ========================================================================== */

/*
  Диалог, панель меню и обёртка таблицы — те же стеклянные панели, что карточка.
  Одним правилом в конце: специфичность та же, что у их собственных правил выше,
  а позже в файле — значит побеждает.
*/
.dialog,
.menu-panel,
.tablica-obertka {
  -webkit-backdrop-filter: var(--steklo);
  backdrop-filter: var(--steklo);
  border-color: var(--karta-liniya);
  box-shadow: var(--ten-podnyataya), var(--ten-blik);
}

/* ========================================================================== */
/* Шапка с возвратом                                                          */
/* ========================================================================== */

/*
  ШАПКА С ВОЗВРАТОМ. Обычная ссылка, а не нарисованная кнопка: страницу дома
  присылают в чат саму по себе, и у пришедшего по такой ссылке истории нет.
  Тач-цель 44 px набирается полем, а не размером шрифта.
*/
.shapka-doma {
  display: flex;
  align-items: center;
  min-height: var(--otstup-48);
  padding-block: var(--otstup-8);
}

.nazad {
  display: inline-flex;
  align-items: center;
  gap: var(--otstup-8);
  min-height: var(--tach);
  /* Поле слева съедено отрицательным отступом: стрелка стоит на оси названия */
  margin-left: calc(-1 * var(--otstup-8));
  padding: var(--otstup-8);
  border-radius: var(--skruglenie-knopki);
  color: var(--tusklyy);
  font: var(--font-podpis);
  text-decoration: none;
}

/* Стрелка — не акцент: акцент стоит ровно в четырёх местах (раздел 1).
   Размер и цвет currentColor берёт .znachok из komponenty.css. */

@media (hover: hover) {
  .nazad:hover { color: var(--tekst); background: var(--karta); }
}

.nazad:active { color: var(--tekst); background: var(--liniya); }

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

/* ========================================================================== */
/* Панель подборки                                                            */
/* ========================================================================== */

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

  Пусто — панели нет (атрибут hidden): учит кнопка «В подборку» на странице дома.
  display объявлен через :not([hidden]) — правило от 2026-09-16 в design-system.
*/
.podborka:not([hidden]) { display: grid; }

.podborka {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  gap: var(--otstup-8);
  /* Боковые поля держат ось колонки: на широком экране панель стоит над ней,
     а не у края окна. Процент у fixed-элемента считается от ширины окна. */
  padding: var(--otstup-12) max(var(--kraya), calc((100% - var(--kolonka)) / 2 + var(--kraya)))
           calc(var(--otstup-12) + env(safe-area-inset-bottom));
  /* Стекло: панель лежит поверх ленты, сквозь неё видно дома */
  background: var(--karta);
  -webkit-backdrop-filter: var(--steklo);
  backdrop-filter: var(--steklo);
  border-top: var(--liniya-1) solid var(--karta-liniya);
  box-shadow: var(--ten-paneli);
}

/* Запас снизу под панель — на body, один на все экраны, и только пока панель
   видна: две строки чипов и кнопка — 64 + 64 + 48 из ряда отступов. */
/* В мини-приложении отправку берёт нижняя кнопка Telegram (miniapp.js):
   двух кнопок отправки на экране нет (design-system, «Панель подборки») */
:root[data-miniapp] .podborka [data-otpravit] {
  display: none;
}

body:has(.podborka:not([hidden])) {
  padding-bottom: calc(var(--otstup-64) + var(--otstup-64) + var(--otstup-48) + env(safe-area-inset-bottom));
}

.podborka-ryad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--otstup-8);
}

/* «2 из 3»: правило игры видно до четвёртого нажатия, а не после (С10) */
.podborka-schyot {
  margin: 0;
  font: var(--font-cifry);
  color: var(--tusklyy);
}

.podborka-doma {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--otstup-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Дом в подборке — пилюля чипа (.kg-chip core) высотой под палец. Две тач-цели
   в одной пилюле: имя — ссылка на дом с текущим списком в адресе, крестик — снять */
.podborka-dom {
  display: inline-flex;
  align-items: stretch;
  min-height: var(--tach);
  border-radius: var(--skruglenie-pilyuli);
  background: var(--chip-fon);
  color: var(--chip-tekst);
}

.podborka-imya {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--otstup-4) 0 var(--otstup-12);
  border-radius: var(--skruglenie-pilyuli) 0 0 var(--skruglenie-pilyuli);
  color: inherit;
  font: var(--font-podpis-zhirnaya);
  text-decoration: none;
  transition: background-color var(--smena-cveta) var(--krivaya);
}

.podborka-snyat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tach);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 var(--skruglenie-pilyuli) var(--skruglenie-pilyuli) 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--smena-cveta) var(--krivaya);
}

@media (hover: hover) {
  .podborka-imya:hover,
  .podborka-snyat:hover { background: var(--podlozhka); }
}

.podborka-imya:active,
.podborka-snyat:active { background: var(--podlozhka); }

.podborka-imya:focus-visible,
.podborka-snyat:focus-visible {
  outline: var(--liniya-2) solid var(--akcent);
  outline-offset: 2px;
}

/* Вытеснение и «скопировано» — словами. Не акцент: статус — это текст */
.podborka-skazano {
  margin: 0;
  font: var(--font-podpis);
  color: var(--tekst);
}

.podborka-skazano:empty { display: none; }

/* Текст сообщения в диалоге: то же вдавленное поле, но в несколько строк */
.pole-vvod-mnogo {
  min-height: 0;
  padding: var(--otstup-12);
  resize: none;
}

/* Анимация 2 (design-system, раздел 5), 200 мс: новое в панели проявляется,
   а не выскакивает. Взято у blur-fade из Magic UI и переписано в CSS:
   без React, motion и размытия. Перезапускает mark.js. */
.proyavlenie { animation: proyavlenie var(--anim-podborka) var(--krivaya); }
@keyframes proyavlenie {
  from { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .proyavlenie { animation: none; }
}