/* Лист месяца: таблица дома, устроенная как лист учётной книги (XLS-1).
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: файл последний, после
   19-home.css. Правила ниже перекрывают правила выше. Новых hex-значений
   здесь нет — только var() из 01-tokens.css.

   Экран ввода управляющего: ничего не выезжает и не набегает. Единственное
   движение — угасание подсветки «сохранено», и оно включено только при
   разрешённом движении (`html[data-motion='on']`). Конечное состояние
   каждого элемента файла — состояние по умолчанию. */

/* ============================================================
   1. Переключатель вида на экране дома
   ============================================================ */

.house-view {
  display: flex;
  align-items: center;
  gap: 2px;
}

.house-view .sc-range {
  flex-wrap: nowrap;
}

/* Значок подсказки остаётся кругом 24 px: соседнее правило .house-actions
   button тянет любую кнопку до цели касания 44 px, и круг превращался бы
   в овал. Цель касания у значка своя — невидимое поле вокруг него. */
.house-view .hint {
  flex: none;
  width: 24px;
  height: 24px;
  min-height: 24px;
  align-self: center;
}

/* Лист месяца — только на мониторе: кнопка на телефоне видна, но не работает,
   и объясняет почему (подсказка в title и у значка «?»). */
.house-view button:disabled {
  opacity: var(--state-disabled);
  cursor: not-allowed;
}

/* ============================================================
   2. Панель листа
   ============================================================ */

/* Панель шире обычной: 26 колонок нужно каждое доступное пятно. Поля панели
   ужаты с 22 px до 14 px по горизонтали — это ровно те 16 px, которых не
   хватало таблице на мониторе 1440. */
/* Лист занимает всю ширину области содержимого: боковые поля .main (36 px) и
   поля самой панели (14 px) отыгрываются отрицательными полями — это 100 px
   ширины, на которые иначе пришлось бы сжимать колонки (решение владельца
   п. 56, прокрутки быть не должно). Общие 03-shell.css/04-components.css при
   этом не трогаются: исключение живёт здесь, у листа. */
.ms-panel {
  padding: 18px 0 16px;
  margin-left: -36px;
  margin-right: -36px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.ms-panel > .ms-body {
  padding: 0 12px;
}

.ms-head {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  padding: 0;
}

.ms-head h2 {
  margin-bottom: 4px;
}

.ms-head p {
  max-width: 62ch;
  font-size: var(--text-small);
}

.ms-head-tools {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.ms-date-field {
  min-width: 190px;
}

.ms-detail {
  min-height: var(--tap);
  white-space: nowrap;
}

.ms-detail[aria-pressed='true'] {
  border-color: var(--violet);
  background: var(--state-active);
  color: var(--pearl);
}

.ms-banner {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--sunken);
  color: var(--soft);
  font-size: var(--text-small);
}

.ms-footnote {
  margin: 12px 4px 0;
}

/* ============================================================
   3. Сама таблица
   ============================================================ */

/* Прокрутка живёт только внутри рамки листа: страница по горизонтали не
   едет никогда. Рамка получает фокус с клавиатуры (tabindex="0"), иначе
   прокрутить таблицу без мыши было бы нечем. */
.ms-wrap {
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--sunken);
  max-height: calc(100vh - 260px);
}

/* Ничто в листе не переносится: ни заголовок, ни значение (решение владельца
   п. 54 — «в таблице всё в одну строку»). Ширину колонки браузер считает сам,
   по самой длинной строке, поэтому раскладка авто, а не фиксированная: при
   фиксированной ширине лишние слова пришлось бы рвать посреди слова.
   Двухстрочные заголовки делаются <br> между словами в 26-month-sheet.js. */
.ms-table {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

/* Шапка липкая: на пятнадцати строках она уходит наверх раньше, чем человек
   доходит до последней квартиры, и колонка «Сумма» перестаёт быть подписанной. */
.ms-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--raised);
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-subtle);
  padding: 7px 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--soft);
  vertical-align: bottom;
  white-space: nowrap;
  line-height: 1.25;
}

/* Заголовок идёт по тому же краю, что цифры под ним: иначе подпись «Цена»
   висит слева, а суммы стоят справа, и колонка читается как две. */
.ms-table thead th.ms-col-money,
.ms-table thead th.ms-col-count,
.ms-table tfoot td.ms-col-money,
.ms-table tfoot td.ms-col-count {
  text-align: right;
}

.ms-table thead th.ms-col-num,
.ms-table thead th.ms-col-state,
.ms-table thead th.ms-col-note {
  text-align: left;
}

/* Вторая строка шапки в подробном виде стоит под первой, а не поверх неё.
   Высоту первой строки подставляет 26-month-sheet.js после отрисовки: она
   зависит от того, на сколько строк перенеслось название счётчика, и
   угадывать её числом нельзя. */
.ms-table thead tr:nth-child(2) th {
  top: var(--ms-head-first, 38px);
  z-index: 2;
}

.ms-table th.ms-group {
  text-align: center;
  color: var(--pearl);
  border-bottom: 1px solid var(--border-subtle);
}

.ms-table th.ms-group small {
  display: block;
  font-weight: 400;
  color: var(--mist);
}

/* Подпись колонки. Двухстрочной её делает <br> между словами в разметке, а не
   перенос браузером: слово в листе не разрывается никогда (п. 54). */
.ms-th {
  display: block;
  white-space: nowrap;
}

/* Подпись колонки — она же кнопка подсказки: значка «?» в листе нет
   (решение владельца п. 54). Пунктир снизу говорит, что у подписи есть
   объяснение, — тот же приём, что у сокращений в тексте. */
.ms-table thead th[data-hint] .ms-th {
  border-bottom: 1px dotted var(--border-field);
  cursor: help;
}

.ms-table thead th[data-hint]:hover .ms-th {
  color: var(--pearl);
  border-bottom-color: var(--lavender);
}

.ms-table td,
.ms-table tfoot th {
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  padding: 0;
  /* Содержимое ячейки стоит по центру её высоты: строки листа одинаковой
     высоты, и только так значение и приписка держат общую линию (XLS-1c). */
  vertical-align: middle;
  background: var(--surface);
  color: var(--soft);
}

/* Строки одной высоты, как линовка в книге: иначе строка с подстрочником
   выше соседней, и глаз теряет ряд на середине листа. В таблице height —
   это минимум, поэтому длинная строка не обрежется. */
/* 76 px, а не 72: в парной ячейке две половины по 35 px и линия между ними
   (решение владельца п. 84). Четыре пикселя — вся плата за то, что четыре
   колонки счётчиков превратились в две. */
.ms-table tbody td,
.ms-table tfoot td,
.ms-table tfoot th {
  height: 76px;
}

/* Чередование строк: у парных ячеек внутри своя линия раздела, и без тихой
   подложки через строку глаз терял ряд на середине листа. Цвет — подложка
   панели, тот же, что под таблицей; новых цветов нет. Правило стоит ДО
   наведения и подсветки «сохранено» намеренно: у них та же вескость, и
   выигрывает то, что записано ниже. */
.ms-table tbody tr:nth-child(even) td {
  background: var(--sunken);
}

/* Колонка «№» остаётся полосой шапки при любом чередовании: она липкая, и
   мигающий под ней фон читался бы как дефект. */
.ms-table tbody tr:nth-child(even) .ms-col-num {
  background: var(--raised);
}

.ms-table tbody tr:hover td {
  background: var(--state-hover);
}

/* Колонка «№» липкая по горизонтали: при прокрутке вправо номер квартиры
   должен остаться на экране, иначе непонятно, чью строку заполняешь. */
.ms-table .ms-col-num {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--raised);
  border-right: 1px solid var(--border-strong);
}

.ms-table thead .ms-col-num {
  z-index: 4;
}

.ms-table tbody tr:hover .ms-col-num {
  background: var(--raised);
}

/* ============================================================
   4. Ячейка
   ============================================================ */

/* Остов ячейки: две строки одинаковой высоты — значение и приписка под ним.
   Высота обеих задана жёстко, поэтому значения всей строки листа стоят на
   одной линии независимо от того, есть у соседа приписка или нет. Сам остов
   центрируется по высоте ячейки (`vertical-align: middle` у td), а строки
   внутри него — по тому же краю, что и заголовок колонки (XLS-1c). */
.ms-cell {
  position: relative;
}

/* Боковые поля ячейки 4 px, а не 8: на тринадцати колонках каждый пиксель
   поля стоит 26 px ширины листа, а лист должен помещаться в окно целиком
   (решение владельца п. 56). Разделяют колонки линии, а не воздух. */
.ms-body {
  display: block;
  width: 100%;
  padding: 0 4px;
}

/* Строка значения: тихая подпись половины слева, само значение справа.
   Значение прижато к правому краю всегда (`flex-end`), а подпись отодвинута
   влево своим `margin-right: auto` — тогда ячейка без подписи выглядит ровно
   так же, как выглядела до появления парных колонок. */
.ms-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

/* Тихая подпись внутри половины: «холодная», «горячая», «водоотведение»,
   «отопление», «дата оплаты». Кегль 13 (на узком мониторе 12) и --mist:
   контраст 5,76:1 на поверхности листа и 4,86:1 на шапке — подпись тише
   значения, но не спрятана (CONVENTIONS §8). */
.ms-tag {
  margin-right: auto;
  flex: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--mist);
  white-space: nowrap;
}

.ms-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: inherit;
  cursor: text;
}

.ms-open:hover {
  background: var(--state-hover);
  box-shadow: inset 0 0 0 1px var(--border-field);
}

.ms-open:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: -2px;
}

/* Первая строка — значение. Высота 28 px выбрана по чипу состояния: число и
   плашка в одной строке листа оказываются на одной линии, а не «плашка ниже
   цифры на четыре пикселя». */
.ms-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 28px;
  color: var(--pearl);
  font-weight: 650;
  font-size: var(--text-body);
  line-height: 1.2;
  white-space: nowrap;
}

/* Вторая строка — приписка: «осталось 27 000 ₽», «было 4692», «просрочено на
   14 дн.». Кегль 14, --soft, тот же край, что у первой строки. Высота задана
   и у пустой: на ней держится общая линия строк. */
.ms-sub {
  display: block;
  height: 17px;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 17px;
  color: var(--soft);
  white-space: nowrap;
}

.ms-cell.is-muted .ms-main {
  color: var(--mist);
  font-weight: 400;
}

/* Числа — по правому краю и табличными цифрами: разряды выстраиваются в
   столбик, и разница видна без чтения. Текст — состояние, дата, заметка —
   по левому. Заголовок колонки идёт по тому же краю, что её данные. */
.ms-col-money,
.ms-col-count,
.ms-col-money .ms-body,
.ms-col-count .ms-body {
  text-align: right;
}

.ms-col-money .ms-main,
.ms-col-count .ms-main {
  justify-content: flex-end;
}

.ms-col-num,
.ms-col-state,
.ms-col-note,
.ms-col-num .ms-body,
.ms-col-state .ms-body,
.ms-col-note .ms-body {
  text-align: left;
}

.ms-col-num .ms-main,
.ms-col-state .ms-main,
.ms-col-note .ms-main,
.ms-col-num .ms-line,
.ms-col-state .ms-line,
.ms-col-note .ms-line {
  justify-content: flex-start;
}

/* Номер квартиры — ссылка в окно квартиры, не ячейка ввода. Нажимается вся
   ячейка «№» целиком, все 72 px высоты: прежняя кнопка была 26×22 px, и в неё
   приходилось целиться (обход VIS-1). Вид при этом прежний — цифра стоит на
   той же линии, что значения соседних ячеек, а стрелка на месте. */
.ms-table .ms-col-num .ms-body,
.ms-table .ms-col-num .ms-line,
.ms-table .ms-col-num .ms-main {
  height: 100%;
}

/* Поля ячейки отданы кнопке: нажимается вся ширина колонки, а не текст внутри
   отступов. Сами отступы никуда не делись — они внутри кнопки. */
.ms-table tbody .ms-col-num .ms-body {
  padding: 0;
}

/* Приписки у номера нет — её место отдано кнопке. */
.ms-table tbody .ms-col-num .ms-sub {
  display: none;
}

.ms-unit {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  padding: 0 4px;
  min-height: 0;
  line-height: 28px;
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--lavender);
  text-align: left;
}

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

/* Чип состояния занимает свою строку значения целиком по высоте: так его
   середина совпадает с серединой цифры в соседней ячейке. В листе он ужат по
   горизонтали: на пятнадцати строках лишние поля плашки стоят колонке
   пятнадцать пикселей, а читаемость от них не зависит. */
.ms-col-state .chip {
  margin: 0;
  padding: 2px 2px;
  gap: 4px;
  border: 0;
  background: none;
}

/* В листе у плашки состояния нет ни рамки, ни заливки: колонка и так самая
   широкая из-за подписи «Оплачено частично», а цвет со значком различают
   состояние не хуже плашки. На карточках квартир плашка остаётся прежней. */
.ms-col-state .chip:before {
  width: 12px;
  height: 12px;
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}

/* «Заметка» забирает остаток ширины таблицы: на широком мониторе она
   становится читаемой, на узком — сжимается до минимума, но лист от неё не
   разъезжается (решение владельца п. 57). `width: 100%` просит остаток,
   `max-width: 0` у содержимого не даёт этому содержимому участвовать в
   расчёте ширины колонки — без него длинное описание снова растянуло бы
   лист. Хвост уходит за многоточие, целиком текст читается наведением
   (`title` у ячейки) и в окне квартиры. */
.ms-table .ms-col-note {
  width: 100%;
  min-width: 48px;
}

.ms-col-note .ms-main,
.ms-col-note .ms-sub {
  display: block;
  max-width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Значение в «Заметке» не флекс, поэтому высоту первой строки держит
   line-height — иначе строка листа потеряла бы общую линию. */
.ms-col-note .ms-main {
  line-height: 28px;
}

/* ============================================================
   4а. Парная ячейка: две услуги в одном столбце
   ============================================================ */

/* Решение владельца п. 84 (слово «канализация» переименовано в «водоотведение»
   решением п. 90): вода одной колонкой — холодная сверху, горячая
   снизу; так же водоотведение с отоплением и оплата аренды с датой. Половины
   одинаковой высоты (35 px), поэтому линия раздела стоит на одном уровне во
   всех парных колонках строки, и лист по-прежнему читается рядами. */
.ms-pair {
  position: relative;
}

.ms-half {
  display: block;
  height: 35px;
}

/* Линия раздела внутри ячейки — пунктир, а не сплошная: сплошную того же
   цвета глаз принимает за границу строки, и лист распадается на тридцать
   строк вместо пятнадцати. Ряды при этом держит чередование фона. */
.ms-pair.is-two .ms-half + .ms-half {
  border-top: 1px dotted var(--border-strong);
}

/* Внутри половины строки короче, чем в обычной ячейке: значение 20 px,
   приписка 15 px. Две половины по 35 px плюс линия — 71 px, и строка листа
   растёт всего на 4 px (72 → 76). */
.ms-half .ms-open,
.ms-half > .ms-body {
  height: 100%;
}

.ms-half .ms-main {
  height: 20px;
  line-height: 20px;
}

.ms-half .ms-sub {
  height: 15px;
  line-height: 15px;
}

/* Подпись половины стоит слева, а значение справа — даже в «Оплате за
   аренду», где подпись есть только у нижней половины. */
.ms-pair .ms-line,
.ms-pair .ms-sub {
  text-align: right;
}

/* Дата записи — не деньги: её подпись и число стоят рядом одной фразой
   («запишем 18.09») и на шаг тише суммы. Иначе крупное белое «18.09» весило
   на строке столько же, сколько оплата, — с этого и началось замечание
   владельца про непонятную колонку «Когда». */
.ms-half-date .ms-tag {
  margin-right: 0;
}

.ms-half-date .ms-main {
  color: var(--soft);
  font-weight: 500;
  font-size: var(--text-small);
}

/* «было 6300» — справка, а не цифра действия: тише значения на один шаг
   (--mist, 5,76:1 к поверхности листа). «долг 21 000» под суммой аренды
   остаётся прежним --soft: это то, из-за чего звонят жильцу. */
.ms-col-meter .ms-sub,
.ms-col-water .ms-sub,
.ms-col-sewerheat .ms-sub {
  color: var(--mist);
  font-size: 13px;
}

/* ============================================================
   5. Ввод в ячейке
   ============================================================ */

/* Поле ввода не обязано умещаться в колонку: оно всплывает над ней, как
   строка ввода поверх листа. Иначе дата и заметка потребовали бы колонок
   в полтора раза шире, чем нужно для чтения. */
.ms-cell.is-editing {
  z-index: 5;
}

.ms-editor {
  position: absolute;
  top: -1px;
  left: -1px;
  min-width: calc(100% + 2px);
  width: max-content;
  max-width: 320px;
  display: block;
  padding: 5px;
  background: var(--raised);
  border: 2px solid var(--violet);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}

.ms-input {
  width: 100%;
  min-width: 124px;
  min-height: 38px;
  padding: 6px 8px;
  background: var(--sunken);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  color: var(--pearl);
  /* 16px, а не токен: на меньшем кегле iOS увеличивает страницу при фокусе */
  font-size: 16px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ms-col-note .ms-input,
.ms-half-date .ms-input {
  text-align: left;
}

/* MET-2: «Удалить» у показания, уже внесённого за месяц. Кнопка стоит под
   полем ввода, а не рядом: ячейка листа узкая, и в один ряд с цифрой она
   срезала бы поле. Подтверждение — на самой кнопке (`confirmTwice`). */
.ms-remove {
  display: block;
  width: 100%;
  min-height: 32px;
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid var(--ember-edge);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ember);
  font-size: var(--text-small);
  font-family: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .ms-remove:hover {
    background: var(--ember-tint);
  }
}

.ms-remove.is-armed {
  background: var(--ember-tint);
  font-weight: 700;
}

/* Приписка `confirmTwice` («Показание уйдёт…») ложится сразу за кнопкой. */
.ms-editor .confirm-note {
  display: block;
  margin-top: 4px;
  font-size: var(--text-small);
  color: var(--soft);
  white-space: normal;
  text-align: left;
}

.ms-input-kind {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-bottom: 5px;
  padding: 5px 8px;
  background: var(--sunken);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  color: var(--pearl);
  font-size: var(--text-small);
  font-family: inherit;
}

/* RENT-CHANNEL-1 (REQUIREMENTS.md п. 133 (7)): переключатель «как оплатили»
   стоит после суммы, а не перед ней — то же место, что и в остальных формах
   оплаты аренды (редкий выбор, не главное дело ячейки). */
.ms-input-channel {
  margin-top: 5px;
  margin-bottom: 0;
}

.ms-channel-investor {
  display: block;
  margin-top: 5px;
}

/* `<span>` — не `.field`, конкурирующего display у него нет, но правило
   держим явным (тот же приём, что `.rent-operation-fields[hidden]` в
   08-screens.css) — понятнее следующему, кто станет здесь искать причину. */
.ms-channel-investor[hidden] {
  display: none;
}

.ms-channel-investor-words {
  display: block;
  min-height: 36px;
  padding: 8px 0 2px;
  font-size: var(--text-small);
  color: var(--soft);
}

.ms-channel-investor-words strong {
  color: var(--pearl);
}

/* Две строки под полем. Верхняя (.ms-note) — постоянная: что уже записано за
   месяц и что сделает запись. Нижняя (.ms-live) — что получится из того, что
   печатают прямо сейчас, и туда же ложится ошибка. Разделены нарочно: живой
   расчёт не должен затирать объяснение, ради которого ячейку и открыли. */
.ms-note,
.ms-live {
  display: block;
  margin-top: 5px;
  font-size: var(--text-small);
  line-height: 1.3;
  color: var(--soft);
  text-align: left;
  white-space: normal;
}

.ms-live {
  margin-top: 4px;
  color: var(--pearl);
  font-weight: 650;
}

.ms-live:empty {
  display: none;
}

.ms-live.is-warn {
  color: var(--window);
}

.ms-live.is-error {
  color: var(--ember);
}

.ms-cell.is-saving .ms-editor {
  border-color: var(--border-field);
}

.ms-cell.is-saving .ms-input {
  opacity: var(--state-disabled);
}

/* «Сохранено» — слово плюс подсветка. Слово остаётся при выключенном
   движении и читается вслух; подсветка в этом случае просто держится, пока
   её не снимут, и не мигает. */
.ms-saved {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: var(--text-small);
  color: var(--leaf);
  font-weight: 650;
}

/* Вескость селектора поднята нарочно: чередование строк выше в файле имеет
   свою заливку, и без `.ms-table tbody` подсветка «сохранено» не появлялась
   бы на каждой второй строке. */
.ms-table tbody tr.is-saved td {
  background: var(--leaf-tint);
}

.ms-table tbody tr.is-saved .ms-col-num {
  background: var(--leaf-tint);
}

html[data-motion='on'] tr.is-saved td {
  transition: background 900ms var(--t-ease-out);
}

/* ============================================================
   6. Итог листа
   ============================================================ */

/* Строка «Итого» липкая снизу: в книге она стояла внизу колонки, и смысл её
   в том, чтобы быть на виду, пока считаешь строки. */
.ms-table tfoot td,
.ms-table tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--raised);
  border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-subtle);
  padding: 0;
  text-align: inherit;
  vertical-align: middle;
}

.ms-table tfoot th {
  z-index: 3;
  left: 0;
  color: var(--pearl);
  text-transform: none;
  letter-spacing: 0;
}

/* Итог — амбра: это деньги. Кегль 14 px, чтобы «388 000 ₽» встало в одну
   строку: разорванное посреди разрядов число не читается. */
.ms-table tfoot .ms-main {
  color: var(--window);
  font-size: var(--text-small);
  font-weight: 700;
}

.ms-table tfoot th .ms-main {
  color: var(--pearl);
}

.ms-table tfoot .ms-sub {
  color: var(--soft);
}

/* ============================================================
   7. Узкий монитор и телефон
   ============================================================ */

/* Ниже 1024 px лист не показывается вовсе (решение принимает
   26-month-sheet.js): 26 колонок при кегле не мельче 14 px не читаются.
   Здесь остаётся только панель управления — чтобы переключатель вида
   не разъезжался на телефоне. */
@media (max-width: 1023px) {
  /* Лист месяца на телефоне не показывается, поэтому и переключателя вида
     здесь нет: погашенная кнопка «Таблицей, как в книге» ничего не даёт —
     человек жмёт её, ничего не происходит, и он решает, что система сломана.
     Скрыта вся пара кнопок: «Карточки» без второй кнопки — выбор из одного
     варианта. Как открыть лист, написано в подсказке на мониторе. */
  .house-view {
    display: none;
  }

  /* NQA-MSHEET-EXTRA-1: `.house-view.is-shown` (три правила, снятые отсюда)
     не ставит ни один JS-файл (grep по web/js — ноль совпадений) — мёртвая
     разметка для состояния, в которое переключатель никогда не переходит:
     `.house-view` и так корректно скрыт правилом выше без обращения к
     `is-shown`. Пользователю не было видно, но кто-то наткнулся бы и решил,
     что это рабочий путь. */
}

/* На мониторах уже 1360 px колонкам не хватает места целиком — включается
   прокрутка внутри рамки листа; страница по горизонтали по-прежнему стоит,
   а колонка «№» и шапка остаются на виду. */

/* ============================================================
   8. Узкий монитор: 1280 и 1366
   ============================================================ */

/* Решение руководителя по п. 57: на мониторе уже 1400 px лист переходит на
   кегль 15/13 вместо 16/14. Это единственное исключение из правила «не мельче
   16/14» (CONVENTIONS §8) и только для листа: владелец просил не завышать
   шрифты, а горизонтальная прокрутка в книге мешает сильнее, чем один
   пункт кегля. Ни на карточках квартир, ни в окне квартиры, ни в формах
   кегль не меняется. */
@media (max-width: 1400px) {
  .ms-main {
    font-size: 15px;
  }

  .ms-sub {
    font-size: 13px;
  }

  .ms-table thead th {
    font-size: 13px;
  }

  /* Тихие подписи половин и «было N» — на тот же пункт мельче, что и всё
     остальное в листе: 12 px при --mist это 5,76:1, по-прежнему выше
     обязательных 4,5:1. */
  .ms-tag,
  .ms-col-meter .ms-sub,
  .ms-col-water .ms-sub,
  .ms-col-sewerheat .ms-sub {
    font-size: 12px;
  }

  /* «Оплачено частично» переносится по слову на две строки: высота строки
     значения 28 px рассчитана на одну строку 14 px, а двух строк по 13 px
     хватает ровно, и 72 px строки листа не растут. */
  .ms-col-state .chip {
    white-space: normal;
    line-height: 1.15;
  }

  .ms-col-note .ms-main {
    line-height: 26px;
  }
}

/* Кнопка в пустом состоянии листа («Выберите дом»): отступ сверху, чтобы она
   не липла к объяснению. */
.ms-body.empty .primary {
  margin-top: 14px;
}

/* ============================================================
   5б. Список оплат внутри ячейки (UTIL-1B, REQUIREMENTS.md п. 97)
   ============================================================ */

/* Оплат несколько или оплата перенесена из книги — поля в ячейке нет вовсе:
   какую из двух сумм заменяет введённая цифра, поле не спросит. Вместо него
   список строк, у каждой свои «Изменить» и «Удалить». Редактор при этом
   шире обычного (`.ms-editor` держит max-width 320 px) — этой ширины хватает
   на «18.09 · 2 742 ₽ · из книги» и пару тихих кнопок. */
.ms-list {
  display: grid;
  gap: 0;
  margin-bottom: 4px;
}

.ms-editor--list {
  max-width: 380px;
}

/* Дата, сумма и пара тихих кнопок — в одну строку: три этажа на запись
   растягивали редактор на пол-листа, а строк в нём бывает три-четыре. */
.ms-list-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  font-size: var(--text-small);
  line-height: 1.35;
  color: var(--soft);
}

.ms-list-row:last-child {
  border-bottom: 0;
}

.ms-list-when {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ms-list-sum {
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* «из книги», «прежний жилец» — своей строкой под суммой: в ряд с ней они
   отнимали бы у кнопок последнюю дорожку. */
.ms-list-mark {
  grid-column: 1 / -1;
  color: var(--mist);
}

.ms-list-acts {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 14px;
}

.ms-list-acts .subtle-btn {
  min-height: 30px;
  padding: 2px 0;
  font-size: var(--text-small);
}

.ms-list-acts .confirm-note {
  flex: 1 1 100%;
  margin: 0;
  line-height: 1.35;
}

/* «Записать ещё оплату» и «Назад к оплатам» — отдельной строкой под списком
   или полем. Вторая оплата за месяц появляется только по этой кнопке: молча
   её больше не заводит ни одна цифра (п. 97). */
.ms-more {
  display: block;
  width: 100%;
  min-height: 32px;
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--lavender);
  font-size: var(--text-small);
  font-family: inherit;
  text-align: left;
}

.ms-more--back {
  color: var(--soft);
}

@media (hover: hover) and (pointer: fine) {
  .ms-more:hover {
    border-color: var(--violet);
  }
}

/* Дата правки — под суммой, своим полем и по левому краю: это не деньги, и
   выравнивать её вправо, как цифру, незачем. */
.ms-input-when {
  margin-top: 5px;
  text-align: left;
}

@media (pointer: coarse) {
  .ms-list-acts .subtle-btn,
  .ms-more {
    min-height: var(--tap);
  }
}

/* NQA-MSHEET-1: поле суммы/текста/даты/показания и выбор вида депозита
   (26-month-sheet.js:msEditorMarkup()) обёрнуты в `.field` — общий носитель
   подсказки системы (HINT_FIELDS, 18-hints.js), без него hintAudit() не видит
   поле как подписанное. Базовое правило `.field input/select` (04-components.css)
   рассчитано на обычную форму — 44px высоты и просторные поля 12px рвали бы
   компактный редактор листа. Здесь та же цифра, что была у `.ms-input`/
   `.ms-input-kind` до обёртки (выше в этом файле), просто с более сильным
   селектором — специфичность `.field input` иначе выигрывает у одного класса. */
.ms-editor .field.ms-editor-field input,
.ms-editor .field.ms-editor-field select {
  width: 100%;
  min-width: 124px;
  min-height: 38px;
  padding: 6px 8px;
  background: var(--sunken);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  color: var(--pearl);
  font-size: 16px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ms-editor .field.ms-editor-field select {
  margin-bottom: 0;
  font-size: var(--text-small);
  text-align: left;
}

.ms-col-note .field.ms-editor-field input,
.ms-half-date .field.ms-editor-field input {
  text-align: left;
}

/* Подпись `.field` тише самого редактора (`--soft` на `--raised`, тот же
   контраст, что и у `.ms-tag` рядом) и без нижнего поля формы: в плавающем
   редакторе она не первая на экране, а поясняющая строка над уже открытым
   полем — расстояние до него держит `gap: 7px` самого `.field` (04-components.css). */
.ms-editor .field.ms-editor-field {
  margin: 0;
  font-size: 12px;
}

.ms-editor .field.ms-editor-field ~ .field.ms-editor-field {
  margin-top: 5px;
}

/* NQA-MSHEET-2: наведение на строку (`.ms-table tbody tr:hover td` выше)
   подмешивает `--state-hover` (rgba(255,255,255,0.06)) поверх фона ячейки —
   этого достаточно, чтобы контраст тихой подписи `.ms-tag` (--mist, в покое
   4,86–5,76:1) просел до 4,4:1, ниже обязательных 4,5. Подписи наведённой
   строки берут `--soft` (9,05/7,64) — запас остаётся многократным даже со
   светлее фоном, а сами подписи по-прежнему тише жирного значения рядом. */
.ms-table tbody tr:hover .ms-tag {
  color: var(--soft);
}