/* ==========================================================================
   LEGAL — standalone stylesheet

   HT-2724. Скомпилировано из less/legal.less в репозитории
   06.001_INXY_ACCOUNT_PUG_LESS (ветка task-HT-2721-legal-docs) и перенесено
   сюда как есть — правки вносить в исходный LESS в том репозитории и
   пересобирать, а не редактировать этот файл руками (кроме секции HT-2724
   в конце, которой в исходном дизайне нет — см. комментарий там).

   Подключается только страницами /legal/ и /legal/<slug>/, в общий
   style.css / custom.css не входит. Сетка, карточки, крошки и типографика
   берутся из style.css — здесь только то, чего в проекте ещё нет.
   ========================================================================== */
/* Акценты категорий — только существующие токены, новых цветов не заводим */
/* ==========================================================================
   Страница документа
   ========================================================================== */
.legal-doc {
  /* Заголовок страницы — штатный .site-title.title-container.small.
     Штатные 250px рассчитаны на страницу без хлебных крошек и с блоком
     баланса справа. Здесь крошки есть, а правой колонки нет, поэтому блок
     ниже: так карточка поднимается на подложку так же, как на Top-Up. */
  /* Лид идёт на .text из компонента заголовка — ограничиваем только ширину */
  /* Метаблок с датами редакции */
  /* Плашка приоритета MSA — первым блоком внутри карточки */
  /* Сетка «оглавление + карточка».
     Отступа сверху нет намеренно: карточка должна подниматься на подложку,
     как на Top-Up и Subscription. */
  /* flex, а не float: у колонки-float высота равна её содержимому, и
     липкому оглавлению просто некуда ехать. Во flex-ряду колонка
     растягивается на высоту ряда, и у sticky появляется запас хода.
     Ширины у колонок процентные, так что раскладка не меняется. */
  /* ------------------------------------------------------------------
     Оглавление
     ------------------------------------------------------------------ */
  /* Оглавление — такая же белая панель, как карточка: верхним краем оно
     тоже выходит на подложку, и на цветном фоне рамка читалась бы плохо.
     Тень взята от .card проекта. */
  /* Обёртка коллапса. Собственные рамки и отступы Materialize здесь
     не нужны — панель уже белая и с тенью. */
  /* Два класса: Materialize задаёт `.collapsible-header i` высоту строки
     в 3rem (0-1-1), и иконка растягивала свёрнутую плашку до 48px */
  /* Ниже 1025px оглавление схлопнуто: 17–26 пунктов иначе занимают
     весь первый экран до начала документа. */
  /* На десктопе коллапса нет: переключатель не нужен, список раскрыт
     всегда. Materialize ставит display инлайном, поэтому !important. */
  /* ------------------------------------------------------------------
     Тело документа
     ------------------------------------------------------------------ */
  /* Раздел ## — размер как у .card-flowtext-title (h4), тег h2 ради порядка */
  /* Подраздел ### */
  /* Ширина строки — длинные строки мелким кеглем читаются плохо */
  /* Таблицы: скроллятся по горизонтали, страница по горизонтали не едет */
  /* Инлайновый код — в текстах им помечены слаги документов и адреса */
  /* Формулы и блоки кода из markdown */
  /* ------------------------------------------------------------------
     Смежные документы
     ------------------------------------------------------------------ */
}
@media (min-width: 769px) {
  .legal-doc__head.site-title {
    height: 180px;
  }
}
@media (max-width: 768px) {
  .legal-doc__head.site-title {
    padding-bottom: 24px;
  }
}
.legal-doc__lead {
  max-width: 70ch;
}
.legal-doc__meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: #616161;
}
.legal-doc__meta-item {
  display: inline-flex;
  align-items: center;
  margin-right: 28px;
}
.legal-doc__meta-item:last-child {
  margin-right: 0;
}
.legal-doc__meta-item .material-icons {
  font-size: 16px;
  margin-right: 6px;
  color: #757575;
}
.legal-doc__notice {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
  padding: 16px 20px;
  background: rgba(164, 41, 87, 0.05);
  border-left: 3px solid #a42957;
}
.legal-doc__notice p {
  margin: 0 !important;
  font-size: 0.875rem;
  line-height: 1.6;
}
.legal-doc__notice a {
  color: #a42957;
  text-decoration: underline;
}
.legal-doc__notice-icon {
  flex: 0 0 auto;
  margin-right: 12px;
  font-size: 20px;
  color: #a42957;
}
.legal-doc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  /* Штатная .card имеет margin: 0 8px, из-за чего её край не совпадал
       с крошками, заголовком и блоком смежных документов. Внутри legal
       всё выравнено по одной линии — по padding колонки. */
}
.legal-doc__row .card {
  margin-left: 0;
  margin-right: 0;
}
.legal-doc__toc {
  margin: 0 0 16px;
  padding: 24px 20px;
  background: #ffffff;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.1);
  /* 74px = высота шапки (50px, при прокрутке она становится фиксированной)
       плюс 24px воздуха, иначе панель подлезает под меню */
  /* В свёрнутом виде это одна строка — крупные отступы делали из неё
       непропорционально высокую плашку */
}
@media (min-width: 1025px) {
  .legal-doc__toc {
    position: sticky;
    top: 74px;
    max-height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
@media (max-width: 1024px) {
  .legal-doc__toc {
    margin-bottom: 16px;
    padding: 12px 16px;
  }
}
.legal-doc__toc-collapsible {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  box-shadow: none;
}
.legal-doc__toc-collapsible > li {
  list-style: none;
}
.legal-doc__toc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #757575;
}
.legal-doc__toc-title .legal-doc__toc-chevron {
  width: auto;
  margin: 0;
  font-size: 20px;
  line-height: 1;
  color: #757575;
  transition: transform 0.2s ease;
}
@media (max-width: 1024px) {
  .legal-doc__toc-title {
    margin-bottom: 0;
    cursor: pointer;
  }
  .legal-doc__toc-collapsible li.active .legal-doc__toc-chevron {
    transform: rotate(180deg);
  }
  .legal-doc__toc-collapsible .collapsible-body {
    padding-top: 16px;
    border: 0;
  }
}
@media (min-width: 1025px) {
  .legal-doc {
    /* Materialize задаёт `.collapsible-header i { display: block }`
       со специфичностью 0-1-1 — одного класса не хватает. */
  }
  .legal-doc__toc-title .legal-doc__toc-chevron {
    display: none;
  }
  .legal-doc__toc-collapsible .collapsible-body {
    display: block !important;
    border: 0;
  }
  .legal-doc__toc-title {
    cursor: default;
    pointer-events: none;
  }
}
.legal-doc__toc-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.legal-doc__toc-item {
  margin-bottom: 10px;
  line-height: 1.4;
  /* Подразделы — со сдвигом и мельче */
}
.legal-doc__toc-item:last-child {
  margin-bottom: 0;
}
.legal-doc__toc-item a {
  font-size: 0.8125rem;
  color: #424242;
  transition: color 0.2s ease;
}
.legal-doc__toc-item a:hover {
  color: #a42957;
}
.legal-doc__toc-item.is-sub {
  margin-left: 14px;
}
.legal-doc__toc-item.is-sub a {
  font-size: 0.75rem;
  color: #616161;
}
.legal-doc__section-title {
  font-size: 1.25rem;
  line-height: 110%;
  scroll-margin-top: 24px;
}
.legal-doc__subtitle {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 125%;
  scroll-margin-top: 24px;
}
.legal-doc p,
.legal-doc ul,
.legal-doc ol {
  max-width: 78ch;
}
.legal-doc__table-wrap {
  margin-bottom: 25px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-doc__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.legal-doc__table th,
.legal-doc__table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eeeeee;
}
.legal-doc__table th {
  font-weight: 500;
  white-space: nowrap;
  color: #424242;
  border-bottom: 2px solid #eeeeee;
}
.legal-doc__table tr:last-child td {
  border-bottom: 0;
}
.legal-doc code {
  padding: 2px 6px;
  background: #f5f5f5;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8125rem;
}
.legal-doc__formula {
  max-width: 100%;
  margin-bottom: 25px;
  padding: 16px 20px;
  overflow-x: auto;
  background: #f5f5f5;
  border-left: 3px solid #eeeeee;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
}
.legal-doc__related {
  margin-top: 40px;
  padding: 24px 0 0;
  border-top: 1px solid #eeeeee;
}
.legal-doc__related-title {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #757575;
}
.legal-doc__related-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.legal-doc__related-list li {
  margin: 0 24px 10px 0;
}
.legal-doc__related-list a {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: #a42957;
  transition: opacity 0.2s ease;
}
.legal-doc__related-list a:hover {
  opacity: 0.75;
}
.legal-doc__related-list a .material-icons {
  font-size: 16px;
  margin-right: 6px;
  color: #757575;
}
/* --------------------------------------------------------------------------
   position: sticky не работает, если у любого предка overflow отличен от
   visible. В container.less у `.site-container` стоит overflow: hidden —
   внутри раздела снимаем. Файл подключается только юридическими страницами,
   на остальные 65 страниц это не влияет.

   Проверено: горизонтального переполнения после снятия не возникает ни на
   одной из 16 страниц.
   -------------------------------------------------------------------------- */
.site-container {
  overflow: visible;
}
/* У `body` в проекте стоит `overflow-x: hidden` — оно тоже отключает sticky,
   потому что делает body скролл-контейнером. `clip` обрезает ровно так же,
   но контейнера прокрутки не создаёт. Браузер без поддержки `clip` просто
   отбросит это правило и останется на прежнем `hidden`: липкости не будет,
   вёрстка не пострадает. */
body {
  overflow-x: clip;
}
/* ==========================================================================
   Индексная страница /legal/
   ========================================================================== */
/* Master Service Agreement — единственный обязывающий документ,
   поэтому отдельным широким блоком и в брендовом градиенте */
.legal-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 48px;
  padding: 32px 36px;
  /* Тёмная плашка вместо красной: тот же градиент, что у футера.
     Красный остаётся акцентом на кнопке, а не заливкой в пол-экрана. */
  background: linear-gradient(90deg, #263238 0%, #37474f 100%);
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.1);
  /* inline-flex + фиксированная высота: у inline-block прописная строка
     с трекингом садилась выше центра плашки */
}
@media (max-width: 600px) {
  .legal-primary {
    padding: 24px 20px;
  }
}
.legal-primary__icon {
  flex: 0 0 auto;
  margin-right: 28px;
}
.legal-primary__icon .material-icons {
  font-size: 48px;
  color: #ffffff;
  opacity: 0.9;
}
@media (max-width: 600px) {
  .legal-primary__icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
}
.legal-primary__body {
  flex: 1 1 320px;
}
.legal-primary__badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-bottom: 10px;
  padding: 0 10px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-primary__title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 110%;
  color: #ffffff;
}
.legal-primary__desc {
  max-width: 70ch;
  margin: 0 !important;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.legal-primary__action {
  flex: 0 0 auto;
  margin-left: 32px;
}
@media (max-width: 768px) {
  .legal-primary__action {
    width: 100%;
    margin-left: 0;
    margin-top: 24px;
  }
}
/* Группа категории.

   Сетка проекта построена на float, поэтому соседние карточки в ряду
   получают разную высоту. Переводим только этот ряд во flex: колонки
   уже имеют процентную ширину, а float внутри flex-контейнера
   игнорируется, так что раскладка не меняется — выравниваются высоты. */
.legal-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 16px;
  width: 100%;
}
.legal-group__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 125%;
}
/* container.less задаёт `.site-container .row { margin-bottom: 0 }`
   со специфичностью 0-2-0, одного класса не хватает — повторяем её. */
.site-container .legal-group {
  margin-bottom: 40px;
}
/* Карточка документа */
.legal-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 20px 20px 20px 24px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* Цветная полоса категории слева */
}
.legal-card:before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  background: #757575;
  transition: width 0.2s ease;
}
.legal-card:hover {
  border-color: transparent;
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.1);
}
.legal-card:hover:before {
  width: 6px;
}
.legal-card:hover .legal-card__arrow {
  transform: translateX(4px);
}
.legal-card__icon {
  flex: 0 0 auto;
  margin-right: 16px;
}
.legal-card__icon .material-icons {
  font-size: 24px;
  color: #757575;
}
.legal-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.legal-card__title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: #212121;
}
.legal-card__desc {
  margin: 0 !important;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #616161;
}
.legal-card__arrow {
  flex: 0 0 auto;
  margin-left: 12px;
  transition: transform 0.2s ease;
}
.legal-card__arrow .material-icons {
  font-size: 18px;
  color: #e0e0e0;
}
/* Акцент категории: одна строка на категорию, цвета — существующие токены */
.legal-card--agreements:before {
  background: #a42957;
}
.legal-card--agreements .legal-card__icon .material-icons {
  color: #a42957;
}
.legal-card--service:before {
  background: #00695c;
}
.legal-card--service .legal-card__icon .material-icons {
  color: #00695c;
}
.legal-card--privacy:before {
  background: #3f51b5;
}
.legal-card--privacy .legal-card__icon .material-icons {
  color: #3f51b5;
}
.legal-card--compliance:before {
  background: #0097a7;
}
.legal-card--compliance .legal-card__icon .material-icons {
  color: #0097a7;
}
.legal-card--mobile:before {
  background: #757575;
}
.legal-card--mobile .legal-card__icon .material-icons {
  color: #757575;
}
/* Куда писать по какому вопросу */
.legal-contacts {
  margin-top: 24px;
  padding-top: 32px;
  border-top: 1px solid #eeeeee;
}
.legal-contacts__title {
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 125%;
}
.legal-contacts__table a {
  color: #a42957;
}
.legal-contacts__table a:hover {
  text-decoration: underline;
}
/* ==========================================================================
   Печать — юридические документы сохраняют в PDF чаще, чем кажется
   ========================================================================== */
@media print {
  .hsy-header,
  .hsy-footer,
  .site-title-breadcrumbs,
  .site-background,
  .legal-doc__toc,
  .legal-doc__aside {
    display: none !important;
  }
  .site-container {
    padding-left: 0 !important;
  }
  .card,
  .card.autoheight {
    box-shadow: none !important;
    border: 0 !important;
  }
  .card-flowtext {
    padding: 0 !important;
  }
  .legal-doc__section-title,
  .legal-doc__subtitle {
    page-break-after: avoid;
  }
  .legal-doc__table,
  .legal-doc__formula {
    page-break-inside: avoid;
  }
  .legal-doc__notice {
    border-left: 2px solid #757575;
    background: none;
  }
}

/* ==========================================================================
   HT-2724 — состояния для документов, которых ещё нет в 06.001_INXY_ACCOUNT.
   В исходном PUG_LESS-дизайне их не было: там сразу все 15 документов
   существуют. Здесь на первом этапе есть только DMCA, остальные карточки
   каталога либо ведут на старые страницы (msa -> /terms/, privacy -> /privacy/,
   dpa -> /gdpr/, cookie -> /cookie/, eula -> /eula/, app-privacy -> /app-privacy/,
   согласно docs/legal/_index.md), либо показываются неактивными до того,
   как появятся собственные страницы.
   ========================================================================== */
.legal-card--disabled {
  cursor: default;
  opacity: 0.55;
}
.legal-card--disabled:before {
  transition: none;
}
.legal-card--disabled:hover {
  border-color: #eeeeee;
  box-shadow: none;
}
.legal-card--disabled:hover:before {
  width: 3px;
}
.legal-card__soon {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 12px;
  padding: 3px 8px;
  background: #f5f5f5;
  color: #757575;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legal-doc__related-list .is-soon {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: #9e9e9e;
  cursor: default;
}
.legal-doc__related-list .is-soon .material-icons {
  font-size: 16px;
  margin-right: 6px;
  color: #bdbdbd;
}