/* СВОЁ КАБИНЕТА ПАРТНЁРА: то, чего в двух других кабинетах нет вовсе.
 *
 * Общее лежит в `ui.css` — он одинаков во всех трёх кабинетах байт в байт.
 * Сюда попадает только то, что встречается в одном кабинете: разъехавшийся
 * общий блок никто не заметит, пока сотрудник поддержки не откроет две
 * панели рядом.
 *
 * Правило простое: элемент появился во ВТОРОМ кабинете — переезжает в ядро,
 * во все три копии сразу. Порядок и проверка — docs/panels-ui.md.
 *
 * Здесь живёт ровно то, что и делает кабинет партнёра системой управления, а
 * не витриной: шахматка, расписание слотов, доска смены, уборка, чеки и
 * начисления, лента заказа, анкета.
 *
 * Адаптив кабинета — последним разделом этого файла, точки те же, что у
 * ядра: 1200 / 992 / 768 / 576 (Р-191).
 * Цвет — только из tokens.css (правило №10).
 */

/* ==================================================================== */
/* 1. Анкета партнёра: свой каркас без строки разделов                   */
/* ==================================================================== */

.onboard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.onboard__head {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--head-a);
  padding: 0 var(--shell-pad);
  border-bottom: 1px solid var(--border);
  background: var(--head-bg);
}

.onboard__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.onboard__brand:hover { color: var(--text); text-decoration: none; }

.onboard__mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: url("/static/img/icon.svg") center / cover no-repeat;
  flex: none;
}

.onboard__who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--text2);
  font-size: 13px;
}

/* Анкету заполняют подряд сверху вниз, и колонка тут узкая намеренно: поле
   шириной в 1300 px читается как ошибка вёрстки, а не как поле.
   ПРЕДЕЛ, а не фиксированная ширина: с `width: 880px` анкета уводила всю
   страницу вбок на 490 px на телефоне — а заполняют её как раз чаще всего
   не за монитором */
.onboard__body {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 28px var(--shell-pad) 72px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Номер шага анкеты: кружком перед заголовком блока */
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* Выбор бизнеса на входе: крупные кнопки-строки. У управляющей компании их
   три, и различают их по названию с категорией, а не по значку */
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.choice:hover { border-color: var(--brand); background: var(--surface); }
.choice__name { font-size: 15px; font-weight: 650; }
.choice__meta { color: var(--text2); font-size: 12.5px; }

/* ==================================================================== */
/* 2. Адрес объекта: два пути, карта, подсказка                          */
/* ==================================================================== */

/* Точный адрес или только город. Радио внутри рамки — нажимается вся
   плашка, а не восемь пикселей кружка */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  cursor: pointer;
}

.mode-option:hover { border-color: var(--border2); }

.mode-option--active,
.mode-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-bg);
}

.mode-option__text { margin-top: 2px; color: var(--text2); font-size: 12.5px; }

.suggest { position: relative; }

.suggest__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  box-shadow: var(--shadow-lg);
}

.suggest__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.suggest__item:hover,
.suggest__item--active { background: var(--surface); text-decoration: none; }

/* Карта: бесплатные тайлы OpenFreeMap через MapLibre, без ключей (Р-061) */
.map {
  height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.hints {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text2);
  font-size: 12.5px;
}

/* ==================================================================== */
/* 3. Объявления списком                                                 */
/* ==================================================================== */

.listings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.listing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.listing-card:hover { border-color: var(--border2); box-shadow: var(--shadow-md); }

.listing-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--surface3) center / cover no-repeat;
}

.listing-card__cover .badge { position: absolute; top: 10px; left: 10px; }

.listing-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}

.listing-card__title { font-size: 15px; font-weight: 650; color: var(--text); }
.listing-card__title:hover { color: var(--brand-ink); }

.listing-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text2);
  font-size: 12.5px;
}

.listing-card__actions { display: flex; gap: 8px; margin-top: 8px; }

/* ==================================================================== */
/* 4. Фотографии объявления: загрузка и порядок                          */
/* ==================================================================== */

/* Инструменты снимка появляются при наведении и при фокусе с клавиатуры:
   постоянные кнопки поверх каждой карточки закрывают то, ради чего снимок и
   смотрят, — сам снимок */
.photo__tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s ease;
}

.photo:hover .photo__tools,
.photo:focus-within .photo__tools { opacity: 1; }

.photo__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--overlay);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.photo__tool:hover { color: #fff; text-decoration: none; filter: brightness(1.3); }
.photo__tool:disabled { opacity: 0.4; cursor: not-allowed; }

.photo__body input { font-size: 12.5px; }

.photo__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.photos-order { display: flex; align-items: center; gap: 10px; }
.photos-order__note { color: var(--success-ink); font-size: 12.5px; }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 20px;
  border: 2px dashed var(--border2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text2);
  text-align: center;
  cursor: pointer;
}

.dropzone:hover,
.dropzone--over { border-color: var(--brand); background: var(--brand-bg); }

.dropzone__mark { color: var(--brand); font-size: 26px; line-height: 1; }
.dropzone__title { color: var(--text); font-size: 14px; font-weight: 650; }
.dropzone__hint { font-size: 12.5px; }

/* ==================================================================== */
/* 5. Шахматка «единица фонда × день» (15б)                              */
/* ==================================================================== */

/* Главный экран любой гостиничной системы: он единственный отвечает на
 * вопрос «можно ли поселить этого гостя на весь срок в ОДИН номер». Остаток
 * по дням на него не отвечает никогда.
 *
 * Строка — единица фонда, столбец — день. Первая колонка липкая, шапка с
 * числами тоже: при тридцати днях и двадцати номерах без этого непонятно ни
 * какой это номер, ни какое число.
 */
.rack-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}

/* Ширина ПО СОДЕРЖИМОМУ, а не 100 %. Общее правило таблиц растягивало
   шахматку на всю рабочую колонку, и при трёх днях в месяце колонка с именем
   номера раздувалась до 900 px, а сами сутки жались к правому краю. Сутки —
   величина постоянная (30 px), и месяц должен быть шириной в месяц: не
   влезает — прокручивается внутри `.rack-wrap` */
.rack {
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.rack td,
.rack th { border: 0; }

.rack__unit {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 210px;
  padding: 8px 12px !important;
  background: var(--surface2) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left !important;
  vertical-align: middle;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

thead .rack__unit { z-index: 4; background: var(--surface) !important; }

.rack__name { font-size: 13px; font-weight: 600; color: var(--text); }
.rack__attrs { display: block; font-size: 11px; }

/* Точка состояния уборки рядом с именем: «грязный» и «подготовлен» решают,
   можно ли селить сегодня, а не завтра */
.rack__care {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

.rack__care--dirty { background: var(--warning); }
.rack__care--prepared { background: var(--info); }

/* Строка чисел НЕ липкая: `.rack-wrap` прокручивается, и `top` превратился бы
   в смещение шапки на сто пикселей вниз, поверх первых номеров. Липкой
   остаётся только первая КОЛОНКА — она сдвигается по горизонтали, а по
   горизонтали `.rack-wrap` и прокручивается */
.rack__day {
  width: 30px;
  min-width: 30px;
  padding: 8px 0 !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: center !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

/* По выходным смотрят загрузку, и суббота, неотличимая от вторника, лишает
   сетку половины смысла */
.rack__day--weekend { color: var(--brand-ink) !important; }

/* ТЕКУЩИЙ ДЕНЬ — ЗОЛОТОЙ (Р-195). Сетка на тридцать один день читается от
   сегодняшнего дня вправо, и без опоры взгляд считает клетки пальцем.
   Подсвечен весь столбец, а не только число в шапке: число наверху видно,
   пока смотришь наверх, а искать номер приходится в середине таблицы.
   День берётся в поясе ОБЪЕКТА (Р-039) и приходит с сервера */
.rack__day--today {
  color: var(--gold-ink) !important;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--gold);
}

.rack__cell {
  position: relative;
  height: 34px;
  padding: 0 !important;
  background: var(--surface2);
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---- четыре состояния клетки, и больше никаких (Р-195) ----
 *
 * свободно      — можно продавать;
 * забронировано — держится тем, что ещё может не состояться: неподтверждённым
 *                 запросом или неподписанным договором;
 * занято        — подтверждённая бронь, заселённый гость, подписанный
 *                 договор. Не освободится;
 * закрыто       — партнёр снял номер с продажи или закрыл даты объекта.
 *
 * Разница между «забронировано» и «занято» рабочая, а не декоративная: по ней
 * решают, кому ещё можно предложить эти сутки. Раньше сетка красила ожидание
 * и подтверждённое двумя цветами без подписи в легенде, а договор от брони не
 * отличала вовсе — то есть отвечала на вопрос неправильно.
 */
.rack__cell--free { background: var(--surface2); }

/* Забронировано — фирменным НА ПРОСВЕТ и с обводкой: полоса видна, но
   читается легче занятой. Так и есть по смыслу: она может исчезнуть */
.rack__cell--booked {
  background: var(--brand-bg);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* Занято — плотным фирменным. Полоса скруглена по концам (ниже): без этого
   две соседние брони в одной строке читаются как одна длинная, и день выезда
   одного гостя выглядит занятым другим */
.rack__cell--busy { background: var(--brand); }

/* Закрыто — штриховкой, а не цветом: это не чья-то бронь, а отсутствие
   продажи, и путать его с занятостью нельзя */
.rack__cell--closed {
  background: repeating-linear-gradient(
    135deg, var(--surface3), var(--surface3) 4px, var(--surface2) 4px, var(--surface2) 8px);
}

/* ЭТА БРОНЬ — отдельным цветом (Р-195). Сетку в карточке заказа открывают,
   чтобы увидеть СВОИ сутки среди чужих: без выделения приходится сверять
   номер на полосе с номером в заголовке страницы */
.rack__cell--own { background: var(--accent); }
.rack__cell--own.rack__cell--booked {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.rack__cell--first { border-radius: 8px 0 0 8px; }
.rack__cell--last { border-radius: 0 8px 8px 0; border-right-color: transparent !important; }

/* Столбец текущего дня: полосы по бокам каждой клетки складываются в
   непрерывную золотую колонку сверху вниз. Фон при этом остаётся свой —
   состояние клетки важнее подсветки, и закрашивать его нельзя */
.rack__cell--today {
  box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold);
}

.rack__cell--today.rack__cell--booked {
  box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold),
              inset 0 0 0 1px var(--brand);
}

.rack__cell[data-free] { cursor: pointer; }
.rack__cell[data-free]:hover { background: var(--brand-bg); }

.rack__cell--pick { background: var(--gradient-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.rack__cell--pick.rack__cell--edge { background: var(--brand-bg); }

.rack__code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
}

.rack__code:hover { color: #fff; text-decoration: none; }

/* На светлой полосе «забронировано» белый номер не читается: фон там
   прозрачный, а не фирменный */
.rack__cell--booked .rack__code { color: var(--brand-ink); }
.rack__cell--own.rack__cell--booked .rack__code { color: var(--accent-ink); }

/* Полоса выбранного отрезка: появляется вместе с выбором и исчезает с ним.
   Постоянная кнопка «добавить бронь» без дат отправляла бы в пустую форму —
   ровно то, от чего этот экран избавляет */
.rack-pick {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  box-shadow: var(--shadow-lg);
}

.rack-pick[hidden] { display: none; }
.rack-pick__label { font-weight: 600; }

.rack-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.rack-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Легенда повторяет ЧЕТЫРЕ состояния сетки один в один (Р-195). Легенда, в
   которой не хватает цвета, хуже её отсутствия: по ней делают вывод «а этот,
   наверное, тоже занят» */
.rack-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  background: var(--surface2);
}

.rack-dot--free { background: var(--surface2); }
.rack-dot--booked { background: var(--brand-bg); border-color: var(--brand); }
.rack-dot--busy { background: var(--brand); border-color: transparent; }
.rack-dot--closed {
  border-color: var(--border2);
  background: repeating-linear-gradient(
    135deg, var(--surface3), var(--surface3) 3px, var(--surface2) 3px, var(--surface2) 6px);
}
.rack-dot--own { background: var(--accent); border-color: transparent; }
.rack-dot--today { background: var(--gold); border-color: var(--gold-ink); }

/* Сворачиваемая шахматка одного объекта в общем списке */
.rack-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  overflow: hidden;
}

.rack-block + .rack-block { margin-top: 14px; }

/* Текущий день в расписании слотов — тем же золотым, что и в жилой сетке
   (Р-195): две формы одной шахматки обязаны опознаваться одинаково */
.slot-day--today { box-shadow: inset 3px 0 0 var(--gold); }
.slot-day--today .slot-day__date strong { color: var(--gold-ink); }

.rack-block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  cursor: pointer;
  list-style: none;
}

.rack-block__head::-webkit-details-marker { display: none; }
.rack-block__title { font-size: 14px; font-weight: 650; }
.rack-block__links { display: flex; gap: 12px; margin-left: auto; font-size: 13px; }

/* ---- расписание слотов (Р-133): строка — день, внутри дня слоты ---- */

/* ДРУГАЯ ФОРМА, А НЕ ВАРИАНТ ЖИЛОЙ СЕТКИ. У жилья ресурс занимают отрезком;
   у впечатления, услуги и еды занимают момент, и в одном дне бывает восемь
   посадок за четырьмя столиками — клеткам это не разложить */
.slot-rack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  overflow: hidden;
}

.slot-day {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.slot-day:last-child { border-bottom: 0; }
.slot-day--weekend { background: var(--surface); }
.slot-day--empty { color: var(--text3); }

.slot-day__date { display: flex; align-items: baseline; gap: 8px; }
.slot-day__date strong { font-size: 17px; font-variant-numeric: tabular-nums; }

.slot-day__list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-size: 12.5px;
}

.slot-chip__at { font-weight: 650; font-variant-numeric: tabular-nums; }
.slot-chip__unit { color: var(--text2); }
.slot-chip__left,
.slot-chip__who { color: var(--text3); font-size: 11.5px; }

.slot-chip--free:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.slot-chip--busy { border-color: transparent; background: var(--brand-bg); color: var(--brand-ink); }
.slot-chip--busy .slot-chip__who { color: var(--brand-ink); }
.slot-chip--closed { background: var(--surface3); color: var(--text3); }

/* ПОЛОСЫ ПРОДЛЕНИЯ БОЛЬШЕ НЕТ (Р-196). Здесь жил `.strip` — одна строка
 * шахматки на единицу этой брони. Она отвечала на один вопрос, «докуда можно
 * продлить», а на стойке просят иначе: «останемся, но переедем потише».
 * Продление теперь идёт по общей шахматке заказа (`.rack`), и второй набор
 * правил рядом с ней означал бы два разных вида одной и той же сетки.
 */

.extend { display: flex; flex-direction: column; gap: 14px; }
.extend__summary { font-weight: 600; }
.extend__summary--bad { color: var(--error-ink); }

/* Два способа рассчитаться: через сервис или наличными на месте (Р-164) */
.extend__ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.way {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  cursor: pointer;
}

.way:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); }
.way strong { font-size: 13.5px; }
.way span { color: var(--text2); font-size: 12.5px; }

/* ==================================================================== */
/* 6. Деньги: чеки, начисления, свод                                     */
/* ==================================================================== */

.receipt {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}

.receipt + .receipt { margin-top: 12px; }

.receipt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--border2);
}

/* Главный чек — фирменной чертой; услуга — зелёной; наличные мимо сервиса —
   сиреневой (Р-164). Зелёный в чеках уже означает «оплачено через нас», а
   серый — «снято»: третий смысл требует третьего цвета, иначе отчёт
   читается неверно молча */
.receipt--main::before { background: var(--gradient-line); }
.receipt--service::before { background: var(--success); }
.receipt--offline::before { background: var(--accent); }
.receipt--offline { border-color: transparent; background: var(--accent-bg); }
.receipt--cancelled { opacity: 0.6; }
.receipt--cancelled::before { background: var(--text3); }

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

.receipt__what { font-weight: 600; }

.receipt__lines { margin: 8px 0 0; padding: 0; list-style: none; }

.receipt__lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}

.receipt__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 10px 0 0;
}

.receipt__facts div { display: flex; gap: 6px; min-width: 0; }
.receipt__facts dt { margin: 0; color: var(--text2); font-size: 12.5px; }
.receipt__facts dt::after { content: ":"; }
.receipt__facts dd { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }

.receipt__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Лента чека моноширинно: она приходит с сервера уже свёрстанной строками */
.tape {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
}

.receipts__sum {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface);
}

.receipts__sum-title {
  margin-bottom: 8px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.receipts__sum table { font-size: 13px; }
.receipts__sum table td { padding: 4px 0; border: 0; }

.charge-add { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }

.charge--service td:first-child { border-left: 3px solid var(--success); }
.charge--offline td:first-child { border-left: 3px solid var(--accent); }
.charge--cancelled { opacity: 0.6; }
.charge--cancelled td:first-child { border-left: 3px solid var(--text3); }

.rental-charges .charge { font-size: 13px; }

/* Раскрываемый блок: продление, перенос, добавление начисления. Свёрнут по
   умолчанию — на карточке брони их четыре, и развёрнутыми они дают экран,
   по которому нельзя пробежать глазами */
.fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}

.fold + .fold { margin-top: 12px; }

/* Заголовок раскрываемого блока: значок, название, подсказка. Подсказка
   переносится на свою строку целиком, а не жмётся в колонку из трёх слов —
   `flex-basis: 100%` после переноса, а не отдельное правило под каждую
   ширину */
.fold__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.fold__head .card__hint {
  flex: 1 1 240px;
  margin: 0;
  font-weight: 400;
}

.fold__head::-webkit-details-marker { display: none; }

.fold__head::before {
  content: "▸";
  color: var(--text3);
  font-size: 11px;
  transition: transform .12s ease;
}

.fold[open] > .fold__head::before { transform: rotate(90deg); }
.fold[open] > .fold__head { border-bottom: 1px solid var(--border); }
.fold > *:not(.fold__head) { padding: 0 16px 16px; }
.fold > .fold__head + * { padding-top: 14px; }

/* Перенос и сокращение брони */
.move { display: flex; flex-direction: column; gap: 12px; }
.move__head { font-size: 13.5px; font-weight: 650; }
.move__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.move__row > label { display: flex; flex-direction: column; gap: 5px; min-width: 170px; }
.move__row select { min-width: 200px; }

/* Подпись поля внутри плотных форм карточки брони */
.unit-attr__label {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.unit-attrs { display: flex; flex-wrap: wrap; gap: 10px; min-width: 220px; }

/* `min-width: 0` обязателен: поле ввода без него не сжимается ниже своей
   «естественной» ширины в двадцать символов и вылезает из ячейки — это было
   видно даже на 1440 px, где места в избытке */
.unit-attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 110px;
  min-width: 0;
}

.unit-attr input,
.unit-attr select { min-width: 0; }

/* ==================================================================== */
/* 7. Лента заказа (Р-181, Р-184)                                        */
/* ==================================================================== */

/* Одна лента, а не «журнал плюс чат» рядом: вопрос один — что было по этому
 * заказу и в каком порядке, — а у события и реплики одна ось, время.
 * Партнёр видит здесь ровно то же, что гость, и выглядеть это обязано
 * одинаково: блок повторён в `web/app/static/css/app.css` слово в слово.
 *
 * УСТРОЙСТВО: слева столбик времени, по нему проходит ось с точками, справа
 * записи. События — текстом на точке, реплики — баблами; своя прижата вправо
 * и залита фирменным. На длинной ленте это различает стороны быстрее, чем
 * подпись над каждой репликой.
 *
 * Ось времени ОДНА и всегда слева, в том числе у своих реплик. В мессенджере
 * время уезжает к своему баблу вправо, но здесь это не переписка, а история
 * заказа: столбик дат вдоль левого края читается одним взглядом (Р-184), а
 * разорванный пополам — не читается вовсе.
 */
.feed {
  /* Ширина столбца времени: «03.09.2026 21:55 Asia/Bangkok» переносится в
     две строки, и 118 px — та ширина, при которой перенос приходится на
     пробел перед поясом, а не в середину даты */
  --feed-time: 118px;
  --feed-gap: 10px;
  --feed-axis: calc(var(--feed-time) + var(--feed-gap) + 4px);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Ось: одна линия через всю ленту, ЗА точками. Без неё записи выглядят
   несвязанным списком, а лента — это порядок событий */
.feed::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: var(--feed-axis);
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}

.feed__event,
.feed__message {
  display: grid;
  grid-template-columns: var(--feed-time) 10px minmax(0, 1fr);
  gap: 0 var(--feed-gap);
}

/* Время по ПРАВОМУ краю своего столбца: дата и час выстраиваются друг под
   другом ровно у оси, а не пляшут по длине названия пояса */
.feed__at {
  grid-column: 1;
  color: var(--text3);
  font-size: 11.5px;
  line-height: 1.3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Точка на оси. Кольцо цветом карточки — чтобы линия не просвечивала
   сквозь точку и та читалась как узел, а не как утолщение */
.feed__dot,
.feed__message::before {
  grid-column: 2;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--border2);
  box-shadow: 0 0 0 3px var(--surface2);
}

.feed__message::before { content: ""; }
.feed__message--mine::before { background: var(--brand); }

.feed__body { grid-column: 3; min-width: 0; }

/* Событие: время и запись стоят на ОДНОЙ базовой линии. Выравнивание по
   верхнему краю давало разницу в три пикселя — ту самую, из-за которой
   запись выглядела чуть ниже своего времени */
.feed__event { align-items: baseline; }
.feed__event .feed__dot { align-self: start; }

.feed__event .feed__body {
  color: var(--text2);
  font-size: 13.5px;
}

.feed__message { align-items: start; }

/* У реплики время равняется на подпись внутри бабла, а не на его верхнюю
   рамку: рамка — это оформление, а читают строку */
.feed__message .feed__at { padding-top: 10px; }

.feed__message .feed__body {
  justify-self: start;
  max-width: min(88%, 560px);
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

/* СВОЯ РЕПЛИКА ОСТАЁТСЯ СЛЕВА (Р-206). В обычном чате свои сообщения прижаты
   вправо, и там это верно: разговор двоих. Здесь же лента — история заказа, в
   которой у событий своё время в левой колонке; реплика, уехавшая вправо,
   рвала эту колонку пополам и заставляла читать зигзагом. Отличается своё
   цветом и подписью «Вы» — этого достаточно, чтобы не перепутать. */
.feed__message--mine .feed__body {
  justify-self: start;
  border-color: transparent;
  background: var(--brand-bg);
}

/* Список приложенных документов внутри записи ленты */
.feed__files {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feed__files li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* Имя файла не рвётся по буквам: «contract.pdf», сложенное в три строки по
   две буквы, — это ровно то, из-за чего вложение перестают узнавать */
.feed__files a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ---- Прикреплённые файлы под полем ввода (Р-205) ---- */

.feed__form { flex-wrap: wrap; }

.attach__list {
  order: 9;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.attach__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 8px 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
}

.attach__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.attach__size { color: var(--text3); font-size: 11.5px; }

.attach__drop {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--surface3);
  color: var(--text2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.attach__drop:hover { background: var(--error-bg); color: var(--error-ink); }

.attach__note { order: 10; flex: 1 0 100%; }

.feed__who {
  margin-bottom: 2px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* `pre-wrap` обязателен: человек разбивает сообщение на строки, и склеенный
   в абзац адрес с кодом от сейфа читается как одна длинная строка */
.feed__text {
  font-size: 13.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feed__when { color: var(--text3); font-size: 11px; }

.feed__form { display: flex; gap: 10px; margin-top: 16px; }
.feed__form .input { flex: 1 1 auto; }

/* На телефоне столбик времени съедал бы треть ширины, а «Asia/Bangkok» в нём
   рассыпался по одной букве в строку. Время встаёт строкой НАД записью, ось и
   точки уходят: на 390 px они уже не помогают читать, а место занимают.
   Своя реплика остаётся справа — цветом и краем стороны различаются и здесь */
@media (max-width: 575.98px) {
  .feed::before { display: none; }

  .feed__event,
  .feed__message {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px 0;
  }

  .feed__at,
  .feed__body { grid-column: 1; }

  .feed__at { text-align: left; }
  .feed__message .feed__at { padding-top: 0; }
  .feed__dot,
  .feed__message::before { display: none; }

  .feed__message .feed__body { max-width: 92%; }
  .feed__form { flex-direction: column; align-items: stretch; }
}

/* ==================================================================== */
/* 8. Гость: профиль и история                                           */
/* ==================================================================== */

.guest-profile { display: flex; flex-direction: column; gap: 12px; }
.guest-profile__row { display: flex; align-items: center; gap: 12px; }

.guest-profile__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.guest-profile__facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.guest-profile__facts dt {
  margin: 0;
  color: var(--text3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guest-profile__facts dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

.guest-history { color: var(--text2); }

/* ==================================================================== */
/* 9. Доска смены (обзор)                                                */
/* ==================================================================== */

/* Четыре колонки дня: заезды, выезды, в доме, ждут ответа. Это первое, что
 * открывают утром, — и единственный экран, который обязан отвечать на
 * вопрос «что сегодня» без единого перехода */
.board {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
  box-shadow: var(--shadow-sm);
}

.board__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Ряд, а не сетка в четыре колонки. Колонок у доски ПЯТЬ, когда есть что
   разбирать (просроченный заезд, зависшая бронь), и пятая уезжала во вторую
   строку одна — доска выглядела сломанной ровно в тот день, когда её и
   открывают. Ряд раскладывает столько, сколько есть */
.board__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.board__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 210px;
  min-width: 0;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.board__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}

.board__col-hint { margin-top: -4px; }
.board__empty { padding: 10px 0; text-align: center; }

.board__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
}

.board__item:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }

/* Просроченный заезд — красной чертой, залежавшийся — жёлтой. Смотрят на
   доску мельком, и цвет края здесь работает быстрее любой подписи */
.board__item--overdue { border-left-color: var(--error); }
.board__item--stale { border-left-color: var(--warning); }

/* Всё внутри карточки дня переносится. Колонок в доске бывает четыре, и на
   планшете карточка сужается до 110 px: строка «код · время», в которой
   нечему перенестись, вылезала за край карточки на четыре пикселя — этого
   достаточно, чтобы соседние карточки перестали выглядеть одинаковыми */
.board__code {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
}

.board__time { font-variant-numeric: tabular-nums; }
.board__where { min-width: 0; color: var(--text2); font-size: 12px; overflow-wrap: anywhere; }

.board__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.board__state { flex: none; }
.board__state--expected { background: var(--info-bg); color: var(--info-ink); }
.board__state--arrived { background: var(--success-bg); color: var(--success-ink); }
.board__state--overdue { background: var(--error-bg); color: var(--error-ink); }
.board__state--stale { background: var(--warning-bg); color: var(--warning-ink); }
.board__quiet { padding: 18px 0; text-align: center; }

.board__strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.board__strip-title {
  color: var(--text3);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.board__slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
}

.board__slot--dirty { border-color: transparent; background: var(--warning-bg); color: var(--warning-ink); }
.board__slot--prepared { border-color: transparent; background: var(--info-bg); color: var(--info-ink); }

/* ==================================================================== */
/* 10. Уборка и подготовка                                               */
/* ==================================================================== */

.care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.care__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface2);
}

.care__row--dirty { border-left-color: var(--warning); }
.care__row--prepared { border-left-color: var(--info); }
.care__row--ready { border-left-color: var(--success); }

.care__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.care__name { font-size: 14px; font-weight: 650; }
.care__listing { color: var(--text2); }
.care__note { color: var(--text2); }
.care__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==================================================================== */
/* 11. Заселение: видоискатель сканера                                   */
/* ==================================================================== */

/* Видоискатель на той же тёмной подложке, что и просмотр документа: светлый
   фон вокруг кадра сбивает автояркость камеры, и код перестаёт читаться */
.scanner {
  position: relative;
  border-radius: var(--radius);
  background: var(--viewer-bg);
  overflow: hidden;
}

.scanner video { display: block; width: 100%; max-height: 520px; object-fit: cover; }

.scanner__frame {
  position: absolute;
  inset: 12%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  pointer-events: none;
}

/* ==================================================================== */
/* 12. Строка списка броней                                              */
/* ==================================================================== */

/* Карточка-ссылка: код брони, гость, объект и даты одной плиткой. Таблицей
   это не выкладывается — у части строк вместо дат момент начала, а у
   договора ещё и стадия; колонка, пустая у половины строк, читается как
   потерянные данные */
.booking { display: block; }
.booking:hover { border-color: var(--brand); color: inherit; text-decoration: none; }

.booking__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  margin-right: 8px;
}

.booking__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 650;
}

/* ==================================================================== */
/* 13. Выбор из двух в форме своей брони                                 */
/* ==================================================================== */

/* «Взять расчёт сервиса» или «свою сумму» — радио в рамке на всю строку.
   Нажимается вся плашка: у кружка радио восемь пикселей, и промахнуться по
   нему мышью на форме, которую заполняют на стойке при госте, слишком легко */
.pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  cursor: pointer;
}

.pick:hover { border-color: var(--border2); }
.pick:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); }
.pick > span { display: flex; flex-direction: column; gap: 2px; }


/* ==================================================================== */
/* 14. АДАПТИВ КАБИНЕТА ПАРТНЁРА (Р-191)                                 */
/* ==================================================================== */

/* Точки те же, что у ядра, — бутстраповские. Здесь только то, чего в двух
 * других кабинетах нет: доска смены, объекты плитками, расписание слотов,
 * лента заказа, чеки, анкета.
 *
 * Шахматка и полоса продления в список не попали намеренно: они и так
 * прокручиваются внутри себя (`.rack-wrap`), а ужимать сутки до трёх
 * пикселей — значит показать сетку, по которой нельзя ткнуть.
 */

/* ---- ≤ 1199.98 ---- */
@media (max-width: 1199.98px) {
  .listings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Колонки дня по 150 px — это код брони в три строки. Две по 320 читаются,
     и смена по-прежнему видна одним экраном */
  .board__col { flex-basis: calc(50% - 7px); }
}

/* ---- ≤ 991.98 ---- */
@media (max-width: 991.98px) {
  .receipt__facts,
  .guest-profile__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map { height: 340px; }
  .onboard__body { padding-top: 20px; }

  /* Инструменты снимка на планшете и телефоне видны всегда: наведения там
     нет вовсе, и кнопка, появляющаяся по `:hover`, недоступна в принципе */
  .photo__tools { opacity: 1; }
  .photo__tool { width: 32px; height: 32px; }
}

/* ---- ≤ 767.98 ---- */
@media (max-width: 767.98px) {
  .board__col { flex-basis: 100%; }

  .listings,
  .care,
  .mode-switch,
  .extend__ways,
  .receipt__facts,
  .guest-profile__facts { grid-template-columns: minmax(0, 1fr); }

  .board { padding: 14px 16px; }

  /* Слот-расписание: дата над списком слотов, а не колонкой слева */
  .slot-day { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .move__row { flex-direction: column; align-items: stretch; }
  .move__row > label { min-width: 0; }
  .move__row select { min-width: 0; }

  .unit-attrs { flex-direction: column; }
  .unit-attr { min-width: 0; }

  .receipt__facts div { flex-wrap: wrap; }
  .tape { font-size: 11px; }
}

/* ---- ≤ 575.98 ---- */
@media (max-width: 575.98px) {
  .map { height: 280px; }
  .onboard__head { padding: 0 12px; }
  .onboard__body { padding: 16px 12px 48px; }
  .rack-pick { flex-wrap: wrap; gap: 8px; }
  .care__actions .btn { flex: 1 1 auto; }
  .booking__title { font-size: 13.5px; }
}


/* ==================================================================== */
/* Политики отмены: пороги возврата парами полей (Р-193)                 */
/* ==================================================================== */

/* Две колонки, а не одна строка текста: «за сколько суток» и «сколько
 * вернём» — два разных числа, и разбирать их из фразы значит однажды
 * разобрать неправильно. Шапка над полями подписывает, что где, — без неё
 * человек читает «30 / 100» и гадает, что из этого проценты */
.policy-rules { display: grid; gap: 6px; margin-bottom: 8px; }

.policy-rules__head,
.policy-rules__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.policy-rules__head { padding: 0 2px; }
.policy-rules__row .input { width: 100%; }

/* На телефоне пары остаются парами: разложенные в столбик, они перестают
   читаться как «за столько дней — столько процентов» */
@media (max-width: 480px) {
  .policy-rules__head,
  .policy-rules__row { grid-template-columns: minmax(0, 1fr) 90px; }
}


/* Пометки обязательности рядом с подписью поля.
 *
 * СЛОВОМ, А НЕ ЗВЁЗДОЧКОЙ. Звёздочку объясняют внизу формы — то есть уже
 * после того, как человек прочитал поля. Слово объясняет само себя и
 * читается голосовым доступом. «Необязательно» стоит тоже: у стойки гость
 * часто не оставляет ни телефона, ни почты, и пустое поле не должно
 * выглядеть недоделкой. */
.field__req,
.field__opt {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.field__req { color: var(--brand-ink); }
.field__opt { color: var(--text3); }


/* ВЫБРАННЫЙ СРОК В ШАХМАТКЕ (Р-210). Рамка, а не заливка: заливка спорила бы
   с состоянием клетки — по цвету читают «свободно / занято», и подменять его
   выбором значит прятать главное. Рамка же отвечает на другой вопрос: «какие
   сутки я сейчас выбрал». */
.rack__cell--picked {
  box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand);
}

.rack__cell--picked.rack__cell--first,
.rack__cell--picked:first-of-type {
  box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand),
              inset 2px 0 0 var(--brand);
}


/* ЧЕКИ СЕТКОЙ (Р-199). Чек — узкий документ: тридцать два знака в строке, и
   в столбик справа от него оставалось пустое место в две трети ширины.
   Колонок столько, сколько помещается: в карточке брони это три, на узком
   экране одна. Жёсткое «три» здесь не годится — место у блока разное. */
.receipts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.receipts-grid > .receipt { margin-top: 0; }
.receipts-grid > .receipt + .receipt { margin-top: 0; }

/* Лента внутри узкой карточки мельчает и прокручивается внутри себя, а не
   рвёт страницу вбок */
.receipts-grid .tape { font-size: 11px; overflow-x: auto; }


/* ПУСТЫЕ БЛОКИ ВЛОЖЕНИЙ НЕ ЗАНИМАЮТ МЕСТА (Р-205).
   
   `display: flex` у списка сильнее браузерного `[hidden] { display: none }`:
   пустой список всё равно рисовался, а вместе со строкой-заметкой давал две
   пустые полосы во всю ширину внутри строки ввода. Со стороны это выглядело
   поломкой: скрепка сверху, поле посередине, кнопка отправки снизу. */
.attach__list[hidden] { display: none !important; }
.attach__note:empty { display: none; }