/*
 * Правовые страницы: `System 01 - Правила отмены` и политика
 * конфиденциальности.
 *
 * Один файл на обе: макет у них один, различается только текст — он
 * приходит из `GET /api/content/:slug`. Отдельная страница политики в
 * прототипе не нарисована, и в карте экранов сказано делать её по образцу
 * `System 01`.
 *
 * Правило то же: ни одного значения напрямую — только `var(--tb-*)`.
 *
 *   grep -nE '#[0-9A-Fa-f]{3,8}|[0-9]+px|rgba?\(' web/content.css
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--tb-color-surface);
  color: var(--tb-color-ink);
  font-family: var(--tb-font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--tb-color-ink);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: var(--tb-border-hairline) solid currentColor;
  outline-offset: var(--tb-space-4);
}

.doc {
  min-height: 100vh;
}

.doc__header {
  background: var(--tb-color-ink);
  padding: var(--tb-space-20) var(--tb-space-32);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doc__logo {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-18);
  font-weight: var(--tb-weight-black);
  letter-spacing: var(--tb-tracking-tight);
}

.doc__back {
  color: var(--tb-color-light);
  font-size: var(--tb-text-14);
  font-weight: var(--tb-weight-medium);
}

.doc__body {
  max-width: var(--tb-content-width);
  margin: 0 auto;
  padding: var(--tb-space-64) var(--tb-space-32) var(--tb-space-96);
}

.doc__kicker {
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-semibold);
  letter-spacing: var(--tb-tracking-wide);
  text-transform: uppercase;
  color: var(--tb-color-muted);
  margin-bottom: var(--tb-space-12);
}

.doc__title {
  font-size: var(--tb-text-44);
  font-weight: var(--tb-weight-black);
  letter-spacing: var(--tb-tracking-tight);
  margin: 0 0 var(--tb-space-40);
}

.doc__text {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-36);
}

.doc__section-title {
  font-size: var(--tb-text-20);
  font-weight: var(--tb-weight-bold);
  margin: 0 0 var(--tb-space-10);
}

.doc__paragraph {
  font-size: var(--tb-text-15);
  color: var(--tb-color-outline-dark);
  line-height: var(--tb-leading-loose);
  margin: 0 0 var(--tb-space-10);
}

.doc__paragraph:last-child {
  margin-bottom: 0;
}

/*
 * Числа, по которым сервис считает на самом деле.
 *
 * Текст правил пишет администратор, а считает сервис по настройкам, и они
 * приходят в том же ответе. Показывать их рядом — единственный способ
 * заметить расхождение: иначе клиент прочитает «за 4 часа», а отмена
 * пройдёт по другому значению.
 */
.doc__facts {
  border: var(--tb-border-hairline) solid var(--tb-color-line);
  border-radius: var(--tb-radius-16);
  padding: var(--tb-space-24);
  margin-top: var(--tb-space-40);
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-12);
}

.doc__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--tb-space-16);
  font-size: var(--tb-text-14);
}

.doc__fact-name {
  color: var(--tb-color-muted);
}

.doc__fact-value {
  font-weight: var(--tb-weight-semibold);
  white-space: nowrap;
}

.doc__version {
  font-size: var(--tb-text-13);
  color: var(--tb-color-dim);
  margin-top: var(--tb-space-16);
}

.doc__return {
  display: inline-block;
  margin-top: var(--tb-space-48);
  padding: var(--tb-space-14) var(--tb-space-32);
  background: var(--tb-color-ink);
  color: var(--tb-color-surface);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-15);
  font-weight: var(--tb-weight-semibold);
}

/* Отказ загрузки — тем же блоком, что и на остальных экранах. */
.load-error {
  border: var(--tb-border-hairline) solid var(--tb-color-line);
  border-radius: var(--tb-radius-16);
  padding: var(--tb-space-28);
}

.load-error__text {
  font-size: var(--tb-text-15);
  color: var(--tb-color-muted);
  line-height: var(--tb-leading-snug);
  margin: 0 0 var(--tb-space-16);
}

.load-error__retry {
  font-family: var(--tb-font-sans);
  font-size: var(--tb-text-14);
  font-weight: var(--tb-weight-semibold);
  color: var(--tb-color-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--tb-border-hairline) solid var(--tb-color-ink);
  padding: 0;
  cursor: pointer;
}

/* ========================================================================
   Узкий экран
   ======================================================================== */

/*
 * Правовой текст и так в одну колонку — на узком экране остаются отступы и
 * размер заголовка. Точки перелома — в конце `tokens.css`.
 */

@media (max-width: 600px) {
  .doc__header {
    padding: var(--tb-space-14) var(--tb-space-20);
  }

  .doc__body {
    padding-left: var(--tb-space-20);
    padding-right: var(--tb-space-20);
  }

  .doc__title {
    font-size: var(--tb-text-28);
  }

  /* Строка «название — число» перестаёт быть строкой таблицы: длинное
     название и значение делили ширину пополам и ломались по буквам. */
  .doc__fact {
    flex-direction: column;
    gap: var(--tb-space-2);
  }
}