/* Общие стили пользовательского интерфейса (решение 49: просто, аккуратно, удобно на телефоне). */

:root {
  /* Стандарт размеров окон (решение 187, пользователь 06.10.2026): S 440 — вопрос и окно в несколько полей, M 520 — одна
     запись, L 640 — шаги, список с поиском, несколько групп полей, документы, XL 1100 — просмотр файла и фото. Других
     ширин у окон нет. */
  --window-s: 440px;
  --window-m: 520px;
  --window-l: 640px;
  --window-xl: 1100px;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1c2430;
  --muted: #667085;
  --border: #e3e6eb;
  --border-strong: #d0d5dd;
  --border-soft: #f0f2f5;
  /* Неоткрытый ярлычок вкладки (единая навигация): в светлой теме серее страницы, текст темнее --muted для контраста
     от 4,5 : 1 на сером; открытый — цвета карточек (--surface) с полосой акцента. */
  --tab-idle: color-mix(in srgb, var(--border) 35%, var(--bg));
  --tab-idle-text: color-mix(in srgb, var(--muted) 80%, var(--text));
  /* Синий: --accent — ссылки, текст и рамки; --accent-fill — залитые кнопки и отметки с белым текстом. В светлой теме
     это один цвет, в тёмной ссылкам нужен светлый синий, а заливке под белым текстом — тёмный. */
  --accent: #2458d6;
  --accent-fill: #2458d6;
  --accent-hover: #1c47b0;
  --accent-soft: #eaf0fc;
  --accent-dashed: #adc0ef;
  --danger: #b42318;
  --danger-fill: #b42318;
  --danger-fill-hover: #912018;
  --danger-soft: #fdecea;
  --danger-border: #f5c2bd;
  --success: #1b7a3d;
  --success-soft: #e7f5ec;
  --success-border: #bfe3cb;
  --warning-soft: #fff6d6;
  --warning-border: #f0d77a;
  --warning-text: #8a6d00;
  /* Строки таблиц (решение 132): «зебра», наведение; поверхности и дорожки шкал, выключенный переключатель. */
  --row-alt: #f8f9fb;
  --row-hover: #eff3fb;
  --row-hover-soft: #fafbfe;
  --track: #eceef2;
  --switch-off: #b4bdce;
  --faint: #a3abb8;
  /* Фон вокруг просмотра файла и фото: сам файл показывается в своих цветах. */
  --preview-bg: #e9ecf1;
  --toast-bg: #1c2430;
  /* Лист квитанции ЖКУ (решение 152) — «бумага» с тонкими линиями. */
  --paper: #fbfbf8;
  --paper-block: #ffffff;
  --paper-border: #e6e3d8;
  --paper-line: #eeece4;
  /* Тоны статусов (решение 131): точка и шкала — насыщенный цвет, плашка — светлый фон и тёмный текст того же тона.
     Контраст текста на фоне плашки — от 6,1 : 1. Те же цвета у шкал статусов в сводках (решение 121). */
  --tone-success: #1b7a3d; --tone-success-soft: #e7f5ec; --tone-success-text: #17663a;
  --tone-info: #2458d6; --tone-info-soft: #eaf0fc; --tone-info-text: #1c47b0;
  --tone-violet: #9b72f0; --tone-violet-soft: #f2ecfe; --tone-violet-text: #5f37b8;
  --tone-warning: #e08a1e; --tone-warning-soft: #fff1dc; --tone-warning-text: #8a4a00;
  --tone-danger: #d9487a; --tone-danger-soft: #fdebf1; --tone-danger-text: #a8214f;
  --tone-neutral: #98a2b3; --tone-neutral-soft: #f1f3f6; --tone-neutral-text: #475467;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  /* Обычная (ограниченная) ширина страницы — одна для шапки и содержимого, по центру окна (решения 124, 134, 136).
     Режим «Во всю ширину» снимает ограничение (widgets.css). */
  --page-max-width: 1200px;
  /* Подложка логотипа организации — белая в обеих темах: логотипы рисуют для светлого фона. */
  --logo-tile: #ffffff;
  color-scheme: light;
}

/* Тёмная тема (задача theme-header-controls): те же токены, тот же смысл цветов. Выбор — в шапке; без выбора — как в
   системе (скрипт в <head> layout.html ставит data-theme до отрисовки). Контраст обычного текста — от 4,5 : 1, текста
   плашек статусов — от 6,1 : 1 (решение 131), фокуса — от 3 : 1 (tests/test_theme.py считает по этим значениям).
   Панель управления — на тех же токенах; отдельной светлой админ-панели со своими цветами больше нет (решение 203). */
:root[data-theme="dark"] {
  --bg: #0f141a;
  --surface: #171d25;
  --text: #e4e8ee;
  --muted: #9ba5b4;
  --border: #2c3440;
  --border-strong: #3d4653;
  --border-soft: #222a34;
  /* В тёмной теме неоткрытый ярлычок — цвета страницы: открытый (--surface) светлее и выступает. */
  --tab-idle: var(--bg);
  --tab-idle-text: var(--muted);
  --accent: #7ea7ff;
  --accent-fill: #3567e0;
  --accent-hover: #2a58c8;
  --accent-soft: #1c2a45;
  --accent-dashed: #3f5b93;
  --danger: #ff8d82;
  --danger-fill: #c3362b;
  --danger-fill-hover: #a52c23;
  --danger-soft: #3a1c1b;
  --danger-border: #6d2e29;
  --success: #62cf8f;
  --success-soft: #153020;
  --success-border: #2b5a3c;
  --warning-soft: #332a10;
  --warning-border: #6e5b1f;
  --warning-text: #e9c65c;
  --tone-success: #3fb56a; --tone-success-soft: #16301f; --tone-success-text: #8ee0ad;
  --tone-info: #5b8cff; --tone-info-soft: #1a2946; --tone-info-text: #abc5ff;
  --tone-violet: #a98bf5; --tone-violet-soft: #271f42; --tone-violet-text: #cfbdff;
  --tone-warning: #e7993b; --tone-warning-soft: #35270f; --tone-warning-text: #f6c890;
  --tone-danger: #e46592; --tone-danger-soft: #3a1826; --tone-danger-text: #f7a8c4;
  --tone-neutral: #8792a4; --tone-neutral-soft: #232a34; --tone-neutral-text: #c6cdd7;
  --row-alt: #1a2129;
  --row-hover: #1f2a3a;
  --row-hover-soft: #1b2330;
  --track: #262e39;
  --switch-off: #4b5667;
  --faint: #5f6b7b;
  --preview-bg: #0b0f14;
  --toast-bg: #2c3544;
  --paper: #161b22;
  --paper-block: #1c222a;
  --paper-border: #343b45;
  --paper-line: #2a313a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --logo-tile: #ffffff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

/* Полоса прокрутки не сдвигает страницу (решение 147). Классическая полоса (Windows, Linux, macOS с мышью) занимает
   место только на длинной странице, поэтому раньше короткая страница — вход раздела, помощь, «+ Добавить» — была
   на 15 px шире длинной, а вся рамка вместе с шапкой прыгала на полширины полосы при каждом переходе. Место под полосу
   отведено всегда: у короткой страницы справа пустая полоса того же цвета, что фон. Накладные полосы (телефоны,
   macOS с трекпадом) места не занимают — там ничего не меняется. Браузеры без scrollbar-gutter (Safari до 18.2)
   показывают полосу всегда: рамка так же не прыгает, содержимое не обрезается и прокручивается как раньше. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }

.shell { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: 0 16px; }
main.shell { padding-top: 20px; padding-bottom: 48px; }
/* Длинный текст — не шире 80 знаков при любой ширине страницы (решения 134, 136): заметки записей, документов и событий,
   вводные абзацы, пояснения, подсказки и сообщения полей. Формы сохраняют свою ширину (.narrow — 640 px).
   Цветные плашки (.notice, .channel-note) остаются прежней ширины: правый отступ оставляет тексту не больше 80 знаков. */
.lede, .panel-text, .events-clear-text, .reminder-note, .document-note, .help-list .muted, .hint,
.property-ui .notes p, .property-ui .list-row small, .property-ui .error { max-width: 80ch; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.lede { color: var(--muted); margin-top: 6px; }

/* Шапка */

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
/* Шапка — по ширине содержимого страницы (решение 124): её края совпадают с краями страницы. */
.topbar-inner { display: flex; align-items: center; gap: 12px; min-height: 60px; }
/* Название — в две строки и всегда целиком (решение 123): шапка ужимает поиск и кнопки, а не его. */
.brand { flex: none; display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
/* Знак — логотип пользователя (решение 146): исходный PNG 1254×1254 с широкими белыми полями. Квадрат шапки показывает
   из него только синий знак — область 696×696 от точки (279, 275), на 2–8 px внутри синего квадрата, — без искажения:
   картинка в 1254/696 раза больше квадрата и сдвинута на 279/696 и 275/696 его стороны. Скругление квадрата чуть больше
   собственного у знака, поэтому белые углы исходника не видны; синий фон — только пока картинка загружается. */
.brand-mark {
  flex: none; position: relative; display: block; width: 34px; height: 34px; overflow: hidden;
  border-radius: 9px; background: var(--accent-fill);
}
.brand-mark img {
  position: absolute; left: -40.0862%; top: -39.5115%; width: 180.1724%; max-width: none; height: auto;
}
.brand-name { display: grid; font-size: 0.925rem; font-weight: 650; line-height: 1.15; white-space: nowrap; letter-spacing: -0.005em; }
.brand-name > span + span { color: var(--muted); font-weight: 500; }
.topbar-end { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* «Шире» — только в окне от 1280 px: уже рамка 1200 px и так почти во всё окно, и переключатель менял бы лишь поля
   (решение 185). */
@media (max-width: 1279px) {
  .view-controls .view-width { display: none; }
}
/* Меню базы (решение 197, вариант пользователя 2 от 08.10.2026) — справа в строке пути (core/compact_nav.html), на
   главной — строкой над заголовком; в шапке базы нет. Овальная кнопка «<база> ▾» 32 px со значком базы, длинное имя —
   многоточием (полное — в подсказке), у базы в архиве — пометка. Список — под кнопкой, к её правому краю, 380 px (на
   телефоне — во всю ширину содержимого): поиск, «Недавние» на фоне, «Все базы · N» с липким заголовком, имена в две
   строки, выбранная — цветом и галочкой, числа дел справа; ниже — «Настройки базы» и действия со всеми базами. */
.base-menu { flex: 0 1 auto; min-width: 0; max-width: min(300px, 100%); margin-left: auto; }
.base-menu-button {
  display: flex; align-items: center; gap: 7px; box-sizing: border-box; max-width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 0.875rem; font-weight: 650; line-height: 1;
}
.base-menu-button:hover, .base-menu[open] > .base-menu-button { border-color: var(--accent); }
.base-menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.base-menu-icon { flex: none; width: 16px; height: 16px; color: var(--accent); }
.base-menu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-menu-mark { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--tone-neutral-soft);
  color: var(--tone-neutral-text); font-size: 0.72rem; font-weight: 700; }
.base-menu-chevron { flex: none; width: 15px; height: 15px; color: var(--muted); transition: transform .15s; }
.base-menu[open] .base-menu-chevron { transform: rotate(180deg); }
.base-menu > .base-menu-panel { left: auto; right: 0; width: 380px; max-width: calc(100vw - 32px); padding: 0;
  overflow: hidden; font-size: 1rem; }
.menu-list a.bm-settings { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-top: 1px solid var(--border); border-radius: 0; color: var(--text); }
.menu-list a.bm-settings:first-child { border-top: 0; }
.menu-list a.bm-settings:hover { background: var(--bg); }
.menu-list a.bm-settings[aria-current] { color: var(--accent); }
.bm-settings svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.bm-settings strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.bm-settings small { display: block; margin-top: 1px; color: var(--muted); font-size: 0.8rem; }
/* Главная: пути нет — меню базы строкой над заголовком «Главная», на том же месте, что строка пути других страниц. */
.home-base-row { display: flex; align-items: center; justify-content: flex-end; min-height: 32px; margin: 4px 0 6px; }
.bs-search { padding: 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.bs-search input {
  display: block; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px 0 36px;
  border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); font: inherit; font-size: 0.95rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px 50% / 16px;
}
.bs-search input::placeholder { color: var(--muted); }
.bs-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.bs-scroll { max-height: 400px; overflow-y: auto; overscroll-behavior: contain; }
.bs-block { padding: 0 8px 8px; }
.bs-block + .bs-block { border-top: 1px solid var(--border); }
.bs-recent { background: var(--bg); }
.bs-label { position: sticky; top: 0; z-index: 1; margin: 0 -8px; padding: 9px 18px 6px; background: var(--surface);
  color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bs-recent .bs-label { background: var(--bg); }
.bs-rows { display: grid; gap: 2px; }
.menu-list a.bs-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; padding: 9px 10px;
  border-radius: 8px; color: var(--text); line-height: 1.3;
}
.menu-list a.bs-item[hidden] { display: none; }
.bs-recent a.bs-item:hover { background: var(--surface); }
.menu-list a.bs-item[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.bs-item[aria-current] .bs-name::before { content: "✓ "; font-weight: 700; }
.bs-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bs-name { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow-wrap: anywhere; }
.bs-count { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--tone-warning-soft);
  color: var(--tone-warning-text); font-size: 0.78rem; font-weight: 700; text-align: center; }
.bs-count.is-overdue { background: var(--tone-danger-soft); color: var(--tone-danger-text); }
.bs-empty { margin: 0; padding: 10px; color: var(--muted); font-size: 0.88rem; }
.bs-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border);
  background: var(--bg); }
.menu-list .bs-foot a { width: auto; padding: 6px 8px; border-radius: 8px; color: var(--accent); font-size: 0.9rem;
  font-weight: 600; }
.menu-list .bs-foot a:hover { background: var(--surface); }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 220px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
.menu-list a, .menu-button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.menu-list a:hover, .menu-button:hover { background: var(--bg); text-decoration: none; }
/* Список, который срезал бы край панели или экрана, — в верхнем слое страницы (popover="manual", menus.js): место у
   кнопки задают top и left скрипта; свойства [popover] браузера (inset: 0, margin: auto, цвет CanvasText) здесь не
   нужны. */
.menu-list:popover-open { position: fixed; inset: auto; margin: 0; color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.menu-list a[aria-current] { font-weight: 600; }
.menu-note { padding: 6px 10px; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }

/* Меню под кружком — только личное (решение 197): имя и почта, настройки, помощь и выход. Длинная почта переносится,
   а длинное меню прокручивается внутри. */
.account .menu-list {
  width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain;
}
.account .menu-list a { overflow-wrap: anywhere; }
.menu-label { padding: 4px 10px 2px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.account.is-current .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* Главное меню (решение 80): на компьютере — в шапке, на телефоне — нижняя панель */

.main-nav { flex: none; display: flex; align-items: center; gap: 2px; }
.main-nav a {
  display: grid; justify-items: center;
  padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap;
}
/* Текущий раздел выделен полужирным, но пункт всегда шириной своей полужирной подписи (решение 147): невидимая копия
   подписи из data-nav-label — строка сетки нулевой высоты. Раньше выделенный пункт становился на 2–5 px шире, и при
   каждом переходе между разделами сдвигались «?», поле поиска и соседние пункты. Копия скрыта (visibility) — не видна,
   не выделяется и не читается программами чтения экрана. overflow: clip, а не hidden: с hidden копия — контейнер
   прокрутки, и в колонках нижнего меню (minmax(min-content, 1fr)) её ширина не учитывалась. */
.main-nav a::after, .tabbar a::after {
  content: attr(data-nav-label); height: 0; overflow: clip; visibility: hidden; font-weight: 600;
  pointer-events: none; user-select: none;
}
.main-nav a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.main-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* «?» — сразу после разделов меню (решение 124). */
.main-nav + .page-help { margin-left: -4px; }
/* «Люди и организации» не помещается в узкую шапку (решение 162): до 1100 px — «Люди», как в нижнем меню; полужирная
   копия подписи — тоже короткая (data-nav-short). */
.main-nav .nav-short { display: none; }
@media (max-width: 1100px) {
  .main-nav .nav-long { display: none; }
  .main-nav .nav-short { display: inline; }
  .main-nav a[data-nav-short]::after { content: attr(data-nav-short); }
}

/* Средства вида справа в шапке (задача theme-header-controls): «Шире», тема и «Вид» — на прежнем месте поиска. */
.view-controls { display: flex; align-items: center; gap: 6px; }
.view-controls form { display: contents; }
.page-width-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 6px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font: inherit; font-size: 0.875rem; white-space: nowrap; cursor: pointer;
}
.page-width-toggle:hover { color: var(--text); }
.switch-track { flex: none; display: inline-block; position: relative; width: 32px; height: 20px; border-radius: 12px; background: var(--switch-off); }
.switch-track::after {
  content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.page-width-toggle[aria-checked="true"] .switch-track, :root[data-theme="dark"] .theme-row-switch .switch-track { background: var(--accent-fill); }
.page-width-toggle[aria-checked="true"] .switch-track::after, :root[data-theme="dark"] .theme-row-switch .switch-track::after { transform: translateX(12px); }
.theme-toggle {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { background: var(--bg); color: var(--text); }
.theme-toggle svg { width: 20px; height: 20px; }
/* Значок — по теме, которой страница нарисована: луна в светлой, солнце в тёмной (без ожидания скрипта). */
.theme-icon-sun, :root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
.view-menu > summary {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 11px;
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 0.925rem; font-weight: 600;
}
.view-menu > summary:hover, .view-menu[open] > summary { background: var(--bg); }
.view-icon { width: 18px; height: 18px; }
.view-chevron { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.view-menu[open] .view-chevron { transform: rotate(180deg); }
.view-menu-list { width: max-content; min-width: 250px; max-width: min(320px, calc(100vw - 24px)); }
.view-menu-list .menu-label { padding-top: 6px; }
.menu-separator-link { margin-top: 6px; border-top: 1px solid var(--border) !important; border-radius: 0 0 6px 6px !important; }
/* Строка темы в меню — только на телефоне, где кнопки темы в шапке нет. */
.view-controls .view-theme-row { display: none; }
.theme-row-switch { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
/* «Сохраняю…», «Сохранено» и ошибка сохранения — плашкой под шапкой, видна и в прокрученной странице. */
.view-status {
  position: fixed; top: 70px; right: 16px; z-index: 35; max-width: min(360px, calc(100vw - 32px));
  padding: 8px 12px; border-radius: 10px; background: var(--toast-bg); color: #fff; font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.2);
}
.view-status:empty { display: none; }
.view-status.is-error { background: var(--danger-fill); }
.theme-toggle:focus-visible, .view-menu > summary:focus-visible, .page-width-toggle:focus-visible,
.account > summary:focus-visible, .page-help > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account > summary { border-radius: 50%; }

/* Поиск — отдельной строкой под шапкой, по центру: округлое поле с лупой. Кнопки в строке нет: одна синяя кнопка
   страницы — справа от заголовка, общее «+ Добавить» — на главной и в нижнем меню телефона (решение 197). */
.search-row { padding-top: 16px; }
.search-row-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); align-items: center; gap: 12px; }
.site-search { grid-column: 2; position: relative; }
.site-search-icon {
  position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.site-search input {
  width: 100%; min-height: 46px; padding: 8px 72px 8px 46px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.95rem; box-shadow: var(--shadow);
}
/* Подсказка в поле — поверх него, а не placeholder: её длину выбирает ширина экрана (полная не помещается в телефон).
   Пропадает, как placeholder, когда в поле есть текст. */
.site-search-hint {
  position: absolute; left: 47px; right: 72px; top: 50%; overflow: hidden; transform: translateY(-50%);
  color: var(--muted); font-size: 0.95rem; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
.site-search-hint .hint-short, .site-search input:not(:placeholder-shown) ~ .site-search-hint { display: none; }
.site-search input:hover { border-color: var(--border-strong); }
.site-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Подсказка сочетания: ⌘K на Mac, Ctrl K на остальных (data-platform — скрипт в <head>); на сенсорных экранах её нет. */
.search-shortcut {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 1px 7px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--muted);
  font: 600 0.75rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; pointer-events: none;
}
.search-shortcut::before { content: "Ctrl K"; }
:root[data-platform="mac"] .search-shortcut::before { content: "⌘K"; }
.site-search input:focus ~ .search-shortcut { visibility: hidden; }
@media (hover: none), (pointer: coarse) {
  .search-shortcut { display: none; }
  .site-search input { padding-right: 16px; }
  .site-search-hint { right: 16px; }
}
.menu-separator { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
/* Номер версии — мелко, последней строкой меню учётной записи (решение 127). */
.menu-version { margin-top: 6px; padding: 8px 10px 2px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; }
.panel-heading .button { flex: none; white-space: nowrap; }

.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;
}

.tabbar { display: none; }

/* Шапка сжимается по шагам, чтобы строка помещалась без прокрутки вбок, а название читалось целиком:
   сначала у разделов меню меньше отступы, у «Вида» остаётся значок; потом меню уходит вниз экрана. Пункты меню
   короткие (решение 147), поэтому шаги — прежние 1000 и 900 px. */
@media (max-width: 1000px) {
  .main-nav a { padding: 8px 9px; }
  .view-label { display: none; }
  .view-menu > summary { gap: 4px; padding: 0 8px; }
}

@media (max-width: 900px) {
  .main-nav, .home-heading .home-add { display: none; }
  /* Меню внизу экрана: название слева, справа — «?», средства вида и кружок (решения 113, 124); поиск — строкой
     ниже. */
  .topbar-inner { gap: 8px; }
  .topbar-end { display: contents; }
  .brand { margin-right: auto; }
  /* «?» есть не на всех страницах — он левее «Вида»: постоянные кнопки у правого края не сдвигаются при переходах. */
  .view-controls { order: 2; }
  .view-label { display: inline; }
  .view-menu > summary { gap: 6px; padding: 0 10px 0 11px; }
  .search-row-inner { grid-template-columns: minmax(0, 640px); justify-content: center; }
  .site-search { grid-column: 1; }
  .topbar .page-help { order: 1; }
  .main-nav + .page-help { margin-left: 0; }
  .topbar .account { order: 3; }
  /* Длинное меню под кружком прокручивается выше нижнего меню, а не уходит под него. */
  .account .menu-list { max-height: calc(100vh - 146px - env(safe-area-inset-bottom)); }
  body.has-tabbar main.shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* Поле, до которого докручивает браузер (фокус с клавиатуры, #якорь), встаёт над нижним меню, а не под ним
     (решение 146; высота меню снова прежняя, решение 147). */
  html:has(body.has-tabbar) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-tabbar .app-update { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .has-app-update body.has-tabbar main.shell { padding-bottom: calc(96px + env(safe-area-inset-bottom) + var(--app-update-height, 0px) + 16px); }
  /* Колонки равные, но не уже своей подписи (DOC2): «Документы» длиннее остальных и на 360 px берёт ширину слова
     у соседей, а не налезает на них. Подписи короткие, в одну строку (решение 147). */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
  }
  /* Промежуток между значком и подписью — отступ значка, а не gap сетки: у пункта третья строка нулевой высоты —
     полужирная копия подписи (data-nav-label), и gap добавил бы к ней лишние 2 px высоты. */
  .tabbar a {
    display: grid; justify-items: center; min-height: 48px; padding: 4px 0;
    border-radius: 10px; color: var(--muted); font-size: 0.75rem; font-weight: 500;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .tab-icon { width: 24px; height: 24px; margin-bottom: 2px; }
  .tab-add .tab-icon { width: 32px; height: 24px; padding: 2px 6px; border-radius: 8px; background: var(--accent-fill); color: #fff; }
}

/* Самые узкие телефоны (320 px): название и три кружка помещаются в строку даже с полосой прокрутки; пять подписей
   нижнего меню, включая «Документы», читаются целиком с промежутками между словами (DOC2). */
/* Телефон: в шапке — название, «Вид» значком, «?» и кружок, как прежде с лупой. «Шире» скрыт уже с 900 px; тема —
   первой строкой меню «Вид», которое открывается во всю ширину под шапкой. */
@media (max-width: 640px) {
  /* Длинный список баз прокручивается внутри: «Настройки базы» и ссылки внизу меню видны над нижним меню (точную высоту
     по месту кнопки ставит base-menu.js; это — запас без скрипта). */
  .base-menu .bs-scroll { max-height: max(160px, min(400px, calc(100vh - 460px))); }
  .view-controls .theme-toggle, .view-chevron, .view-label { display: none; }
  .view-controls .view-theme-row { display: block; }
  .view-menu > summary { justify-content: center; width: 36px; padding: 0; border-radius: 50%; }
  .view-icon { width: 20px; height: 20px; }
  .view-menu-list { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-width: none; }
  .view-status { top: 66px; right: 12px; left: 12px; max-width: none; }
  .search-row { padding-top: 12px; }
  .site-search input { min-height: 44px; padding-left: 42px; }
  .site-search-icon { left: 14px; }
  .site-search-hint { left: 43px; right: 16px; font-size: 1rem; }
  .site-search-hint .hint-long { display: none; }
  .site-search-hint .hint-short { display: inline; }
}

@media (max-width: 359px) {
  .topbar-inner { gap: 4px; }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  .brand-name { font-size: 0.8125rem; }
  .tabbar { padding-left: 4px; padding-right: 4px; }
  .tabbar a { font-size: 0.6875rem; }
}

/* Выбор базы, «+ Добавить», поиск и управление базами */

/* Узкая страница — настройки, базы, выбор базы, отказ, конфликт версии (задача objectdb-ui-touchups-20261005, «исправить
   чётко по всему сайту»): путь, заголовок, вкладки, пояснение и панели — одна колонка 640 px по центру рамки шапки, как
   страница формы (.form-page). В режиме «Шире» колонка не растёт: растут таблицы и карточки, а не формы и короткие списки.
   Текст и поля внутри — по левому краю. */
.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
/* Страница формы — добавление, правка, подтверждение (задача objectdb-contextual-forms, выбор пользователя 05.10.2026):
   путь, заголовок, шаги и форма — одна колонка ограниченной ширины по центру рамки шапки (.shell), одна ось у всех частей;
   в режиме «Шире» колонка не растёт. Панели формы занимают колонку целиком; текст и подписи внутри — по левому краю. */
.form-page, .page-wide .form-page, .page-wide .narrow.form-page { max-width: var(--form-page-width, 800px); margin-left: auto;
  margin-right: auto; }
.narrow.form-page { --form-page-width: 640px; }
/* Карточка записи (решение 182: выбор пользователя 06.10.2026, вариант Г2 «по виду карточки»): постоянной ширины по своему виду и
   по центру рамки шапки, в режиме «Шире» тоже — сведений немного, рабочая область не растягивается, вкладки при
   переключении не сдвигаются. Объект, договор, поставщик, квитанция — 960 px (с боковой колонкой); человек и
   организация, документы, пользователь панели управления — 800 px, как формы; база в панели управления — обычная рамка
   1200 px. Разделы, реестры и таблицы — не карточки: во всю рамку, в «Шире» — во всё окно. */
.card-frame { --card-width: 960px; width: 100%; max-width: var(--card-width); margin-left: auto; margin-right: auto; }
.card-frame.is-narrow { --card-width: 800px; }
.card-frame.is-full { --card-width: var(--page-max-width); }
.property-ui.form-page .property-form, .property-ui.form-page .property-form.narrow, .property-ui.form-page .pf-form,
.property-ui.form-page .pf-drafts, .property-ui.form-page .delete-panel, .property-ui.form-page .cell-page-panel,
.property-ui.form-page .receipt-form-panel, .property-ui.form-page .tenant-chosen, .property-ui.form-page .tenant-current {
  max-width: none; }
.property-ui.form-page.tenant-flow { max-width: var(--form-page-width, 800px); }
.choice-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.choice-list a, .choice-list .choice {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.choice-list a:hover { border-color: var(--accent); text-decoration: none; }

/* Плитки «+ Добавить» для выбранной базы (решение 186): значок слева, текст справа. Шесть плиток с «Новой базой» — две
   строки по три; пять (только «Просмотр» и новая база — меньше) — три и две во всю ширину, без пустой клетки. */
.add-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.add-grid > .add-tile { grid-column: span 2; }
.add-grid > .add-tile:nth-child(4):nth-last-child(2), .add-grid > .add-tile:nth-child(5):nth-last-child(1) { grid-column: span 3; }
.add-tile {
  display: flex; align-items: flex-start; gap: 14px; min-height: 88px; padding: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font: inherit; cursor: pointer;
}
.add-tile:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); text-decoration: none; }
.add-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.add-icon svg { width: 22px; height: 22px; }
.add-text { display: grid; gap: 3px; min-width: 0; }
.add-tile strong { font-size: 1.05rem; line-height: 1.3; }
.add-hint { color: var(--muted); font-size: 0.9rem; }
.add-reason { color: var(--text); font-size: 0.875rem; }
.add-tile:disabled, .add-tile[aria-disabled="true"] { cursor: default; background: var(--bg); }
.add-tile:disabled strong, .add-tile[aria-disabled="true"] strong { color: var(--muted); }
.add-tile:disabled .add-icon, .add-tile[aria-disabled="true"] .add-icon { background: var(--border); color: var(--muted); }
.add-tile:disabled .soon, .add-tile[aria-disabled="true"] .soon { background: var(--surface); border: 1px solid var(--border); }
.add-tile-wide { max-width: 520px; }
a.add-tile:hover { text-decoration: none; }
.soon { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 0.75rem; font-weight: 600; }

.results { margin: 0; padding: 0; list-style: none; }
/* Статус — справа от названия; не помещается рядом (телефон 320 px, «Нет сведений об аренде») — строкой ниже, а не за
   край экрана. */
.results li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.results li > div { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.results li:first-child { border-top: 0; }
/* Страницы поиска (решение 191) — тот же переключатель, что у списков (.property-ui .pagination в
   properties/interface.css): страница поиска этих стилей не подключает. */
.pagination { display: flex; justify-content: center; gap: 20px; padding: 18px; font-size: .82rem; color: var(--muted); }
.result-kind { color: var(--muted); font-size: 0.85rem; }

.danger-zone { border-color: var(--danger-soft); }
.button.danger { background: var(--danger-fill); color: #fff; }
.button.danger:hover { background: var(--danger-fill-hover); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.archived-banner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft);
}
.panel-text { margin: 6px 0 12px; }

/* Настройки */

.channels { margin: 0; padding: 0; list-style: none; }
.channel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.channel:first-child { border-top: 0; }
.channel-text { display: grid; gap: 2px; }
.channel-state { color: var(--success); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.channel-toggle { display: flex; flex: 1; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.channel-toggle input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.channel.is-soon .channel-text > strong { color: var(--muted); }
.channel-note { margin-top: 4px; padding: 6px max(10px, calc(100% - 80ch - 10px)) 6px 10px; border-radius: 8px; background: var(--warning-soft); }
.first-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }

/* Кнопки и поля */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.button:hover { text-decoration: none; }
.button.primary { background: var(--accent-fill); color: #fff; }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.button.secondary:hover { background: var(--bg); }
/* Выгрузка в Excel — зелёный контур и текст на белом (решение 122); зелёный на белом — контраст 5,4:1. */
.button.excel { background: var(--surface); color: var(--success); border-color: var(--success); }
.button.excel:hover { background: var(--success-soft); }
/* Действия со списком — синий контур и текст на белом, как у кнопок выгрузки (решение 122). */
.button.outline { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.button.outline:hover { background: var(--accent-soft); }
/* Заметное второстепенное действие внутри блока (задача objectdb-monthly-utilities-standard, «Добавить / Изменить
   арендатора»): лёгкий голубой фон, синяя надпись и рамка — токены темы, контраст и в тёмной теме. */
.button.soft { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-dashed); }
.button.soft:hover { background: var(--accent-soft); border-color: var(--accent); }
.button[hidden] { display: none; }
.button.small { min-height: 36px; padding: 0 12px; font-size: 0.875rem; }
.button.wide { width: 100%; }

.link-button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
/* Разрушительное действие окна — текстом слева в полосе действий (стандарт окон, решение 187): «Убрать из базы»,
   «Убрать … из объекта», «Убрать связь»; вопрос перед ним встаёт над полосой (form-guard.js). */
.danger-text { color: var(--danger); }
/* Занимает остаток строки (flex: 1 1 0) и переносит свой текст, а не сдвигает «Отмена» и «Сохранить» на новую строку. */
.form-actions .form-danger { flex: 1 1 0; min-width: 0; margin-right: auto; font-size: .86rem; font-weight: 600; text-align: left; }
.form-actions .form-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 4px; }

.field { display: grid; gap: 6px; margin: 20px 0; }
.field > span:first-child { font-weight: 600; }
.field input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 1.05rem; color: var(--text);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input[inputmode="numeric"] { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
/* Крупные разреженные цифры — у кода из письма; поля даты и месяца с календарём (фильтры панели управления) — обычные. */
.field input[data-date-input], .field input[data-month-input] { font-size: 1rem; letter-spacing: normal; text-align: left; }
.field > .date-field { margin-top: 0; }
.field select {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 1.05rem; color: var(--text);
}
.field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 16px; }
.field-pair .field { margin: 12px 0 4px; }
.field-error, .form-error { color: var(--danger); font-size: 0.9rem; }
.form-error { margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: var(--danger-soft); }
.form-notice { margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); }

/* Вход */

.auth-card {
  max-width: 420px; margin: 32px auto 0; padding: 28px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 20px 0 16px; }

.dev-note {
  margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--warning-border); border-radius: 10px;
  background: var(--warning-soft); font-size: 0.95rem;
}
.dev-label {
  display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--warning-text);
}
.dev-code { font-size: 1.2rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }

/* Сообщения */

.flash { display: grid; gap: 8px; margin-bottom: 16px; }
.flash p { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); }
.flash .flash-success { background: var(--success-soft); color: var(--success); }
.flash .flash-error { background: var(--danger-soft); color: var(--danger); }

/* Вышла новая версия, а на странице идёт работа с данными (решение 127): плашка внизу поверх страницы, на телефоне —
   над нижним меню. Она не сдвигает страницу, а под ней страница докручивается до конца на высоту плашки. */
.app-update {
  position: fixed; left: 50%; bottom: 20px; z-index: 30; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  width: min(620px, calc(100vw - 32px)); padding: 12px 10px 12px 16px; border-radius: var(--radius);
  background: var(--toast-bg); color: #fff; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.28);
}
.app-update[hidden] { display: none; }
.app-update p { flex: 1 1 240px; }
.app-update .button { flex: none; }
.app-update .button:focus-visible, .app-update-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.app-update-close {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: none; color: #cfd4dc; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.app-update-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.has-app-update main.shell { padding-bottom: calc(48px + var(--app-update-height, 0px) + 20px); }

/* Главная «События» и списки событий */

.page-heading { margin-bottom: 20px; }
.page-heading .lede::first-letter { text-transform: uppercase; }

.panel {
  margin-bottom: 20px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.count {
  min-width: 28px; padding: 2px 9px; border-radius: 999px; text-align: center;
  background: var(--bg); font-weight: 600; font-size: 0.875rem;
}
.count-alert { background: var(--danger-soft); color: var(--danger); }
/* Счётчик записей блока — сразу за названием, через 8 px, по середине строки заголовка (решение 188; пользователь
   06.10.2026: «Счётчик файлов далеко. На всех формах, гд он используется надо сделать рядом с названием», «ну не прямо
   вплотную — с адекватным пробелом»). Справа в заголовке остаются только действия; длинное название переносится, бейдж
   — за последним словом. Середина бейджа — на середине строки текста (middle и −0,15 em: замер — до 0,3 px при любом
   размере заголовка). */
:is(h2, h3) .count { position: relative; top: -0.15em; display: inline-block; margin-left: 8px; vertical-align: middle;
  white-space: nowrap; }
.empty { padding: 12px 0 4px; color: var(--muted); }

.reminders { margin: 0; padding: 0; list-style: none; }
.reminder {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 8px 16px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.reminder:first-child { border-top: 0; }
.reminder-date { display: grid; }
.reminder.is-overdue .reminder-date strong { color: var(--danger); }
/* Заголовок события — обычным шрифтом: жирные в списке только категория и дата (решение 124). */
.reminder-title { font-weight: 400; }
.reminder-meta { margin-top: 2px; color: var(--muted); font-size: 0.925rem; }
.reminder-note { margin-top: 4px; font-size: 0.925rem; }
.reminder-actions { display: flex; gap: 8px; align-items: flex-start; }
.reminder.is-settled { opacity: 0.7; }
.settled { color: var(--success); font-weight: 600; font-size: 0.925rem; }

.tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--bg); color: var(--muted); font-size: 0.8rem; font-weight: 500; vertical-align: 1px;
}
.tag-base { background: var(--accent-soft); color: var(--accent); }

/* Статус — один вид во всех разделах (решение 131): подпись всегда, цвет и точка — подсказка. Тон задаёт
   core/statuses.py, разметку — тег {% status %}. */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px;
  background: var(--tone-neutral-soft); color: var(--tone-neutral-text);
  font-size: 0.75rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone-neutral); }
.status.large { padding: 8px 12px; font-size: 0.88rem; }
.status.large::before { width: 8px; height: 8px; }
.status.tone-success { background: var(--tone-success-soft); color: var(--tone-success-text); }
.status.tone-success::before { background: var(--tone-success); }
.status.tone-info { background: var(--tone-info-soft); color: var(--tone-info-text); }
.status.tone-info::before { background: var(--tone-info); }
.status.tone-violet { background: var(--tone-violet-soft); color: var(--tone-violet-text); }
.status.tone-violet::before { background: var(--tone-violet); }
.status.tone-warning { background: var(--tone-warning-soft); color: var(--tone-warning-text); }
.status.tone-warning::before { background: var(--tone-warning); }
.status.tone-danger { background: var(--tone-danger-soft); color: var(--tone-danger-text); }
.status.tone-danger::before { background: var(--tone-danger); }
.reminder-title .status, .events-next-title .status { margin-left: 6px; vertical-align: 1px; }

.snooze .menu-list { display: grid; gap: 2px; min-width: 230px; }
.snooze-date { display: grid; gap: 4px; padding: 8px 10px 4px; font-size: 0.875rem; color: var(--muted); }
.snooze-date input { min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
/* Только кнопка «Отложить до даты» внутри меню: сама «Отложить» стоит вровень с соседней кнопкой. */
.snooze .menu-list .button { margin: 4px 10px 6px; }

.section-title { margin: 28px 0 12px; }
.base-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.base-card {
  display: grid; gap: 14px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.base-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.base-card h3 a { color: var(--text); }
.role { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.counters div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.counters dt { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.counters dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.base-alert { color: var(--danger); font-weight: 600; font-size: 0.925rem; }
.base-alert a { color: inherit; }
/* Сводка подраздела (решение 146): число просроченных — его объектов, а ссылка ведёт на все события базы — обычной
   ссылкой, не частью предупреждения. */
.base-alert .base-alert-all { color: var(--accent); font-weight: 500; white-space: nowrap; }
.base-card .button { justify-self: start; }

/* Телефон */

@media (max-width: 640px) {
  h1 { font-size: 1.4rem; }
  .auth-card { margin-top: 16px; padding: 22px 18px; }
  .panel { padding: 14px 16px; }
  .field-pair { grid-template-columns: 1fr; }
  .reminder { grid-template-columns: 1fr; gap: 6px; }
  .reminder-date { display: flex; gap: 8px; align-items: baseline; }
  .reminder-actions .snooze .menu-list { left: 0; right: auto; }
  .add-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
  .add-grid > .add-tile, .add-grid > .add-tile:nth-child(4):nth-last-child(2), .add-grid > .add-tile:nth-child(5):nth-last-child(1) { grid-column: auto; }
  .add-tile { min-height: 0; padding: 12px 14px; }
}

.more > summary {
  display: inline-flex; margin-top: 4px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--accent); font-weight: 600; font-size: 0.925rem; cursor: pointer; list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--accent-soft); }
.more .more-open, .more[open] .more-closed { display: none; }
.more[open] .more-open { display: inline; }
.more[open] > summary { margin-bottom: 4px; }
.more-loading { padding: 12px 0; }
.panel-meta { display: inline-flex; align-items: center; gap: 10px; }
.more .reminder:first-child { border-top: 1px solid var(--border); }

/* На телефоне поля ввода не мельче 16 px, иначе iPhone увеличивает страницу при вводе (решение 118). */
@media (max-width: 640px), (pointer: coarse) {
  .site-search input, .snooze-date input { font-size: 16px; }
}

/* Помощь на странице (решение 119): «?» в шапке открывает статью об этой странице и статьи её раздела. */
.page-help > summary {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-weight: 700;
}
.page-help > summary:hover, .page-help[open] > summary { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.page-help-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: min(440px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* На компьютере «?» стоит после разделов меню, поэтому панель открывается под ним по центру (решение 124). */
@media (min-width: 901px) {
  .main-nav + .page-help .page-help-panel { right: auto; left: 50%; transform: translateX(-50%); }
}
.page-help-body { max-height: min(70vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 16px; }
.page-help-body > :first-child { margin-top: 0; }
.page-help-section { margin: 0; font-size: 0.875rem; }
.page-help-section a { color: var(--muted); }
.page-help-title { margin: 4px 0 0; font-size: 1.15rem; }
.page-help-body .help-body { margin-top: 8px; }
.page-help-body .help-body h2 { margin-top: 18px; font-size: 1.05rem; }
.page-help-more { margin: 18px 0 4px; font-size: 1rem; }
.page-help-links {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding-top: 10px;
  border-top: 1px solid var(--border); font-size: 0.925rem;
}
@media (max-width: 640px) {
  /* На телефоне панель — во всю ширину под шапкой. */
  .page-help .page-help-panel { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; }
  .page-help-body { max-height: calc(100vh - 190px); }
}

/* Главная «События» (решения 120, 121): плитки «Ближайшие и просроченные» полосой во всю ширину, под ними «Сводка
   базы», ниже — «Список событий» по категориям.
   Блоки идут друг под другом, поэтому по высоте им не нужно совпадать при любом числе событий и баз. */
.home-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }

/* Главная (задача objectdb-home-page, решения пользователя 04.10.2026; макет .local/home-page/mock). Сводка состояния:
   «Сегодня» с делами, «Деньги в месяце», «Мои объекты», «Ближайшие даты», сводка строкой. Крупнее обычного: заголовки
   дел и адреса 1,05–1,1 rem, кнопки не ниже 44 px; цвет — только у исключений, и всегда со словом (ANALYSIS.md § 4). */
.home-widget-board .panel-heading { margin-bottom: 10px; }
.home-widget-board .panel-heading > a { white-space: nowrap; }
.home-widget-board .button, .hp-today .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* «Сегодня»: состояние одной строкой, слева цветная полоса и знак; дела — списком под ним. */
.hp-today { border-left: 6px solid var(--tone-neutral); }
.hp-level-overdue { border-left-color: var(--tone-danger); }
.hp-level-check { border-left-color: var(--tone-warning); }
.hp-level-ok { border-left-color: var(--tone-success); }
.hp-today-head { display: flex; align-items: flex-start; gap: 14px; }
.hp-mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #fff; background: var(--tone-neutral); }
.hp-level-overdue .hp-mark { background: var(--tone-danger); }
.hp-level-check .hp-mark { background: var(--tone-warning); }
.hp-level-ok .hp-mark { background: var(--tone-success); }
.hp-today h2 { font-size: 1.45rem; line-height: 1.2; }
.hp-today-sub { margin-top: 4px; color: var(--muted); font-size: 1rem; max-width: 70ch; }
.hp-items { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.hp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 16px 14px 14px; border: 1px solid var(--border); border-left-width: 5px; border-radius: 10px; background: var(--surface); }
.hp-item.is-overdue { border-left-color: var(--tone-danger); background: color-mix(in srgb, var(--tone-danger-soft) 55%, var(--surface)); }
.hp-item.is-check { border-left-color: var(--tone-warning); }
.hp-item.is-settled { border-left-color: var(--tone-success); background: var(--surface); }
.hp-item-title { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.hp-sum { font-weight: 700; white-space: nowrap; }
.hp-item-where { margin-top: 3px; color: var(--muted); }
.hp-item-when { margin-top: 3px; }
.hp-item-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.hp-item-actions form { margin: 0; }
.hp-item-actions .settled { color: var(--tone-success-text); font-weight: 600; }
.hp-today-foot { margin-top: 12px; font-weight: 600; }
.hp-today-foot .hp-archived { margin-left: 12px; font-weight: 400; }
/* Приглашение без своих баз (задача objectdb-base-invitations): две кнопки с промежутком и при переносе. */
.hp-today-foot.hp-invited { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hp-today-foot.hp-invited .hp-archived { margin-left: 2px; }
.hp-item-title, .hp-obj-name, .hp-date-text p, .hp-cell strong { overflow-wrap: anywhere; }

/* Ссылка на таблицу «Платежи за [месяц]» — сразу под «Деньгами» (задача objectdb-home-document-tiles): заметная полоса
   в мягком синем, значок рубля, название, что в таблице, и «Открыть таблицу →». При нескольких базах — заголовок и
   плитка-ссылка у каждой базы. Пока ссылка видна, такая же ссылка в заголовке «Денег» не нужна. */
.home-widget-board:has(> [data-widget="month-table"]:not([hidden])) .hp-money-link { display: none; }
.hp-month { padding: 0; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); }
.hp-month-link { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  min-height: 76px; padding: 14px 20px; border-radius: inherit; color: var(--text); text-decoration: none; }
.hp-month-link:hover { text-decoration: none; }
.hp-month-link:hover .hp-month-go { text-decoration: underline; }
.hp-month-link:focus-visible, .hp-month-base:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hp-month-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--surface); color: var(--accent); }
.hp-month-icon svg { width: 26px; height: 26px; }
.hp-month-text { min-width: 0; }
.hp-month-text strong, .hp-month-head h2 { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.hp-month-text small, .hp-month-head p { display: block; margin-top: 3px; color: var(--muted); font-size: .95rem; line-height: 1.35; }
.hp-month-go { color: var(--accent); font-weight: 700; white-space: nowrap; }
.hp-month.is-several { padding: 16px 20px; }
.hp-month-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; }
.hp-month-bases { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; }
.hp-month-base { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
.hp-month-base:hover { border-color: var(--accent); text-decoration: none; }
.hp-month-base strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.hp-month-base small { display: block; margin-top: 2px; color: var(--muted); font-size: .9rem; }

/* Деньги месяца: по базе — «Аренда за октябрь» и «ЖКУ за сентябрь», в каждой три клетки словами. */
.hp-money-base + .hp-money-base { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.hp-money-basename { margin-bottom: 6px; }
.hp-money .panel-heading, .hp-objects .panel-heading, .hp-dates .panel-heading { flex-wrap: wrap; }
.hp-money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 36px; }
.hp-money-label { font-weight: 600; color: var(--muted); font-size: .9rem; }
.hp-money-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.hp-cell { min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border-soft); }
.hp-cell small { display: block; color: var(--muted); font-size: .85rem; font-weight: 600; }
.hp-cell strong { display: block; margin-top: 2px; font-size: 1.3rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hp-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: .88rem; line-height: 1.3; }
.hp-cell.is-ok strong { color: var(--tone-success-text); }
.hp-cell.is-bad { background: var(--tone-danger-soft); border-color: transparent; }
.hp-cell.is-bad strong, .hp-cell.is-bad small { color: var(--tone-danger-text); }
.hp-cell.is-empty strong { color: var(--muted); font-weight: 500; }

/* Мои объекты строками: значок, адрес и факты, справа — что требует внимания или тихое «в порядке». */
.hp-object-rows { list-style: none; margin: 0; padding: 0; }
.hp-object { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.hp-object:first-child { border-top: 0; }
.hp-obj-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.hp-obj-icon svg { width: 22px; height: 22px; }
.hp-obj-main { min-width: 0; }
.hp-obj-name { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.hp-obj-name a { color: var(--text); }
.hp-obj-kind { margin-left: 4px; color: var(--muted); font-weight: 400; font-size: .9rem; }
.hp-obj-facts { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); }
.hp-obj-facts .status { font-size: .8rem; }
.hp-obj-flag { text-align: right; max-width: 280px; }
.hp-obj-flag .status { font-size: .85rem; padding: 6px 10px; white-space: normal; text-align: left; }
.hp-ok-text { color: var(--tone-success-text); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.hp-obj-flag a.status:hover { text-decoration: none; filter: brightness(.96); }
.hp-folded { margin-top: 4px; border-top: 1px solid var(--border-soft); }
.hp-folded > summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-height: 44px; padding: 10px 0 4px; color: var(--muted); cursor: pointer; list-style: none; }
.hp-folded > summary::-webkit-details-marker { display: none; }
.hp-folded-toggle { color: var(--accent); font-weight: 600; }
.hp-folded[open] .hp-folded-toggle { display: none; }
.hp-folded-note { margin-top: 8px; }

/* Ближайшие даты: дата словами, что случится, с чем связано, переход. */
.hp-date-rows { list-style: none; margin: 0; padding: 0; }
.hp-date-rows li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.hp-date-rows li:first-child { border-top: 0; }
.hp-date strong { display: block; font-size: 1.05rem; }
.hp-date small, .hp-date-text small { display: block; color: var(--muted); font-size: .9rem; }
.hp-date-text p { font-weight: 600; }
.hp-date-link { white-space: nowrap; }

/* Сводка: одна строка справочных чисел и вход в базу. */
.hp-summary { background: var(--bg); box-shadow: none; padding: 14px 20px; }
.hp-summary-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.hp-summary-row + .hp-summary-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.hp-summary .button { background: var(--surface); }
.hp-summary .hp-archived { margin-top: 10px; }
.section-empty { color: var(--muted); }

@media (max-width: 640px) {
  .hp-today h2 { font-size: 1.3rem; }
  .hp-item { grid-template-columns: 1fr; padding: 12px 14px 12px 12px; }
  .hp-item-actions { justify-content: flex-start; }
  .hp-item-actions .button, .hp-item-actions form { flex: 1 1 auto; }
  .hp-item-actions form .button { width: 100%; }
  .hp-object { grid-template-columns: 40px minmax(0, 1fr); }
  .hp-obj-flag { grid-column: 2; text-align: left; max-width: none; }
  .hp-date-rows li { grid-template-columns: 1fr; gap: 2px; }
  .hp-date-link { justify-self: start; }
  .hp-summary-row .button { width: 100%; }
  .hp-month-link { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; }
  .hp-month-link .hp-month-icon, .hp-month-head .hp-month-icon { width: 44px; height: 44px; }
  .hp-month-link .hp-month-go { grid-column: 2; }
  .hp-month.is-several { padding: 14px 16px; }
  .hp-month-head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .hp-money-cells { grid-template-columns: 1fr; gap: 6px; }
  .hp-cell { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 8px 12px; }
  .hp-cell strong { margin: 0; }
  .hp-cell span { grid-column: 2; margin: 0; }
}
.event-group + .event-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Категория — подзаголовок со значком (решение 124), чтобы не сливаться с заголовками событий под ней.
   Число стоит сразу за названием и не разрывается; на узком экране оно переходит на строку ниже целиком. */
.events-list-title, .event-group-title { display: flex; align-items: center; gap: 10px; }
/* Выбрана одна категория: на узком экране «Все категории» переходит под заголовок целиком, а не по словам. */
.events-list > .panel-heading { flex-wrap: wrap; row-gap: 4px; }
.events-list > .panel-heading > a { white-space: nowrap; }
.event-group-title { margin: 2px 0 6px; font-size: 1.05rem; }
.event-group-icon {
  display: grid; flex: none; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent);
}
.event-group-icon svg { width: 18px; height: 18px; }
.event-group-name { min-width: 0; }
.event-group-name .count { display: inline-block; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.base-statuses-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; color: var(--muted); font-size: 0.875rem; }
.base-statuses-head strong { color: var(--text); }
/* Шкалы статусов: у каждого свой цвет (проверены на различимость, в том числе при нарушениях цветового зрения),
   рядом подпись и число. Длина шкалы — доля среди сдаваемых объектов. */
/* Колонки общие для всех строк (subgrid): подписи — по самой длинной, шкалы начинаются на одной линии.
   Браузер без subgrid берёт первую запись — постоянную ширину подписи. */
.status-scales {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(2.5em, max-content); gap: 7px 10px;
  margin: 0; padding: 0; list-style: none; font-size: 0.875rem;
}
.status-scale {
  display: grid; grid-column: 1 / -1; align-items: center; gap: 10px;
  grid-template-columns: 9.5em minmax(0, 1fr) 2.5em; grid-template-columns: subgrid;
}
.status-scale-track { height: 10px; overflow: hidden; border-radius: 4px; background: var(--track); }
.status-scale-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.status-scale-count { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.status-scale.is-zero { color: var(--muted); }
.status-scale.is-zero .status-scale-count { font-weight: 400; }
.status-rented { background: var(--tone-success); }
.status-free { background: var(--tone-violet); }
.status-repair { background: var(--tone-warning); }
.status-planned { background: var(--tone-info); }
.status-unknown { background: var(--tone-neutral); }
/* Статусы договора: «Действует» и «Готовится» — по смыслу как «Сдано» и «Планируется сдача»;
   палитра из пяти цветов проверена так же, как у объектов. */
.contract-active { background: var(--tone-success); }
.contract-preparing { background: var(--tone-info); }
.contract-finished { background: var(--tone-violet); }
.contract-terminated { background: var(--tone-danger); }
.contract-check_dates { background: var(--tone-warning); }
.summary-events { display: grid; gap: 2px; }
.summary-link { align-self: flex-start; font-size: 0.925rem; font-weight: 600; }
.base-lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.925rem; }
.text-alert { color: var(--danger); }
/* Карточка базы: в узкой карточке части идут в столбик; одна база на всю ширину — три колонки:
   числа, шкалы статусов, договоры и аренда с кнопкой. */
.base-card { container-type: inline-size; }
/* Та же сводка вверху страницы базы — без заголовка и кнопки «Открыть базу». */
.base-banner { margin-bottom: 20px; }
.base-card-body { display: grid; grid-template-rows: auto auto 1fr; gap: 14px; }
/* Кнопка «Открыть базу» прижата к низу: у карточек в одном ряду кнопки стоят на одной линии. */
.base-card-side { display: flex; flex-direction: column; gap: 12px; }
.base-card-side .button { align-self: flex-start; margin-top: auto; }
@container (min-width: 820px) {
  .base-card-body { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.2fr) minmax(0, 1.15fr); grid-template-rows: auto; align-items: start; gap: 32px; }
  .base-card-body .counters { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .base-card-body .counters div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; }
}
@media (max-width: 640px) {
  .event-group-title { font-size: 1rem; }
  .event-group-icon { width: 28px; height: 28px; }
}

/* Меню действий строки (решение 129): «⋯» и правый щелчок на компьютере, шторка снизу на телефоне и планшете
   без мыши. Пункты — только доступные этой записи и этому участнику (core/actions.py). */
.row-actions-cell { width: 52px; text-align: right; white-space: nowrap; }
.row-menu-button {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.row-menu-button::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: radial-gradient(circle, #000 1.8px, transparent 2.2px) 0 50% / 7px 7px repeat-x;
  mask: radial-gradient(circle, #000 1.8px, transparent 2.2px) 0 50% / 7px 7px repeat-x;
}
.row-menu-button:hover, .row-menu-button[aria-expanded="true"] { border-color: var(--border); background: var(--surface); color: var(--text); }
.row-menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-menu {
  position: fixed; z-index: 40; min-width: 250px; max-width: min(330px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16); font-size: 0.925rem;
}
.row-menu form { margin: 0; }
.row-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0;
  border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .row-menu [role="menuitem"]:hover { background: var(--bg); text-decoration: none; } }
.row-menu [role="menuitem"]:focus-visible { outline: none; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.row-menu-icon { flex: none; color: var(--muted); }
.row-menu-hint { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.row-menu hr { margin: 5px 2px; border: 0; border-top: 1px solid var(--border); }
.row-menu [data-key="delete"], .row-menu [data-key="delete"] .row-menu-icon { color: var(--danger); }
.row-menu-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(16, 24, 40, 0.38); }
.row-menu.is-sheet {
  top: auto; right: 0; bottom: 0; left: 0; min-width: 0; max-width: none; max-height: 85vh;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.2); font-size: 1rem;
}
.row-menu.is-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: var(--border-strong); }
.row-menu-head { display: grid; gap: 2px; padding: 0 6px 10px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.row-menu-head span { color: var(--muted); font-size: 0.875rem; }
.row-menu.is-sheet [role="menuitem"] { min-height: 48px; gap: 12px; padding: 0 8px; border-bottom: 1px solid var(--border-soft); border-radius: 0; }
.row-menu.is-sheet hr { display: none; }
.row-menu-cancel {
  display: block; width: 100%; min-height: 48px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
tr.has-open-menu { background: var(--row-hover); }

/* «Файлы» у договоров (решение 133): число файлов договора и приложений; окно поверх списка. */
.files-button {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.files-button:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.files-none { color: var(--muted); }
.files-dialog {
  width: min(var(--window-l), calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(16, 24, 40, 0.3);
}
.files-dialog[open] { display: flex; flex-direction: column; }
.files-dialog::backdrop { background: rgba(16, 24, 40, 0.42); }
.files-dialog-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 6px; }
.files-dialog-head h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
.files-dialog-subtitle { margin-top: 2px; color: var(--muted); font-size: 0.875rem; }
.files-dialog-close {
  flex: none; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.files-dialog-close:hover { background: var(--bg); color: var(--text); }
.files-dialog-body { padding: 0 20px 18px; overflow-y: auto; }
.files-group { margin: 14px 0 6px; color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.files-empty, .files-loading { margin: 12px 0; color: var(--muted); }
.files-recover { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.files-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; }
@media (max-width: 640px) {
  .files-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}

/* Страница «Все события» (решение 128): вид события — меню заголовка (компактная навигация), выбор базы и строка
   «Показано: …». */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.875rem; color: var(--muted); }
.breadcrumbs strong { color: var(--text); font-weight: 600; }
.event-filters { margin-bottom: 16px; padding: 14px 16px; }
.event-filter-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 0.925rem; }
.event-filter-state { color: var(--muted); }
.event-filter-state strong { color: var(--text); font-weight: 600; }
.events-empty { padding: 24px 16px; text-align: center; }
.events-empty p { margin-top: 6px; color: var(--muted); }

/* Плитка-ссылка на платежи квартир (решение 153) — вкладки компактной навигации «Жилой недвижимости». Вид плиток
   подразделов: значок в мягком квадрате, название, серое пояснение и стрелка. */
.pay-link-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); line-height: 1.25; }
.pay-link-tile:hover { border-color: var(--accent); text-decoration: none; }
.pay-link-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pay-link-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); }
.pay-link-icon svg { width: 20px; height: 20px; }
.pay-link-text { min-width: 0; }
.pay-link-text strong { display: block; font-weight: 700; }
.pay-link-text small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }
.pay-link-arrow { color: var(--accent); font-weight: 700; }
/* Компактная навигация — единый стандарт экранов (core/compact_nav.html, решение 155; уточнено пользователем 02.10.2026).
   Два разных элемента: путь — строка уровней от «Главной» до текущего элемента (текущий — тёмным, не ссылка), сразу за
   ним — кнопка возврата к месту открытия, справа — меню базы (решение 197); вкладки — отдельным блоком под заголовком, в
   виде ярлычков: открытая светлая, с синей полосой сверху и сливается с линией под строкой вкладок. Боковой панели нет:
   таблица занимает всю ширину содержимого (обычную или «Шире»). На телефоне путь — шаг назад «‹ родитель», возврат —
   строкой ниже. Строка пути — не ниже кнопки меню базы, и там, где меню нет: заголовок не сдвигается при переходах. */
.compact-nav { margin: 4px 0 18px; }
.compact-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: 32px; font-size: 0.875rem; }
.compact-nav .breadcrumbs, .property-ui .compact-nav .breadcrumbs { margin: 0; font-size: 0.875rem; min-width: 0; }
.compact-nav .crumb-current { overflow: hidden; max-width: 46ch; color: var(--text); font-weight: 600; text-overflow: ellipsis;
  white-space: nowrap; }
.compact-path-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.compact-back { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--accent);
  font-size: .8125rem; font-weight: 600; }
.compact-back:hover { background: var(--accent-soft); text-decoration: none; }
.compact-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compact-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin-top: 12px; }
.compact-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.compact-title > h1, .property-ui .compact-title > h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
.category-menu { min-width: 0; }
.category-menu > summary { display: flex; align-items: center; gap: 6px; margin-left: -6px;
  padding: 2px 6px; border-radius: 8px; color: var(--text); }
.category-menu > summary:hover, .category-menu[open] > summary { background: var(--surface); }
.category-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.category-menu h1, .property-ui .category-menu h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.category-chevron { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform .15s; }
.category-menu[open] .category-chevron { transform: rotate(180deg); }
.category-list { left: -6px; right: auto; width: max-content; min-width: 260px; max-width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.category-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.category-list a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.category-item { display: grid; min-width: 0; }
.category-hint { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.category-count { color: var(--muted); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.category-count.is-alert { color: var(--danger); }
.compact-count { color: var(--muted); white-space: nowrap; }
.compact-switch { display: inline-flex; flex: none; gap: 4px; }
.compact-step { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.25rem;
  line-height: 1; text-decoration: none; }
.compact-step:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.compact-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compact-step.is-disabled { opacity: .35; }
/* Вкладки — ярлычки (выбор пользователя 02.10.2026). Видны все доступные вкладки: меню «Ещё» нет, строка не листается
   вбок (задача objectdb-counterparty-overview-navigation). Не помещаются в строку — переносятся; перенесённую строку
   layout.html отмечает is-wrapped, и вкладки становятся кнопками в несколько строк: ярлычок верхней строки висел бы над
   чужой линией. */
.view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; border-bottom: 1px solid var(--border); }
.view-tabs > a { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 42px;
  margin-bottom: -1px; padding: 0 18px; border: 1px solid var(--border); border-radius: 10px 10px 0 0;
  background: var(--tab-idle); color: var(--tab-idle-text); font-weight: 600; white-space: nowrap; }
.view-tabs > a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.view-tabs > a[aria-current="page"] { border-bottom-color: var(--surface); background: var(--surface);
  color: var(--text); box-shadow: inset 0 3px 0 var(--accent); }
.view-tabs > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.view-tab-count { color: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
.view-tab-count::before { content: "· "; }
.view-tab-short { display: none; }
/* Перенесённая строка — кнопки: открытая — синяя рамка на мягком синем, остальные — белые с рамкой; линии нет. */
.view-tabs.is-wrapped { gap: 8px; border-bottom: 0; }
.view-tabs.is-wrapped > a { min-height: 40px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--surface);
  color: var(--text); }
.view-tabs.is-wrapped > a:hover { border-color: var(--accent); }
.view-tabs.is-wrapped > a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
  box-shadow: none; }
.view-tabs.is-wrapped > a:focus-visible { outline-offset: 2px; }
/* Вкладка карточки — одна колонка во всю ширину содержимого (единый стандарт навигации): боковой колонки у вкладок нет,
   её не возвращают ни ширина «Шире», ни правила карточки квартиры, ни widgets.js (он снимает widgets-single-column). */
.property-ui .detail-grid.card-tab-grid, .page-wide .property-ui .detail-grid.card-tab-grid,
.property-ui.residential-card .detail-grid.card-tab-grid { grid-template-columns: minmax(0, 1fr); }
/* Сводка записи под навигацией (карточки объекта, договора, контакта): факты, статус и действие одной строкой. */
.card-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: -6px 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.card-summary-main { min-width: 0; flex: 1 1 22rem; }
.card-address { margin: 0 0 2px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.card-summary-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.card-facts { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .9rem; }
.card-facts li:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--border); }
.card-facts a { color: var(--accent); }
/* Тихая пометка «Скан договора не приложен · Приложить · Не напоминать» под фактами сводки договора (решение 184): мельче
   фактов и без рамки; «Не напоминать» ещё тише «Приложить» — серая, с бледным подчёркиванием. Во вкладке «Файлы» той
   же строкой — «Напоминание о скане выключено · Напоминать снова». */
.card-scan-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 4px 0 0; color: var(--muted);
  font-size: .85rem; }
.card-scan-note > :not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--border); }
.card-scan-note form { display: inline; margin: 0; }
.card-scan-note a { color: var(--accent); }
.card-scan-note .link-button { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border);
  text-underline-offset: 3px; }
.card-scan-note .link-button:hover { text-decoration-color: currentColor; }
/* Фото или логотип контрагента и заглушка (задача objectdb-counterparty-overview-navigation): один размер в каждом месте,
   изображение не искажается — фото человека заполняет круг (cover, лицо обычно в верхней части кадра), логотип
   организации целиком вписан в скруглённый квадрат на белой подложке (contain). */
.cp-avatar { --size: 32px; display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size);
  height: var(--size); overflow: hidden; border-radius: 50%; user-select: none; }
.cp-avatar.is-row { --size: 40px; }
.cp-avatar.is-large { --size: 88px; }
.cp-avatar.is-org { border-radius: 24%; }
.cp-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Заглушка — схематичный силуэт без признаков пола (выбор пользователя 04.10.2026), нейтрально-серый: видно, что фото
   нет. У человека плечи уходят за край круга, у организации — здание по центру квадрата. */
.cp-avatar.is-placeholder { background: var(--tone-neutral-soft); color: var(--tone-neutral); }
.cp-avatar.is-placeholder svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.cp-avatar.is-org.is-placeholder svg { width: 78%; height: 78%; }
.cp-avatar.is-org.has-image { border: 1px solid var(--border); background: var(--logo-tile); }
.cp-avatar.is-org img { padding: 9%; object-fit: contain; object-position: center; }
/* Имя со значком в строке списка: значок не сжимается, длинное имя переносится рядом с ним. */
.cp-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cp-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Плашка «Изменения не сохранены» любой формы (core/_leave_guard.html, public/form-guard.js). */
.form-dirty { color: var(--tone-warning-text); font-size: .84rem; font-weight: 600; }
.leave-guard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  max-width: 760px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--warning-border); border-radius: 10px;
  background: var(--warning-soft); font-size: .88rem; }
.leave-guard[hidden] { display: none; }
.leave-guard p { margin: 0; }
.leave-guard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .cp-avatar.is-large { --size: 64px; }
  .compact-heading { margin-top: 10px; }
  .category-menu h1, .property-ui .category-menu h1 { font-size: 1.3rem; }
  .compact-title > h1, .property-ui .compact-title > h1 { font-size: 1.3rem; }
  /* Путь — шаг назад «‹ Жилая недвижимость» (выбор пользователя 02.10.2026); текущий элемент — заголовок ниже. Шаг
     назад и меню базы — в одну строку (длинное — многоточием), возврат к месту открытия — строкой ниже. */
  .compact-nav .breadcrumbs > * { display: none; }
  .compact-nav .breadcrumbs > a:last-of-type { display: inline; }
  .compact-nav .breadcrumbs > a:last-of-type::before { content: "‹ "; }
  .compact-path { flex-wrap: wrap; column-gap: 12px; }
  .compact-nav .breadcrumbs { flex: 1 1 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compact-path > .base-menu { max-width: 60%; }
  .compact-path > .compact-path-end { order: 3; width: 100%; }
  .view-tabs { margin-top: 16px; gap: 4px; }
  .view-tabs > a { padding: 0 12px; }
  .view-tabs.is-wrapped { gap: 8px; }
  .view-tabs.is-wrapped > a { min-height: 44px; padding: 0 14px; }
  /* Число у вкладки на телефоне не показывается — то же число стоит у заголовка («12 объектов»). */
  .view-tab-count { display: none; }
  /* Полная подпись вкладки остаётся для чтения с экрана, видна короткая. */
  .view-tab-short { display: inline; }
  .view-tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Контекстное окно формы страницы (forms/window.js, задача objectdb-contextual-forms): тот же вид, что у окон таблицы
   «Платежи за месяц» (properties/cells.css), по центру; на телефоне — лист снизу во всю ширину, шапка с «×» закреплена,
   содержимое листается. Ширина — по стандарту окон (решение 187): размер ставит скрипт по телу окна (data-window-size;
   окно, где видно не больше трёх полей, — на размер меньше), без размера — M. Только токены темы. */
.app-window { position: fixed; inset: 0; margin: auto; width: min(var(--window-m), calc(100vw - 32px)); height: fit-content;
  max-height: calc(100vh - 32px); padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 32px rgba(16, 24, 40, .18); }
.app-window[data-size="s"] { width: min(var(--window-s), calc(100vw - 32px)); }
.app-window[data-size="l"] { width: min(var(--window-l), calc(100vw - 32px)); }
/* В окне S поля — по одному в строке: окно уже, а поле не теснее, чем было; на компьютере кнопки полосы — малые, как в
   окнах таблицы месяца: три действия («Отмена», «Оплачено полностью», «Сохранить») помещаются в одну строку. На телефоне
   окно — лист во всю ширину, кнопки обычной высоты, удобной для пальца. */
.app-window[data-size="s"] .pf-grid, .app-window[data-size="s"] .form-grid { grid-template-columns: 1fr; }
@media (min-width: 641px) {
  .app-window[data-size="s"] .form-actions { gap: 8px; }
  .app-window[data-size="s"] .form-actions .button { min-height: 36px; padding: 0 12px; font-size: 0.875rem; }
}
.app-window::backdrop { background: rgba(16, 24, 40, .28); }
.app-window-inner { position: relative; padding: 0 20px 16px; }
.app-window-head { position: sticky; top: 0; z-index: 3; margin: 0 -20px 4px; padding: 14px 56px 10px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border); }
.app-window-eyebrow { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 600; }
.app-window-eyebrow:empty { display: none; }
.app-window-title { margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; }
.app-window-title:focus { outline: none; }
.app-window-close { position: absolute; top: 8px; right: 8px; z-index: 4; width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.app-window-close:hover { background: var(--bg); color: var(--text); }
.app-window-close:focus-visible { outline: 2px solid var(--accent); }
.app-window-loading { margin: 18px 0 6px; color: var(--muted); }
.app-window-problem { margin: 10px 0 0; }
.app-window-problem[hidden] { display: none; }
/* Форма страницы в окне — без своей рамки и отступов панели; кнопки — внизу формы, как в окнах таблицы. */
.app-window form.panel, .app-window .pf-form, .app-window .property-form, .app-window [data-window-content] > .panel {
  margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; max-width: none; }
/* Панель в окне — без своих отступов, и поля стоят у её края: обрезка панели (.property-ui .panel { overflow: hidden })
   срезала рамку фокуса слева и справа. Рамки и скругления у панели в окне нет — обрезать нечего. */
.app-window form.panel, .app-window .pf-form, .app-window .property-form, .app-window [data-window-content] > .panel { overflow: visible; }
.app-window .pf-body, .app-window.property-ui .pf-form > .pf-body, .app-window.property-ui .pf-form .pf-body { padding: 0; }
.app-window .pf-steps { padding: 6px 0 10px; border: 0; }
/* Строки «чья запись» в окне нет (её заменяет надзаголовок) — заголовок шага сам отделяется от полей. */
.app-window .pf-form h2:not(:has(+ .pf-step-lede)) { margin-bottom: 14px; }
.app-window .form-actions { position: sticky; bottom: -16px; z-index: 2; margin: 14px -20px -16px; padding: 12px 20px 16px;
  border-top: 1px solid var(--border); background: var(--surface); }
.app-window .leave-guard { display: none; }
.app-window-question { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--warning-border); border-radius: 10px;
  background: var(--warning-soft); font-size: .88rem; }
.app-window-question p { margin: 0 0 8px; }
/* Ширина — по тексту (max-content): иначе при left: 50% плашка не шире половины окна и на телефоне переносится. */
.app-window-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; width: max-content;
  max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; transform: translateX(-50%);
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--tone-success-text); box-shadow: 0 8px 24px rgba(16, 24, 40, .18); font-size: .88rem; font-weight: 600; }
.app-window-toast[hidden] { display: none; }
@media (max-width: 640px) {
  .app-window, .app-window[data-size] { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh; margin: 0;
    border-radius: 14px 14px 0 0; }
  .app-window .pf-grid, .app-window .form-grid { grid-template-columns: 1fr; }
  /* Необратимое действие — своей строкой полосы, над «Отмена · Сохранить»: рядом с ними на телефоне ему тесно. */
  .app-window .form-actions .form-danger { flex-basis: 100%; }
  .app-window-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

.app-window-question .cell-question-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Вопрос перед необратимым действием формы (form-guard.js, form[data-confirm]) — в самой форме, как вопросы окон. */
.confirm-question { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--danger-border); border-radius: 10px;
  background: var(--danger-soft); font-size: .88rem; }
.confirm-question p { margin: 0 0 8px; }
.confirm-question .cell-question-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Режим поддержки (docs/super-admin.md, §5): плашка под шапкой на всех страницах, пока суперадминистратор держит
   полномочие. Цвет предупреждения — чтобы не спутать чужую базу со своей. */
.support-banner { background: var(--warning-soft); border-bottom: 1px solid var(--warning-border); color: var(--warning-text); }
/* Текст и «Завершить» — в одной строке и на телефоне: текст переносится рядом с кнопкой, плашка не растёт на строку. */
.support-banner-inner, .demo-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 8px; padding-bottom: 8px; font-size: 0.95rem; }
.support-banner-inner > span, .demo-banner-inner > span { flex: 1 1 auto; min-width: 0; }
.support-banner a { color: inherit; font-weight: 600; }
.support-banner form, .demo-banner form { flex: none; margin: 0; }
/* Гость демо-копии (demo/guard.py): спокойная плашка цвета акцента — данные вымышленные, срок виден всегда. */
.demo-banner { background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.support-banner + .support-banner .support-banner-inner { padding-top: 6px; }
/* «Запись изменили» (core/record_version.py). */
.record-conflict h1 { margin: 0 0 12px; }
.record-conflict p { margin: 0 0 12px; }
.record-conflict .form-actions { margin: 16px 0 0; }