/* ==========================================================================
   Юридические страницы (соглашение, политика) — язык сайта и «Read-шасси» (третий вариант, 2026-10-09).
   Шапка по краям экрана; рейка оглавления + колонка 40rem как пара по центру на ≥1180;
   на телефоне — раскрывашка «Содержание» под датой. Всё внутри слева. Текст документов не менялся.
   Светлая тема — «Сумерки» (подключён light.css), цвета только из токенов.
   ========================================================================== */

body.legal { min-height: 100dvh; background: var(--bg); }
body.legal::before {
  content: ''; position: fixed; inset: 0 0 auto; height: 60vh; pointer-events: none; z-index: 0;
  background: radial-gradient(80% 100% at 50% -30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

/* --- Шапка ---------------------------------------------------------------- */
.legal-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  transition: box-shadow var(--dur-2) var(--ease);
}
.legal-bar.is-stuck { box-shadow: inset 0 -1px 0 var(--line); }
@media (prefers-reduced-transparency: reduce) {
  .legal-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-height: 500px) { .legal-bar { position: static; } }
.legal-bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  height: 64px; padding-inline: var(--gutter-wide); /* как шапка сайта: надпись у левого края, кнопка у правого */
}
@media (max-width: 899px) { .legal-bar-in { padding-inline: var(--gutter); } }
.legal-logo { display: flex; align-items: center; min-height: 44px; border-radius: var(--r-sm); }
.legal-logo:focus-visible { outline: none; }
.legal-logo:focus-visible .legal-word { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.legal-word {
  display: block; width: 212px; aspect-ratio: 642 / 127;
  background: url('../img/logo-word-light.png?v=1') center / contain no-repeat;
  transform: translate(-14px, 20.5%); /* как в шапке сайта: середина букв на середине строки, луч ниже */
}
:root[data-theme='dark'] .legal-word { background-image: url('../img/logo-word-dark.png?v=1'); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .legal-word { background-image: url('../img/logo-word-dark.png?v=1'); } }
@media (max-width: 860px) { .legal-word { width: 150px; transform: translate(-1.56%, 20.5%); } }
@media (max-width: 360px) { .legal-word { width: 112px; } }
@media (max-width: 860px) { :root:not([data-theme='light']) .legal-word { filter: brightness(1.5) contrast(1.05); } }

/* Плашки-кнопки документа: контур ≥3:1 на любом фоне, наведение видно, нажатие — scale .98 */
.legal-pill, .legal-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding-inline: 1rem; white-space: nowrap;
  border-radius: var(--r-pill); color: var(--ink); font-size: var(--t-sm); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--ink-3);
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform 80ms var(--ease);
}
.legal-pill:hover, .legal-back:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--ink); }
.legal-pill:active, .legal-back:active { transform: scale(0.98); }
.legal-i { flex-shrink: 0; }

/* --- Шасси: рейка + колонка ----------------------------------------------- */
.legal-layout { position: relative; z-index: 1; max-width: calc(40rem + 2 * var(--gutter)); margin-inline: auto; }
.legal-rail { display: none; }
.legal-doc { padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem); }

@media (min-width: 1180px) {
  .legal-layout {
    display: grid; grid-template-columns: 14rem minmax(0, 40rem);
    column-gap: clamp(2.5rem, 4vw, 4.5rem); justify-content: center;
    max-width: none; padding-inline: var(--gutter);
  }
  .legal-doc { padding-inline: 0; }
  .legal-rail {
    display: block; position: sticky; top: 88px; align-self: start;
    margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); max-height: calc(100dvh - 104px); overflow: auto;
  }
  .legal-toc { display: none; }
}
.legal-rail-h { margin-bottom: var(--s-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.legal-rail ol { display: grid; gap: 2px; box-shadow: inset 2px 0 0 var(--line); }
.legal-rail a {
  display: block; padding: 6px 12px; font-size: var(--t-sm); line-height: 1.35; color: var(--ink-3);
  box-shadow: inset 2px 0 0 transparent; transition: color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.legal-rail a:hover { color: var(--ink); }
.legal-rail a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); }

/* Оглавление на телефоне — раскрывашка под датой */
.legal-toc { margin-top: var(--s-5); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); }
.legal-toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 48px; padding-inline: var(--s-4); cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after {
  content: ''; width: 9px; height: 9px; margin-right: 3px; flex-shrink: 0;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease);
}
.legal-toc[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.legal-toc ol { padding: 0 var(--s-2) var(--s-2); }
.legal-toc a { display: flex; align-items: center; min-height: 44px; padding-inline: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); border-radius: var(--r-sm); }
.legal-toc a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
@supports selector(::details-content) {
  .legal-toc { interpolate-size: allow-keywords; }
  .legal-toc::details-content { height: 0; overflow: clip; transition: height 0.25s var(--ease), content-visibility 0.25s allow-discrete; }
  .legal-toc[open]::details-content { height: auto; }
}

/* --- Текст ------------------------------------------------------------------ */
/* Заголовок: размер по ширине экрана — «конфиденциальности» целиком (было: 24 px минимум и разрыв посреди слова) */
.legal-doc h1 {
  font-family: var(--font-display); font-size: clamp(1.2rem, 6.8vw - 0.2rem, 2.6rem); font-weight: 600;
  line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance;
}
.legal-doc .date { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--t-sm); }
.legal-doc h2 {
  margin: clamp(2rem, 1.6rem + 1.4vw, 2.75rem) 0 var(--s-3); scroll-margin-top: 84px;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.016em; text-wrap: balance; color: var(--ink);
}
.legal-doc p, .legal-doc li { color: var(--ink-2); font-size: var(--t-base); line-height: 1.65; }
.legal-doc p { margin-bottom: var(--s-3); text-wrap: pretty; }
.legal-doc ul { margin: 0 0 var(--s-3); padding-left: 1.25rem; list-style: disc; }
.legal-doc li { text-wrap: pretty; margin-bottom: var(--s-2); }
.legal-doc li::marker { color: var(--ink-3); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc .nb { white-space: nowrap; }
/* Ссылки в тексте: подчёркивание ink-3 (≥4.5:1), толще; при наведении — цвет текста */
.legal-doc :is(p, li) a {
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--ink-3); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.legal-doc :is(p, li) a:hover { text-decoration-color: currentColor; }
@media (max-width: 540px) { .legal-doc li { text-wrap: pretty; } }

/* --- Низ документа: вопрос слева, «Наверх» справа ---------------------------- */
.legal-end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: var(--s-5); box-shadow: inset 0 1px 0 var(--line);
}
.legal-end-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.legal-doc .legal-end-q { margin: 0; color: var(--ink); font-weight: 600; }
.legal-also { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: var(--s-4) 0 0; }
.legal-doc .legal-also { margin-bottom: 0; }
.legal-also a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.legal-also a:hover { color: var(--ink); }
@media (max-width: 540px) {
  .legal-end-l { width: 100%; }
  .legal-cta { width: 100%; }
  .legal-up { margin-left: auto; } /* «Наверх» справа в своей строке */
}

/* --- Движение: заголовок, дата, содержание входят по очереди (один набор) --------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes legal-in { from { opacity: 0; transform: translateY(10px); } }
  .legal-doc > h1, .legal-doc > .date, .legal-doc > .legal-toc { animation: legal-in 0.38s var(--ease) both; }
  .legal-doc > .date { animation-delay: 36ms; }
  .legal-doc > .legal-toc { animation-delay: 72ms; }
  /* переход по оглавлению: раздел на миг подсвечивается, цветных надписей нет */
  @keyframes legal-flash { from { background-color: color-mix(in srgb, var(--ink) 10%, transparent); } to { background-color: transparent; } }
  .legal-doc h2:target { animation: legal-flash 1.4s var(--ease); border-radius: var(--r-sm); }
}

@media (min-width: 2200px) { html { font-size: 112.5%; } }

/* --- Печать A4: тёмная тема печатала светлый текст на белом (1.1:1) ---------------- */
@media print {
  html:root, html:root[data-theme] { --bg: #fff; --ink: #000; --ink-2: #222; --ink-3: #444; --line: #bbb; --line-strong: #888; }
  body.legal::before, .legal-bar, .legal-rail, .legal-toc, .legal-end, .legal-also, .skip-link { display: none; }
  .legal-layout { display: block; max-width: none; }
  .legal-doc { max-width: none; padding: 0; }
  .legal-doc a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
  .legal-doc h2 { break-after: avoid; }
}