/* Панели, метрики, таблицы, формы, кнопки, пустые состояния, плитки квартир.
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: правила ниже перекрывают правила выше.
   Свёрнуто из 03-components-v1.css + 06-additions-v1.css + 09/10-*-v2.css.
   Сохранено поведение из CODEX-NOTES §7: прокрутка .table-wrap, раскладки панелей,
   форм и таблиц, читаемые ошибки и статусы. */

/* --- Панели --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  min-width: 0;
  /* Шаг между панелями один на систему — 22px, как внутренний отступ панели
     и как шаг у .metrics. Было 20 у панелей и 22 у остальных двух: на
     «Финансах» и «Обзоре» это давало заметный рваный ритм 20-22-20 в одном
     столбце (VIS-1). */
  margin-bottom: 22px;
  box-shadow: var(--shadow-1);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

/* FEE-1: у панели дома в шапке появилось второе действие рядом с «Изменить»
   («Записать выплату вознаграждения», 14-management.js). Без обёртки два
   прямых потомка `.panel-head` разъехались бы по `justify-content:
   space-between` — заголовок слева, одна кнопка посередине, другая у края.
   Обёртка группирует обе кнопки одним блоком у правого края и переносит их
   на свою строку, если заголовку и кнопкам вместе не хватает ширины (узкий
   телефон, длинное название дома). */
.panel-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Кнопка не должна ужиматься сама по себе (подпись переносилась бы посреди
   слова, а с одной кнопкой в группе — вылезать за карточку, потому что
   браузер иначе даёт группе ужаться ниже текста кнопки). `white-space:
   nowrap` — не только внешний вид, но и точный расчёт минимальной ширины:
   без него браузер всё равно допускает перенос при подсчёте авто-минимума
   группы, и вторая проверка (`flex-shrink: 0`) её не спасает. При нехватке
   ширины `flex-wrap` у группы кладёт вторую кнопку на свою строку. */
.panel-head-actions > button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* «Записать выплату вознаграждения» — слово в слово как в TASKS.md на
   мониторе; на телефоне короче («Записать выплату»), чтобы подпись не
   переносилась внутри и без того тесной кнопки рядом с «Изменить». */
.fee-btn-short {
  display: none;
}

@media (max-width: 780px) {
  .fee-btn-full {
    display: none;
  }
  .fee-btn-short {
    display: inline;
  }
}

/* --- Сворачиваемые панели на телефоне (MOB-2, REQUIREMENTS.md п. 71). ---
   Общий приём на всю систему: разметку собирают panelHead()/panelBody() из
   18-panel-collapse.js, переключение — обработчик оттуда же. Здесь — только
   внешний вид. На мониторе (> 780px) кнопка ничего не делает и выглядит как
   обычный заголовок (правило ниже, «Монитор»): переключателя там нет, как
   просил владелец. */
.panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

/* Заголовок сжимается первым: длинные названия («Инвесторам за сентябрь
   2026») уступают место строке-итогу многоточием, а не выталкивают её в
   21px — итог и есть то единственное, что должно остаться читаемым в
   свёрнутом виде. */
.panel-toggle h2 {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-summary {
  display: none;
  flex: 0 0 auto;
  max-width: 60%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--soft);
}

.panel-summary:before {
  content: '·';
  margin-right: 6px;
  color: var(--mist);
}

.panel-chevron {
  display: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--mist);
}

/* Телефон: заголовок — цель касания 44px, кнопки действия у заголовка
   («Записать расход» и подобные) прячутся вместе с телом — они уже дублируют
   действие, доступное иначе, и в свёрнутом виде только загромождают строку-итог. */
@media (max-width: 780px) {
  .panel-toggle {
    cursor: pointer;
    min-height: var(--tap);
    padding: 4px 0;
  }

  .panel-chevron {
    display: block;
  }

  html[data-motion='on'] .panel-chevron {
    transition: transform 200ms var(--sc-ease-out, ease);
  }

  .panel-toggle[aria-expanded='true'] .panel-chevron {
    transform: rotate(180deg);
  }

  .panel-toggle[aria-expanded='false'] .panel-summary {
    display: block;
  }

  .panel-head:has(+ .panel-body.is-collapsed) {
    margin-bottom: 0;
  }

  .panel-head:has(+ .panel-body.is-collapsed) > :not(.panel-toggle) {
    display: none;
  }

  .panel-body {
    display: grid;
    grid-template-rows: 1fr;
  }

  html[data-motion='on'] .panel-body {
    transition: grid-template-rows 200ms var(--sc-ease-out, ease);
  }

  .panel-body.is-collapsed {
    grid-template-rows: 0fr;
  }

  .panel-body-inner {
    overflow: hidden;
    min-height: 0;
  }
}

/* Монитор: переключателя нет — заголовок выглядит и ведёт себя как обычный,
   `pointer-events: none` возвращает клик подсказке на подписи (данные внутри
   `[data-hint]` получают его обратно строкой ниже), тело всегда развёрнуто
   независимо от того, что человек сворачивал на телефоне тем же входом. */
@media (min-width: 781px) {
  .panel-toggle {
    pointer-events: none;
  }

  .panel-toggle [data-hint] {
    pointer-events: auto;
  }
}

/* CLR-4: тонкий контур по всему периметру вместо боковой рамки (была
   border-left отдельным цветом — «side-tab» детектора), тот же приём, что у
   .uw-preview: акцент — рамка и подложка целиком, а не полоса с одного края. */
.banner {
  border: 1px solid var(--window-edge);
  background: var(--sunken);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--soft);
}

.banner strong {
  color: var(--pearl);
}

/* --- Кнопки --- */
.primary {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: var(--on-violet);
  min-height: var(--tap);
  padding: 11px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: 700;
  transition:
    background 0.18s,
    border-color 0.18s;
}

.primary:hover {
  background: var(--lavender);
  border-color: var(--lavender);
}

.secondary {
  border: 1px solid var(--border-field);
  background: var(--raised);
  color: var(--pearl);
  min-height: var(--tap);
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  transition:
    background 0.18s,
    border-color 0.18s;
}

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

.subtle-btn {
  background: none;
  border: 0;
  color: var(--lavender);
  font-size: var(--text-body);
  min-height: var(--tap);
  padding: 6px 4px;
  text-align: left;
}

.subtle-btn:hover {
  color: var(--pearl);
}

.danger {
  color: var(--ember);
  border-color: var(--ember-edge);
}

.danger-zone {
  margin-top: 25px;
  border: 1px solid var(--ember-edge);
  padding: 18px;
  border-radius: var(--radius-md);
}

/* --- Объекты --- */
.buildings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.building {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: var(--tap);
  text-align: left;
  color: var(--pearl);
  transition:
    border-color 0.16s,
    background 0.16s;
}

.building:hover {
  border-color: var(--violet-edge);
  background: var(--raised);
}

.building.selected {
  border-color: var(--violet);
  background: var(--state-active);
}

.building svg {
  color: var(--lavender);
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  display: block;
}

.building-name {
  font-size: var(--text-body);
  font-weight: 700;
}

.building small {
  display: block;
  font-size: var(--text-small);
  color: var(--mist);
  margin-top: 6px;
}

/* --- Метрики --- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--shadow-1);
}

.metric,
.metric.hero {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--pearl);
  padding: 22px 24px;
  position: relative;
  min-width: 0;
}

.metric + .metric:before {
  content: '';
  width: 1px;
  background: var(--border-subtle);
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
}

.metric.hero:after {
  content: '';
  height: 2px;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  background: var(--violet);
  box-shadow: var(--glow-violet);
}

.metric-label,
.hero .metric-label {
  font-size: var(--text-small);
  color: var(--mist);
}

.metric-value {
  font-size: var(--text-34);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 10px 0 6px;
  /* Длинная сумма переносится, а не наезжает на подпись */
  overflow-wrap: anywhere;
}

.metric-value span {
  font-size: var(--text-18);
  letter-spacing: 0;
  color: var(--soft);
}

/* --- Строки статуса и записи --- */
.status-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-body);
  color: var(--soft);
}

.status-row:last-child {
  border: 0;
}

.status-row strong {
  color: var(--pearl);
}

/* Точка без подписи цвета не несёт смысла: остаётся один нейтральный маркер. */
.status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: var(--mist);
  margin-right: 8px;
  border-radius: 50%;
}

.record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 15px;
  font-size: var(--text-body);
}

.record small {
  display: block;
  font-size: var(--text-small);
  color: var(--mist);
}

.record small.overdue {
  color: var(--ember);
}

/* Панель «Выехали в этом месяце» (DEP-4 §3.2). Первая строка — квартира, дом и
   дата одной линией; вторая, тише, — жилец и деньги депозита. На 1440 обе
   умещаются по одной линии, на 390 вторая переносится: перенос делает сам
   текст, ширины в пикселях здесь не назначаются. */
.departure-where {
  color: var(--mist);
  font-size: var(--text-small);
}

.departure-gone .departure-facts {
  margin-top: 2px;
  color: var(--soft);
}

/* LEAVE-2 (REQUIREMENTS.md п. 137 §Значок, п. 2): заметка из формы
   «Предупредил о выезде» в строке «Скоро освободятся» — тихим текстом, той же
   яркости, что и жилец/депозит строкой выше (`--soft`, не блёклый `--mist`
   умолчания `.record small`: заметка — чужие слова, а не служебный факт, ей
   нужно быть читаемой). */
.departure-note {
  margin-top: 2px;
  color: var(--soft);
}

/* «Отменить выезд» — редкое действие и стоит тише главных кнопок панели, но
   цель касания у него общая с `.subtle-btn` — 44px, и уменьшать её здесь
   нельзя. Строку кнопка не отдаёт: слова «Отменить выезд» не переносятся. */
.departure-undo {
  flex: none;
  white-space: nowrap;
}

/* Список проверок (.audit-list) удалён после UNI-1: разметку с этим классом
   не создаёт ни один модуль web/js. */

/* --- Пустое состояние и ошибки --- */
.empty {
  padding: 24px 18px;
  text-align: center;
  background: var(--sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--mist);
  font-size: var(--text-body);
}

.empty strong {
  display: block;
  color: var(--pearl);
  font-size: var(--text-h3);
  font-weight: 700;
  margin: 8px 0;
}

.empty svg {
  width: 26px;
  height: 26px;
  color: var(--lavender);
}

.error,
.inline-error:not(:empty) {
  background: var(--ember-tint);
  color: var(--ember);
  border: 1px solid var(--ember-edge);
  padding: 13px;
  border-radius: var(--radius-md);
  margin: 15px 0;
  font-size: var(--text-body);
}

/* --- Таблицы. Прокрутка контейнера сохранена; карточная раскладка — в 17-mobile-input.css. --- */
.table-wrap {
  overflow: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
  font-size: var(--text-body);
}

th {
  text-align: left;
  color: var(--soft);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 11px 10px;
  background: var(--raised);
  border-bottom: 1px solid var(--border-subtle);
}

td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--soft);
}

tbody tr {
  transition: background 0.16s;
}

tbody tr:hover {
  background: var(--state-hover);
}

tbody tr:last-child td {
  border-bottom: 0;
}

th.money,
td.money {
  text-align: right;
}

td strong {
  color: var(--pearl);
}

/* Подпись под значением ячейки: просрочка, переплата, месяц аренды.
   Отдельный класс, а не второй смысл у класса плашки статуса. */
.cell-note {
  display: block;
  margin-top: 5px;
  font-size: var(--text-small);
  color: var(--mist);
  white-space: normal;
}

.cell-note.is-late {
  color: var(--ember);
}

/* --- Формы --- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.form-grid.spaced {
  margin-top: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--text-small);
  color: var(--soft);
}

/* Подпись поля на одной строке (web/js/18-hints.js). */
.field-label,
.metric-label {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

.field-label > span,
.metric-label > span {
  min-width: 0;
}

/* HINT-2 (REQUIREMENTS.md п. 54): значка «?» больше нет — носитель подсказки
   сама подпись. Отметка «здесь есть подсказка» лёгкая: пунктирное
   подчёркивание токеном --mist и курсор help, а не отдельный орган
   управления — значит, ни размера цели касания, ни своего места в Tab ей не
   нужно (решение TRN-1 остаётся в силе).

   text-decoration не наследуется во flex-контейнеры (.field-label,
   .metric-label и однотипные подписи в других экранах — все display: flex):
   без вложенного span подчёркивание не легло бы под текст, поэтому
   подчёркиваем именно первый дочерний span, а курсор — на всём блоке, чтобы
   цель наведения была не уже самого текста.

   Правило общее для системы — не только для .field-label/.metric-label
   (04-components.css), но и для однотипных подписей из других файлов
   (sc-label, sc-hero-label, walk-field-label — витрина и обход счётчиков,
   строка доли инвестора): у всех одна и та же разметка «обёртка с data-hint
   + текстовый span первым потомком», второй раз в каждом файле это правило
   писать незачем. Заголовки колонок листа месяца (`<th data-hint>`) устроены
   иначе — первый потомок там не текстовый span, а собственная обёртка с
   классом .ms-th, поэтому это правило её не подчёркивает; там своё, более
   точное правило в 20-sheet.css. */
[data-hint] {
  cursor: help;
}

[data-hint] > span:first-child {
  text-decoration: underline dotted var(--mist);
  text-underline-offset: 3px;
}

/* Пока подсказка открыта (наведение с задержкой, фокус поля или касание на
   телефоне) — то же лёгкое усиление, что раньше давал hover/aria-expanded
   значка, но на самой подписи. */
[data-hint].hint-open > span:first-child,
[data-hint]:hover > span:first-child {
  text-decoration-color: var(--lavender);
  color: var(--pearl);
}

/* Карточка подсказки. Нажатия не перехватывает: она открывается и при фокусе
   поля, а перекрывать собой следующее поле управляющему нельзя. */
.hint-card {
  position: fixed;
  z-index: 60;
  width: max-content;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  font-size: var(--text-nav);
  line-height: 1.45;
  color: var(--pearl);
  background: var(--raised);
  border: 1px solid var(--violet-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  animation: hint-in 0.14s ease-out;
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Тот же текст для чтения вслух: aria-describedby поля ссылается сюда. */
.hint-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* MOB-1: носители подсказки не были позиционированы, поэтому containing
   block для абсолютного `.hint-source` уезжал вверх по дереву — до самого
   `<dialog>` (position: fixed) в окне квартиры на телефоне. Каждый скрытый
   `.hint-source` внутри формы получал координаты внутри диалога целиком, а
   не внутри своего маленького поля, и растягивал область прокрутки диалога
   далеко за пределы настоящего содержимого (замерено: 1251px вместо 775px)
   — отсюда пустота под содержимым и двойная прокрутка на телефоне (окно
   квартиры). `position: relative` возвращает каждому носителю подсказки
   собственный containing block, и скрытый текст остаётся там, где стоит его
   поле, не раздувая диалог вокруг себя. */
.field,
.walk-field,
.uw-meter,
.share-row,
.reading-charge,
.full-field,
.metric,
.sc-pillar,
.sc-hero,
.home-all {
  position: relative;
}

.field input,
.field select,
.field textarea {
  min-width: 0;
  min-height: var(--tap);
  border: 1px solid var(--border-field);
  background: var(--raised);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: var(--pearl);
  font-size: var(--text-15);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--violet);
}

.field input[type='checkbox'],
.field input[type='radio'] {
  min-height: 0;
}

/* Прошлое значение под полем: «Было 4 512 кВт·ч · 1 сентября 2026». */
.field-was {
  font-size: var(--text-small);
  color: var(--mist);
  line-height: 1.35;
}

.field-was:empty {
  display: none;
}

.full-field {
  grid-column: 1/-1;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 15px;
  min-width: 0;
}

.full-field legend {
  font-size: var(--text-small);
  color: var(--soft);
  padding: 0 5px;
}

.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: var(--text-body);
  color: var(--soft);
}

.check-list label {
  display: flex;
  gap: 10px;
  align-items: start;
  min-height: var(--tap);
  padding: 6px 0;
}

.check-list input {
  accent-color: var(--violet);
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.inline-error {
  grid-column: 1/-1;
}

.unit-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* --- Индикаторы --- */
.bar {
  height: 4px;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  width: 100px;
  margin-top: 6px;
  overflow: hidden;
}

.bar span {
  display: block;
  background: var(--window);
  height: 100%;
}

.amount-meter {
  display: block;
  width: 100px;
  height: 8px;
  margin-left: auto;
  margin-top: 6px;
}

.amount-meter::-webkit-meter-bar {
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
}

.amount-meter::-webkit-meter-optimum-value {
  background: var(--window);
}

.amount-meter::-moz-meter-bar {
  background: var(--window);
}

/* Полоса покрытия данных (.coverage) удалена после UNI-1: она была частью
   архивного режима и больше не создаётся ни одним модулем web/js. */

#toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  color: var(--pearl);
  box-shadow: var(--shadow-2);
  padding: 13px 20px;
  border-radius: var(--radius-md);
  display: none;
  font-size: var(--text-body);
  max-width: 400px;
  z-index: 50;
}

/* POL-6 7.5/11.1 (units-2): z-index не спасает — модальный <dialog> рисуется
   в верхнем слое браузера, и обычный z-index с ним не сравнивается никогда
   (управляющий записывал оплату и не видел ни подтверждения, ни ошибки).
   JS (01-core.js, toast()) переводит #toast в верхний слой через
   popover="manual" — тогда он встаёт поверх диалога, открытого раньше.
   У переведённого в верхний слой [popover] браузер сам подмешивает
   `inset: 0` и `margin: auto` (центрирование), что вместе с заданными здесь
   `bottom`/`right` даёт «пересиленную» рамку и перебрасывает тост к левому
   верхнему углу экрана — `top` и `margin` возвращаются к прежнему поведению
   явно. `left` тем же способом возвращается только на мониторе: на телефоне
   его держит 09-responsive.css (`left: 16px` в мобильном блоке) — трогать
   нельзя, поэтому там `left` этим правилом не сбрасывается. */
#toast:popover-open {
  top: auto;
  margin: 0;
}

@media (min-width: 781px) {
  #toast:popover-open {
    left: auto;
  }
}

#toast.visible {
  display: block;
}

/* --- Квартиры: ссылка и атлас --- */
.unit-link {
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: var(--tap);
  color: var(--lavender);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-body);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.unit-link:hover {
  color: var(--pearl);
}

.unit-link:after {
  content: '↗';
  color: var(--mist);
  font-size: var(--text-small);
}

/* Плитки .unit-atlas / .unit-tile удалены задачей TRN-1: список квартир
   сотрудника рисуется той же сеткой окон, что у инвестора (windowGrid,
   оформление — 11-showcase.css). Ни один модуль web/js этих классов больше
   не создаёт — проверено поиском по web/js. */

/* --- Раскрывашка со вторым представлением списка (окна → таблица) --- */
.table-toggle {
  margin-top: 18px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
}

.table-toggle > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-body);
  color: var(--lavender);
}

.table-toggle[open] > summary {
  margin-bottom: 14px;
}

/* --- Контакты --- */
.contact-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 8px 14px;
  background: var(--raised);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  text-decoration: none;
  color: var(--lavender);
}

.contact-link:hover {
  color: var(--pearl);
  border-color: var(--violet-edge);
}

/* ============================================================
   Телефон (POL-6, пачка 2 — общие компоненты). Настольная раскладка этим
   блоком не трогается ни одним свойством.
   ============================================================ */
@media (max-width: 780px) {
  /* 7.1 + 7.6: шаг под шапкой панели и зазор внутри неё — по шкале раздела 1
     (лестница 4/8/12/16). Тот же приём, что уже стоит у
     .panel-head-actions > button (:51): подпись-ссылка в шапке («Вся история
     →») не должна переноситься ради 1–5 px и не должна ужиматься сама по
     себе. */
  .panel-head {
    margin-bottom: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .subtle-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Находка проверяющего пачки 3: на 360 заголовку «Доход за сентябрь 2026» и
     кнопке «Вся история →» вместе ширины уже не хватает, `flex-wrap` выше
     кладёт кнопку на свою строку — и там `justify-content: space-between`
     ничего не выравнивает (в строке один элемент), кнопка встаёт у левого
     края под заголовком и читается как начало следующего блока. `margin-left:
     auto` прижимает её к правому краю на своей строке так же, как на общей.
     Только прямой потомок шапки: кнопки внутри `.panel-head-actions` строит
     своя группа, и там выравнивание уже задано. */
  .panel-head > .subtle-btn {
    margin-left: auto;
  }

  /* 7.7: «Изменить» и «Записать выплату» стояли столбиком (147×96) — каждой
     кнопке не хватало 1–5 px рядом с заголовком, и flex-wrap группы уводил
     вторую кнопку под первую. Отдаём группе всю ширину строки отдельным
     рядом (заголовок с подписью — надо строкой выше, flex-wrap на
     .panel-head выше), тогда 245px двух кнопок с запасом укладываются в
     ряд без переноса. */
  .panel-head-actions {
    width: 100%;
    flex-wrap: nowrap;
  }

  /* 7.2: было 114px на два коротких предложения (на «Выездах» — 176px). */
  .empty {
    padding: 16px 14px;
  }

  .empty strong {
    font-size: var(--text-small);
    margin: 0 0 4px;
  }

  /* 7.3: подпись строки статуса не должна спорить весом со значением рядом —
     подпись тише (14), значение остаётся основным текстом (16). */
  .status-row {
    padding: 8px 0;
    font-size: var(--text-small);
  }

  .status-row strong {
    font-size: var(--text-body);
  }

  /* 7.4: сообщение было в 16px/13px20px — три строки, 76px, край текста в
     36px от кромки экрана. Положение (bottom/поля 16px) остаётся
     в 09-responsive.css — здесь только кегль и внутренние поля. */
  #toast {
    font-size: var(--text-small);
    padding: 12px 14px;
  }

  /* 7.8: примечание под строкой таблицы (просрочка, «сумма ещё не
     посчитана», происхождение записи) — 84–126px на 22 строках витрины
     инвестора давали до 2,8 тыс. px. Текст самих примечаний короче правит
     пачка 3 (16.2) — здесь только предел в одну строку, который работает и
     до, и после того текста. */
  .cell-note {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 7.9 (investor-13, заметно): подпись с подсказкой (data-hint) открывается
     на телефоне касанием самой подписи (решение п. 54) — значит она сама
     является целью касания и должна отвечать норме 44px, а не измеренным
     22–24. min-height, не padding с компенсацией полем: у общей разметки
     носителя подсказки (комментарий выше, «Правило общее для системы») уже
     есть свой display: flex; align-items: center в файле каждого — sc-label
     и sc-hero-label (11-showcase.css), field-label и metric-label (этот
     файл) — с min-height текст просто центруется в более высокой строке без
     лишнего поля, которое пришлось бы гасить отрицательным margin и которое
     не пережило бы каскад: у части носителей (sc-label, sc-hero-label) уже
     стоит свой margin-bottom в файле-владельце, он через margin здесь не
     перебивается. На проверку критерия 8 (нет целей < 44px) не влияет:
     `<th data-hint>` листа месяца сюда тоже попадает, но лист месяца ниже
     1024px не показывается (карточки вместо таблицы, 26-month-sheet.js) —
     этот блок телефона (≤780px) его не касается. */
  [data-hint] {
    min-height: var(--tap);
  }

  /* 7.10: полоса-баннер набиралась 16px и без предела строк — у роли
     viewer доходило до шести строк, 146px. Три строки — потолок, дальше
     текст обрезается многоточием браузера (line-clamp, без сторонних
     библиотек). Единственный текстовый узел баннера в разметке — сама
     плашка (или обёртка <span> внутри неё в scopeFallbackWords()), поэтому
     -webkit-box можно ставить прямо на .banner: значка внутри неё нет. */
  .banner {
    font-size: var(--text-small);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}