/* Страница /dogovor. Токены и компоненты — из системы «Табло»,
   здесь только то, чего в ней ещё не было: рамка скана документа. */

/* Скан страницы договора. Рамка вместо тени: теней в системе нет. */
.doc {
  margin-top: var(--space-4);
  border: var(--border-w) solid var(--border-hairline);
  background: var(--surface-card);
  max-width: 860px;
}
.doc__shot { display: block; width: 100%; height: auto; }
/* Подсказку про разворот показывает скрипт: без него разворота нет,
   и обещать его подписью нельзя. */
.doc__zoom { display: none; }
.doc--zoom .doc__zoom { display: inline; }

.doc__cap {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  border-top: var(--border-w) solid var(--border-hairline);
  padding: var(--space-1) var(--space-2);
  margin: 0;
  max-width: none;
}

/* Первый экран страницы: текст и обложка договора рядом. */
.docthead { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
.docthead__cover { max-width: 420px; margin: 0; }
.docthead__cover .doc { margin-top: 0; }

/* Раскладка «вывод строкой» под сканом: подпись слева, что это значит справа. */
.rows--doc { max-width: 820px; margin-top: var(--space-4); }
.rows--doc .row { align-items: flex-start; }
.rows--doc .row__label { white-space: normal; max-width: 46%; }
.rows--doc .row__value { white-space: normal; text-align: right; font-weight: var(--weight-value); }

/* Реквизиты: моноширинные цифры, чтобы счёт сверялся взглядом. */
.rows--req .row__value { font-variant-numeric: var(--numeric); }

@media (min-width: 768px) {
  .docthead { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; gap: var(--space-6); }
  .docthead h1 { font-size: var(--size-heading); }
}