/*
 * Документы: политика обработки персональных данных, согласие на обработку,
 * реквизиты и страница 404. Одни и те же стили у отдельных страниц
 * (privacy.html, consent.html, requisites.html, 404.html) и у окна с
 * документом на главной: index.html подгружает этот файл при первом
 * открытии окна (js/main.js).
 *
 * Макета у документов нет — собраны в стиле страницы: карточка #212121 с
 * зерном, заголовки Halvar Breitschrift капсом, текст Helvetica Neue Cyr.
 * Размеры — в пикселях макета: на телефоне кадр 385, на десктопе 1920.
 */

/* Масштаб отдельных страниц документов (на главной его задают desktop.css и mobile.css) */
.legal-root {
  --u: calc(min(100vw, 560px) / 385);
  --noise-tile: 120;
}

@media (min-width: 1024px) {
  .legal-root {
    --u: calc(min(100vw, 1920px) / 1920);
    --noise-tile: 200;
  }
}

/* Текст документа ---------------------------------------------------------- */

.legal {
  font-size: calc(14 * var(--u));
  line-height: calc(21 * var(--u));
  letter-spacing: -0.01em;
  color: var(--c-text);
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal__eyebrow {
  font-family: var(--f-wide);
  font-size: calc(7 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: 0.31em;
  text-transform: uppercase;
  color: var(--c-text-lit);
  opacity: 0.4;
}

.legal__title {
  margin-top: calc(12 * var(--u));
  font-family: var(--f-wide);
  font-size: calc(21 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--c-text-lit);
  hyphens: manual;
  text-wrap: balance;
}

/* Заголовок получает фокус при открытии окна: рамка — только при работе с клавиатуры */
.legal__title:focus:not(:focus-visible) {
  outline: none;
}

.legal__meta {
  margin-top: calc(10 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--c-text-50);
}

.legal__lead {
  margin-top: calc(16 * var(--u));
}

/* «Коротко»: пересказ политики простыми словами в рамке */
.legal__summary {
  margin-top: calc(20 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  border: calc(1 * var(--u)) solid var(--c-white-10);
  border-radius: calc(20 * var(--u));
}

.legal__summary-title,
.legal__section > h2 {
  font-family: var(--f-wide);
  font-size: calc(11 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-lit);
  hyphens: manual;
}

.legal__section {
  margin-top: calc(28 * var(--u));
}

/* Абзацы, списки и реквизиты раздела идут друг за другом */
.legal__section > * + * {
  margin-top: calc(8 * var(--u));
}

.legal__section > h2 + *,
.legal__summary > ul {
  margin-top: calc(10 * var(--u));
}

.legal ul,
.legal ol {
  padding-left: calc(18 * var(--u));
}

.legal ul {
  list-style: disc;
}

.legal ol {
  list-style: decimal;
}

.legal li + li {
  margin-top: calc(6 * var(--u));
}

.legal li::marker {
  color: var(--c-text-50);
}

.legal b {
  font-weight: 500;
  color: var(--c-text-lit);
}

/* Цель обработки и реквизиты: подпись над значением, на десктопе — слева */
.legal__facts {
  display: grid;
  gap: calc(12 * var(--u));
  margin-bottom: 0;
}

.legal__facts:first-child {
  margin-top: 0;
}

.legal__facts dt {
  font-size: calc(11 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: 0.02em;
  color: var(--c-text-50);
}

.legal__facts dd {
  margin: calc(2 * var(--u)) 0 0;
}

.legal a {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

/* Окно с документом на главной ------------------------------------------ */

/* Страница под окном затемнена и размыта, как под меню */
.doc {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  padding: calc(10 * var(--u));
  background: var(--c-menu-overlay);
  -webkit-backdrop-filter: blur(calc(20 * var(--u)));
  backdrop-filter: blur(calc(20 * var(--u)));
  opacity: 0;
  visibility: hidden;
}

.doc.is-open {
  opacity: 1;
  visibility: visible;
}

.doc__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, calc(365 * var(--u)));
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: var(--c-card);
  isolation: isolate;
}

.doc__panel::before,
.legal-page__card::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('../assets/desktop/grain.webp') 0 0 / calc(128 * var(--u)) repeat;
  opacity: 0.15;
  pointer-events: none;
}

/* Документ прокручивается внутри окна, страница под окном стоит */
.doc__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: var(--c-white-20) transparent;
}

.doc__status {
  color: var(--c-text-50);
  font-size: calc(14 * var(--u));
  line-height: calc(21 * var(--u));
}

.doc__status a {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

/* Крестик в круге цвета карточки: текст под ним прокручивается */
.doc__close {
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(10 * var(--u));
  z-index: 1;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: var(--c-card);
}

.doc__close::before,
.doc__close::after {
  content: '';
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(18.75 * var(--u));
  width: calc(20 * var(--u));
  height: calc(2.5 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: var(--c-text);
  opacity: 0.6;
  rotate: 45deg;
}

.doc__close::after {
  rotate: -45deg;
}

/* Отдельная страница документа ------------------------------------------- */

.legal-page__head,
.legal-page__card,
.legal-page__foot {
  width: calc(355 * var(--u));
  margin: 0 auto;
}

.legal-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(18 * var(--u)) 0;
}

.legal-page__logo {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}

.legal-page__mark {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
}

.legal-page__name {
  width: calc(74 * var(--u));
  height: calc(32 * var(--u));
}

.legal-page__back {
  font-family: var(--f-wide);
  font-size: calc(8 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-lit);
}

.legal-page__card {
  position: relative;
  padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--c-card);
  isolation: isolate;
}

.legal-page__foot {
  padding: calc(20 * var(--u)) 0 calc(36 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--c-text-50);
}

.legal-page__links {
  display: grid;
  gap: calc(8 * var(--u));
}

.legal-page__link {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

.legal-page__link[aria-current='page'] {
  color: var(--c-text-lit);
  text-decoration: none;
}

.legal-page__copy {
  margin-top: calc(16 * var(--u));
}

/* Десктоп ------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .legal {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .legal__eyebrow {
    font-size: calc(11 * var(--u));
    line-height: calc(16 * var(--u));
  }

  .legal__title {
    margin-top: calc(18 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(46 * var(--u));
  }

  .legal__meta {
    margin-top: calc(16 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .legal__lead {
    margin-top: calc(24 * var(--u));
  }

  .legal__summary {
    margin-top: calc(36 * var(--u));
    padding: calc(28 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u));
    border-radius: calc(24 * var(--u));
  }

  .legal__summary-title,
  .legal__section > h2 {
    font-size: calc(18 * var(--u));
    line-height: calc(26 * var(--u));
  }

  .legal__section {
    margin-top: calc(48 * var(--u));
  }

  .legal__section > * + * {
    margin-top: calc(12 * var(--u));
  }

  .legal__section > h2 + *,
  .legal__summary > ul {
    margin-top: calc(16 * var(--u));
  }

  .legal ul,
  .legal ol {
    padding-left: calc(28 * var(--u));
  }

  .legal li + li {
    margin-top: calc(8 * var(--u));
  }

  .legal__facts {
    gap: calc(16 * var(--u));
  }

  .legal__facts > div {
    display: grid;
    grid-template-columns: calc(280 * var(--u)) 1fr;
    align-items: baseline;
    gap: calc(40 * var(--u));
  }

  .legal__facts dt {
    font-size: calc(16 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .legal__facts dd {
    margin: 0;
  }

  .doc {
    padding: calc(48 * var(--u));
    -webkit-backdrop-filter: blur(calc(36.35 * var(--u)));
    backdrop-filter: blur(calc(36.35 * var(--u)));
  }

  .doc__panel {
    width: calc(1040 * var(--u));
    height: auto;
    max-height: 100%;
    margin: auto;
  }

  .doc__scroll {
    padding: calc(80 * var(--u)) calc(96 * var(--u)) calc(88 * var(--u));
  }

  .doc__status {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .doc__close {
    top: calc(28 * var(--u));
    right: calc(28 * var(--u));
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
  }

  .doc__close::before,
  .doc__close::after {
    left: calc(12 * var(--u));
    top: calc(26.5 * var(--u));
    width: calc(32 * var(--u));
    height: calc(3 * var(--u));
    border-radius: calc(2 * var(--u));
  }

  .legal-page__head,
  .legal-page__card,
  .legal-page__foot {
    width: calc(1040 * var(--u));
  }

  .legal-page__head {
    padding: calc(40 * var(--u)) 0;
  }

  .legal-page__logo {
    gap: calc(12 * var(--u));
  }

  .legal-page__mark {
    width: calc(42 * var(--u));
    height: calc(42 * var(--u));
  }

  .legal-page__name {
    width: calc(93 * var(--u));
    height: calc(40 * var(--u));
  }

  .legal-page__back {
    font-size: calc(12 * var(--u));
    line-height: calc(18 * var(--u));
  }

  .legal-page__card {
    padding: calc(72 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u));
  }

  .legal-page__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(16 * var(--u)) calc(40 * var(--u));
    padding: calc(32 * var(--u)) 0 calc(64 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .legal-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: calc(12 * var(--u)) calc(32 * var(--u));
  }

  .legal-page__copy {
    margin-top: 0;
  }
}

/* Наведение: ссылки светлеют, крестик ярче ------------------------------- */

@media (hover: hover) {
  .legal a,
  .doc__status a,
  .legal-page__link,
  .legal-page__back {
    transition: color 0.3s var(--ease-out);
  }

  .legal a:hover,
  .doc__status a:hover,
  .legal-page__link:hover,
  .legal-page__back:hover {
    color: var(--c-white);
  }

  .doc__close::before,
  .doc__close::after {
    transition: opacity 0.3s var(--ease-out);
  }

  .doc__close:hover::before,
  .doc__close:hover::after {
    opacity: 1;
  }
}

/* Окно проявляется, карточка выезжает снизу ------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .doc {
    transition:
      opacity 0.4s var(--ease-out),
      visibility 0s linear 0.4s;
  }

  .doc.is-open {
    transition: opacity 0.4s var(--ease-out);
  }

  .doc__panel {
    translate: 0 calc(40 * var(--u));
    transition: translate 0.7s var(--ease-out);
  }

  .doc.is-open .doc__panel {
    translate: 0 0;
  }
}