/* Мелочи, нужные только правовым страницам. Всё остальное — из kreo.css. */

.legal-warn {
    display: block;
    margin-bottom: var(--gap-6);
    padding: 16px 18px;
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    color: var(--text);
    font-size: .9rem;
    line-height: 1.6;
}
.legal-warn code {
    font-family: var(--font-mono);
    font-size: .85em;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--surface-3);
}

/* Незаполненный реквизит не должен выглядеть как обычный текст: иначе его
   не заметят и опубликуют документ с дырой. */
[data-empty] {
    color: var(--warn);
    font-style: normal;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.doc-pre {
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.7;
    white-space: pre-wrap;
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-2);
    overflow-x: auto;
    margin-bottom: var(--gap-3);
}

.doc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
    margin-top: var(--gap-8);
    padding-top: var(--gap-5);
    border-top: 1px solid var(--line);
}
.doc-nav a {
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--text-2);
    transition: color .16s, border-color .16s, background-color .16s;
}
.doc-nav a:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }

/* Оглавление длинного документа. Держится сбоку на широком экране. */
@media (min-width: 1180px) {
    #doc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: var(--gap-8); align-items: start; }
    /* Всё, кроме самого текста и оглавления, идёт во всю ширину. Перечислять
       через «не оглавление и не текст» надёжнее, чем по списку классов:
       предупреждение о незаполненных реквизитах вставляет скрипт, и оно
       иначе занимает колонку текста, а текст уезжает в узкую боковую. */
    #doc > *:not(.doc):not(.doc-toc) { grid-column: 1 / -1; }
    #doc > .doc { grid-column: 1; }
    #doc > .doc-toc { grid-column: 2; }
    .doc-toc { position: sticky; top: 96px; display: grid; gap: 6px; align-content: start; }
    .doc-toc__t { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
    .doc-toc a { font-size: .85rem; color: var(--text-3); line-height: 1.45; padding: 3px 0; transition: color .16s; }
    .doc-toc a:hover, .doc-toc a.is-here { color: var(--text); }
}
@media (max-width: 1179px) { .doc-toc { display: none; } }

/* Форма обращения субъекта. Право отзыва согласия должно быть действием, а не
   абзацем текста: пока его надо оформлять письмом, им не пользуются. */
.pr-form {
    display: grid;
    gap: var(--gap-4);
    padding: clamp(20px, 3vw, 28px);
    margin-bottom: var(--gap-6);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.pr-form .btn { justify-self: start; }

.legal-done {
    padding: 18px 20px;
    margin-bottom: var(--gap-6);
    border: 1px solid var(--ok);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--ok) 10%, transparent);
    color: var(--text);
    font-size: .94rem;
    line-height: 1.6;
}