/* Общее для всех страниц (index, developers, calc, trip): токены дизайн-системы (ds/README.md) — цвета
   светлой/тёмной темы, радиусы, отступы, шрифты; сбросы, вкладки, пилюли и тона, кнопки, ссылки.
   Подключать первым, до стилей страницы: своё у страницы перекрывает общее. Палитра «Графит» (2026-11-03, выбор пользователя):
   нейтральный серый без оттенка, главная кнопка чёрная (в тёмной белая), ссылки и выбор — спокойный синий; тёмная тема мягкий
   серый, не чёрный. Значения вписаны hex-ами: страницы открываются по file:// без внешних ссылок. Шрифт — системный стек.
   Зелёный (--good) — только «надёжный застройщик» / «сильный»; «нормальный» (--ok) — нейтральный серый; фиолетовый не используется. */
:root {
  /* поверхности и текст */
  --bg: #f5f5f5; --surface: #ffffff; --ink: #171717; --muted: #646464; --line: #e2e2e2; --line-soft: #ececec;
  --line-field: #8a8a8a; /* рамка полей ввода ≥ 3:1 к --bg и --surface (WCAG 1.4.11) */
  /* главная кнопка (.btn.pri, «Показать» в index): чёрная заливка */
  --pri: #171717; --pri-fg: #ffffff; --pri-hover: #3a3a3a;
  /* акцент: ссылки, ползунок, фокус, текст выбранного, .locp.hi, контур кнопки заявки */
  --accent: #1d5bd6; --accent-fg: #ffffff; --accent-hover: #1749ad;
  /* нейтральный ховер и выбранное/нажатое (текст выбранного — --accent); --sel-tint — сильнее (calc --bank, ховер .go) */
  --hover: #ededed; --sel: #ebebeb; --sel-tint: #dcdcdc;
  /* тона: зелёный — ТОЛЬКО «надёжный застройщик»/«сильный»; текст ≥ 4.5:1 на своей подложке, --surface, --bg, --hover */
  --good: #1e7b3c; --good-bg: #e3f3e7; --warn: #8a6100; --warn-bg: #fbf3dc; --bad: #c62a2a; --bad-bg: #fdecec;
  --ok: #3a3a3a; --ok-bg: #efefef;
  --dot-ok: #1d5bd6; --dot-unk: #93b4e8; /* точки на карте: «обычный» и «неизвестен» — синие, не серые (ds/README.md) */
  /* «мои точки» на карте — розовый, не синий и не фиолетовый */
  --anc: #bf3989; --anc-t: #bf3989;
  /* подложка диалогов, тени */
  --scrim: #17171740; --shadow-sm: 0 1px 2px 0 #0000000d, 0 1px 3px 0 #0000000a; --shadow-md: 0 8px 16px -4px #00000014, 0 4px 32px -4px #00000014, 0 24px 48px -12px #00000014;
  /* радиусы: мелкие 4 / кнопки и поля 8 / карточки и диалоги 14 / pill; отступы 4…24 */
  --r-xs: 4px; --r-sm: 8px; --r-md: 8px; --r-lg: 14px; --r-xl: 14px; --r-pill: 9999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  /* текст — системный sans (решение пользователя 2026-11-01: моноширинный весь сайт читался как код);
     моноширинный — только числа: цены, площади, баллы — --f-num, класс .num */
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji";
  --f-body: var(--f-sans); --f-num: var(--f-mono);
  /* старое имя: страницы переводят выбранные состояния на --sel, ховер остаётся --hover */
  --accent-soft: var(--hover);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  /* «Графит» тёмная: мягкий серый, карточки светлее фона; главная кнопка белая */
  --bg: #1b1b1c; --surface: #242426; --ink: #ededed; --muted: #a1a1a6; --line: #38383b; --line-soft: #2f2f31; --line-field: #6e6e73;
  --pri: #ededed; --pri-fg: #1b1b1c; --pri-hover: #ffffff;
  --accent: #8db4f2; --accent-fg: #1b1b1c; --accent-hover: #a9c7f5;
  --hover: #303033; --sel: #353538; --sel-tint: #404044;
  --good: #6fcf8a; --good-bg: #1f3326; --warn: #e0b04a; --warn-bg: #33301f; --bad: #f2857f; --bad-bg: #3a2524;
  --ok: #d6d6d6; --ok-bg: #303033; --anc: #e07ab5; --anc-t: #e07ab5;
  --dot-ok: #8db4f2; --dot-unk: #c5d8f7;
  --scrim: #00000080; --shadow-sm: 0 1px 2px 0 #00000066; --shadow-md: 0 0 0 1px #38383b, 0 8px 16px -4px #00000066, 0 24px 48px -12px #00000066;
  color-scheme: dark }
 }
:root[data-theme="dark"] {
  /* «Графит» тёмная: мягкий серый, карточки светлее фона; главная кнопка белая */
  --bg: #1b1b1c; --surface: #242426; --ink: #ededed; --muted: #a1a1a6; --line: #38383b; --line-soft: #2f2f31; --line-field: #6e6e73;
  --pri: #ededed; --pri-fg: #1b1b1c; --pri-hover: #ffffff;
  --accent: #8db4f2; --accent-fg: #1b1b1c; --accent-hover: #a9c7f5;
  --hover: #303033; --sel: #353538; --sel-tint: #404044;
  --good: #6fcf8a; --good-bg: #1f3326; --warn: #e0b04a; --warn-bg: #33301f; --bad: #f2857f; --bad-bg: #3a2524;
  --ok: #d6d6d6; --ok-bg: #303033; --anc: #e07ab5; --anc-t: #e07ab5;
  --dot-ok: #8db4f2; --dot-unk: #c5d8f7;
  --scrim: #00000080; --shadow-sm: 0 1px 2px 0 #00000066; --shadow-md: 0 0 0 1px #38383b, 0 8px 16px -4px #00000066, 0 24px 48px -12px #00000066;
  color-scheme: dark }


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Поля ввода (аудит 2026-11-02): рамка ≥ 3:1, плейсхолдер AA, на телефоне 16px — иначе iOS приближает страницу при фокусе */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { border-color: var(--line-field); }
::placeholder { color: var(--muted); opacity: 1; }
@media (max-width: 759px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } }
/* только для читалок: заголовок раздела, которого не видно */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* «меньше движения» в системе: без анимаций, переходов и плавной прокрутки (JS-прокрутка смотрит на тот же запрос) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* колонка страницы; gap — у каждой страницы свой. Рамка у всех страниц как у index (1360), чтобы шапка и вкладки стояли
   с одного левого края; страница поуже задаёт --col (ширину колонки) — колонка прижата к тому же краю */
.wrap { max-width: 1360px; margin: 0 auto; padding-block: 28px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, var(--col, 1fr)); }
/* <main> — сразу после шапки, внутри .wrap (аудит 2026-11-03: шапка и подвал были внутри <main>); раскладка как у .wrap: тот же gap */
.wrap > main { display: grid; gap: inherit; grid-template-columns: minmax(0, 1fr); min-width: 0; }
/* абзац сразу после списка — с отступом (QA 3: «приклеен» к списку на «Для застройщиков») */
main ul + p, main ol + p { margin-top: var(--s-3); }
/* поля от 760px — 32px (аудит 2026-11-03, В43: на 1024 было 16px, как на телефоне) */
@media (min-width: 760px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
/* числа — моноширинным и табличными цифрами, чтобы столбцы цен и баллов стояли ровно */
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
h1 { font-size: clamp(24px, 5vw, 36px); line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.lead { color: var(--muted); margin: var(--s-2) 0 0; max-width: 70ch; }
/* шапка одинаковая на всех страницах: вкладки + h1, без подзаголовка; отступ до содержимого — 24px (12px на телефоне).
   У .wrap каждой страницы свой gap — страница добирает разницу через --hgap-fix (24px − её gap) */
.wrap > header { margin-bottom: var(--hgap-fix, 0px); }
header + .lead { margin-top: 0; }
@media (max-width: 759px) { .wrap { padding-top: 12px; } .tabs { margin-bottom: 8px; } .wrap > header { margin-bottom: var(--hgap-fix-m, 0px); } }

/* вкладки разделов: одинаковые на всех страницах; узко — одна строка с прокруткой без полосы, активную в видимую часть ставит nav.js */
.tabs { display: flex; gap: var(--s-1); padding: var(--s-1); margin-bottom: var(--s-4); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.tabs::-webkit-scrollbar { display: none; }
/* за краем есть ещё вкладки (nav.js: fl — слева, fr — справа) — край затухает */
.tabs.fr { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.tabs.fl { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.tabs.fl.fr { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.tabs a { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; padding: 7px var(--s-4); border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); background: var(--hover); }
/* активная вкладка — выбранное состояние (--sel + акцентный текст), не заливка акцентом: акцентная заливка только у главной кнопки */
.tabs a[aria-current="page"], .tabs a[aria-current="page"]:hover { color: var(--accent); background: var(--sel); }
/* бренд — первой ссылкой строки вкладок (nav.js), ведёт на лендинг */
.tabs a.brand { padding: 7px 10px; color: var(--ink); }
.tabs a.brand svg { display: block; }
@media (max-width: 600px) { .tabs { gap: 2px; padding: 3px; } .tabs a { padding: 6px 12px; font-size: 13px; } }
/* телефон: пять вкладок во всю ширину без прокрутки (390px — все видны; уже — прокрутка, как выше) */
@media (max-width: 440px) { .tabs { width: 100%; } .tabs a { flex: 1 0 auto; padding: 6px 4px; font-size: 13px; text-align: center; } }
/* 320px: все вкладки и значок-бренд в строке без прокрутки (аудит 2026-11-03, В56: значок уезжал за левый край) — как в projects.html */
@media (max-width: 360px) { .tabs { gap: 0; padding: 2px; } .tabs a { padding: 6px 2px; font-size: 12px; } .tabs a.brand { padding: 6px 3px; } }

/* пилюли и тона; вердикты застройщика (.pill.strong/.ok/…) — в dossier.css */
/* пилюля в строке-flex не сжимается (flex: none) и не обрезается: ширина по тексту; шире контейнера — переносится по пробелам, за рамку не выходит */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill); white-space: normal; flex: none; max-width: 100%; }
/* узкая колонка (dd у dl «max-content 1fr», ячейки таблиц): пилюля сжимается и переносится, а не выталкивает страницу вширь */
dd > .pill, td .pill, dd > .st, td .st { white-space: normal; line-height: 1.4; }
dd { min-width: 0; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.good { color: var(--good); background: var(--good-bg); }
.warn { color: var(--warn); background: var(--warn-bg); }
.bad { color: var(--bad); background: var(--bad-bg); }
.none { color: var(--muted); background: var(--hover); }
/* вердикт без досье — оценка: «≈ сильный», контур пунктиром без заливки и точки (как projects.html); залит только вердикт досье.
   [class] — чтобы перебить заливку .pill.strong/.ok/… из dossier.css, который подключается позже */
.pill.est[class] { background: none; border: 1px dashed currentColor; padding: 1px 9px; }
.pill.est::before { display: none; }
/* статус в трекере (fav.js Fav.stPill): нейтральный контур, различаются только значком — цвета остаются вердиктам застройщика.
   Залит (цветом текста) только «в коротком списке» (shortlist; подписи — fav.js STATUS_LABELS). Пунктир — только у оценок (.pill.est) */
.st { display: inline-flex; align-items: center; gap: 4px; font: 500 14px/1.4 var(--f-body); padding: 1px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); background: none; white-space: nowrap; vertical-align: 1px; min-width: 0; max-width: 100%; }
.st::before { font-size: 10px; line-height: 1; color: var(--muted); }
.st-shortlist { color: var(--bg); background: var(--ink); border-color: var(--ink); } .st-shortlist::before { content: "✓"; color: inherit; }
/* «шортлист» проекта у объявления (.inh) — контур, залита только своя отметка */
.st-shortlist.inh { color: var(--ink); background: none; border-color: var(--ink); }
.st-viewing::before { content: "◉"; }
.st-contacted::before { content: "✉"; }
.st-new::before { content: "○"; }
.st-rejected { color: var(--muted); } .st-rejected::before { content: "✕"; }
/* статус унаследован от проекта, а не у самого объявления */
.st.inh { border-style: dotted; font-weight: 500; }
/* «−12% к району» (market.js) */
.mk { font: 500 14px var(--f-body); padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap; }

/* кнопки: цель нажатия не меньше 40px на любом экране; .btn.sm — только плотные панели (walk.html), 32px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 40px; font: 500 14px var(--f-body); padding: 6px var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--hover); }
/* главная кнопка — акцент; выбранная/нажатая — --sel */
.btn.pri { background: var(--pri); border-color: var(--pri); color: var(--pri-fg); }
.btn.pri:hover { background: var(--pri-hover); border-color: var(--pri-hover); }
.btn.on, .btn[aria-pressed="true"] { background: var(--sel); border-color: var(--sel-tint); color: var(--accent); }
.btn.sm { min-height: 32px; font-size: 13px; padding: 3px var(--s-2); border-radius: var(--r-sm); }

/* QA1: окно проекта — юниты не под фильтры бледнее; ссылка на план квартиры; «Документы застройщика»; заметка с сайта свёрнута */
tr.nf td { opacity: .5; }
tr.nf:hover td, tr.nf:focus-within td { opacity: 1; }
.plk { margin-left: 4px; padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--accent); text-decoration: none; font-size: 12px; white-space: nowrap; }
.plk:hover { background: var(--hover); }
.plk .plf { margin-left: 3px; }
.card > .docs { grid-column: 1 / -1; }
.docs { margin: var(--s-1) 0; padding: var(--s-2) 10px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.docs .dcl { margin-top: 2px; }
.docs a { color: var(--accent); }
.docs .dcm a { display: inline-block; min-width: 22px; text-align: center; }
details.pnd > summary { cursor: pointer; color: var(--muted); font-size: 14px; }
/* раскрывающийся раздел (details.fold): заголовок и строка сути в одну строку, ▸ поворачивается при раскрытии
   (разделы окна проекта) */
details.fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); min-height: 40px; padding: var(--s-2) 0; cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; flex: none; width: 1em; font-size: 16px; line-height: 1; text-align: center; color: var(--muted); transition: transform .15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover::before { color: var(--ink); }
.lsn { margin: 0 0 4px; }
/* цены только у проданных или «цена подозрительная» — архив, не текущая цена */
.arch { color: var(--muted); }

/* Качество места (locui.js, data/loc.js): нейтральный контурный чип без заливки (заливка — у вердикта застройщика и главной кнопки),
   полоса окрашивает только текст: hi ≥ 7 — акцент (не зелёный: зелёный только у застройщика), mid 6–6.9 — ink,
   lo 4–5.9 — warn, bad < 4 — bad; .locf — топ-3 факторов текстом; .loct — таблица факторов по группам */
.locp { display: inline-flex; align-items: center; gap: 4px; font: 500 14px/1.4 var(--f-body); font-variant-numeric: tabular-nums; padding: 1px 9px; border-radius: var(--r-pill);
  background: none; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; vertical-align: baseline; }
.locp.hi { color: var(--accent); }
/* балл места с tabindex (подсказка по нажатию): зона нажатия ≥ 40px без изменения вида */
.locp[tabindex], .lsc[tabindex] { position: relative; }
.locp[tabindex]::after, .lsc[tabindex]::after { content: ""; position: absolute; inset: -10px -6px; }
.locp.lo { color: var(--warn); }
.locp.bad { color: var(--bad); }
.locl { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; max-width: 100%; }
.locp .num, .lsc, .loct td.n { font-family: var(--f-num); }
.locf { font-size: 14px; color: var(--muted); min-width: 0; overflow-wrap: break-word; }
.loct { display: grid; gap: 6px; font-size: 14px; }
.loct .loch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.loct .locn { font-style: italic; margin: 0; }
.loct td .fd { color: var(--muted); font-weight: 400; }
.loct table { border-collapse: collapse; width: 100%; max-width: 520px; }
.loct td, .loct th { padding: 2px 6px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-soft); }
.loct tr.g th { font-weight: 500; font-size: 14px; color: var(--muted); padding-top: 8px; border-top: 0; }
.loct td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.loct tr.neg td.v { color: var(--bad); }
.loct tr.pos td.v { color: var(--ok); }
.loct tr.zero td { color: var(--muted); }
.loct .v0 { display: block; color: var(--muted); font-weight: 400; white-space: normal; font-size: 13px; }

/* подпись ползунков цены и площади (price.js, разметка — price.css): крупнее и цветом текста, числа моноширинным */
.pr .prl { font-size: 14px; color: var(--ink); }

/* подвал сайта (nav.js): дата данных · ссылки · Сообщить об ошибке · дисклеймер · источники */
.sfoot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: grid; gap: var(--s-1); }
.sfoot p { margin: 0; max-width: 90ch; }
.sfoot-l { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; }
.sfoot-l a { display: inline-flex; align-items: center; min-height: 40px; } /* цель касания 40px (DS; аудит 2026-11-03: было 32px) */
.sfoot-l [aria-current="page"] { color: var(--ink); font-weight: 500; }
.sfoot a { color: var(--muted); }
.sfoot a:hover { color: var(--accent); }
@media print { .sfoot { display: none; } }
/* Плашка-пояснение (аудит 2026-11-03, В41: было три вида — жёлтая заливка в calc, жёлтый контур в privacy, голубая заливка в форме заявки).
   Одна форма: заливка тона, тонкая рамка того же тона, текст --ink, радиус 6, 14px. Тон: .info — справка, .warn — внимание, .bad — ошибка.
   Пустая плашка не показывается. В projects.html класс .note занят (подпись) — поэтому .plate */
.plate { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--hover); color: var(--ink); font-size: 14px; line-height: 1.5; }
.plate:empty { display: none; }
.plate.info { background: var(--sel); border-color: var(--sel-tint); }
.plate.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.plate.bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
/* строка «Данные на …: N проектов…» (stats.js) — «Для застройщиков» */
.statl { margin: 0; color: var(--muted); font-size: 14px; }
.statl:empty { display: none; }
/* режим разработчика (nav.js, ?dev=1 / localStorage "house-dev"): служебные ссылки только в нём */
html:not(.dev) .devonly { display: none !important; }

/* Слой данных (nav.js, docs/modes.md): сайт всегда html.pub. .pm-only — разметка полного слоя (скрыта), .pub-only — показывается. */
html.pub .pm-only, html.pm .pub-only { display: none !important; }
.wrap > header .tabs { display: inline-flex; vertical-align: middle; margin-right: var(--s-2); }

/* выбор языка в строке вкладок (nav.js, i18n.js): последним, как вкладка */
.tabs select.lang { flex: none; min-height: 40px; margin-left: var(--s-1); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.tabs select.lang:hover { color: var(--ink); background: var(--hover); }
@media (max-width: 440px) { .tabs select.lang { font-size: 13px; padding: 0 4px; } }
.sfoot-lang [aria-current] { font-weight: 600; }