/* web/static/css/doc.css
   Публичная страница документа /d/{ключ}/{документ}. Без site.css (Meta.Bare = true). Белый лонгрид:
   заголовки — Unbounded, текст — Onest, тег редакции — фирменный лайм.
   служебное — Onest. Ширина строки ~70 знаков, номера разделов и пунктов вынесены на поля. */
@font-face { font-family: Onest; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/onest-400.woff2) format("woff2"); }
@font-face { font-family: Onest; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-500.woff2) format("woff2"); }
@font-face { font-family: Onest; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-600.woff2) format("woff2"); }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/unbounded-400.woff2) format("woff2"); }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/unbounded-500.woff2) format("woff2"); }

:root {
  --paper: #fff;
  --ink: #17181A;
  --text: #2A2C30;
  --soft: #6B6E75;
  --faint: #A4A7AD;
  --rule: #ECEDEF;
  --wash: #F4F5F6;
  --lime: #D8F26A;
  --lime-ink: #3F4D0A;
  --ok: #8DB021;
  --mark: #B4521E;
  --display: Unbounded, Onest, system-ui, sans-serif;
  --sans: Onest, -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --measure: 42rem;
  --gutter: 5.5rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--text);
  font: 400 1.0625rem/1.7 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, table { margin: 0; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .15s; }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--lime); color: var(--ink); }

/* полоска прочитанного — без JS, где браузер умеет scroll-timeline */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; position: fixed; inset: 0 0 auto; z-index: 5; height: 3px; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); animation: read linear both; animation-timeline: scroll(root); }
  @keyframes read { to { transform: scaleX(1); } }
}

/* верх: чей документ */
.top { display: flex; align-items: center; gap: 16px; max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 22px 24px; font: 400 14px/1.3 var(--sans); color: var(--soft); }
.top__org { color: var(--ink); font-weight: 500; }
.top__back { margin-left: auto; text-decoration: none; white-space: nowrap; }
.top__back:hover { color: var(--ink); }

.paper { max-width: calc(var(--measure) + 2 * 24px); margin: 0 auto; padding: 0 24px 64px; }

/* заголовок */
.title { padding: clamp(40px, 9vw, 96px) 0 clamp(32px, 5vw, 48px); }
.title__h {
  color: var(--ink); font: 500 clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem)/1.14 var(--display);
  letter-spacing: -0.03em; text-wrap: balance; hyphens: manual;
}
.title__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; font: 400 14px/1.3 var(--sans); color: var(--soft); }
.tag {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--lime); color: var(--ink); font: 500 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tag--old { background: var(--wash); color: var(--soft); }
.tag--old::before { background: var(--faint); }
.tag svg { margin-right: -2px; color: currentColor; transition: transform .15s; }
.old { margin-top: 16px; font: 400 14.5px/1.45 var(--sans); color: var(--mark); }

/* список редакций — выпадает из тега */
.ver { position: relative; }
.ver > summary { list-style: none; cursor: pointer; user-select: none; }
.ver > summary::-webkit-details-marker { display: none; }
.ver > summary:hover { filter: brightness(.96); }
.ver[open] > summary svg { transform: rotate(180deg); }
.ver__menu {
  position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 320px; overflow: auto; padding: 6px;
  border: 1px solid var(--rule); border-radius: 14px; background: #fff; box-shadow: 0 16px 40px -16px rgba(23, 24, 26, .28);
}
.ver__row { display: flex; gap: 16px; padding: 9px 10px; border-radius: 8px; font: 400 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.ver__row:hover { background: var(--wash); }
.ver__row--on { font-weight: 500; }
.ver__row--on { background: var(--wash); }
.ver__date { margin-left: auto; color: var(--soft); font-variant-numeric: tabular-nums; }

/* оглавление */
.toc { margin-bottom: clamp(32px, 5vw, 56px); padding: 0 20px; border-radius: 16px; background: var(--wash); font-family: var(--sans); }
.toc summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; list-style: none; cursor: pointer; color: var(--ink); font: 500 15px/1.3 var(--display); letter-spacing: -0.01em; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: '+'; color: var(--soft); font-size: 20px; font-weight: 400; line-height: 1; }
.toc details[open] summary::after { content: '−'; }
.toc__list { padding: 0 0 20px; list-style: none; columns: 2 18rem; column-gap: 32px; }
.toc__list li { break-inside: avoid; }
.toc__list a { display: flex; gap: 10px; padding: 5px 0; color: var(--text); font-size: 14.5px; line-height: 1.4; text-decoration: none; }
.toc__list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); }
.toc .n { flex: none; min-width: 1.4em; color: var(--faint); font-variant-numeric: tabular-nums; }

/* текст */
.prose { overflow-wrap: break-word; hyphens: auto; }
.prose > * + * { margin-top: 1.05em; }
.prose p { text-wrap: pretty; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose h2 {
  position: relative; margin-top: 2.4em; color: var(--ink);
  font: 500 1.375rem/1.3 var(--display); letter-spacing: -0.02em; text-wrap: balance;
}
.prose > h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: 0.85em; }
.prose h3 { position: relative; margin-top: 1.8em; color: var(--ink); font: 600 1.0625rem/1.45 var(--sans); }
.prose h3 + * { margin-top: 0.5em; }
.prose h2 .n, .prose h3 .n { margin-right: 0.45em; color: var(--faint); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }

/* номера пунктов: 1.1., 3.2. */
.prose .cl { position: relative; }
.prose .cl .n { margin-right: 0.4em; color: var(--soft); font: 500 0.82em/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: -1.1em; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.prose ol > li::marker { color: var(--soft); font: 500 0.85em var(--sans); }
.prose li + li { margin-top: 0.35em; }
.prose li > p + p { margin-top: 0.5em; }

.prose blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid var(--lime); color: var(--ink); }
.prose hr { margin: 2.6em auto; width: 72px; border: 0; border-top: 1px solid var(--rule); }
.prose code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--wash); font: 0.82em var(--mono); }

/* таблицы: реквизиты оператора, цели — подписи гротеском, значения текстом */
.prose table { width: 100%; margin-top: 1.4em; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 0.97rem; line-height: 1.5; }
.prose th, .prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { color: var(--soft); font: 500 13.5px/1.4 var(--sans); }
.prose td:first-child:not(:only-child) { width: 38%; color: var(--soft); font: 400 14.5px/1.5 var(--sans); }
.prose td:last-child { padding-right: 0; }

/* конец */
.end { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--soft); font: 400 13.5px/1.55 var(--sans); }
.end__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; }
.hash { font: 12.5px/1 var(--mono); color: var(--text); }

/* широкий экран: номера уходят на поля */
@media (min-width: 1000px) {
  .prose h2 .n, .prose h3 .n, .prose .cl .n {
    position: absolute; right: calc(100% + 1.1rem); margin: 0; text-align: right; white-space: nowrap;
  }
  /* line-height пересчитан под размер номера, чтобы базовая линия совпала с первой строкой */
  .prose h2 .n { top: 0; }
  .prose h3 .n { top: 0; font: 500 0.82em/1.77 var(--sans); }
  .prose .cl .n { top: 0; line-height: 2.07; }
  .toc .n { min-width: 1.6em; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; line-height: 1.65; }
  .top { padding: 16px 18px; }
  .top__org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .paper { padding: 0 18px 48px; }
  .prose h2 { font-size: 1.1875rem; margin-top: 2.2em; }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { display: none; }
  .prose tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .prose td { padding: 0; border: 0; }
  .prose td:first-child:not(:only-child) { width: auto; margin-bottom: 2px; font-size: 13.5px; }
  .ver__menu { left: auto; right: 0; }
}

@media print {
  @page { margin: 22mm 20mm; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .progress, .top__back, .toc, .ver__menu, .tag svg, .end__row a[onclick] { display: none !important; }
  .top, .paper { max-width: none; padding-left: 0; padding-right: 0; }
  .title { padding-top: 8mm; }
  .title__h { font-size: 24pt; }
  .prose h2 { break-after: avoid; font-size: 14pt; }
  .prose h3 { break-after: avoid; }
  .prose p, .prose li, .prose tr { orphans: 3; widows: 3; break-inside: avoid; }
  .prose .n { position: static !important; margin-right: 0.4em !important; }
  a { text-decoration: none; }
}

/* /log — журнал отпечатков */
.prose pre.note { overflow-x: auto; padding: 16px 18px; border-radius: 12px; background: var(--wash); font: 13px/1.6 var(--mono); color: var(--ink); white-space: pre; }
.prose code { overflow-wrap: anywhere; }

/* /legal — список документов consents */
.legal { display: grid; gap: 10px; }
.legal__item { display: block; padding: 18px 20px; border-radius: 16px; background: var(--wash); color: var(--ink); text-decoration: none; transition: background .15s; }
.legal__item:hover { background: #ECEDEF; }
.legal__item b { display: block; font: 500 17px/1.3 var(--display); letter-spacing: -0.01em; }
.legal__item span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--soft); }
.end__row a + a { margin-left: 0; }