/* ============================================================
 * Кабинет арендатора v2 — «почему такая сумма» (Р-38, бриф §4.7):
 * страница договора (условия с формулой, история условий) и
 * раскрытие строк на карточке счёта. Этап S0 переводит блоки на
 * токены; этап S3 — экран договора: шапка по шаблону блока (portal.css,
 * .portal-page-head), пояснения к расчётам раскрытием, «Что изменится»,
 * депозит и документы (общие партиалы с главной).
 * Mobile-first; от 900px — две колонки (левая --ios-lease-side).
 * Только var(--ios-*); литералы — по списку в шапке portal.css.
 * ============================================================ */

/* --- Страница договора: условия --- */

.portal-terms__since {
  padding: var(--ios-space-3) var(--ios-space-4) var(--ios-space-1);
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Пустые состояния условий и истории — фразой на фоне, без группы
 * (бриф §3 п. 6); шрифт и цвет — .portal-secondary */
.portal-terms__empty {
  margin: 0;
}

.portal-terms__line {
  padding: var(--ios-space-3) var(--ios-space-4);
  border-top: 1px solid var(--ios-separator);
}

.portal-terms__since + .portal-terms__line {
  border-top: 0;
}

.portal-terms__kind {
  font-weight: 600;
}

/* Формула длинная («63,4 м² × 25 000,00 ₽/м²/год ÷ 12 = …») — Onest
 * с табличными цифрами, переносится в любом месте */
.portal-terms__formula {
  margin-top: var(--ios-space-1);
  font: var(--ios-type-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.portal-terms__vat {
  margin-top: var(--ios-space-1);
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Итог в месяц — отдельная сумма-итог: моно 600 */
.portal-terms__total {
  display: flex;
  justify-content: space-between;
  gap: var(--ios-space-3);
  padding: var(--ios-space-3) var(--ios-space-4);
  border-top: 1px solid var(--ios-separator);
  font-weight: 600;
}

.portal-terms__total .portal-num {
  font-family: var(--ios-font-mono);
  white-space: nowrap;
}

.portal-terms__total + .portal-row,
.portal-terms__line + .portal-row {
  border-top: 1px solid var(--ios-separator);
}

/* Справочные строки (день оплаты, пени, депозит) — значение с переносом */
.portal-terms .portal-row {
  align-items: flex-start;
}

.portal-terms .portal-row__label {
  flex: none;
}

/* --- Страница договора: история условий. Лента событий — не пары
 *     «подпись — значение»: на фоне, без белой группы (бриф §3 п. 6),
 *     по левому краю заголовка секции. Чипы на сером видны: нейтральная
 *     подложка --ios-status-neutral-bg своя для обоих фонов --- */

.portal-terms-history {
  margin: 0;
}

.portal-terms-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ios-space-2);
}

.portal-terms-entry__period {
  font-weight: 600;
}

.portal-terms-entry__source {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.portal-terms-entry__text {
  margin-top: var(--ios-space-1);
  font: var(--ios-type-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.portal-terms-entry__sum {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Пока ДС не подписано — ожидание: оранжевый тон */
.portal-terms-entry__hint {
  margin: var(--ios-space-1) 0 0;
  font: var(--ios-type-caption);
  color: var(--ios-status-warning);
}

/* --- Карточка счёта: раскрытие строки (формула, условия, НДС) --- */

.portal-line__source {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Строка посчитана по условиям, которые ДС задним числом сменило позже */
.portal-line__source-note {
  font: var(--ios-type-caption);
  color: var(--ios-status-warning);
}

.portal-line__formula {
  margin-top: var(--ios-space-1);
  font: var(--ios-type-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* --- Пояснения к расчётам (бриф §3: раскрытием или сноской, не
 *     всплывающей подсказкой; п. 8 — мелким текстом в духе сносок).
 *     <details> без JS; «›» поворачивается на 90° (--ios-duration-fast,
 *     при reduced motion — сразу) --- */

.portal-explain {
  margin: calc(var(--ios-space-2) - var(--ios-space-4)) 0 0;
  padding: 0 var(--ios-space-4);
}

.portal-explain__toggle {
  display: flex;
  align-items: center;
  gap: var(--ios-space-1);
  width: fit-content;
  min-height: var(--ios-touch-min);
  color: var(--ios-accent);
  font: var(--ios-type-secondary);
  list-style: none;
  cursor: pointer;
}

.portal-explain__toggle::-webkit-details-marker {
  display: none;
}

.portal-explain__toggle:hover {
  color: var(--ios-accent-hover);
}

.portal-explain__toggle::after {
  content: "›";
  content: "›" / "";
  display: inline-block;
  transition: transform var(--ios-duration-fast) var(--ios-ease);
}

.portal-explain__item[open] > .portal-explain__toggle::after {
  transform: rotate(90deg);
}

.portal-explain__text {
  margin: 0 0 var(--ios-space-3);
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* «Что изменится» (бриф §4.7, §5 п. 6) своих правил не имеет: не пары
 * «подпись — значение» — на фоне, строки — те же, что «Сумма изменится»
 * на главной (.portal-changes__*, portal_home.css), пояснение ожидания
 * подписи — .portal-terms-entry__hint */

/* --- Документы (общие строки с колонкой бухгалтера главной, portal_home.css).
 *     На телефоне рядом с длинным бейджем «Подписан обеими сторонами»
 *     название («ДС №1») сжималось до буквы в строку: строка переносится —
 *     название целиком, а дата и статус уходят ниже. Основа названия —
 *     его длина (auto, а не 0), иначе переноса строки не случится --- */

.portal-lease-docs .doc-row {
  flex-wrap: wrap;
}

.portal-lease-docs .portal-docs__name {
  flex: 1 1 auto;
}

/* --- Десктоп (≥900px): факты, условия, что изменится и депозит слева
 *     (--ios-lease-side), история и документы — справа --- */

@media (min-width: 900px) {
  .portal-lease-columns {
    display: grid;
    grid-template-columns: minmax(0, var(--ios-lease-side)) minmax(0, 1fr);
    gap: 0 var(--ios-space-8);
    align-items: start;
  }

  /* Первая секция правой колонки — вровень с фактами слева */
  .portal-lease-columns__main > .portal-section:first-child {
    margin-top: 0;
  }
}