/* Витрина инвестора (DES-7/8) и пульт навигации (NAV-1).
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: после 10-atmosphere.css и до
   17-mobile-input.css. Правила ниже перекрывают правила выше.

   Цвет — только токены из 01-tokens.css, ни одного нового hex.
   Разметку рисует web/js/20-showcase.js.

   Движение: анимации включаются классом .sc-play, который ставит сценарий,
   когда движение разрешено (выключатель атмосферы + prefers-reduced-motion).
   Поэтому конечное состояние здесь — состояние по умолчанию: если анимаций
   нет, экран виден целиком и сразу. Это важно, потому что 09-responsive.css
   гасит анимации через `animation: none !important`, и элемент, спрятанный
   «до анимации», остался бы невидимым навсегда. */

:root {
  /* Кривые и длительности. Встроенные ease слабы: ease-out ниже — сильный
     вариант, он даёт мгновенный отклик в начале движения.
     ЗАМЕЧАНИЕ РУКОВОДИТЕЛЮ: по-хорошему это токены 01-tokens.css, но тот файл
     не входит в задачу DES-7 — перенести при следующей правке токенов. */
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-enter: 520ms; /* появление панели, ≤ 600 мс */
  --sc-step: 60ms; /* задержка между соседними элементами */
  --sc-count: 900ms; /* набег числа, ≤ 900 мс: столько же держит 19-atmosphere.js */

  /* Кегль для пользователей старше 40–50 лет (CONVENTIONS §8). Ступени
     перенесены в шкалу 01-tokens.css задачей CLR-2a; здесь остались
     псевдонимы, чтобы не переписывать 40 правил витрины ради одинаковых
     величин. Новые правила зовут --text-small / --text-body напрямую. */
  --sc-text-14: var(--text-small);
  --sc-text-16: var(--text-body);
  --sc-text-20: var(--text-h2);
  --sc-text-28: 28px;
}

/* ============================================================
   1. NAV-1 — левый пульт
   ============================================================ */

/* Полоса света одна на всю навигацию и переезжает между пунктами, поэтому
   отметка отдельного пункта снимается: два огня сразу читались бы как два
   активных раздела. */
.nav button.active:before {
  content: none;
}

.nav {
  position: relative;
}

.nav-light {
  position: absolute;
  /* См. 03-shell.css: вынос полосы равен боковому отступу пульта. */
  left: calc(var(--sidebar-pad, 18px) * -1);
  top: 0;
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--violet);
  box-shadow: var(--glow-violet);
  pointer-events: none;
}

/* Переезд включается кадром позже первой отрисовки: иначе полоса приезжала бы
   из нулевой позиции при каждом входе в систему. */
.nav-light--ready {
  transition: transform 200ms var(--sc-ease-move);
}

/* Свечение пункта под курсором — только там, где курсор действительно есть.
   На телефоне :hover залипает после касания и выглядит как второй активный
   пункт, поэтому подсветка снимается и возвращается внутри media-запроса. */
.nav button:hover {
  background: none;
  color: var(--soft);
}

@media (hover: hover) and (pointer: fine) {
  .nav button:hover {
    background: var(--state-hover);
    color: var(--pearl);
    box-shadow: var(--glow-violet);
  }
}

.nav button.active,
.nav button.active:hover {
  background: var(--state-active);
  color: var(--pearl);
}

/* --- Кегль пульта и шапки. ---
   Шкала задана в 01-tokens.css: пункты меню — --text-nav (15px), у инвестора
   подписи короткие («Доход», «Объекты») и набраны основным кеглем.
   Разделы сотрудника после переименований CLR-2a тоже короткие
   («Обзор», «Управляющий», «Пользователи») и в 15px не переносятся. */
.sidebar--investor .nav button {
  font-size: var(--text-body);
}

.nav-label,
.local-pill,
.profile small {
  font-size: var(--text-small);
}

/* Хлебные крошки и плашка-сообщение на витрине: 12–13px из общих файлов
   поднимаются до порога §8 только в кабинете инвестора — рабочие экраны
   сотрудника этой задачей не трогаются. */
.showcase .eyebrow {
  font-size: var(--sc-text-14);
}

.showcase .banner {
  font-size: var(--sc-text-16);
  line-height: 1.5;
}

.showcase .footnote {
  font-size: var(--sc-text-14);
}

/* Индикатор выбранного объекта: в пульте видно, о каком объекте идут цифры,
   даже когда селектор в шапке уехал из поля зрения при прокрутке. */
.hud-scope {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--sc-text-14);
  color: var(--mist);
}

.hud-scope strong {
  color: var(--window);
  font-weight: 700;
  text-shadow: var(--glow-window-text);
}

/* ============================================================
   2. Витрина — общее
   ============================================================ */

.showcase {
  /* Одна мысль на панель: шире 1180px строки текста перестают читаться. */
  max-width: 1180px;
}

/* Подпись под заголовком экрана: 13px из 03-shell.css ниже порога §8. */
.showcase .page-heading p {
  font-size: var(--sc-text-16);
  max-width: 62ch;
}

/* NIGHT-QA-1 (D4-TYPE-VEIL-1): пока печатается заголовок (19-atmosphere.js),
   настоящий текст под накладкой обязан стать прозрачным — это делает
   `.atm-veil.atm-veil` (10-atmosphere.css, вес — два класса, специально
   удвоенных автором «на случай `.page-heading p`»). Правило выше —
   `.showcase .page-heading p` — на класс и тег специфичнее того, что
   предвидел автор веила (два класса-предка плюс сам тег `p`), и побеждало:
   настоящая подпись оставалась тем же цветом, а печатаемая копия ложилась
   поверх неё — обе строки читались одновременно и превращались в кашу.
   Цвет вынесен сюда, в отдельное правило с `:not(.atm-veil)`: пока класса
   нет — красит как раньше; как только он появляется — не совпадает вовсе,
   и решает `.atm-veil.atm-veil`, как и было задумано. */
.showcase .page-heading p:not(.atm-veil) {
  color: var(--soft);
}

.showcase .page-heading h1 {
  text-wrap: balance;
}

.showcase .panel {
  padding: 24px;
}

.showcase h2 {
  font-size: var(--sc-text-20);
  text-wrap: balance;
}

/* Подпись-вопрос над каждым числом. */
/* Подпись ведущей цифры и значок подсказки «что это за число» на одной
   строке (CLR-2a §2.3). Значок не курсивный и не антиква — он орган
   управления, а не часть заголовка. */
.sc-label,
.sc-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-label > span,
.sc-hero-label > span {
  min-width: 0;
}

.sc-label {
  font-size: var(--text-body);
  color: var(--soft);
  margin-bottom: 10px;
  text-wrap: balance;
}

/* Пояснение под числом. Никогда не мельче 14px и не бледнее --mist. */
.sc-note {
  font-size: var(--sc-text-14);
  color: var(--mist);
  line-height: 1.5;
  margin-top: 10px;
  max-width: 58ch;
}

.sc-note--strong {
  color: var(--soft);
}

.sc-sum {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--pearl);
  font-weight: 750;
}

/* --- Появление. Только opacity и transform. --- */
@keyframes sc-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes sc-fade {
  from {
    opacity: 0;
  }
}

.sc-play .sc-rise {
  animation: sc-rise var(--sc-enter) var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--sc-step));
}

.sc-play .sc-fade {
  animation: sc-fade var(--sc-enter) var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--sc-step));
}

/* Шаг каскада — фиксированный набор мест (герой, кольцо, три плашки, панели):
   номер известен заранее, поэтому это класс, а не переменная из атрибута
   style (SEC-4: строгая политика style-src 'self' его вырезает). Там, где
   номер зависит от данных построчно (окна, карточки квартир и объектов,
   столбики) — переменную по-прежнему ставит JS через CSSOM, см. `data-vars`
   в web/js/18-data-table.js. */
.sc-i0 {
  --i: 0;
}
.sc-i1 {
  --i: 1;
}
.sc-i2 {
  --i: 2;
}
.sc-i3 {
  --i: 3;
}
.sc-i4 {
  --i: 4;
}
.sc-i5 {
  --i: 5;
}

/* ============================================================
   3. Ведущая цифра — сколько инвестор получает в этом месяце
   ============================================================ */

.sc-hero {
  background: var(--surface);
  border: 1px solid var(--hud-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: 30px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

/* Тёплый отсвет в углу: та же амбра «свет горит», что у окон и денег. */
.sc-hero:before {
  content: '';
  position: absolute;
  inset: -40% 40% 40% -20%;
  background: radial-gradient(60% 60% at 30% 40%, var(--window-tint), transparent 70%);
  pointer-events: none;
}

.sc-hero > * {
  position: relative;
}

.sc-hero-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-24);
  color: var(--lavender);
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 14px;
}

/* Кегль ведущей цифры считается от ширины экрана: после правки money()
   («20 079,40 ₽» вместо «20 079,4 ₽») строка стала на знак длиннее, и на
   390px прежние 9vw оставляли 2px до края панели. 7vw держит запас даже для
   миллионного итога «История дохода».
   POL-6 (12.2): 7vw давало 27,3px на 390 и 26px на 360 — мельче вспомогательных
   сумм (28px) рядом, иерархия читалась перевёрнуто. 8,4vw поднимает нижнюю
   границу до 32,8/30,2px. На мониторе оба клэмпа упираются в потолок 60px уже
   при ширине окна от 857px (0,07·857 = 60 = 0,084·714) — на 1440px разницы нет. */
/* Перенос внутри числа запрещён: .metric-value ставит overflow-wrap: anywhere,
   от которого сумма рвётся посреди разряда. Разряды разделены неразрывным
   пробелом от Intl, поэтому единственное место переноса — перед знаком рубля. */
/* Класс .metric-value на ведущей цифре нужен ровно для одного: по нему
   атмосфера узнаёт главную сумму экрана и даёт ей «reveal» раз за сессию.
   Мобильная раскладка карточки метрики из 09-responsive.css (≤600px: сетка в
   две колонки и выравнивание вправо) вместе с классом приезжала на витрину и
   уводила цифру к правому краю панели. Отменяем её здесь; отступы записаны
   теми же значениями, что у .metric-value, чтобы вид на мониторе не поехал.
   Класс удвоен: так правило перевешивает .metric-value внутри media-запроса
   без !important. */
.sc-hero-value.sc-hero-value {
  grid-column: auto;
  grid-row: auto;
  text-align: left;
  margin: 10px 0 6px;
}

.sc-hero-value {
  display: block;
  font-size: clamp(30px, 8.4vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--window);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-shadow: var(--glow-window-text);
  overflow-wrap: normal;
  word-break: normal;
}

/* Свечение после посадки числа: короткая вспышка ореола ровно тогда, когда
   набег закончился, — поэтому задержка равна длительности набега. */
@keyframes sc-land {
  0% {
    text-shadow: var(--glow-window-text);
  }
  35% {
    text-shadow:
      var(--glow-window-text),
      0 0 34px var(--window-edge);
  }
  100% {
    text-shadow: var(--glow-window-text);
  }
}

.sc-play .sc-hero-value {
  animation: sc-land 700ms var(--sc-ease-out) var(--sc-count) both;
}

.sc-hero-unknown {
  display: block;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 750;
  line-height: 1.15;
  color: var(--soft);
  text-wrap: balance;
}

/* Вторая цифра: ожидание до конца месяца рядом с уже посчитанным. */
.sc-hero-second {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--sc-text-16);
  color: var(--soft);
}

.sc-hero-second .sc-sum {
  font-size: var(--text-24);
  color: var(--lavender);
}

/* SETTLE-1 (REQUIREMENTS.md п. 102): «получите на руки» у инвестора, который
   хранит депозиты дома. Та же конструкция, что у прогноза, но отступ вдвое
   меньше и без черты сверху: это не другой разговор, а продолжение того же —
   сколько денег перейдёт из рук в руки на встрече. Цифра холодная, бирюзовая:
   тем же цветом на «Обзоре» помечены депозиты, а лавандовый занят прогнозом,
   который стоит следом. */
.sc-hero-hand {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.sc-hero-hand .sc-sum {
  color: var(--tide);
}

/* RENT-CHANNEL-1 дочинка (проверяющий, находка «желательно»): «перевели прямо
   на ваш счёт» (`scChannelRow`, 20-showcase.js) — тем же приёмом, что «получите
   на руки» выше, и по той же причине: это продолжение одного объяснения
   выплаты, а не вторая независимая тема, поэтому черты сверху нет и здесь.
   Раньше у класса не было своего правила, и он падал на общий `.sc-hero-second`
   с полным отступом и чертой — между «получите на руки» и «перевели на счёт»
   для инвестора, у которого показаны обе строки, лежала лишняя черта. */
.sc-hero-channel {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* ============================================================
   4. Три опоры: жильцы заплатили, расходы, доля
   ============================================================ */

.sc-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.sc-pillar {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 22px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sc-pillar-value {
  font-size: var(--sc-text-28);
  font-weight: 780;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sc-pillar-value--soft {
  font-size: var(--sc-text-20);
  color: var(--soft);
  font-weight: 700;
}

/* «Неизвестно» набирается не деньгами: амбра значит «получено» и «горит»,
   и фраза о неизвестном не должна выглядеть как сумма. */
.sc-pillar-value--unknown {
  font-size: var(--sc-text-20);
  color: var(--soft);
  font-weight: 700;
  text-shadow: none;
}

/* --- Сегментная полоса расходов --- */
.sc-bar {
  display: flex;
  gap: 3px;
  height: 14px;
  margin: 16px 0 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
}

.sc-bar-seg {
  transform-origin: left center;
  border-radius: var(--radius-pill);
  min-width: 3px;
}

/* Цвет сегмента закреплён за категорией, поэтому легенда читается без цифр.
   Категорию, которая не влияет на долю инвестора, показываем штриховкой:
   различие формой, а не только цветом. */
.sc-bar-seg {
  background: var(--soft);
}

.sc-bar-seg[data-cat='maintenance'],
.sc-key-dot[data-cat='maintenance'] {
  background: var(--violet);
}

.sc-bar-seg[data-cat='repair'],
.sc-key-dot[data-cat='repair'] {
  background: var(--lavender);
}

.sc-bar-seg[data-cat='utilities'],
.sc-key-dot[data-cat='utilities'] {
  background: var(--window);
}

.sc-bar-seg[data-cat='other'],
.sc-key-dot[data-cat='other'] {
  background: var(--soft);
}

.sc-bar-seg[data-reduces='no'],
.sc-key-dot[data-reduces='no'] {
  background: repeating-linear-gradient(-45deg, var(--lavender) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px var(--violet-edge);
}

@keyframes sc-grow {
  from {
    transform: scaleX(0.02);
  }
}

.sc-play .sc-bar-seg {
  animation: sc-grow 420ms var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--sc-step));
}

.sc-legend {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: var(--sc-text-14);
  color: var(--soft);
}

.sc-legend-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sc-key-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 2px;
  align-self: center;
}

.sc-legend-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sc-legend-row b {
  font-variant-numeric: tabular-nums;
  color: var(--pearl);
  font-weight: 700;
  white-space: nowrap;
}

/* --- Кольцо доли --- */
.sc-dial {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.sc-dial svg {
  width: 86px;
  height: 86px;
  flex-shrink: 0;
}

.sc-dial-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 8;
}

.sc-dial-arc {
  fill: none;
  stroke: var(--violet);
  stroke-width: 8;
  stroke-linecap: round;
}

/* 219.91 — длина окружности радиуса 35 (2π·35), тот же радиус, что у
   <circle r="35"> в scShareDial()/scObjectDial() (web/js/20-showcase.js).
   Раньше число приходило переменной из атрибута style — строгая политика
   style-src 'self' его вырезает (SEC-4), а с фиксированным радиусом это
   давно не переменная, а константа разметки: держим её здесь одним числом,
   а не через CSSOM ради значения, которое никогда не меняется. */
@keyframes sc-arc {
  from {
    stroke-dashoffset: 219.91;
  }
}

.sc-play .sc-dial-arc {
  animation: sc-arc 700ms var(--sc-ease-out) both;
}

/* ============================================================
   5. Ближайшее поступление
   ============================================================ */

.sc-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  background: var(--sunken);
  border: 1px solid var(--window-edge);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.sc-next-date {
  font-size: var(--sc-text-20);
  font-weight: 750;
  color: var(--window);
  white-space: nowrap;
}

.sc-next-where {
  font-size: var(--sc-text-16);
  color: var(--soft);
  min-width: 0;
}

.sc-next-sum {
  margin-left: auto;
  font-size: var(--text-24);
  font-weight: 780;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   6. Линия дохода по месяцам
   ============================================================ */

.sc-chart {
  position: relative;
}

.sc-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sc-chart-grid {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.sc-chart-area {
  fill: url(#sc-area-grad);
}

@keyframes sc-area-in {
  from {
    opacity: 0;
  }
}

.sc-play .sc-chart-area {
  animation: sc-area-in 900ms var(--sc-ease-out) both;
}

.sc-chart-line {
  fill: none;
  stroke: var(--window);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Мост над месяцами без данных: пунктир говорит «между этими точками
   неизвестно», а не «доход был ровным». */
.sc-chart-gap {
  fill: none;
  stroke: var(--mist);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
}

@keyframes sc-draw {
  from {
    stroke-dashoffset: var(--len);
  }
}

.sc-play .sc-chart-line {
  stroke-dasharray: var(--len);
  animation: sc-draw 900ms var(--sc-ease-out) both;
}

/* Текущий месяц ещё идёт. Пунктир цвета денег и полая точка говорят «это не
   итог», а не «неизвестно»: неизвестное рисует серый .sc-chart-gap. Разница
   читается и формой (пунктир против сплошной, полая точка против залитой),
   и подписью «месяц идёт» под осью. */
.sc-chart-open {
  fill: none;
  stroke: var(--window);
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
}

.sc-chart-dot {
  fill: var(--window);
  stroke: var(--night);
  stroke-width: 2;
  /* Пульсация через transform, а не через радиус: геометрические свойства SVG
     как свойства CSS поддержаны не всеми браузерами, transform — всеми. */
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes sc-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.45);
    opacity: 0.72;
  }
}

.sc-chart-dot--open {
  fill: var(--night);
  stroke: var(--window);
  stroke-width: 2.5;
}

.sc-play .sc-chart-dot {
  animation: sc-pulse 2.4s ease-in-out var(--sc-count) infinite;
}

/* Месяц без данных: вертикальный пунктирный штрих у основания. */
.sc-chart-unknown {
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.sc-chart-hit {
  fill: transparent;
  cursor: pointer;
}

/* Вертикальная метка выбранного месяца. Ставится классом из сценария. */
.sc-chart-mark {
  stroke: var(--lavender);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 140ms ease;
}

.sc-chart-mark.is-on {
  opacity: 1;
}

/* Заливка под линией. Цвет не задаётся атрибутом stop-color: var() в
   presentation-атрибутах SVG не работает, только в CSS. */
#sc-area-top {
  stop-color: var(--window);
  stop-opacity: 0.34;
}

#sc-area-bottom {
  stop-color: var(--window);
  stop-opacity: 0;
}

/* Подписи месяцев — обычный текст под графиком, а не внутри SVG: внутри они
   масштабировались бы вместе с картинкой и на телефоне стали бы 6–7px. */
.sc-axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: var(--sc-text-14);
  color: var(--mist);
}

/* Подпись «месяц идёт» стоит ровно под полой точкой — у правого края оси. */
.sc-axis span:last-child {
  text-align: right;
}

.sc-open-tag {
  display: block;
  margin-top: 2px;
  color: var(--window);
  font-size: var(--sc-text-14);
  font-weight: 700;
  white-space: nowrap;
}

/* То же слово в строке над графиком, когда выбран текущий месяц. */
.sc-open-word {
  color: var(--window);
  font-size: var(--sc-text-14);
  font-weight: 650;
}

/* Подпись месяца под курсором или пальцем. Отдельной строкой над графиком:
   всплывающая подсказка внутри SVG на телефоне попадает под палец. */
.sc-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  min-height: 30px;
  margin-bottom: 8px;
  font-size: var(--sc-text-16);
  color: var(--soft);
}

.sc-readout b {
  font-size: var(--sc-text-20);
  color: var(--window);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

/* SETTLE-1: вторая цифра месяца у хранителя депозитов. Тише первой и другого
   цвета — иначе две крупные суммы в одной строке читаются как спор, а не как
   «заработал столько, на руки столько». */
.sc-readout-hand {
  color: var(--mist);
}

.sc-readout-hand b {
  font-size: var(--sc-text-16);
  color: var(--tide);
}

/* ============================================================
   7. Убыток — плашка формой, не только цветом
   ============================================================ */

/* Плашку опознаёт форма, а не цветная полоса слева: треугольник с
   восклицательным знаком, тлеющая кромка по всему контуру и заголовок.
   Толстая цветная кромка с одной стороны — заимствованный штамп, и в проекте
   её нет ни у .banner, ни у других состояний. */
.sc-loss {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--ember-edge);
  border-radius: var(--radius-lg);
  background: var(--ember-tint);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.sc-loss svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--ember);
  margin-top: 2px;
}

.sc-loss strong {
  display: block;
  font-size: var(--sc-text-20);
  color: var(--ember);
  margin-bottom: 6px;
  text-wrap: balance;
}

.sc-loss p {
  font-size: var(--sc-text-16);
  color: var(--soft);
  line-height: 1.5;
}

/* ============================================================
   8. Объекты и сетка окон
   ============================================================ */

.sc-objects {
  display: grid;
  gap: 20px;
}

.sc-object {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 24px;
  min-width: 0;
}

.sc-object-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 18px;
}

.sc-object-head h2 {
  font-size: var(--text-24);
  color: var(--pearl);
  margin: 0;
}

.sc-object-money {
  text-align: right;
}

.sc-object-money .sc-label {
  margin-bottom: 4px;
}

.sc-object-money .sc-pillar-value {
  color: var(--window);
}

.sc-object-money .sc-pillar-value--unknown {
  color: var(--soft);
}

.sc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 18px;
  font-size: var(--sc-text-16);
  color: var(--soft);
}

/* Точка-разделитель между счётчиками: без неё «13 квартир Занятость не
   подтверждена» читается одной фразой.
   POL-6 (12.10): раньше точка была ::before следующего span — при переносе
   строки она уезжала в начало второй строки и читалась как маркер списка.
   ::after предыдущего элемента остаётся на конце первой строки. */
.sc-counts > span:not(:last-child)::after {
  content: '·';
  margin-left: 14px;
  color: var(--mist);
}

/* --- Окно = квартира, теперь карточка. Ни фасадов, ни этажей: просто ряд
   карточек. --- Минимум колонки (UI-8e, решение владельца после показа
   карточек) подобран по самому длинному чипу без переноса — «Счётчики не
   введены» на 14px/600 — плюс внутренние отступы карточки; проверено
   рендером, не на глаз. При таком минимуме и зазоре 10px в ряд входит
   1 карточка на 390px (на всю ширину — чипы становятся строкой, см. ниже),
   3 на 768px и 5 на 1440px (панель с обычными отступами) — в границах,
   которые просил владелец (1–2 / 3 / 5–6). align-items: stretch (по
   умолчанию у грида, но записано явно) — карточки одного ряда одной высоты;
   лишняя высота остаётся пустой под чипами, без прижатия к низу. */
.sc-windows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  align-items: stretch;
  gap: 10px;
  margin-bottom: 18px;
}

/* Высота — по содержимому (номер, цена, день оплаты и чипы статуса в
   столбик), а не квадрат: aspect-ratio: 1 обрезал бы нижние строки. Радиус —
   как у панелей (UI-8d): карточка теперь несёт столько же смысла, сколько
   панель, а не плитка-значок. Тени в покое нет — только рамка и заливка
   цветом состояния; при наведении — подъём и свечение (см. ниже). Отступ
   10px вместо прежних 12px (UI-8e) — часть экономии места под самый длинный
   чип без переноса, проверено вместе с минимумом колонки выше. */
.sc-window {
  position: relative;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--sunken);
  border: 1px solid var(--border-strong);
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  transition:
    transform 160ms var(--sc-ease-out),
    border-color 160ms ease,
    box-shadow 160ms ease;
}

/* Номер, цена и день — каждый в одну строку без переноса (UI-8e, решение
   владельца): карточка теперь достаточно широкая под самый длинный чип, и
   переносить эти короткие строки незачем — перенос читался как обрыв числа. */
.sc-window-number {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sc-window-price {
  font-size: var(--sc-text-16);
  font-weight: 600;
}

.sc-window-day {
  font-size: var(--sc-text-14);
  font-weight: 500;
}

/* Цена и день оплаты — второй и третьей строкой, тише номера. --soft держит
   контраст ≥4,5:1 на каждом из шести фонов шкалы внимания ниже (замерено:
   6,7–11,3:1), даже на однослойной подложке цвета состояния. */
.sc-window-price,
.sc-window-day {
  color: var(--soft);
  line-height: 1.2;
  white-space: nowrap;
}

/* Чипы статуса словами (UI-8c) — столбиком слева, одной высоты (UI-8e,
   решение владельца после показа карточек): читать колонку слов быстрее,
   чем ряд, где чипы то переносятся, то нет. Лишняя высота растянутой
   карточки (align-items: stretch на сетке) остаётся пустой под чипами —
   без margin-top: auto, который раньше прижимал их к низу. */
.sc-window-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
}

/* На 390px, где в ряду помещается только одна карточка во всю ширину, места
   по горизонтали больше, чем по вертикали, — там колонка чипов растягивала
   бы карточку без пользы, и владелец явно попросил ряд с переносом ряда
   (не слова внутри чипа) именно для этого случая. Порог — тот же, на
   котором сетка и так даёт одну карточку в ряд при минимуме колонки ниже
   (проверено: 326px доступной ширины < 2 × минимума + зазор). */
/* Две карточки в ряд на 390 px — прямое решение владельца (п. 43, п. 51.3).
   Раньше в ряд входила одна: минимум колонки 205 px подбирался под самый
   длинный чип «Счётчики не введены», который в 158 px не укладывался.
   Чип сокращён до «Без показаний», а длинным остался только «Скоро
   освободится» — ему здесь разрешено занять две строки внутри карточки
   (кегль остаётся 14 px, пол системы не нарушен). Ряд чипов при этом
   заменён столбиком: в узкой карточке колонка слов читается быстрее. */
@media (max-width: 480px) {
  .sc-windows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .sc-window {
    padding: 8px;
  }
  .sc-window-chip {
    height: auto;
    min-height: 28px;
    padding: 4px 8px;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
  }
}

.sc-window-chip {
  height: 28px;
  padding: 0 8px;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.sc-window-chip:before {
  width: 9px;
  height: 9px;
}

/* «Счётчики не введены» может стоять на любой карточке шкалы — на просроченной
   (красной) и на оплаченной (зелёной) тоже, а приглушённый --mist читается на
   их подложке хуже 4,5:1 (тот же счёт, что и раньше у амбры). «Жилец не
   записан» обычно стоит на data-scheme="unknown" (фона нет), но занятость и
   оплата — разные поля данных, и при их редком расхождении чип может
   оказаться и на цветной карточке — проверено перебором всех сочетаний.
   Непрозрачная --sunken под обоими чипами не зависит от цвета карточки —
   контраст остаётся ≥ 5,7:1 при любом сочетании. */
.sc-window-chips .chip--not_configured,
.sc-window-chips .chip--no_tenant {
  background: var(--sunken);
}

/* Чип «Просрочено» на просроченной (тлеющей) карточке — тот же тлеющий цвет
   поверх уже тлеющей подложки даёт двойную примесь и контраст 4,49:1,
   чуть ниже порога (замерено). Непрозрачная --sunken под чипом решает это
   так же, как у «Счётчики не введены» выше — 7+:1 при любом цвете карточки. */
.sc-window-chips .chip--overdue {
  background: var(--sunken);
}

/* Оплачено — зелёная, не амбра: амбра на этой сетке уже занята «сроком
   сегодня/частично» (UI-8d). Меняется только чип оплаты внутри карточки —
   .chip--paid в таблице оплаты аренды (12-rent.js) остаётся амброй. */
.sc-window-chips .chip--paid {
  color: var(--leaf);
  background: var(--leaf-tint);
  border-color: var(--leaf-edge);
}

.sc-window-chips .chip--paid:before {
  box-shadow: var(--glow-leaf);
}

.sc-window:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .sc-window:hover {
    transform: translateY(-2px);
  }
  .sc-window:hover:active {
    transform: translateY(-2px) scale(0.96);
  }
  .sc-window[data-scheme='overdue']:hover {
    box-shadow: var(--glow-ember);
  }
  .sc-window[data-scheme='attention']:hover {
    box-shadow: var(--glow-window);
  }
  .sc-window[data-scheme='paid']:hover {
    box-shadow: var(--glow-leaf);
  }
  .sc-window[data-scheme='waiting']:hover,
  .sc-window[data-scheme='vacant']:hover,
  .sc-window[data-scheme='unknown']:hover {
    box-shadow: var(--glow-violet);
  }
}

/* Переплёт окна: две тонкие линии — оставлен только у маленькой иконки без
   текста (.sc-flat, «Ваши квартиры»); на карточке с четырьмя строками текста
   линии пересекали бы цену и чипы, поэтому здесь их нет (data-scheme стоит
   только у карточки, не у иконки). */
.sc-window:before {
  content: '';
  position: absolute;
  inset: 22% 22%;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  opacity: 0.35;
  pointer-events: none;
}

.sc-window[data-scheme]:before {
  content: none;
}

/* --- Цвет карточки = уровень внимания к оплате месяца (UI-8d, решение
   владельца, `REQUIREMENTS.md` п. 44). Свет окна как самостоятельная
   метафора здесь больше не используется — см. scWindowScheme(). --- */

/* Просрочено — тревога. */
.sc-window[data-scheme='overdue'] {
  background: var(--ember-tint);
  border-color: var(--ember-edge);
}

/* Срок сегодня или оплачено частично — внимание. */
.sc-window[data-scheme='attention'] {
  background: var(--window-tint);
  border-color: var(--window-edge);
}

/* Оплачено — спокойный зелёный, номер обычным весом, не жирным. */
.sc-window[data-scheme='paid'] {
  background: var(--leaf-tint);
  border-color: var(--leaf-edge);
}

.sc-window[data-scheme='paid'] .sc-window-number {
  font-weight: 600;
}

/* Ждём оплату, или квартира занята, но об оплате ещё нечего сказать —
   спокойная нейтральная поверхность, не сигнал «плохо». */
.sc-window[data-scheme='waiting'] {
  background: var(--raised);
  border-color: var(--border-subtle);
}

/* Свободна — тёмная, глухая: денег отсюда не ждём. */
.sc-window[data-scheme='vacant'] {
  background: var(--sunken);
  border-color: var(--border-strong);
  color: var(--mist);
}

/* Занятость не подтверждена — пунктир, то же самое «неизвестно», что и
   везде в системе. */
.sc-window[data-scheme='unknown'] {
  border-style: dashed;
  background: none;
  color: var(--mist);
}

@keyframes sc-lamp {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
  }
}

.sc-play .sc-window {
  animation: sc-lamp 380ms var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* .sc-mark, [data-mark], .sc-keys/.sc-key (значковая легенда «Горит —
   заселена / Кружок — оплата ожидается / …») удалены FIX-N2 №4 вместе с
   scWindowKeys() и scWindowMark() в 20-showcase.js: состояние квартиры на
   каждой карточке называется чипом-словом (.sc-window-chip, ниже), легенда
   значков больше не нужна ни на «Объектах», ни на «Квартирах» (п. 43–44). */

/* ============================================================
   9. Квартиры списком
   ============================================================ */

.sc-flats {
  display: grid;
  gap: 12px;
}

.sc-flat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  min-height: var(--tap-lg);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--pearl);
  transition:
    transform 160ms var(--sc-ease-out),
    border-color 160ms ease;
}

.sc-flat:active {
  transform: scale(0.995);
}

@media (hover: hover) and (pointer: fine) {
  .sc-flat:hover {
    border-color: var(--violet-edge);
  }
}

.sc-flat-name {
  min-width: 0;
}

.sc-flat-name strong {
  display: block;
  font-size: var(--sc-text-16);
  font-weight: 700;
}

.sc-flat-name small {
  display: block;
  font-size: var(--sc-text-14);
  color: var(--mist);
}

/* Состояние строки — чипами словами, той же формы, что на «Объектах»
   (FIX-N2 №4): раньше на месте этой строки была одна мелкая иконка
   светящегося окна и подпись «заселена · оплата просрочена» рядом — то же
   самое сказано дважды, а иконка требовала легенды. */
.sc-flat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sc-flat-money {
  text-align: right;
  font-size: var(--sc-text-16);
  font-variant-numeric: tabular-nums;
  color: var(--soft);
  white-space: nowrap;
}

.sc-flat-money b {
  display: block;
  color: var(--pearl);
  font-weight: 750;
}

/* «Неизвестно» не должно выглядеть как сумма: тише и без жемчужной яркости.
   Селектор с классом на теге — иначе .sc-flat-money b перебивает по весу. */
.sc-flat-money b.sc-unknown,
.sc-unknown {
  color: var(--soft);
  font-weight: 600;
}

.sc-play .sc-flat {
  animation: sc-rise 380ms var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

/* --- Лист квартиры: строки «вопрос → ответ» --- */
.sc-facts {
  display: grid;
  gap: 2px;
}

.sc-facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--sc-text-16);
  color: var(--soft);
}

.sc-facts div:last-child {
  border-bottom: 0;
}

.sc-facts b {
  color: var(--pearl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ============================================================
   10. История — столбцы по месяцам
   ============================================================ */

.sc-range {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.sc-range button {
  min-height: var(--tap);
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--soft);
  font-size: var(--sc-text-16);
  transition:
    background 160ms ease,
    color 160ms ease;
}

.sc-range button[aria-pressed='true'] {
  background: var(--state-active);
  color: var(--pearl);
  font-weight: 700;
}

/* Столбцы шире экрана прокручиваются внутри своей полосы: горизонтальной
   прокрутки у страницы не появляется даже на диапазоне «всё». */
.sc-bars {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 266px;
  padding-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.sc-bars-col {
  flex: 1 0 26px;
  min-width: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--mist);
  position: relative;
}

/* QA-N4 №6: цель касания столбца — весь шаг графика (полоса + соседний
   зазор), а не только видимая полоса. По высоте цель уже во весь колодец —
   `.sc-bars` тянет колонку на всю область графика через `align-items:
   stretch`. По ширине `.sc-bars` держит между столбцами зазор 6px (`gap`),
   который сам по себе не кликабелен: на «Истории» с 12+ столбцами это давало
   28px цель на 390px вместо весь шаг без зазоров. Псевдоэлемент продолжает
   цель каждого столбца на половину зазора в обе стороны — у соседних
   столбцов половинки сходятся ровно посередине, без мёртвой зоны между
   целями; ничего не рисует, видимая полоса и подпись не меняются ни на
   пиксель. Когда столбцов мало и `flex-grow` сам раздаёт столбцу больше
   44px (короткая история или диапазон «12 месяцев» с малым числом строк),
   добавка ничего не портит — просто продолжает уже широкую цель. */
.sc-bars-col::after {
  content: '';
  position: absolute;
  inset: 0 -3px;
}

/* Колодец задаёт высоту, от которой считается процент столбца. */
.sc-bars-well {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

.sc-bars-fill {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(to top, var(--violet-tint), var(--violet));
  border: 1px solid var(--violet-edge);
  transform-origin: bottom center;
  min-height: 3px;
}

/* Месяц без данных — пустой контур во всю высоту колодца. Низкий столбик
   читался бы как маленькая сумма, а высокий залитый — как большая; контур не
   называет величины вовсе. Подпись под графиком говорит то же словами. */
.sc-bars-col[data-known='no'] .sc-bars-fill {
  height: 100%;
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  opacity: 0.6;
}

/* Месяц с убытком: тлеющая кромка и штриховка — различие формой, не цветом. */
.sc-bars-col[data-sign='minus'] .sc-bars-fill {
  background: repeating-linear-gradient(-45deg, var(--ember) 0 3px, transparent 3px 7px);
  border-color: var(--ember-edge);
}

/* Текущий месяц: контур цвета денег при настоящей высоте. Короткий столбец
   незакрытого месяца иначе читается как падение дохода. */
.sc-bars-col[data-open='yes'] .sc-bars-fill {
  background: none;
  border: 1px dashed var(--window-edge);
}

.sc-bars-col[data-open='yes'] .sc-bars-label {
  color: var(--window);
  font-weight: 700;
}

/* Когда в ряду есть незакрытый месяц, его подпись длиннее остальных. Высота
   подписей выравнивается на весь ряд: иначе колодец этого столбца окажется
   короче соседних и масштаб сравнения разойдётся. */
.sc-bars[data-has-open='yes'] .sc-bars-label {
  height: 104px;
}

.sc-bars-label {
  font-size: var(--sc-text-14);
  color: var(--mist);
  text-align: left;
  writing-mode: vertical-rl;
  align-self: center;
  height: 64px;
  overflow: hidden;
  white-space: nowrap;
}

@keyframes sc-col {
  from {
    transform: scaleY(0.02);
  }
}

.sc-play .sc-bars-fill {
  animation: sc-col 600ms var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}

@media (hover: hover) and (pointer: fine) {
  .sc-bars-col:hover .sc-bars-fill {
    box-shadow: var(--glow-violet);
  }
}

.sc-bars-col[aria-pressed='true'] .sc-bars-fill {
  box-shadow: var(--glow-violet);
  border-color: var(--lavender);
}

/* ============================================================
   11. Пустые состояния — часть дизайна, а не заглушка
   ============================================================ */

.sc-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--sunken);
  padding: 34px 26px;
  text-align: center;
}

.sc-empty svg {
  width: 46px;
  height: 46px;
  color: var(--lavender);
  margin-bottom: 14px;
}

.sc-empty strong {
  display: block;
  font-size: var(--text-24);
  color: var(--pearl);
  margin-bottom: 10px;
  text-wrap: balance;
}

.sc-empty p {
  font-size: var(--sc-text-16);
  color: var(--soft);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto 8px;
}

/* ============================================================
   12. Телефон — раскладка равноправная, а не «влезло»
   ============================================================ */

@media (max-width: 780px) {
  /* В шапке телефона место только под имя и роль, а селектор объекта стоит
     в топбаре на виду — второй индикатор там был бы теснотой без пользы. */
  .hud-scope {
    display: none;
  }
  /* POL-6 (12.6): шесть панелей витрины держали шесть разных полей
     (22/18/12/34…) — один шаг 12/16 для всех панелей и карточек. .sc-pillar и
     .sc-empty сюда не попадали вовсе (комментарий находки investor-12/19). */
  .showcase .panel,
  .sc-object,
  .sc-pillar,
  .sc-next,
  .sc-empty {
    padding: 12px 16px;
  }
  .sc-hero {
    /* POL-6 (12.6, 12.7): поле 22/18 → 12/16, зазор до следующей панели
       22 → 12 (шесть зазоров подряд на «Доходе» давали 138px). */
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-lg);
  }
  /* POL-6 (12.5): курсивная подпись героя (18px) и гротескная подпись опоры
     (16px) — одна роль «вопрос над цифрой» двумя оформлениями. Шрифт остаётся
     разным (решение владельца, раздел 4 ТЗ POL-6), кегль сведён к одному. */
  .sc-hero-label,
  .sc-label {
    font-size: var(--sc-text-14);
  }
  /* Колонки не форсируются в одну: auto-fit сам складывает опоры в столбик на
     телефоне и оставляет две в ряд на планшете, где место для них есть. */
  .sc-pillars {
    gap: 14px;
    margin-bottom: 12px;
  }
  /* POL-6 (12.2): вспомогательная сумма 28px была крупнее ведущей цифры —
     сведена к 22 (--text-24), «15 из 15 квартир» перестаёт переноситься
     (просит 224px при 222 доступных). */
  .sc-pillar-value {
    font-size: var(--text-24);
  }
  .sc-object-head {
    flex-direction: column;
    align-items: stretch;
  }
  /* POL-6 (12.4): 22px здесь против 18px у .showcase h2 — два заголовка
     панели на соседних экранах. */
  .sc-object-head h2 {
    font-size: var(--text-h2);
  }
  .sc-object-money {
    text-align: left;
  }
  .sc-next-sum {
    margin-left: 0;
  }
  /* .sc-windows без отдельного правила здесь: 100px/10px из базового
     правила уже дают ровно 3 окна в ряд на 390px (см. комментарий выше). */
  .sc-flat {
    grid-template-columns: minmax(0, 1fr);
    /* POL-6 (12.8): 12/14 → 10/12, список карточек короче на ~120px. */
    padding: 10px 12px;
  }
  .sc-flats {
    gap: 8px;
  }
  .sc-flat-money {
    grid-column: 1 / -1;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }

  /* NIGHT-QA-1 (D4-extra-D4-OPP-FLAT-MONEY-OVERFLOW-1): `flex-wrap: wrap`
     выше переносит между собой сумму (`<b>`) и строку срока (`<span>`), но
     `white-space: nowrap` из базового правила `.sc-flat-money` наследуется
     обоими и внутрь самой строки не пускает перенос — «срок не указан ·
     освобождается 26 сентября 2026» одним словом в 390px не помещалось и
     толкало карточку и весь документ вправо (боковая прокрутка). Сумма
     (`<b>`, короткие табличные цифры) нарочно остаётся `nowrap` — переносить
     там нечему и незачем; снимается только со строки срока/даты. */
  .sc-flat-money > span {
    white-space: normal;
    min-width: 0;
  }
  .sc-bars {
    height: 220px;
  }
  /* POL-6 (12.1): цель касания столбца была 28px (эффективно 34 с ::after) —
     12 целей на «Истории» подряд. 40px (эффективно 46 с тем же псевдоэлементом)
     видимую раскладку не ломает: полоса и так прокручивается вбок. */
  .sc-bars-col {
    flex: 1 0 40px;
    min-width: 40px;
  }
  /* POL-6 (12.9): подписи (104px вертикальным текстом) были шире самого
     колодца (98 из 220) — сокращены до 72, колодцу остаётся больше места. */
  .sc-bars-label,
  .sc-bars[data-has-open='yes'] .sc-bars-label {
    height: 72px;
  }
  /* POL-6 (12.3, единая мобильная шкала «зазор между целями ≥ 8»): при
     padding: 8px 16px текст не помещался в 342px полосы («12 / месяцев»,
     «24 / месяца», «Всё / время» — все три в две строки). Меньший боковой
     запас и равная ширина укладывают подписи в одну строку на 390 и 360
     (проверено: «12 месяцев» просит 88px, на 360 доступно 89 при padding
     10px 6px — с 10px 8px не хватало 3px); gap 4 → 8 — между кнопками тоже
     цели касания, не только внутри них. */
  .sc-range {
    display: flex;
    width: 100%;
    gap: 8px;
  }
  .sc-range button {
    flex: 1;
    padding: 10px 6px;
    text-align: center;
  }
  /* Подписи нижней панели — 13px из 17-mobile-input.css, который подключён
     позже; поднимаем до порога §8 селектором на класс тяжелее, без
     !important. Четыре-пять слов в панели помещаются и в 14px. */
  .shell .mobile-nav button {
    font-size: var(--sc-text-14);
  }
}

/* ============================================================
   13. Уменьшенное движение
   ============================================================ */

/* 09-responsive.css уже снимает animation и transition через `*`. Здесь
   остаётся то, что каскадом не выключается: пунктир рисования линии и кольца
   доли задаётся не анимацией, а свойством, и без анимации линия осталась бы
   невидимой. */
@media (prefers-reduced-motion: reduce) {
  /* Пунктир линии графика ставится только вместе с .sc-play; если класс всё же
     остался (пользователь включил уменьшенное движение, не перезагружая
     страницу), линия обязана быть видна целиком.
     Кольцо доли здесь НЕ сбрасывается: его stroke-dasharray и dashoffset —
     это сама величина доли в атрибутах, и обнуление превратило бы 45 % в
     полный круг. */
  .sc-chart-line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .sc-chart-area {
    opacity: 1;
  }
}