/* RU: Страница правил площадки (фаза P111).
       Оформление сдержанное намеренно: это правовой документ, который читают целиком и
       печатают. Всё, что тут нужно, — читаемая колонка и видимая структура.
   EN: The platform rules page (phase P111).
       The styling is deliberately restrained: this is a legal document that gets read end to end and
       printed. All it needs is a readable column and visible structure. */

.legal-rules {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: var(--k-font-ui);
}

.lr-bar {
  display: flex;
  align-items: center;
  gap: var(--k-s-4);
  padding: var(--k-s-3) var(--k-s-4);
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-border);
}

.lr-brand {
  font-family: var(--k-font-brand);
  font-size: var(--k-fs-6);
  font-weight: 700;
  color: var(--k-brand);
  text-decoration: none;
}

.lr-nav {
  margin-left: auto;
  display: flex;
  gap: var(--k-s-3);
}

.lr-nav a {
  color: var(--k-text-muted);
  text-decoration: none;
  font-size: var(--k-fs-3);
}

/* RU: Колонка около 70 символов. Правовой текст во всю ширину ноутбука перестаёт
       читаться примерно там же, где обычный, — а этот читают целиком.
   EN: A column of about 70 characters. Legal text spanning a laptop's full width stops being
       readable at roughly the same point as ordinary text — and this one gets read end to end. */
.lr-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--k-s-6) var(--k-s-4) var(--k-s-9);
  line-height: var(--k-lh-loose);
}

.lr-main h1 {
  font-family: var(--k-font-brand);
  font-size: var(--k-fs-8);
  line-height: var(--k-lh-tight);
  margin: 0;
}

.lr-lead {
  color: var(--k-text-muted);
  margin: var(--k-s-2) 0 var(--k-s-6);
}

.lr-main h2 {
  font-size: var(--k-fs-6);
  margin: var(--k-s-7) 0 var(--k-s-2);
}

.lr-main h3 {
  font-size: var(--k-fs-5);
  margin: var(--k-s-5) 0 var(--k-s-2);
}

.lr-main p,
.lr-main li {
  font-size: var(--k-fs-4);
}

.lr-main a {
  color: var(--k-brand);
}

/* RU: Уведомление о будущей редакции — единственный выделенный блок на странице.
       Выделять больше нечего: остальное тут равнозначно, и вторая рамка обесценила бы
       первую.
   EN: The upcoming-revision notice is the only highlighted block on the page. There is nothing else
       to highlight: everything else here is of equal weight, and a second frame would devalue the
       first. */
.lr-notice {
  margin: var(--k-s-5) 0;
  padding: var(--k-s-4);
  background: var(--k-warn-soft);
  border: 1px solid var(--k-warn);
  border-radius: var(--k-r-2);
}

.lr-notice h2 {
  margin: 0 0 var(--k-s-2);
  font-size: var(--k-fs-5);
}

.lr-notice p {
  margin: 0 0 var(--k-s-2);
}

.lr-note-foot {
  font-size: var(--k-fs-2);
  color: var(--k-text-muted);
}

.lr-version {
  font-size: var(--k-fs-2);
  color: var(--k-text-muted);
  font-variant-numeric: tabular-nums;
}

.lr-empty {
  padding: var(--k-s-4);
  background: var(--k-surface-2);
  border-radius: var(--k-r-2);
}

.lr-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--k-tap-min);
  padding: 0 var(--k-s-4);
  background: var(--k-brand);
  color: var(--k-text-on-accent);
  border-radius: var(--k-r-2);
  text-decoration: none;
}

/* RU: Реквизиты оператора (П0.8) — список «поле: значение» в две колонки. На узком экране
       колонки складываются: длинное наименование ООО в колонке шириной в треть экрана
       рвалось бы по слову на строку.
   EN: The operator's requisites (П0.8) — a "field: value" list in two columns. On a narrow screen
       the columns stack: a long company name in a column a third of the screen wide would break
       one word per line. */
.lr-req {
  display: grid;
  grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
  gap: var(--k-s-2) var(--k-s-4);
  margin: var(--k-s-3) 0 0;
}

.lr-req dt {
  color: var(--k-text-muted);
}

.lr-req dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .lr-req {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lr-req dd {
    margin-bottom: var(--k-s-3);
  }
}

.lr-hist {
  list-style: none;
  padding: 0;
  margin: var(--k-s-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-s-3);
}

.lr-hist-item {
  padding: var(--k-s-3);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-2);
}

.lr-hist-head {
  display: flex;
  justify-content: space-between;
  gap: var(--k-s-3);
  margin: 0;
  flex-wrap: wrap;
}

.lr-hist-date,
.lr-hist-sum {
  color: var(--k-text-muted);
  font-size: var(--k-fs-3);
}

.lr-hist-sum {
  margin: var(--k-s-1) 0 0;
}

/* RU: Печать. Правовой документ печатают — на него ссылаются в спорах, и распечатка с
       навигационной панелью выглядит как страница сайта, а не как документ.
   EN: Print. A legal document gets printed — it is cited in disputes, and a printout with a
       navigation bar looks like a web page rather than a document. */
@media print {
  .lr-bar,
  .lr-cta {
    display: none;
  }
  .lr-main {
    max-width: none;
    padding: 0;
  }
  .lr-notice {
    border: 1px solid #000;
  }
}