/* Диалоги и листы: карточка квартиры, формы оплаты, настройки.
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: правила ниже перекрывают правила выше.
   Свёрнуто из 10-components-v2.css. Поведение нативного <dialog> (фокус-ловушка, ESC,
   возврат фокуса, клик по подложке) живёт в web/js/02-dialogs.js и не менялось. */

.detail-dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 0;
  width: min(790px, calc(100vw - 32px));
  max-height: 90vh;
  color: var(--pearl);
  box-shadow: var(--shadow-2);
  background: var(--surface);
  animation: drawer-in 0.25s ease-out;
}

/* Стекло только здесь: под подложкой статичная страница, не частицы. */
.detail-dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(5px);
}

.detail-top {
  padding: 22px 26px;
  background: var(--sunken);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--pearl);
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
}

/* Заголовок закреплён на любой ширине (POL-6 8.1, lists-1/desk-2): у
   `<dialog>` здесь нет своего `.detail-body { overflow: auto }` — листает
   содержимое весь `<dialog>` целиком (родной overflow-y браузера), и без
   sticky заголовок уезжал вместе с формой. Полоса действий окна квартиры
   после раскрытия формы прокручивает окно к ней (`host.scrollIntoView()`,
   22-unit-window.js), и заголовок при этом наполовину обрезался верхним
   краем диалога — обрывок текста наплывал на подзаголовок под ним.
   Закреплённый заголовок остаётся на месте, `scrollIntoView()` продолжает
   подводить форму к нему снизу.
   До POL-6 правило стояло только от 781px: расчёт был на то, что телефон
   ≤780px открывает всё листом (`sheetFrame()`), где заголовок и так вне
   прокрутки — лист собран flex-колонкой, скроллится только `.detail-body`
   (`.as-sheet .detail-top`/`.as-sheet .detail-body`, 17-mobile-input.css).
   Расчёт неверен для обычных окон: `dialogFrame()` — не `sheetFrame()` — на
   телефоне зовут `10-ledger.js:657`, `13-investors.js:368` и `:444`,
   `15-access.js:214` и `:650`, и там крестик уходил с y=63 на y=−48…−337 —
   закрыть форму, не листая её назад до самого верха, было нельзя. Порог
   снят: `.as-sheet` sticky не мешает (заголовок листа и так не скроллится
   вместе с телом — см. выше), а обычный `<dialog>` на телефоне получает то
   же закрепление, что монитор. */
.detail-top {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Заголовок диалога — интерфейс, а не витрина: гротеск, не курсивная антиква. */
.detail-top h2 {
  font-family: var(--font-ui);
  font-size: var(--text-24);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 6px 0;
}

.detail-top p {
  color: var(--mist);
  font-size: var(--text-small);
}

.close-dialog {
  border: 1px solid var(--border-field);
  background: var(--raised);
  color: var(--pearl);
  border-radius: 50%;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  font-size: var(--text-18);
  line-height: 1;
}

.close-dialog:hover {
  border-color: var(--violet-edge);
  background: var(--state-active);
}

.detail-body {
  padding: 22px 26px;
}

/* Панель внутри панели: без тени и без второго уровня высоты, иначе
   карточка в карточке читается как ошибка вложенности. */
.detail-body .panel {
  padding: 18px;
  background: var(--sunken);
  box-shadow: none;
}

.detail-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* NIGHT-QA-1 (gap2-F5), «блокирует»: `.detail-form` — общий класс и для
   формы целиком (`<form id="ledger-form" class="detail-form">`), и для
   полей внутри свёрнутой раскрывашки «Ещё: …» (`<details class="passport-
   fields">…<div class="detail-form">`, 10-ledger.js и «Ещё: дата и статья»
   в 27-desk.js — тот же класс `.passport-fields`). Правило выше красит
   ОБА случая одним `display: grid`, и у закрытого `<details>` (без [open])
   это перебивает родное поведение браузера — «содержимое скрыто, пока не
   раскрыли»: поля оставались на экране и реально занимали место, накладываясь
   на текст под ними и на кнопку отправки на телефоне. Правило ниже гасит
   именно вложенный случай — на сам `<form class="detail-form">`, у которого
   родителя-`<details>` нет, оно не действует. */
details:not([open]) .detail-form {
  display: none;
}

.detail-form .primary {
  align-self: end;
}

.form-notice {
  grid-column: 1/-1;
  font-size: var(--text-small);
  color: var(--mist);
}

.detail-body details {
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-top: 18px;
}

.detail-body summary,
.allocation-sources summary,
.rent-notice summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-body);
  color: var(--lavender);
}

.detail-body details[open] summary {
  margin-bottom: 16px;
}

/* --- История проживания --- */
.history-panel {
  margin-top: 20px;
}

.history-item {
  border-left: 1px solid var(--border-strong);
  padding: 0 0 22px 17px;
  margin: 15px 0 0;
  position: relative;
}

.history-item:before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--lavender);
  left: -4px;
  top: 6px;
  border-radius: 50%;
}

.history-item h3 {
  font-size: var(--text-h3);
}

.history-item p {
  font-size: var(--text-small);
  color: var(--mist);
}

.history-item button {
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: 0;
  color: var(--lavender);
  font-size: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Схема работы Telegram: раздел выключен намеренно, оформление нейтральное --- */
.workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.workflow-step {
  padding: 16px 14px;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  color: var(--mist);
}

.workflow-step strong {
  display: block;
  color: var(--soft);
  margin-bottom: 8px;
}

/* ============================================================
   Телефон (POL-6, пачка 2). Настольная раскладка этим блоком не трогается.
   ============================================================ */
@media (max-width: 780px) {
  /* 8.2: обычное окно набирало заголовок --text-24 (22px), лист того же
     окна — 18px (.as-sheet .detail-top h2, 17-mobile-input.css) — два
     заголовка окна на одной системе. «Изменить тариф для всего дома»
     переносилось на 53px в две строки. Специфичность .as-sheet-варианта
     выше этого правила — там своя, уже верная величина, это её не трогает. */
  .detail-top h2 {
    font-size: var(--text-h2);
  }

  /* 8.3: «Ещё: …» — коробка 76–98px с подложкой и рамкой читалась в ряду
     обычных полей формы как ещё одно поле. Образец — .desk-quick-more
     (21-desk.css): тихая строка без подложки, summary 13–14px.
     Разметка «Ещё: …» — общий класс .passport-fields (07-tenants.js,
     10-ledger.js, 12-rent.js, 15-access.js, 22-unit-window.js), плюс два
     места без класса вовсе («Изменить данные жильца», «Назначить новый
     пароль» — те же :not([class])). Нарочно НЕ общий `.detail-body details`:
     под тем же родителем в других задачах уже живут свои раскрывашки со
     своим видом — «Показать историю» (.allocation-sources, свой значок
     раскрытия — пункт 9.4, 08-screens.css), «Покажем полностью»
     (.rent-notice), «История депозита» и «Показать все» окна квартиры
     (.uw-deposit-history, .uw-more, .uw-notes-history — 18-house.css,
     занят другой задачей). Общий селектор перебил бы их собственные
     правила: специфичность класса ниже, чем у :not() с двумя аргументами,
     а не у одного явного класса. */
  .detail-body details.passport-fields,
  .detail-body details:not([class]) {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 12px;
  }

  .detail-body details.passport-fields > summary,
  .detail-body details:not([class]) > summary {
    font-size: var(--text-small);
  }

  /* 8.4: справка «Схема работы Telegram» — раздел выключен намеренно
     (CLAUDE.md), но объясняющие шаги, пока их видно, не обязаны занимать
     390px под то, что пока не работает (было 4 шага по 90px). На этой
     ширине шаг уже в один столбец (09-responsive.css) — заголовок и
     строка под ним не помещаются в одну, поэтому зазор между ними и
     сужен тоже: без этого запас у заголовка (8px из общего правила
     .workflow-step strong, 06-dialogs.css:207) один давал шагу лишние 4px. */
  .workflow-step {
    padding: 8px 12px;
    font-size: var(--text-small);
    min-height: 56px;
  }

  .workflow-step strong {
    margin-bottom: 4px;
  }

  /* NIGHT-QA-1 (D1-extra-D1-EXTRA-1): в столбик (09-responsive.css,
     .detail-form { grid-template-columns: minmax(0,1fr) }) карточка
     подсказки (.hint-card, 04-components.css — «перекрывать собой
     следующее поле управляющему нельзя») вставала прямо на следующее поле:
     hintPlace() (18-hints.js) ставит её ниже поля-хозяина целиком, не
     проверяя, есть ли там уже другое поле формы. У карточки нет
     фиксированной высоты в CSS (текст приходит с сервера или из словаря,
     длина у полей разная), поэтому точный отступ ей не заказать — здесь
     резервируется запас под открытую подсказку, которого хватает под
     обычные 2–4 строки («Сколько денег, ₽» → «Кому платим?» — 87px
     по замеру находки, «Сумма начисления» → «До какого числа заплатить»
     — тоже). `:has()` без JS, тот же приём, что уже стоит в 18-house.css и
     19-home.css (POL-6 21.1, «Запасной путь для браузера без :has()» там
     же — здесь без него поле просто остаётся на старом месте, как сейчас). */
  #ledger-form .field:has(> .field-label.hint-open) + .field {
    margin-top: 130px;
    transition: margin-top 0.16s ease-out;
  }
}