/* Главная: плашки объектов и режим объекта в шапке (HOME-1).
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: последний в группе, после
   18-house.css. Дописывает новые классы, ничего прежнего не перекрывает.

   Разметку ставит web/js/25-home.js.

   Цвет — только токены 01-tokens.css: ни одного нового значения. Затемнение
   фотографии собрано из var(--night) и прозрачности, поэтому новая палитра
   сюда не проникает даже градиентом.

   Движение живёт в атрибуте html[data-motion='on'] (21-transitions.js) и в
   @media (prefers-reduced-motion) из 09-responsive.css: там все переходы
   снимаются разом, поэтому отдельных отмен здесь почти нет. */

/* ============================================================
   0. Марка системы (BRAND-1; BRAND-3 — REQUIREMENTS.md п. 46: владелец
      отклонил готовый логотип (BRAND-2, п. 45) — картинки нет совсем,
      марка полностью словесная)
   ============================================================ */

/* Имя «TO BE KIND» и девиз «Быть добру» под ним — две строки читаются как
   один знак: общий левый край (.brand-words — грид в один столбец), девиз
   крупнее имени. Разметку даёт brand() в 01-core.js; правила стоят здесь,
   потому что этот файл последний в цепочке и перекрывает прежние .brand из
   03-shell.css без единого !important. */
.brand {
  align-items: center;
  gap: 11px;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.1;
}

/* Марка внутри системы — дорога на главную (01-core.js: brand(true)).
   Это кнопка, поэтому с неё снимается всё, что браузер рисует у кнопок:
   свой фон, рамка и отступы у марки свои. */
/* Отступ под маркой меньше прежних 38px: в пульте стало десять пунктов, и на
   экране высотой 900px выключатели движения и звука упирались в нижний край.
   Двадцати точек хватает, чтобы марка не слипалась с надзаголовком меню. */
.brand--link {
  width: 100%;
  padding: 4px 6px;
  margin: -4px -6px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  text-align: left;
  transition:
    background 0.18s,
    border-color 0.18s;
}

.brand--link:hover {
  background: var(--state-hover);
  border-color: var(--hud-border);
}

/* Подсветка при наведении — цвет имени к лаванде (BRAND-3, владелец: «лёгкое
   изменение цвета "TO BE KIND"»), без свечения и без картинки. transition
   стоит на самом .brand-name, поэтому работает и там, где марка не кнопка
   (там правила :hover нет, а переход остаётся безвредным). */
.brand--link:hover .brand-name {
  color: var(--lavender);
}

.brand-words {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Капитель: буквы одной высоты, разрядка 0,14em (владелец, BRAND-3, п. 46).
   Текст записан прописными, поэтому даже там, где браузер не подставит
   капитель, останется ровное «TO BE KIND», а не полумера. */
.brand-name {
  font-family: var(--font-ui);
  font-size: var(--text-nav);
  font-weight: 800;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: var(--pearl);
  white-space: nowrap;
  transition: color 0.16s;
}

/* Девиз — вторая строка знака, на ступень крупнее имени (владелец, BRAND-3).
   Антиква курсивом, как заголовки витрины. Амбра на ночи даёт 11:1, вдвое
   больше нужных 4,5:1. Тонкое подчёркивание по ширине текста — не разделитель
   между строками, а способ дать словесной марке собственный контур без
   картинки; токен тот же, что кромка HUD-кнопок, свечения нет (владелец:
   «свечения не надо»). */
.brand-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-h2);
  letter-spacing: 0.02em;
  color: var(--window);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--violet-edge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Марка на главной — те же два слова, крупнее: это витрина выбора объекта,
   не рабочая шапка. Тот же приём — столбик с общим левым краем. */
.home-brand {
  display: grid;
  gap: 4px;
  margin-top: 26px;
}

.home-brand-name {
  font-family: var(--font-ui);
  font-size: var(--text-24);
  font-weight: 800;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: var(--pearl);
  white-space: nowrap;
}

.home-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  /* Между --text-h1 (28px) и --text-display (48px) готового значения нет —
     собственная ступень витрины выбора объекта. Девиз — часть марки, а не
     заголовок экрана, поэтому решение п. 57 («заголовки и меню уменьшить»)
     его не касается. */
  font-size: 40px;
  color: var(--window);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--violet-edge);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Девиз на главной стоит над заголовком — верхний отступ заголовка лишний.
   Нижний тоже подобран так, чтобы четыре плашки помещались на экран ноутбука
   целиком: ради этого экран и сделан. */
.home-page .page-heading {
  margin: 8px 0 16px;
}

/* На экране выбора объекта называть в шапке нечего: имя дома появится, когда
   человек в него зайдёт. Кнопка выхода при этом остаётся справа. */
.topbar-scope[hidden] {
  display: none;
}

.topbar .subtle-btn[data-logout] {
  margin-left: auto;
}

/* На экране выбора в шапке остаётся один «Выйти» — держать под него 78px
   высоты незачем, они нужнее плашкам. Если браузер не знает `:has()`, шапка
   просто останется прежней высоты: это не ошибка, а чуть больше воздуха. */
.topbar:has(> .topbar-scope[hidden]) {
  min-height: 54px;
}

/* Подпись в подвале «Дохода» инвестора: тише всего, что есть на экране.
   На телефоне отступ перед ней уменьшен до 16px (ниже, мобильный блок). */
.sc-motto {
  margin: 30px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  color: var(--mist);
}

/* ============================================================
   1. Сетка плашек
   ============================================================ */

.home-page {
  /* Та же ширина строки, что у витрины: дальше 1180px текст под фотографией
     перестаёт читаться одним взглядом. */
  max-width: 1180px;
}

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

/* Один объект (так сегодня видит экран инвестор с одной долей): плашка не
   растягивается на всю строку — кадр 16:9 шириной в 1100px превратился бы
   в полоску. Она встаёт по центру, и пустота вокруг читается как замысел,
   а не как недогруженный экран. */
.home-grid--one {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

/* Каскад плашек ведёт .sc-rise на самих плашках (11-showcase.css): общий
   каскад панелей экрана дал бы второе появление поверх первого. */
html[data-motion='on'] .t-enter > .home-grid {
  animation: none;
}

/* ============================================================
   2. Плашка объекта
   ============================================================ */

.home-tile {
  position: relative;
  display: block;
  width: 100%;
  /* 16:9 — родное соотношение фотографий (1344×752), поэтому кадр не режется
     по бокам. Нижняя граница высоты нужна узкому окну: на 2 колонки при
     1000px плашка иначе становится полоской. */
  aspect-ratio: 16 / 9;
  min-height: 210px;
  /* Потолок высоты держит все четыре плашки на одном экране ноутбука: ради
     этого экран и сделан — владелец хочет видеть объекты сразу, а не
     прокручивать их. Кадр при этом не искажается, background-size: cover
     подрезает его сверху и снизу. */
  max-height: min(300px, 29vh);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--pearl);
  text-align: left;
}

/* Фотография объекта. Имя файла равно `buildings.id` (web/assets/objects/README.md),
   поэтому таблица — четыре строки ниже; новый объект добавляется одной строкой.
   Пока фотографии нет, плашка показывает картину серии ART-1. */
.home-photo {
  position: absolute;
  inset: 0;
  background-image: url('/assets/art/constellation.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter var(--t-hover) var(--t-ease-out);
}

.home-photo[data-object='leningradskaya-1'] {
  background-image: url('/assets/objects/leningradskaya-1.jpg');
}

.home-photo[data-object='leningradskaya-2'] {
  background-image: url('/assets/objects/leningradskaya-2.jpg');
}

.home-photo[data-object='zavod-1'] {
  background-image: url('/assets/objects/zavod-1.jpg');
}

.home-photo[data-object='zavod-2'] {
  background-image: url('/assets/objects/zavod-2.jpg');
}

/* Затемнение снизу вверх к --night. Две задачи, поэтому два слоя: нижний
   градиент держит подпись (под именем объекта фон практически равен --night,
   и --pearl даёт 7,8:1 даже над самой яркой лампой кадра), верхняя ровная
   пелена приглушает фотографию целиком, чтобы четыре кадра не спорили друг
   с другом. Прозрачность вместо новых rgba: градиент к `transparent`
   браузеры считают с премножением альфы, серого налёта не возникает. */
.home-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--night) 0%, var(--night) 28%, transparent 80%);
}

.home-shade:after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--night);
  opacity: 0.2;
}

.home-caption {
  position: absolute;
  inset: auto 0 0;
  display: block;
  padding: 20px 24px 22px;
}

/* Название — Cormorant Italic: единственное место рабочего экрана, где
   уместен парадный шрифт, и владелец просил крупную подпись. */
.home-name {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h1);
  line-height: 1.1;
  color: var(--pearl);
}

.home-label {
  display: block;
  margin-top: 8px;
  font-size: var(--text-small);
  color: var(--soft);
}

.home-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: var(--text-body);
  color: var(--soft);
}

/* Точка-разделитель между фактами: она рисуется перед фактом, а не после,
   поэтому при переносе строки не остаётся висеть в конце. */
.home-line > .home-fact + .home-fact:before {
  content: '·';
  margin-right: 10px;
  color: var(--mist);
}

.home-fact--warm {
  color: var(--window);
}

.home-fact--ember {
  color: var(--ember);
}

.home-fact--quiet {
  color: var(--mist);
}

/* Сумма инвестора: крупная, тёплая, со слабым ореолом — тот же почерк, что у
   ведущей цифры витрины. */
.home-fact--money {
  font-family: var(--font-ui);
  font-size: var(--text-24);
  font-weight: 700;
  color: var(--window);
  text-shadow: var(--glow-window-text);
}

/* ============================================================
   3. Выделение наведением (TZ-HOME-1 §1)
   ============================================================ */

/* Одна палитра на все фотографии, вторых файлов нет: выбранная плашка
   светлеет, соседние слегка гаснут — так выбор читается однозначно.
   Только там, где курсор настоящий: на телефоне :hover залипает после
   касания, и плашка осталась бы подсвеченной. */
@media (hover: hover) and (pointer: fine) {
  .home-tile {
    transition:
      transform var(--t-hover) var(--t-ease-out),
      border-color var(--t-hover) ease,
      box-shadow var(--t-hover) ease;
  }

  .home-grid:hover .home-photo {
    filter: brightness(0.85);
  }

  .home-grid .home-tile:hover .home-photo {
    filter: brightness(1.12) saturate(1.06);
  }

  .home-tile:hover {
    transform: translateY(-2px);
    border-color: var(--window-edge);
    box-shadow: var(--shadow-1), var(--glow-window);
  }

  .home-tile:hover .home-caption {
    transform: translateY(-3px);
  }
}

/* Клавиатура получает ровно то же выделение, что и курсор: рамка фокуса
   говорит «здесь вы», светлеющая фотография — «вот этот дом». */
.home-tile:focus-visible .home-photo {
  filter: brightness(1.12) saturate(1.06);
}

.home-tile:focus-visible {
  border-color: var(--window-edge);
}

.home-caption {
  transition: transform var(--t-hover) var(--t-ease-out);
}

/* Касание: то же состояние на 200 мс перед переходом — на телефоне наведения
   нет, и без этой паузы человек не увидит, во что попал (25-home.js). */
.home-tile--picked .home-photo {
  filter: brightness(1.12) saturate(1.06);
}

.home-tile--picked {
  border-color: var(--window-edge);
  box-shadow: var(--shadow-1), var(--glow-window);
}

html[data-motion='off'] .home-photo,
html[data-motion='off'] .home-caption,
html[data-motion='off'] .home-tile {
  transition: none;
}

/* ============================================================
   4. «Показать все объекты сразу» и пустое состояние
   ============================================================ */

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

/* Пояснения под кнопкой больше нет (POL-6 п. 6.1, разметка в 25-home.js),
   поэтому и правила для него здесь нет: .home-all остался строкой с одной
   кнопкой. */

.home-nothing {
  margin-top: 8px;
  padding: 26px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--soft);
  font-size: var(--text-body);
  max-width: 68ch;
}

/* ============================================================
   5. Режим объекта в шапке
   ============================================================ */

/* Строкой, а не столбиком. `.topbar-field` из 03-shell.css уже просит строку,
   но `.field` из 04-components.css подключается позже и при равном весе
   возвращает столбец; этот файл последний, поэтому спор решается здесь. */
.topbar-scope {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.topbar-scope-name {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--pearl);
}

/* Кнопка-контур вместо текстовой ссылки: из объекта надо видеть дорогу назад.
   Кегль на ступень меньше основного — это не главное действие экрана, а выход
   из режима, и рядом с названием дома она не должна спорить за внимание. */
.topbar-scope-switch {
  padding: 8px 14px;
  font-size: var(--text-nav);
}

/* На самом экране выбора весь блок скрыт (bar.hidden в 25-home.js); правило
   остаётся на случай, если когда-нибудь прятать понадобится одну кнопку. */
.topbar-scope-switch[hidden] {
  display: none;
}

/* Месяц рядом с объектом (п. 51.6): вторая половина ответа на вопрос «где я
   нахожусь». Стоит строкой, как и режим объекта, и скрывается там, где месяца
   у экрана нет (`syncPeriodBar()` в 04-shell.js). */
.topbar-period {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-right: auto;
}

.topbar-period[hidden] {
  display: none;
}

/* Название месяца должно помещаться целиком вместе с пометкой «· текущий»:
   обрезанное «Сентябрь 2026 · текущи…» читается как ошибка. */
.topbar-period select {
  max-width: 260px;
}

/* Пункт меню, пока объект не выбран (решение владельца п. 35): гаснет и
   объясняет себя подписью, а не молчит выключенной кнопкой. */
.nav button[aria-disabled='true'],
.mobile-nav button[aria-disabled='true'] {
  opacity: var(--state-disabled);
}

@media (hover: hover) and (pointer: fine) {
  .nav button[aria-disabled='true']:hover {
    background: none;
    color: var(--mist);
  }
}

/* ============================================================
   6. Узкое окно и телефон
   ============================================================ */

/* Пульт сужается до 190px (09-responsive.css), но словесная марка (BRAND-3)
   уже набрана мельче прежнего знака с картинкой — «TO BE KIND» при 15px и
   разрядке 0,14em укладывается в узкую панель без отдельного сжатия. */

@media (max-width: 780px) {
  /* Шапка телефона узкая: имя системы остаётся, девиз под ним — тоже, но
     оба на кегль меньше. */
  .brand-name {
    font-size: var(--text-small);
  }

  /* Девиз не крупнее имени (POL-6 п. 4.3): 16px при весе 600 он спорил
     с «TO BE KIND» 14px при весе 800 — вторая строка знака читалась как
     первая. Ниже 560px девиз в шапке скрыт совсем (09-responsive.css),
     здесь величина для планшета. Пол шкалы 14 (CONVENTIONS §8). */
  .brand-motto {
    font-size: var(--text-small);
  }

  /* В шапке телефона пульт становится строкой: марка занимает своё место
     слева, а не всю ширину, и нижнего отступа под ней нет. */
  .brand--link {
    width: auto;
    margin: -4px -6px;
    /* FIX-N6 §6, пересмотрено NIGHT-QA-1 (D1-O-2): марка-ссылка была целью
       касания 25px (390) / 43px (768) при норме 44 — высоту добирал
       невидимый `::after`, но layout-audit.mjs меряет саму кнопку
       (`getBoundingClientRect()`), псевдоэлемент ему не виден, поэтому
       находка не сходила с доски. `min-height` на самой кнопке — честные
       44px: марка делит строку шапки с «Имя · Роль» (POL-6 п. 2.2, ширина
       уже там читается одной строкой), и у шапки телефона достаточно
       свободного места (30px полей у `.sidebar` не менялись), чтобы строка
       выросла до 44px без второго переноса — проверено на 390 и 768. */
    min-height: var(--tap);
  }

  /* Марка на экране выбора объекта на телефоне скрыта (аудит В.6): «TO BE
     KIND / Быть добру» стоит в шапке телефона, и вторая копия вместе с
     «Выйти» занимала 290 px из 844 — на первый экран влезала одна плашка из
     четырёх. Плашки объектов и есть то, зачем человек сюда пришёл, поэтому
     первым экраном стоят они. Марка никуда не делась: она в шапке. */
  .home-brand {
    display: none;
  }

  /* Заголовок «Выберите объект» встаёт вплотную к плашкам: h1 на телефоне
     и так 24 px (09-responsive.css), высота нужна сетке. */
  .home-page .page-heading {
    margin: 2px 0 12px;
  }

  /* Вход на телефоне: марка и надзаголовок встают вплотную, и «TO BE KIND»
     читается дважды подряд, а «Быть добру» — трижды (знак, надзаголовок,
     заголовок). Остаётся по одному разу: имя у знака, девиз заголовком. */
  .login-art .brand-motto,
  .login-title .eyebrow {
    display: none;
  }

  /* Витрина выбора объекта на телефоне: тот же приём — девиз крупнее имени,
     обе строки мельче настольных 24/40px, но не мельче пола 14px (CONVENTIONS §8). */
  .home-brand-name {
    font-size: var(--text-body);
  }

  .home-motto {
    font-size: var(--text-24);
  }

  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* Кадр заметно выше родного 16:9. Причина в подписи: на узкой колонке она
     идёт столбиком и занимает около 130px, и при соотношении 16:9 от
     фотографии оставалась бы полоска в 80px — дом по ней не узнать. Потолок
     высоты с монитора здесь не нужен: на телефоне четыре плашки всё равно
     пролистываются, и это нормально. */
  .home-tile {
    aspect-ratio: 4 / 3;
    min-height: 250px;
    /* Потолок другой, не настольный: на планшете шириной 768px соотношение
       4:3 дало бы плашку в 550px — половину экрана на один дом. На телефоне
       соотношение до потолка не доходит и работает как задумано. */
    max-height: min(320px, 40vh);
  }

  /* Дом один — потолка нет (POL-6 п. 4.2). Потолок стоит ради планшета, где
     плашек несколько и каждая не должна занимать половину экрана; когда дом
     один, делить не с кем, а под обрезанной плашкой оставалась пустота. */
  .home-grid--one .home-tile {
    max-height: none;
  }

  .home-caption {
    padding: 16px 18px 18px;
  }

  .home-name {
    font-size: var(--text-24);
  }

  .home-line {
    font-size: var(--text-small);
  }

  .home-fact--money {
    font-size: var(--text-h2);
  }

  /* Версия 960px втрое легче — на телефоне грузится она. Media-запрос, а не
     image-set(): у нас две версии по ширине экрана, а не по плотности
     пикселей устройства (то же решение, что в 12-transitions.css). */
  .home-photo {
    background-image: url('/assets/art/constellation-960.jpg');
  }

  .home-photo[data-object='leningradskaya-1'] {
    background-image: url('/assets/objects/leningradskaya-1-960.jpg');
  }

  .home-photo[data-object='leningradskaya-2'] {
    background-image: url('/assets/objects/leningradskaya-2-960.jpg');
  }

  .home-photo[data-object='zavod-1'] {
    background-image: url('/assets/objects/zavod-1-960.jpg');
  }

  .home-photo[data-object='zavod-2'] {
    background-image: url('/assets/objects/zavod-2-960.jpg');
  }

  /* В шапке телефона место только под название объекта и кнопку возврата:
     подпись «Какой объект открыт» уходит, смысл держит сама кнопка.
     Значок подсказки остаётся — он и объясняет режим. */
  .topbar-scope .field-label > span {
    display: none;
  }

  .topbar-scope-name {
    font-size: var(--text-h3);
    /* Плотная строка: когда месяцу тесно и название дома встаёт в две строки,
       оно должно уложиться в высоту соседней кнопки (44px), а не растить
       шапку страницы ещё на строку (POL-6 п. 2.3). Слово при этом не
       дробится — перенос идёт по пробелу (решение владельца п. 54). */
    line-height: 1.2;
  }

  /* Отступ перед подвалом — 16px, верхняя ступень лестницы отступов телефона
     (POL-6 п. 4.3). На мониторе 30px остаются: там подвал стоит под широкой
     витриной, и 16 читались бы как продолжение последнего блока. */
  .sc-motto {
    margin-top: 16px;
  }
}

/* Телефон: название дома и кнопка возврата встают в одну строку. Для этого
   уходит значок подсказки — в 358px он отнимал ровно столько, сколько нужно
   кнопке, а смысл режима теперь несёт сама кнопка «Сменить объект» рядом с
   названием дома. На планшете и мониторе подсказка остаётся. */
@media (max-width: 560px) {
  .topbar-scope .field-label {
    display: none;
  }

  /* Кнопка «Сменить объект» на телефоне не нужна (POL-6 п. 4.1): то же
     действие стоит первой кнопкой нижней панели — «Главная»
     (18-mobile-nav.js, data-page="home"), обе зовут goToPage('home').
     134px её ширины — ровно то, чего не хватало месяцу, чтобы встать
     рядом с названием дома, а не второй строкой. На мониторе кнопка
     остаётся: нижней панели там нет, и дорога назад видна только ею. */
  .topbar-scope-switch {
    display: none;
  }

  /* Месяц встаёт рядом с названием дома, а не второй строкой (POL-6 п. 2.3):
     место освободили снятая кнопка «Сменить объект» (п. 4.1) и месяц без
     приписки «· текущий» (04-shell.js, п. 5.1). Основы в 200px больше нет —
     именно она заставляла шапку переноситься: селектор просит по содержимому
     и не сжимается, а уступает место название дома, которому есть куда
     перенестись по словам. */
  .topbar-period {
    flex: 0 1 auto;
    margin-right: 0;
  }

  /* Подпись месяца на телефоне не показывается с самого начала — виден был
     только её пустой блок: сам текст «Какой месяц смотрим» скрыт, ширина
     подписи 0, а зазор рядом с ней 10px и перенос, который она устраивала,
     поднимали шапку страницы на 14px. Убирается блок целиком, как у подписи
     объекта строкой выше. Значок подсказки здесь и не появлялся: он живёт
     на самом тексте подписи. */
  .topbar-period .field-label {
    display: none;
  }

  /* Поля селектора 8px вместо 12 и пол ширины 154 — ровно столько занимает
     самое длинное название месяца с годом («Сентябрь 2026») со стрелкой.
     Ниже начинается та самая обрезка «Сентябрь 202», ради которой из списка
     убрана приписка «· текущий» (04-shell.js, п. 5.1); выше селектор отдаёт
     лишнее названию дома, чтобы оно уместилось в одну строку. */
  .topbar-period select {
    flex: 0 1 auto;
    max-width: none;
    min-width: 154px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Название дома в кегле шапки, когда экран уже 375px: в 16px самое длинное
     слово занимает 113 из 328 доступных, и вместе с месяцем и «Выйти» они
     перестают помещаться в строку. 14px — тот же кегль, что у всей шапки
     страницы, и пол шкалы (CONVENTIONS §8). */
  @media (max-width: 375px) {
    .topbar-scope-name {
      font-size: var(--text-small);
    }
  }
}

/* Телефон, а не планшет: строка «Заселено 2 из 13 · ожидаем 2 оплаты ·
   просрочено 1 оплата» в 390px всё равно переносится, и точка-разделитель
   оказывалась в начале новой строки. Поэтому здесь факты идут столбиком и
   без разделителя — то же решение, что у занятости дома в 12-transitions.css.
   На 768px строка помещается целиком, и разбивать её незачем. */
@media (max-width: 560px) {
  .home-line {
    flex-direction: column;
    gap: 2px;
  }

  .home-line > .home-fact + .home-fact:before {
    content: none;
  }
}