/* ─── Токены и база ──────────────────────────────────────────────────────────
   Всё, от чего зависят остальные файлы: палитра, шкалы, сброс, фокус.
   Грузится ПЕРВЫМ (см. порядок <link> в index.html).

   CSS разложен по файлам 04.08 при переходе к адаптивной вёрстке: правки
   ленты, экрана лота и каркаса идут одновременно, а в одном `<style>` внутри
   index.html они затирали бы друг друга. Порядок файлов = порядок секций в
   прежнем `<style>`, поэтому каскад не изменился.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── Шрифт: САМОХОСТИНГ ────────────────────────────────────────────────
   CSP страницы — `default-src 'self'`, внешних загрузок у приложения нет
   вообще (и не должно быть: чужой CDN из РФ бывает недоступен, а шрифт с
   `font-display: swap` в этом случае просто не приедет). Файл — Inter
   Variable, подмножество «кириллица + латиница + знаки, которые мы реально
   печатаем» (₽, №, м², ·, —, …), собран из полного Inter[opsz,wght].ttf:
   ось opsz зафиксирована, ось wght 100–900 осталась живой → одно начертание
   на все веса, 77 КБ, одна загрузка. */
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-var-cyr-lat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Токены ────────────────────────────────────────────────────────────
   ПЕРЕКРАСКА 03.09.2026 (просьба юзера): «дизайн как в findash, только акцент
   зелёный». Из findash взяты ИДИОМА и палитра — светло-серая канва, белые
   карточки со скруглением, системный шрифт (на iPhone и Mac это настоящий
   SF Pro), сгруппированные врезанные списки. Акцент — зелёный.

   ⚠️ ТЁМНОЙ ТЕМЫ ЗДЕСЬ ПО-ПРЕЖНЕМУ НЕТ, и это не забывчивость. Тему Telegram
   (`--tg-theme-*`) приложение не читает по решению юзера: с наследованием в
   тёмном клиенте светлая вёрстка оказывалась на тёмных подложках. Пять файлов
   разметки написаны в предположении «одна схема» и про тему не знают ни одним
   правилом — вводить её надо целиком и отдельной работой, а не заодно.

   КОНТРАСТЫ ПОСЧИТАНЫ (WCAG), а не подобраны на глаз:
     accent #1A7F37   белый текст на нём 5.08 · сам на белом 5.08 · на канве 4.55
     accent-strong    6.61 на белом        ink 17.0        ink-soft 6.75
     warn 5.56        danger 5.38          ink-3 4.6 (только крупный текст)
   Ни одного значения ниже 4.5 там, где стоит мелкий текст. Поднимаешь
   светлоту акцента — пересчитай, «зеленее» почти всегда значит «светлее». */
:root {
  color-scheme: light;

  /* ─── Зелёный акцент ───
     `#34C759` (системный зелёный Apple) на белом даёт 2.2 — им нельзя ни
     писать, ни заливать кнопку с белым текстом. Поэтому взят притемнённый
     оттенок того же семейства: он работает И заливкой, И текстом, то есть
     второй «тёмной копии для подписей» (как `--accent-ink` в findash) здесь
     не нужно вовсе. */
  --accent: #1A7F37;          /* кнопки, активная вкладка, ссылки, значки */
  --accent-strong: #146B30;   /* нажатие, логотип, заголовки ссылок */
  --accent-soft: #E8F5EC;     /* фон плашек и подсветок */
  --accent-tint: #F4FBF6;     /* совсем бледный акцент: фон «сегодняшних» */
  --on-accent: #FFFFFF;       /* текст на акценте */

  --ink: #1C1C1E;             /* основной текст */
  --ink-soft: #5B5B60;        /* подписи */
  --ink-3: #6F6F78;           /* третий уровень: только крупный текст */

  --bg: #FFFFFF;              /* карточки, шапка, экран лота */
  --canvas: #F2F2F7;          /* полотно под лентой (карточки на нём «лежат») */
  --surface: #F7F7FA;         /* поля ввода, плашки, вторичные блоки */
  --line: #E5E5EA;            /* разделители вместо рамок */

  --warn: #9E5520;            /* аренда, расхождение площадей */
  --warn-soft: #FBEEE4;
  --danger: #D70015;          /* срок ≤ 3 дней, просрочка */
  --danger-soft: #FCEAE8;
  /* ⚠️ «Проходит» и акцент — ОДИН цвет, и это решение, а не совпадение. В
     приложении с зелёным акцентом два разных зелёных рядом (кнопка и плашка
     «проходит») читаются как оттенки одного, то есть как рассинхрон печати, а
     не как разные смыслы. Ссылкой, а не копией: копия разъедется при первой
     же правке акцента. */
  --ok: var(--accent);        /* проходит */
  --ok-soft: var(--accent-soft);

  --r: 14px;                  /* радиус карточки */
  --r-sm: 12px;               /* радиус поля/кнопки */
  --r-pill: 999px;            /* сегменты, пилюли, значки */
  --shadow: 0 1px 2px rgba(20, 32, 30, .05), 0 3px 10px rgba(20, 32, 30, .05);
  --shadow-up: 0 -1px 2px rgba(20, 32, 30, .04), 0 -6px 16px rgba(20, 32, 30, .05);
  --fast: 140ms;              /* короткие переходы: 120–180 мс, без «эффектов» */

  /* ─── Типографическая шкала ───────────────────────────────────────────
     Роли, а не размеры: размер можно поменять в одном месте, смысл —
     нельзя. До 04.08 в вёрстке было девять размеров вразнобой
     (11/12/13/14/15/17/19/20/26), и на новой ширине каждый пришлось бы
     подбирать заново. Значения оставлены ТЕ ЖЕ — это переименование, а не
     перенастройка: вид на телефоне не изменился ни на пиксель. */
  --fs-caption: 11px;         /* тип предмета, подпись числа фин-модели */
  --fs-meta: 12px;            /* мета, счётчики, подсказки */
  --fs-small: 13px;           /* вторичный текст, подписи полей */
  --fs-body: 14px;            /* основной текст блоков и таблиц */
  --fs-ui: 15px;              /* интерфейс: кнопки, поля, базовый текст */
  --fs-lead: 17px;            /* цена в карточке ленты, имя приложения */
  --fs-title: 20px;           /* заголовок экрана лота */
  --fs-display: 26px;         /* цена на экране лота */

  /* ─── Шкала отступов ──────────────────────────────────────────────────
     ВВЕДЕНА ДЛЯ ШИРОКИХ ЭКРАНОВ и новых блоков. Телефонную вёрстку на неё
     НЕ переводим: там отступы подобраны руками под тесноту (9, 11, 13 px
     — не круглые, и это осознанно), а перевод на круглую шкалу сдвинул бы
     то, что юзер принял как удобное. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Высота главной навигации. Нужна не только ей: на неё отступают снизу все
     экраны и липкая панель кнопок лота — иначе последняя карточка и «👍»
     оказываются ПОД панелью, и до них не дотянуться. */
  --nav-h: 54px;
  /* ─── Две разные ширины, и путать их нельзя ───────────────────────────
     `--content-max` — ширина ДОКУМЕНТА: экран лота в одну колонку, «Ещё»,
     пороги. Здесь правит читаемость строки, а не размер экрана: длинная
     строка читается хуже, а не лучше.

     `--feed-max` — ширина ЛЕНТЫ. Она живёт по другому закону: карточка это не
     текст, а строка-объявление, и ширину она тратит не на длину строки, а на
     фото и правую зону со сроком и действиями. Прежние 720 px были
     перестраховкой (жалоба юзера 04.08: «на компьютере всё скомкано, вокруг
     серое поле») — на 1920 при колонке навигации 210 px пустовало почти
     1000 px. Внутри карточки текстовая колонка всё равно ограничена, поэтому
     широкая лента НЕ возвращает нас к строкам через весь экран. */
  /* 778 = 750 читаемой колонки + 2×14 полей. 750 — не вкус, а замер 04.08 по
     60 живым описаниям (44 тыс. знаков) шрифтом Inter 15 px: ровно 90 знаков в
     строке. При 820 выходило 96 — на экране лота это подстраховано `min()`, а
     «Ещё» и пороги показывали длинную строку. Меняется ВМЕСТЕ с `--fs-body`:
     подняли кегль — перемерьте и поправьте оба. */
  --content-max: 778px;
  /* 1200, а не 1500, хотя места на 1920 хватает: строка-объявление шире
     примерно 1200 px перестаёт быть строкой. Замер на карточке 1476 px:
     фото 320 + текст 640 + срок и кнопки ~180 = 1140, а оставшиеся 336 px
     превращались в провал посреди карточки — срок висел в одном углу, кнопки
     в другом, между ними пусто. Это та же жалоба «скомкано» наизнанку. На
     1200 те же слагаемые заполняют строку целиком, а по краям страницы
     остаётся обычное поле (255 px на 1920), а не тысяча пикселей пустоты, с
     которой всё началось. */
  --feed-max: 1200px;

  /* ─── Границы режимов ─────────────────────────────────────────────────
     В @media подставить переменную нельзя (правило разбирается до того, как
     становятся известны значения), поэтому в медиазапросах стоят те же
     числа литералами — здесь они лежат как единственный источник правды и
     чтобы их мог прочитать JS.
       < 760   compact — телефон, вёрстка как была
       ≥ 760   wide    — окно шире телефона: контейнер по центру
       ≥ 1180  desk    — десктоп: навигация колонкой слева

     760 выбрано по замеру: при 880 планшетная ширина 768 оставалась
     «телефонной» и карточка растягивалась до 744 px. На самой границе
     контейнер (720) совпадает с шириной окна — переход не виден. */
  --bp-wide: 760px;
  --bp-desk: 1180px;
}

/* ─── Крупнее на широком экране ──────────────────────────────────────────
   Телефонные размеры подобраны под тесноту 390 px, и на мониторе они читаются
   мелко (жалоба юзера 04.08: «можно же увеличить всё»). Поднимаем ШКАЛУ, а не
   компоненты: роли те же, значения другие — ни один компонент об этом не знает
   и не правится. Граница та же, что у режима `wide` (--bp-wide, 760): в
   `@media` переменную подставить нельзя, поэтому число литералом. */
@media (min-width: 760px) {
  :root {
    --fs-caption: 12px;
    --fs-meta: 13px;
    --fs-small: 14px;
    --fs-body: 15px;
    --fs-ui: 16px;
    --fs-lead: 20px;
    --fs-title: 26px;
    --fs-display: 32px;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  /* Размер здесь литералом, а не `var(--fs-ui)`: в сокращённой записи `font`
     неизвестная переменная роняет объявление ЦЕЛИКОМ, вместе с семейством. */
  /* СИСТЕМНЫЙ впереди Inter (03.09): на iPhone и Mac это настоящий SF Pro,
     и именно он даёт findash его вид. Inter остаётся для Android/Windows,
     где системного SF нет, — файл уже лежит у нас и грузится всё равно. */
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
/* ⚠️ ССЫЛКА КРАСИТСЯ НАМИ, А НЕ БРАУЗЕРОМ (03.09). В Mini App цвет ссылки
   давал клиент Telegram, и своего правила не требовалось. В браузере вступает
   таблица по умолчанию: ярко-синяя `#0000EE` с подчёркиванием — на карточке
   лота так светились «Терр. зона», ЕГРН и кадастр, единственным чужим цветом
   в зелёном приложении. Подчёркивание оставляем: без него ссылка в таблице
   отличается от текста ОДНИМ цветом, а это не признак. */
a { color: var(--accent-strong); text-decoration-color: var(--accent-soft); }
a:active { color: var(--accent); }

/* Своя рамка фокуса: браузерная по умолчанию — жирная чёрная, и на светлой
   плитке выглядела поломкой. Убирать фокус нельзя (клавиатура, screen
   reader), поэтому перекрашиваем в акцент. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { color: var(--ink-soft); }
.center { padding: 44px 24px; text-align: center; color: var(--ink-soft); font-size: var(--fs-body); }

[hidden] { display: none !important; }

/* Кому анимации мешают — не показываем их вовсе. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}