/* RadarLots поверх Bootstrap 5: бренд, поверхности, то, чего нет классами.
   Сетка и композиция — Bootstrap. Цвет и шрифт — свои: логотип navy/cyan/amber,
   а не дефолтный #0d6efd. */

:root {
  --rl-ink: #0a2244;
  --rl-primary: #0d7a96;
  --rl-primary-rgb: 13, 122, 150;
  --rl-glow: #3ddcff;
  --rl-amber: #f5a623;
  --rl-shadow: 0 1px 2px rgba(10, 34, 68, .04), 0 10px 28px rgba(10, 34, 68, .06);
  --rl-shadow-hover: 0 2px 6px rgba(10, 34, 68, .06), 0 16px 36px rgba(10, 34, 68, .1);
  --bs-primary: #0d7a96;
  --bs-primary-rgb: 13, 122, 150;
  --bs-link-color: #0d7a96;
  --bs-link-hover-color: #0a5f75;
  --bs-focus-ring-color: rgba(13, 122, 150, .28);
  --bs-body-font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  --bs-body-bg: #fff;
  --bs-tertiary-bg: #f0f3f6;
  --bs-border-color: rgba(10, 34, 68, .1);
  --bs-secondary-color: rgba(10, 34, 68, .64);
  --bs-border-radius: .9rem;
  --bs-border-radius-lg: 1.05rem;
}

[data-bs-theme="dark"] {
  --rl-primary: #4ec3db;
  --rl-primary-rgb: 78, 195, 219;
  --rl-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 12px 32px rgba(0, 0, 0, .32);
  --rl-shadow-hover: 0 4px 14px rgba(0, 0, 0, .4);
  --bs-primary: #4ec3db;
  --bs-primary-rgb: 78, 195, 219;
  --bs-link-color: #7ad7e8;
  --bs-link-hover-color: #b4ecf5;
  --bs-focus-ring-color: rgba(78, 195, 219, .35);
  --bs-body-bg: #171f27;
  --bs-tertiary-bg: #0e141a;
  --bs-border-color: rgba(222, 226, 230, .12);
  --bs-secondary-color: rgba(222, 226, 230, .72);
}

.btn-primary {
  --bs-btn-bg: var(--rl-primary);
  --bs-btn-border-color: var(--rl-primary);
  --bs-btn-hover-bg: #0a657c;
  --bs-btn-hover-border-color: #0a657c;
  --bs-btn-active-bg: #085566;
  --bs-btn-active-border-color: #085566;
  --bs-btn-disabled-bg: var(--rl-primary);
  --bs-btn-disabled-border-color: var(--rl-primary);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #0a2244;
  --bs-btn-hover-color: #0a2244;
  --bs-btn-active-color: #0a2244;
  --bs-btn-hover-bg: #7ad7e8;
  --bs-btn-hover-border-color: #7ad7e8;
  --bs-btn-active-bg: #b4ecf5;
  --bs-btn-active-border-color: #b4ecf5;
}

.btn-outline-primary {
  --bs-btn-color: var(--rl-primary);
  --bs-btn-border-color: var(--rl-primary);
  --bs-btn-hover-bg: var(--rl-primary);
  --bs-btn-hover-border-color: var(--rl-primary);
  --bs-btn-active-bg: var(--rl-primary);
  --bs-btn-active-border-color: var(--rl-primary);
}

.text-bg-primary {
  color: #fff !important;
  background-color: var(--rl-primary) !important;
}

[data-bs-theme="dark"] .text-bg-primary {
  color: #0a2244 !important;
}

.form-check-input:checked {
  background-color: var(--rl-primary);
  border-color: var(--rl-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--rl-primary) 55%, var(--bs-border-color));
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  letter-spacing: -.03em;
  color: var(--rl-ink);
}

[data-bs-theme="dark"] .navbar-brand {
  color: var(--bs-body-color);
}

.navbar-brand img,
.navbar-brand svg {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}

/* Страница «О проекте»: узкая колонка, чтобы абзац читался, а не тянулся
   на ширину выдачи лотов. */
.about {
  max-width: 40rem;
}

.properties-item {
  padding: 0;
}

/* Фото карточки: фиксированная пропорция, чтобы строки не прыгали по высоте
   при снимках разного размера.

   `width: 100%` здесь обязателен, хотя блок и так занял бы всю колонку.
   В разметке у блока есть ещё `h-100`, то есть высота задана колонкой; при
   `width: auto` и заданной высоте `aspect-ratio` считает из пропорции не
   высоту, а **ширину**, и фотография вылезает за свою колонку на соседний
   текст (замерено в Chrome: колонка 324 px, блок 414 px = 311 × 4/3).
   Явная ширина делает обе оси определёнными, и пропорция перестаёт
   участвовать в расчёте. На мобильном, где колонки стоят в столбик и высота
   свободна, она по-прежнему задаёт высоту от ширины — ради этого и оставлена. */
.lot-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
}

.lot-photo img {
  /* Блочная, а не строчная: у строчной картинки под низом остаётся полоса
     под нижние выносные элементы строки. */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.lot-photo .placeholder-icon {
  font-size: 2.5rem;
  color: var(--bs-secondary-color);
}

/* Описание лота бывает на несколько экранов — где показываем, режем по строкам. */
.lot-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- карточка в списке ---------------------------------------------------
   Замеры до правки (Chrome, боевая выдача): карточка 313 px одинаковой высоты
   у всех лотов, 2,2 карточки в экран на 1600 px и 0,42 на 390 px. Разбор —
   docs/research/ui-review.md. */

.lot-card {
  /* Позиционированный предок для stretched-link заголовка: кликается вся
     карточка, отдельная кнопка «Подробнее» не нужна. */
  border-color: transparent;
  box-shadow: var(--rl-shadow);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.lot-card:hover {
  /* Два пикселя — ещё читается как «можно нажать», дальше карточки прыгают
     при прокрутке. */
  transform: translateY(-2px);
  box-shadow: var(--rl-shadow-hover);
}

.lot-card:hover .lot-photo img {
  transform: scale(1.04);
}

/* Заголовок — имя объекта от организатора. Две строки: третья почти всегда
   означает, что в названии лота живёт целое описание. */
.lot-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lot-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .5rem;
  border-radius: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
}

/* Обременение — не такой же признак, как площадь: это риск сделки. */
.lot-tag-warn {
  color: var(--bs-warning-text-emphasis);
  background: var(--bs-warning-bg-subtle);
}

.lot-platform {
  overflow-wrap: anywhere;
}

/* Отступы внутри карточки. На узком экране колонки становятся строками, и
   вертикальные отступы складываются: четыре блока по 1rem сверху и снизу — это
   128 px пустоты на карточку высотой в 300. */
.lot-pane {
  padding: 1rem;
}

@media (max-width: 991.98px) {
  .lot-pane {
    padding: .5rem .75rem;
  }

  .lot-pane:first-child {
    padding-top: .75rem;
  }
}

/* Разделители между колонками — только там, где колонки стоят рядом. На узком
   экране они превратились бы в горизонтальные полосы посреди карточки. */
@media (min-width: 992px) {
  .lot-col-split {
    border-left: 1px solid var(--bs-border-color);
  }
}

/* Полоса фактов: адрес, кадастровый номер, задаток — только те, что есть.
   Колонка с прочерками занимала бы место у 59% базы (у лотов Федресурса этих
   полей нет), а полоса просто короче или отсутствует. */
.lot-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.lot-fact {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Статус точкой: в выдаче рядом стоят лоты, куда ещё можно подать заявку, и
   лоты, где всё кончилось. Цвет читается раньше слова. */
.lot-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: var(--bs-secondary-color);
}

.lot-dot-open { background: var(--bs-success); }
.lot-dot-soon { background: var(--bs-primary); }
.lot-dot-done { background: var(--bs-secondary-color); }

/* --- чипсы активных условий ------------------------------------------------
   Отвечают на вопрос «что сейчас включено» над выдачей. Раньше ответ требовал
   раскрыть панель и просмотреть глазами пятнадцать полей. */
.lot-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .7rem;
  border: 1px solid transparent;
  border-radius: 2rem;
  font-size: .8125rem;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 1px var(--bs-border-color);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.lot-chip:hover {
  border-color: transparent;
  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
  box-shadow: 0 0 0 1px var(--bs-danger-border-subtle);
}

/* Активный пресет: чип, которому соответствует текущая выдача. */
.lot-chip-active {
  border-color: transparent;
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  box-shadow: 0 0 0 1px var(--bs-primary);
}

/* Звёздочка избранного. Своим слоем поверх stretched-link заголовка: без
   z-index нажатие перехватила бы ссылка на карточку. */
.lot-star {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
  line-height: 1;
}

.lot-star .btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lot-star .btn:hover .bi-star {
  color: var(--bs-warning) !important;
}

/* Место под звёздочку в колонке сроков, чтобы она не легла на дату. */
@media (min-width: 992px) {
  .lot-card .lot-col-split:last-of-type {
    padding-right: 2.25rem;
  }
}

/* Число лотов в кластере — не такой же признак, как площадь: это главное, что
   отличает карточку адреса от карточки лота. */
.lot-tag-count {
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
}

/* Ссылка в полосе фактов должна перебивать stretched-link карточки. */
.lot-cluster-link {
  z-index: 2;
  color: var(--bs-primary);
  text-decoration: none;
}

.lot-cluster-link:hover { text-decoration: underline; }

.lot-row-star {
  width: 2rem;
  text-align: center;
}

/* Заголовок группы расширенного поиска. Стрелка поворачивается — единственный
   способ показать, свёрнута группа или раскрыта, не подписывая это словами. */
.filter-group-toggle {
  color: var(--bs-body-color);
  font-weight: 500;
}

.filter-group-toggle .bi-chevron-down {
  transition: transform 160ms ease;
}

.filter-group-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Выпадающий мультивыбор: тот же скролл, что и у блока фильтра, иначе список
   регионов растянул бы меню на два экрана. */
.dropdown-menu.filter-box {
  min-width: 16rem;
  max-height: 18rem;
}

/* --- строчный режим выдачи ------------------------------------------------- */
.lot-rows td,
.lot-rows th {
  vertical-align: middle;
}

.lot-row-meta {
  font-size: .75rem;
  line-height: 1.2;
}

.lot-sep {
  margin: 0 .35rem;
  opacity: .5;
}

/* --- типографика -----------------------------------------------------------
   Мелкий серый — самое читаемое место карточки (адрес, сроки, факты) и в
   дефолтах Bootstrap самое бледное. Контраст задан в токенах темы выше. */
body {
  font-size: .9375rem;
  letter-spacing: -.01em;
}

/* --- тёмная тема: утилиты Bootstrap, которые её не знают -------------------
   `.table-light`, `.bg-white` и `.text-bg-light` задают светлый фон константой,
   а не переменной темы. В тёмной теме шапки таблиц оставались почти белыми
   (замерено: rgb(248, 249, 250) на семи таблицах — строчный режим выдачи и
   шесть таблиц вкладки эксплуатации).

   Правило здесь, а не правка каждой разметки: мест семь, они в разных файлах,
   и любое новое `table-light` сломало бы тему заново. Утилита продолжает
   означать «светлее фона», просто светлее считается от темы. */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--bs-secondary-bg);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .text-bg-light {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-tertiary-bg) !important;
}

/* Движение — только осмысленное и только для тех, кто его не запрещал. */
@media (prefers-reduced-motion: reduce) {
  .lot-card,
  .lot-card:hover,
  .lot-chip,
  .lot-photo img,
  .filter-group-toggle .bi-chevron-down,
  .profile-bar-toggle .bi-chevron-down {
    transition: none;
    transform: none;
  }
}

.filter-box {
  max-height: 11rem;
  overflow-y: auto;
}

.filter-box .form-check-label {
  cursor: pointer;
}

.gallery-thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
}

/* Карусель карточки: клик ведёт на оригинал, курсор это обещает. */
.gallery-frame {
  display: block;
  cursor: zoom-in;
}

/* Форма торгов на карточке лота. Цвет — механика цены: публичка вниз,
   аукцион вверх, конкурс по критериям. Крупнее статусных бейджей, иначе
   снова теряется среди площадки и категории. */
/* --- направление цены: стрелка и подпись под ценой -------------------------
   Подход tbankrot: у аукциона стрелка вверх, у публичного предложения вниз.
   Цвета тоже их — зелёный вверх, красный вниз: это движение цены, а не оценка.
   Переменные темы, а не константы, — в тёмной теме константа осталась бы
   рассчитанной на белый фон. */
.price-arrow {
  font-size: .8em;
  margin-left: .2em;
  vertical-align: .05em;
  -webkit-text-stroke: .6px currentColor; /* тонкий глиф иконок теряется рядом с жирной ценой */
}
.price-arrow-up { color: var(--bs-success); }
.price-arrow-down { color: var(--bs-danger); }

/* Слово с пояснением во всплывающей подсказке: пунктир — привычный знак
   «наведи, тут есть что прочесть», как у tbankrot под ценой. */
.price-hint {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* Подпись под ценой: «текущая цена», «начальная цена», «порог заявки». Мельче
   и бледнее соседних строк — это пояснение к числу, а не ещё одно число. */
.lot-price-caption {
  font-size: .75rem;
  line-height: 1.2;
  margin-top: .2rem;
  color: var(--bs-secondary-color);
}

.bidd-form {
  display: inline-block;
  padding: .4rem .85rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
}
.bidd-form-offer {
  background: #ffe08a;
  color: #5c3d00;
}
.bidd-form-auction {
  background: #9ec5fe;
  color: #052c65;
}
.bidd-form-contest {
  background: #a6e9d5;
  color: #0a3622;
}
.bidd-form-other {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .bidd-form-offer {
  background: #664d03;
  color: #ffe08a;
}
[data-bs-theme="dark"] .bidd-form-auction {
  background: #084298;
  color: #cfe2ff;
}
[data-bs-theme="dark"] .bidd-form-contest {
  background: #0a3622;
  color: #a6e9d5;
}

/* Значения полей карточки: прочерк должен быть виден как прочерк, а не как
   пропущенная строка. */
.field-value {
  overflow-wrap: anywhere;
}

a.field-value {
  text-decoration: none;
}
a.field-value:hover {
  text-decoration: underline;
}

/* Карта. Высота задана в vh, а не пикселями: на телефоне фиксированные 600 px
   не помещаются в экран вместе с фильтрами, и карта выезжает за край. Нижняя
   граница в rem не даёт ей схлопнуться на коротком окне. */
.lot-map {
  height: 65vh;
  min-height: 22rem;
  z-index: 0; /* иначе тайлы перекрывают выпадающие списки фильтров */
}

/* --- список рядом с картой -------------------------------------------------
   Приближение на карте — это отбор: человек сузил область до интересного
   двора. Панель показывает, что в ней лежит, и пересобирается на каждом
   движении карты.

   Высота равна карте и задана той же величиной: разъедься они — на широком
   экране рядом с картой висел бы обрезок или пустота. На узком экране колонки
   встают друг под друга, и привязка к высоте карты теряет смысл — там панель
   меряется своим содержимым с потолком, чтобы не выдавливать подпись под
   картой на второй экран. */
.map-panel {
  height: 65vh;
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-panel-list {
  overflow-y: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain; /* прокрутка списка не тянет за собой страницу */
}
@media (max-width: 991.98px) {
  .map-panel {
    height: auto;
    max-height: 60vh;
  }
}

/* Строка списка. Подсветка берётся из переменных темы, а не константой:
   `.bg-light` задаёт светлый фон числом и в тёмной теме остаётся почти белым —
   на этом панель уже спотыкалась на семи таблицах. */
.map-panel-row {
  cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color);
}
.map-panel-row:last-child {
  border-bottom: 0;
}
.map-panel-row:hover,
.map-panel-row.is-active {
  background: var(--bs-tertiary-bg);
}
/* Пометка строки, на которую увели кликом с карты: подсветка гаснет сама,
   иначе после второго клика подсвеченными оставались бы обе. */
.map-panel-row.is-active {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* Строка списка рядом с картой: название в две строки, как у карточки, —
   у Федресурса в название утекает абзац извещения. */
.map-panel-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .9rem;
  line-height: 1.3;
}
/* Звёздочка поверх ссылки строки (`stretched-link`): без своего слоя нажатие
   перехватила бы ссылка. */
.map-panel-star {
  position: relative;
  z-index: 2;
}

/* Плашка с ценой вместо булавки — одиночный лот на карте, как у tbankrot.
   Цвета заданы числами, а не переменными темы: карта в JS API 2.1 тёмной
   схемы не имеет и остаётся светлой при тёмной панели, так что и плашка
   должна быть светлой всегда. */
.price-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 8px;
  border: 2px solid #0d7a96;
  border-radius: 999px;
  background: #fff;
  color: #0a2244;
  font: 600 12px/18px Manrope, "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(10, 34, 68, .25);
  cursor: pointer;
}
.price-pin-up { color: #198754; }
.price-pin-down { color: #dc3545; }

/* Мини-карта в карточке лота. Ниже общей: она отвечает на вопрос «где это»,
   а не «где вообще есть лоты», и не должна выдавливать карточку на второй
   экран. Фиксированная высота в rem, а не vh: карточку листают целиком, и
   доля экрана здесь ничего не значит. */
.lot-map-small {
  height: 20rem;
  z-index: 0;
}

/* Содержимое балуна: карта рисует его своим шрифтом, а панель — системным.
   Без этого подпись на карте выглядит из другого приложения. Селектор у
   Яндекса версионный (`ymaps-2-1-79-...`), поэтому цепляемся за общий
   префикс классов, а не за конкретную сборку API. */
[class*="balloon__content"] {
  font-family: inherit;
}

/* --- календарь цен: лестница ступеней --------------------------------------
   Одна величина на строку (цена ступени), поэтому полоса, а не графический
   пакет. Цвета берутся из переменных темы, а не константами: `.bg-light` и
   соседи задают светлый фон числом и в тёмной теме остаются почти белыми —
   на этом панель уже спотыкалась на семи таблицах.

   Высота задана явно: у пустого span её нет, и без неё полосы не видно
   вовсе. */
/* Дорожка: занимает всю свободную ширину строки, полоса внутри меряется от
   неё. Без отдельной дорожки процент пришлось бы вешать на сам flex-элемент,
   а `flex-grow` его переопределяет — все полосы выходили одной длины. */
.lot-step-track {
  display: block;
  line-height: 0;
}

.lot-step-bar {
  display: inline-block;
  height: .6rem;
  min-width: .25rem;
}

/* Прошедшая ступень — приглушённая: она уже не предложение, а история. */
.lot-step-bar--past {
  background-color: var(--bs-secondary-bg);
}

/* Действующая ступень — то, что можно купить сегодня. */
.lot-step-bar--now {
  background-color: var(--bs-primary);
}

/* Будущая ступень — объявленный план. Зелёный здесь тот же, которым размечено
   снижение в остальной выдаче, чтобы «дешевле» читалось одинаково. */
.lot-step-bar--next {
  background-color: var(--bs-success);
  opacity: .55;
}

/* --- поверхности страницы -------------------------------------------------- */
.app-nav {
  background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--bs-border-color);
}

.app-nav-links .nav-link {
  color: var(--bs-secondary-color);
  padding-inline: .7rem;
  border-radius: 999px;
}

.app-nav-links .nav-link:hover {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.app-nav-links .nav-link.active {
  color: var(--rl-ink);
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

[data-bs-theme="dark"] .app-nav-links .nav-link.active {
  color: var(--bs-body-color);
}

.app-icon-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  border-radius: 999px;
  text-decoration: none;
}

.app-icon-btn:hover {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

.app-support {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-inline: .65rem;
  color: var(--bs-secondary-color);
  border-radius: 999px;
}

.app-support:hover {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

.card {
  box-shadow: var(--rl-shadow);
}

.card.border {
  border-color: color-mix(in srgb, var(--bs-border-color) 65%, transparent);
}

.filters-panel {
  box-shadow: var(--rl-shadow);
}

.filter-trigger {
  border-radius: .75rem;
  background: var(--bs-body-bg);
}

.filter-trigger .badge {
  vertical-align: baseline;
}

.profile-bar {
  width: fit-content;
  max-width: 100%;
  padding: .45rem .75rem;
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  border-radius: 999px;
  background: var(--bs-body-bg);
  box-shadow: var(--rl-shadow);
}

.profile-bar-label {
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding-inline: .25rem;
}

.profile-bar-toggle {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
}

.profile-bar-toggle .bi-chevron-down {
  margin-left: auto;
  transition: transform 160ms ease;
}

.profile-bar-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.profile-bar .form-control {
  width: 8.5rem;
  border-radius: 999px;
}

.dropdown-menu {
  border-radius: .9rem;
  border-color: color-mix(in srgb, var(--bs-border-color) 80%, transparent);
  box-shadow: var(--rl-shadow-hover);
}

.pagination {
  --bs-pagination-active-bg: var(--rl-primary);
  --bs-pagination-active-border-color: var(--rl-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-color: var(--rl-primary);
  gap: .25rem;
}

.pagination .page-link {
  border-radius: 999px;
  border: 0;
  min-width: 2.25rem;
  text-align: center;
}

.lot-card .fs-5,
.lot-rows td.text-end {
  font-variant-numeric: tabular-nums;
}

.btn-group .btn {
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* --- телефон ----------------------------------------------------------------
   Шапка обязана быть одной строкой: «О проекте» и «Эксплуатация» ломали её
   пополам. До первой карточки — поля поиска, а не профиль и не простыня чипсов.
   Нажатие без курсора не поднимает карточку: :hover на пальце залипает. */
@media (hover: none) {
  .lot-card:hover {
    transform: none;
    box-shadow: var(--rl-shadow);
  }

  .lot-card:hover .lot-photo img {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .app-nav .container {
    flex-wrap: nowrap;
    gap: .15rem;
  }

  .app-nav-links .nav-link {
    padding-inline: .45rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
  }

  .lot-photo {
    aspect-ratio: 16 / 9;
    max-height: 12rem;
  }

  /* Звёздочка сверху справа карточки. На фото она лежит на снимке, без фото —
     на заголовке, и без отступа перекрывала бы текст. */
  .lot-card:not(:has(.lot-photo)) > .row > .lot-pane:not(.lot-col-split) {
    padding-right: 2.25rem;
  }

  .lot-col-price,
  .lot-col-dates {
    background: var(--bs-tertiary-bg);
  }

  .lot-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .15rem;
    margin-inline: -.25rem;
    padding-inline: .25rem;
  }

  .lot-chips::-webkit-scrollbar {
    display: none;
  }

  .lot-chips .lot-chip {
    flex-shrink: 0;
  }
}

@media (max-width: 767.98px) {
  /* 16 px на полях — иначе iOS зумит страницу при фокусе. */
  .form-control,
  .form-select,
  .btn {
    font-size: 1rem;
  }

  .filters-panel .card-body {
    padding: .75rem;
  }

  .profile-bar {
    width: 100%;
    border-radius: 1rem;
  }

  .profile-bar .form-control {
    width: 100%;
    flex: 1 1 8rem;
  }

  .filters-submit {
    width: 100%;
  }

  .filters-submit .btn-primary {
    flex-grow: 1;
  }

  .results-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .results-toolbar::-webkit-scrollbar {
    display: none;
  }

  .results-toolbar > * {
    flex-shrink: 0;
  }
}

@media (max-width: 359.98px) {
  .navbar-brand .brand-text {
    display: none;
  }
}

/* --- поэтажные планы (/plans) ----------------------------------------------
   План — лист бумаги: белый в обеих темах, иначе светлый скан на тёмном фоне
   читается хуже, чем без подложки. Толщина обводки не масштабируется вместе с
   планом: у 16А картинка 700 px растянута вдвое-втрое, и обводка в единицах
   картинки превращалась бы в жирную рамку. */
.plan-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.plan-svg {
  display: block;
  width: 100%;
  height: auto;
}

.plan-bg {
  opacity: .45;
  filter: grayscale(1);
}

/* Наведение по всей площади места, а не только по закрашенному: в режиме
   сверки заливки нет, и без этого подсказку ловил бы один контур. */
.pl rect {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}

#plan-svg a {
  text-decoration: none;
}

.pl text {
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.pl-selling rect { fill: #2f9e44; stroke: #237a34; }
.pl-selling text { fill: #fff; }
/* «Объявлено» — контуром: приём заявок ещё не начался, место не продаётся. */
.pl-announced rect { fill: #fff; stroke: #22893e; stroke-dasharray: 3 2; stroke-width: 1.5px; }
.pl-announced text { fill: #1c6c31; }
.pl-failed rect { fill: #f08c00; stroke: #c26f00; }
.pl-failed text { fill: #fff; }
.pl-sold rect { fill: #4263eb; stroke: #2f4ac0; }
.pl-sold text { fill: #fff; }
/* «Куплено мной» — фиолетовым: отдельно от синего «продано другим» по оттенку,
   белая цифра на нём читается (контраст ~5,8:1). Владелец 06.10.2026. */
.pl-mine rect { fill: #9c36b5; stroke: #6f2582; }
.pl-mine text { fill: #fff; }
.pl-none rect { fill: #eceef1; stroke: #aab2bb; }
.pl-none text { fill: #7a848f; font-weight: 600; }

/* Цена — снизу, на белой плашке ценника, тёмным и тоньше номера. Одинаковые
   белые цифры номера и цены владелец путал (24.09.2026). */
/* Специфичнее правил заливки места по состоянию (`.pl-selling rect`), наведения
   и подсветки: плашка — отдельный прямоугольник внутри того же места, и без
   этого она красилась в цвет места вместе с ним. */
#plan-svg .pl .pl-band,
#plan-svg .pl:hover .pl-band,
#plan-svg .pl:focus .pl-band,
#plan-svg .pl-hit .pl-band {
  fill: #fff;
  fill-opacity: .93;
  stroke: none;
}

.pl .pl-price {
  fill: #14532d;
  font-weight: 600;
}

.pl-sold .pl-price { fill: #2f4ac0; }
.pl-mine .pl-price { fill: #6f2582; }
.pl-failed .pl-price { fill: #8a4b00; }

/* Кружок — сколько ступеней цены осталось, считая текущую (`plans.Descent`):
   1 — минимум. Одна шкала красного, от почти белого (11 и больше) до тёмного
   (минимум), посчитана в OKLCH, оттенок 27°. Цифра — тёмная на трёх светлых
   ступенях, белая на двух тёмных, контраст от 4,9:1. По светлоте средние
   ступени с зелёным местом почти сливаются (1,2–1,5:1), поэтому у кружка белое
   кольцо: форма видна при любом зрении, а значение несёт цифра. */
.pl-cd circle {
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.pl .pl-cd text { font-weight: 700; }
.pl-cd0 circle { fill: #9e1618; }
.pl-cd1 circle { fill: #d03833; }
.pl-cd2 circle { fill: #f58c81; }
.pl-cd3 circle { fill: #ffc3bc; }
.pl-cd4 circle { fill: #fff0ee; }
/* Цифра в кружке — и на месте плана (`.pl`), и в карточке подсказки
   (`.tip-cd`): там у кружка другой предок, а белая цифра по умолчанию на
   светлой ступени пропала бы. */
.pl .pl-cd0 text,
.pl .pl-cd1 text,
.tip-cd .pl-cd0 text,
.tip-cd .pl-cd1 text { fill: #fff; }
.pl .pl-cd2 text,
.pl .pl-cd3 text,
.pl .pl-cd4 text,
.tip-cd .pl-cd2 text,
.tip-cd .pl-cd3 text,
.tip-cd .pl-cd4 text { fill: #3b0d0c; }

.plan-cd-swatch {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
}

/* В легенде кружок стоит на фоне страницы, а не на зелёном месте: белое кольцо
   там не видно, и светлая ступень «11+» пропадала совсем. */
.plan-cd-swatch .pl-cd circle {
  stroke: #b98a86;
  stroke-width: 1px;
}

/* Место вне выбранного месяца крайней даты — гаснет, но остаётся на плане.
   Гаснет цветом, а не прозрачностью: сквозь полупрозрачное место проступал
   напечатанный на плане номер, и цифры двоились. */
#plan-svg .pl-off rect { fill: #f4f5f7; stroke: #d7dbe0; }
#plan-svg .pl-off text { fill: #c5cad0; }
#plan-svg .pl-off .pl-dot,
#plan-svg .pl-off .pl-cd,
#plan-svg .pl-off .pl-band { opacity: .3; }

.plan-months {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.plan-months .btn {
  --bs-btn-padding-y: .15rem;
  --bs-btn-padding-x: .6rem;
  --bs-btn-font-size: .8125rem;
}

.pl-dot {
  fill: #f08c00;
  stroke: #fff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

#plan-svg .pl:hover rect,
#plan-svg .pl:focus rect {
  stroke: #111;
  stroke-width: 2px;
  outline: none;
}

#plan-svg .pl-hit rect {
  stroke: #d6336c;
  stroke-width: 3px;
}

/* Сверка разметки: подложка в полную силу, места полупрозрачными — видно,
   стоит ли прямоугольник на своём напечатанном номере. */
.plan-check .plan-bg {
  opacity: 1;
  filter: none;
}

#plan-svg.plan-check .pl rect {
  fill: none;
  stroke: #d6336c;
  stroke-width: 1.5px;
}

.plan-check .pl text,
.plan-check .pl-dot,
.plan-check .pl-cd,
.plan-check .pl-band {
  display: none;
}

.plan-swatch {
  width: .75em;
  height: 1.05em;
  vertical-align: -.15em;
}

.plan-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
}

.plan-legend-item {
  white-space: nowrap;
}

.plan-floors .nav-link {
  padding: .3rem .75rem;
}

/* Карточка подсказки места. Значение крупно и контрастно, подпись к нему —
   приглушённо; факты — таблицей «подпись — значение», оговорки отдельно. */
.plan-tip {
  position: absolute;
  z-index: 1080;
  width: min(18.5rem, calc(100vw - 16px));
  padding: .7rem .85rem .75rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  pointer-events: none;
}

.tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tip-title {
  font-size: 1rem;
  font-weight: 700;
}

.tip-state {
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.tip-state-selling { background: #2f9e44; color: #fff; }
.tip-state-sold { background: #4263eb; color: #fff; }
.tip-state-mine { background: #9c36b5; color: #fff; }
.tip-state-announced { border: 1px dashed #22893e; color: #1c6c31; }
.tip-state-failed { background: #f08c00; color: #231400; }
.tip-state-none {
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .tip-state-announced { color: #8ce99a; border-color: #8ce99a; }

.tip-muted {
  color: var(--bs-secondary-color);
  font-size: .78rem;
}

.tip-strong {
  font-weight: 600;
}

.tip-price {
  margin-top: .4rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.tip-section {
  margin-top: .6rem;
  padding-top: .55rem;
  border-top: 1px solid var(--bs-border-color);
}

.tip-countdown {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.tip-cd {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.tip-cd text {
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  text-anchor: middle;
}

/* В карточке фон светлый (или тёмный в тёмной теме), а не зелёное место:
   белое кольцо здесь не видно, и светлая ступень «11+» теряла край. */
.tip-cd .pl-cd circle {
  stroke: #b98a86;
  stroke-width: 1px;
}

/* Лесенка графика: пройденные ступени серые, текущая — зелёная, как место на
   плане, будущие — светло-зелёные, недостижимые (позже конца приёма заявок) —
   пунктиром. */
.tip-ladder {
  display: block;
  width: 100%;
  height: 34px;
  margin: .55rem 0 .4rem;
}

.tip-bar-passed { fill: #ced4da; }
.tip-bar-current { fill: #2f9e44; }
.tip-bar-future { fill: #b7e4c0; }
.tip-bar-late {
  fill: none;
  stroke: #adb5bd;
  stroke-width: 1px;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

[data-bs-theme="dark"] .tip-bar-passed { fill: #495057; }
[data-bs-theme="dark"] .tip-bar-future { fill: #2b5a37; }

.tip-ladder-axis {
  display: flex;
  justify-content: space-between;
  margin: -.2rem 0 .45rem;
  color: var(--bs-secondary-color);
  font-size: .68rem;
}

/* Ступени графика: подпись | дата | цена. Дата и цена — в своих колонках и
   не переносятся; цифры моноширинные, чтобы цены стояли столбиком. */
.tip-steps {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .15rem .6rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.tip-steps > span:nth-child(3n + 1) { color: var(--bs-secondary-color); }
.tip-steps > span:nth-child(3n + 2) { color: var(--bs-secondary-color); text-align: right; }
.tip-steps > span:nth-child(3n) { text-align: right; font-weight: 600; white-space: nowrap; }

.tip-drop {
  color: #1c6c31;
  font-weight: 600;
}

[data-bs-theme="dark"] .tip-drop { color: #8ce99a; }

.tip-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .75rem;
  margin: 0;
  font-size: .8rem;
}

.tip-facts:not(:has(dt)) {
  display: none;
}

.tip-facts dt {
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.tip-facts dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tip-warn {
  margin-top: .5rem;
  padding: .35rem .5rem;
  border-radius: .45rem;
  background: #fff4e6;
  color: #7a3e00;
  font-size: .78rem;
}

[data-bs-theme="dark"] .tip-warn {
  background: rgba(240, 140, 0, .16);
  color: #ffc078;
}

.tip-note {
  margin: .5rem 0 0;
  color: var(--bs-secondary-color);
  font-size: .8rem;
}

.tip-label {
  margin-bottom: .2rem;
  color: var(--bs-secondary-color);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tip-history {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bs-secondary-color);
  font-size: .78rem;
}

.plan-tip-touch {
  pointer-events: auto;
}