/* Документы Octopussy: список и страницы юридических документов.

   Страницы лежат в public/ и не проходят сборку Vite, поэтому ни src/tokens.css,
   ни src/web.css сюда не подключаются. Ниже — зеркало нужных токенов (имена и
   значения один в один с src/tokens.css) и копия шапки и подвала лендинга
   из src/web.css. Правите токены или шапку там — обновите и здесь. */

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Зеркало src/tokens.css */
  --o-bg: #241041;
  --o-bg-deep: #1a0b31;
  --o-surface: rgba(154, 94, 208, 0.12);
  --o-surface-hover: rgba(154, 94, 208, 0.18);
  --o-surface-strong: rgba(154, 94, 208, 0.22);
  --o-border: rgba(201, 160, 238, 0.52);
  --o-border-soft: rgba(201, 160, 238, 0.26);
  --o-border-strong: rgba(215, 140, 242, 0.72);
  --o-text: #ffffff;
  --o-text-muted: rgba(233, 219, 245, 0.76);
  --o-text-dim: rgba(233, 219, 245, 0.62);
  --o-accent: #b52ccc;
  --o-accent-hover: #bc33d3;
  --o-accent-pressed: #9f22b4;
  --o-accent-soft: #d9a6f0;
  --o-focus: #ffd6ff;
  --o-success: #5fe0a0;
  --o-success-bg: rgba(95, 224, 160, 0.12);
  --o-radius-md: 16px;
  --o-radius-lg: 20px;
  --o-radius-pill: 999px;
  --o-space-1: 4px;
  --o-space-2: 8px;
  --o-space-3: 12px;
  --o-space-4: 16px;
  --o-space-5: 20px;
  --o-space-6: 24px;
  --o-space-7: 32px;
  --o-space-8: 40px;
  --o-space-9: 56px;
  --o-font: "Manrope Variable", Manrope, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --o-fs-xs: 12px;
  --o-fs-sm: 13px;
  --o-fs-body: 15px;
  --o-fs-md: 16px;
  --o-fs-lg: 18px;
  --o-fs-h3: 20px;
  --o-fs-h2: clamp(24px, 4.2vw, 32px);
  --o-fs-h1: clamp(30px, 6vw, 48px);
  --o-lh-tight: 1.15;
  --o-lh-snug: 1.3;
  --o-lh-body: 1.5;
  --o-fw-regular: 500;
  --o-fw-medium: 600;
  --o-fw-bold: 700;
  --o-tap: 44px;
  --o-control-h: 48px;
  --o-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --o-dur-fast: 150ms;
  --o-dur: 240ms;
  --o-page-max: 1200px;

  /* Та же сетка, что у лендинга (src/web.css). */
  --gutter: clamp(var(--o-space-5), 8.333vw, 160px);
  --page: calc(var(--o-page-max) + 2 * var(--gutter));
  /* Колонка чтения: ~70 знаков в строке при кегле 16px. */
  --measure: 68ch;
}

@media (max-width: 640px) {
  :root { --gutter: var(--o-space-6); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --o-dur-fast: 0ms; --o-dur: 0ms; }
  html { scroll-behavior: auto; }
}

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

html {
  scroll-behavior: smooth;
  /* Фон на html: у body без min-height радиальный градиент повторялся полосой
     под подвалом на коротких страницах. */
  background: var(--o-bg-deep);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--o-text);
  background:
    radial-gradient(760px 520px at 78% 0%, rgba(154, 60, 190, 0.34), transparent 62%),
    linear-gradient(180deg, var(--o-bg) 0%, var(--o-bg-deep) 100%) no-repeat;
  font-family: var(--o-font);
  font-size: var(--o-fs-md);
  font-weight: var(--o-fw-regular);
  line-height: var(--o-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Выгрузка из LibreOffice задаёт a:link синим (#0563c1) — из-за этого логотип,
   меню и переключатель документов были синими и подчёркнутыми. */
body a:link,
body a:visited { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--o-focus);
  outline-offset: 3px;
}

/* ── Шапка: копия .site-header из src/web.css ─────────────────────────────── */

.site-header {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--o-space-6) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--o-space-7);
}

.documents-brand,
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--o-space-3);
  min-width: 0;
  max-width: 100%;
  color: var(--o-text);
  font-size: var(--o-fs-h3);
  font-weight: var(--o-fw-bold);
  text-decoration: none !important;
}

.documents-brand span,
.site-header .brand span { text-decoration: none !important; }

.documents-brand img,
.site-header .brand img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  flex: 0 0 34px;
  display: block;
  object-fit: contain;
}

.site-nav {
  display: flex;
  gap: var(--o-space-7);
  margin-inline: auto;
}

.site-nav a {
  color: var(--o-text-muted) !important;
  text-decoration: none;
  font-size: var(--o-fs-body);
  font-weight: var(--o-fw-medium);
  transition: color var(--o-dur-fast) var(--o-ease), background-color var(--o-dur-fast) var(--o-ease);
}

.site-nav a:hover { color: var(--o-text) !important; }

.header-actions {
  display: flex;
  gap: var(--o-space-3);
  flex-shrink: 0;
}

/* ── Кнопки: копия .btn из src/web.css ────────────────────────────────────── */

.btn,
.document-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--o-control-h);
  padding: 0 var(--o-space-6);
  border: 1px solid var(--o-border-strong);
  border-radius: var(--o-radius-md);
  background: transparent;
  color: #fff !important;
  font: inherit;
  font-size: var(--o-fs-md);
  font-weight: var(--o-fw-medium);
  line-height: var(--o-lh-snug);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--o-dur-fast) var(--o-ease),
    border-color var(--o-dur-fast) var(--o-ease);
}

.btn:hover,
.document-action:hover { background: var(--o-surface-hover); }

.document-action:visited,
.document-action:hover { color: #fff !important; text-decoration: none !important; }

.document-action--primary {
  border-color: var(--o-accent);
  background: var(--o-accent);
}

.document-action--primary:hover { border-color: var(--o-accent-hover); background: var(--o-accent-hover); }

.document-action--accept.is-accepted {
  border-color: var(--o-success);
  background: var(--o-success-bg);
}

.document-action:disabled { cursor: progress; opacity: 0.72; }

/* Короткая подпись кнопки в шапке — только на телефоне, как на лендинге. */
.btn-label-short { display: none; }

@media (max-width: 480px) {
  .btn-label-full { display: none; }
  .btn-label-short { display: inline; }
}

/* ── Содержимое ───────────────────────────────────────────────────────────── */

.documents-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--o-space-7) var(--gutter) var(--o-space-9);
}

/* Возврат назад — первая строка страницы, на той же рельсе, что логотип. */
.documents-close {
  display: inline-flex;
  align-items: center;
  gap: var(--o-space-2);
  min-height: var(--o-tap);
  margin: 0 0 var(--o-space-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--o-text-muted);
  font: inherit;
  font-size: var(--o-fs-body);
  font-weight: var(--o-fw-medium);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--o-dur-fast) var(--o-ease);
}

.documents-close:hover { color: var(--o-text); }

.documents-kicker {
  margin: 0 0 var(--o-space-3);
  color: var(--o-accent-soft);
  font-size: var(--o-fs-body);
  font-weight: var(--o-fw-medium);
}

.documents-title {
  max-width: var(--measure);
  margin: 0 0 var(--o-space-6);
  font-size: var(--o-fs-h1);
  font-weight: var(--o-fw-bold);
  line-height: var(--o-lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.documents-title:has(+ .documents-lead) { margin-bottom: var(--o-space-3); }

.documents-lead {
  max-width: 60ch;
  margin: 0 0 var(--o-space-7);
  color: var(--o-text-muted);
  font-size: var(--o-fs-lg);
}

/* Список документов — карточки лендинга: скругление 20px, заливка, контур. */
.document-grid {
  display: grid;
  gap: var(--o-space-3);
  max-width: 880px;
}

.document-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--o-space-5);
  padding: var(--o-space-5) var(--o-space-6);
  border: 1px solid var(--o-border);
  border-radius: var(--o-radius-lg);
  background: var(--o-surface);
  text-decoration: none;
  transition:
    background-color var(--o-dur) var(--o-ease),
    border-color var(--o-dur) var(--o-ease),
    transform var(--o-dur) var(--o-ease);
}

.document-card:hover {
  border-color: var(--o-border-strong);
  background: var(--o-surface-hover);
  transform: translateY(-2px);
}

.document-card h2 {
  margin: 0 0 var(--o-space-1);
  font-size: var(--o-fs-h3);
  line-height: var(--o-lh-snug);
}

.document-card p {
  margin: 0;
  color: var(--o-text-dim);
  font-size: var(--o-fs-body);
}

.document-card__arrow {
  color: var(--o-accent-soft);
  font-size: var(--o-fs-h3);
  transition: transform var(--o-dur) var(--o-ease);
}

.document-card:hover .document-card__arrow { transform: translateX(4px); }

/* Переключатель документов — ряд вкладок-«таблеток». */
.document-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-space-2);
  margin: 0 0 var(--o-space-4);
}

.document-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: var(--o-tap);
  padding: 0 var(--o-space-4);
  border: 1px solid var(--o-border-soft);
  border-radius: var(--o-radius-pill);
  color: var(--o-text-muted) !important;
  font-size: var(--o-fs-sm);
  font-weight: var(--o-fw-medium);
  line-height: var(--o-lh-snug);
  text-decoration: none;
  transition: color var(--o-dur-fast) var(--o-ease), border-color var(--o-dur-fast) var(--o-ease);
}

.document-switcher a:hover { border-color: var(--o-border-strong); color: var(--o-text) !important; }

.document-switcher a[aria-current='page'] {
  border-color: var(--o-border-strong);
  background: var(--o-surface-strong);
  color: var(--o-text) !important;
}

.document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-space-3);
  margin: 0 0 var(--o-space-8);
}

.document-actions--bottom {
  margin: var(--o-space-8) 0 0;
  padding-top: var(--o-space-7);
  border-top: 1px solid var(--o-border-soft);
}

/* ── Текст документа (выгрузка LibreOffice) ────────────────────────────────── */

/* Выгрузка задаёт кегль 11pt, межстрочный 109–115%, отступы в дюймах, серый
   #555555 (2.3:1 на тёмном фоне) и выключку по ширине. Всё это переписано:
   колонка ~70 знаков, интерлиньяж 1.5, абзацы и заголовки на шкале 4px. */
.legal-content {
  max-width: var(--measure);
  color: var(--o-text-muted);
  font-size: var(--o-fs-md);
  overflow-wrap: break-word;
}

.legal-content p {
  max-width: none;
  margin: 0 0 var(--o-space-3) !important;
  line-height: var(--o-lh-body) !important;
  text-align: left;
}

.legal-content p[align='center'] { text-align: center; }

.legal-content font,
.legal-content span {
  font-size: inherit !important;
  color: inherit !important;
}

.legal-content b,
.legal-content strong { color: var(--o-text); font-weight: var(--o-fw-bold); }

.legal-content h1,
.legal-content h2 {
  margin: var(--o-space-8) 0 var(--o-space-3) !important;
  color: var(--o-text);
  font-size: var(--o-fs-lg);
  font-weight: var(--o-fw-bold);
  line-height: var(--o-lh-snug);
  letter-spacing: 0;
}

body .legal-content a:link,
body .legal-content a:visited {
  color: var(--o-accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Подвал: копия .site-footer из src/web.css ────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--o-border-soft);
}

.footer-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--o-space-7) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--o-space-4) var(--o-space-6);
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--o-space-3);
  font-weight: var(--o-fw-bold);
}

.footer-brand img { display: block; width: 30px; height: 30px; object-fit: contain; }

.footer-links {
  display: flex;
  gap: var(--o-space-2) var(--o-space-5);
  margin-inline: auto;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--o-text-muted) !important;
  text-decoration: none;
  font-size: var(--o-fs-sm);
  transition: color var(--o-dur-fast) var(--o-ease);
}

.footer-links a:hover,
.footer-links a[aria-current='page'] { color: var(--o-text) !important; }

.footer-note {
  margin: 0;
  color: var(--o-text-dim);
  font-size: var(--o-fs-sm);
}

/* ── Адаптив: те же пороги, что у лендинга ────────────────────────────────── */

@media (max-width: 1100px) {
  .site-header { flex-wrap: wrap; row-gap: var(--o-space-3); }
  .header-actions { margin-left: auto; }

  .site-nav {
    order: 3;
    width: calc(100% + var(--o-space-3));
    margin-inline: calc(var(--o-space-3) * -1) 0;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0 calc(100% - var(--o-space-6)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 calc(100% - var(--o-space-6)), transparent 100%);
  }

  .site-nav::-webkit-scrollbar { display: none; }

  .site-nav a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: var(--o-tap);
    padding-inline: var(--o-space-3);
    border-radius: var(--o-radius-md);
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { margin-inline: 0; flex-direction: column; row-gap: 0; }
  .footer-links a { display: inline-flex; align-items: center; min-height: var(--o-tap); }
}

@media (max-width: 640px) {
  .documents-shell { padding-top: var(--o-space-5); }

  /* Три вкладки стопкой занимали пол-экрана — на телефоне это лента. */
  .document-switcher {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .document-switcher::-webkit-scrollbar { display: none; }
  .document-switcher a { flex-shrink: 0; white-space: nowrap; }
  .document-actions .document-action { width: 100%; white-space: normal; text-align: center; }
  .document-card { padding: var(--o-space-4) var(--o-space-5); }
}

@media (max-width: 480px) {
  .site-header { column-gap: var(--o-space-3); padding-block: var(--o-space-3); }
  .site-nav a { padding-inline: var(--o-space-2); }
  .site-nav { width: calc(100% + var(--o-space-2)); margin-inline: calc(var(--o-space-2) * -1) 0; }
  .header-actions .btn { padding-inline: var(--o-space-4); }
  .legal-content { font-size: var(--o-fs-body); }
  /* «конфиденциальности» кеглем 30px шире колонки 272px на 320px — h1 берёт
     нижнюю ступень шкалы, h2. */
  .documents-title { font-size: var(--o-fs-h2); }
}

/* Расширенная навигация: ссылки переносятся в одну отдельную строку. */
.site-header { flex-wrap: wrap; column-gap: 24px; row-gap: 14px; }
.site-header .site-nav { order: 3; width: 100%; margin: 0; gap: 12px 22px; flex-wrap: wrap; }
.site-header .header-actions { margin-left: auto; }
.site-header .site-nav a { white-space: nowrap; }
@media(max-width:700px) { .site-header .site-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } }

/* Как в src/web.css: на широких экранах разделы идут одной строкой между логотипом и кнопкой. */
@media (min-width: 1360px) {
  .site-header { flex-wrap: nowrap; max-width: min(1400px, 100%); gap: var(--o-space-5); padding-inline: 32px; }
  .site-header .brand { flex: none; }
  .site-header .site-nav { order: 0; width: auto; margin-inline: auto; flex-wrap: nowrap; gap: 18px; }
  .site-header .site-nav a { font-size: 15px; }
  .site-header .header-actions { margin-left: 0; }
}

@media (min-width: 701px) and (max-width: 1359px) {
  .site-header:has(.site-nav a:nth-child(5)) { row-gap: 8px; }
  .site-header:has(.site-nav a:nth-child(5)) .site-nav { gap: 6px 16px; }
  .site-header:has(.site-nav a:nth-child(5)) .site-nav {
    width: 100%;
    margin-inline: 0;
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .site-header:has(.site-nav a:nth-child(5)) .site-nav a { font-size: 14px; min-height: 32px; padding-inline: 0; }
}