/* ==========================================================================
   ДОКУМЕНТ  —  /privacy, /terms, /copyright, /advertising и всё, что напишет
   редактор
   --------------------------------------------------------------------------
   Это не страница сайта, а документ, и выглядеть он должен документом:
   титул, номер у каждого раздела, одна колонка текста в постоянную меру и
   оглавление, которое видно всё время, пока читают.

   Прежний облик был страницей с сиянием под заголовком, хлебными крошками и
   текстом во всю ширину экрана: соглашение читалось строками по сто
   пятьдесят знаков, и глаз терял начало следующей.

   Имена все свои (.k-doc*), общего берём только оболочку (.k-sect) и надпись
   над заголовком (.k-page__kick).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ТИТУЛ.
   -------------------------------------------------------------------------- */

.k-doc__title {
    max-width: 30ch;
    padding-bottom: clamp(28px, 4vw, 44px);
    margin-bottom: clamp(32px, 4.5vw, 56px);
    border-bottom: 1px solid var(--kt-line);
}

/* Дата правки стоит над названием, а не подписью под текстом: у документа
   это первое, что проверяют, — действует ли ещё то, что читают. */
.k-doc__title .k-page__kick { margin-bottom: 16px; }
.k-doc__title .k-page__kick time { color: var(--kt-ink); }

.k-doc__h {
    margin: 0;
    font-family: var(--kt-font-display);
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.k-doc__lead {
    max-width: 56ch;
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--kt-muted);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   ДВЕ КОЛОНКИ.
   -------------------------------------------------------------------------- */

/* Ширина ограничена самой мерой текста: колонка в тысячу точек, где текст
   занимает шестьсот, — это не воздух, а пустая половина строки справа.
   968 = 232 колонки + 72 промежутка + 664 меры (68ch у текста). */
.k-doc__cols {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 72px;
    max-width: 968px;
    align-items: start;
}

/* Липкой колонка бывает, только пока помещается в экран: у соглашения на
   двадцать разделов оглавление выше окна, и внутри себя оно листается. */
.k-doc__side {
    position: sticky;
    top: calc(var(--k-bar, 66px) + 24px);
    max-height: calc(100vh - var(--k-bar, 66px) - 48px);
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.k-doc__side::-webkit-scrollbar { width: 6px; }

.k-doc__toclab {
    display: block;
    margin-bottom: 12px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

/*
 * Сколько документа позади.
 *
 * У соглашения на пятнадцать разделов это единственный ответ на «долго ли
 * ещё»: полоса прокрутки браузера считает всю страницу вместе с подвалом и
 * шапкой и обещает конец раньше, чем он наступит.
 */
.k-doc__bar {
    display: block;
    height: 2px;
    margin-bottom: 18px;
    border-radius: 2px;
    background: var(--kt-line);
    overflow: hidden;
}

.k-doc__bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--kt-accent);
    transition: width .12s linear;
}

.k-doc__toc {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: kdoctoc;
}

.k-doc__tocli { position: relative; }

.k-doc__tocli a {
    display: block;
    padding: 6px 0;
    color: var(--kt-muted);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease;
}

.k-doc__tocli a:hover { color: var(--kt-ink); }

/* Текущий раздел держится риской у самого края колонки: подсветка фоном
   здесь была бы вторым прямоугольником рядом с текстом. */
.k-doc__tocli.is-current a { color: var(--kt-ink); }

.k-doc__tocli.is-current::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -14px;
    width: 2px;
    border-radius: 2px;
    background: var(--kt-accent);
}

/* Номер разделу ставим только там, где автор не пронумеровал его сам, —
   иначе в оглавлении встаёт «02  2. Аккаунт». */
.k-doc__toc.is-numbered .k-doc__tocli--h2 a::before {
    counter-increment: kdoctoc;
    content: counter(kdoctoc, decimal-leading-zero) " ";
    margin-right: 8px;
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--kt-line-2);
}

.k-doc__toc.is-numbered .k-doc__tocli--h2.is-current a::before { color: var(--kt-accent-ink); }

/* Подраздел уходит вправо и мельчает: список обязан читаться деревом, а не
   двадцатью одинаковыми строками. */
.k-doc__tocli--h3 a { padding: 4px 0 4px 16px; font-size: 12px; }
.k-doc__toc.is-numbered .k-doc__tocli--h3 a { padding-left: 34px; }

/* --------------------------------------------------------------------------
   ТЕКСТ.
   Всё, что ниже, — чужая разметка из редактора: правила пишутся по тегам, а
   не по классам, которых там никогда не будет.
   -------------------------------------------------------------------------- */

.k-doc__prose {
    max-width: 68ch;
    counter-reset: kdoc;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(var(--kt-ink-rgb), .84);
}

.k-doc__prose > :first-child { margin-top: 0; }
.k-doc__prose > :last-child { margin-bottom: 0; }

.k-doc__prose p { margin: 0 0 18px; text-wrap: pretty; }

/* Заголовок раздела отбит линией сверху: в длинном документе она делит
   текст надёжнее любого отступа. */
.k-doc__prose h2 {
    margin: 54px 0 18px;
    padding-top: 30px;
    border-top: 1px solid var(--kt-line);
    font-family: var(--kt-font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--kt-ink);
    scroll-margin-top: calc(var(--k-bar, 66px) + 28px);
    text-wrap: balance;
}

.k-doc__prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.k-doc__prose.is-numbered h2::before {
    counter-increment: kdoc;
    content: counter(kdoc, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--kt-accent-ink);
}

.k-doc__prose h3 {
    margin: 32px 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--kt-ink);
    scroll-margin-top: calc(var(--k-bar, 66px) + 28px);
}

.k-doc__prose h4 { margin: 24px 0 10px; font-size: 14px; font-weight: 700; color: var(--kt-ink); }

.k-doc__prose ul,
.k-doc__prose ol { margin: 0 0 18px; padding-left: 22px; }

.k-doc__prose li { margin-bottom: 8px; }
.k-doc__prose li::marker { color: var(--kt-accent-ink); }

.k-doc__prose a {
    color: var(--kt-accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(var(--kt-accent-rgb), .4);
    transition: text-decoration-color .2s ease;
}

.k-doc__prose a:hover { text-decoration-color: currentColor; }

.k-doc__prose strong, .k-doc__prose b { color: var(--kt-ink); font-weight: 700; }

.k-doc__prose blockquote {
    margin: 24px 0;
    padding: 2px 0 2px 20px;
    border-left: 2px solid var(--kt-accent);
    color: var(--kt-muted);
}

.k-doc__prose blockquote p:last-child { margin-bottom: 0; }

.k-doc__prose hr { height: 1px; margin: 32px 0; border: 0; background: var(--kt-line); }

.k-doc__prose code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--kt-surface-2);
    font-family: var(--kt-font-mono);
    font-size: .88em;
}

.k-doc__prose pre {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-md);
    background: var(--kt-surface);
    overflow-x: auto;
}

.k-doc__prose pre code { padding: 0; background: none; }

.k-doc__prose img { max-width: 100%; height: auto; border-radius: var(--kt-r-md); }

.k-doc__prose table {
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
    font-size: 14px;
}

.k-doc__prose th,
.k-doc__prose td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--kt-line); text-align: left; vertical-align: top; }

.k-doc__prose th {
    font-family: var(--kt-font-mono);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

/* --------------------------------------------------------------------------
   ОСТАЛЬНЫЕ ДОКУМЕНТЫ.
   Дочитавший политику чаще всего ищет соглашение, а раньше за ним надо было
   возвращаться в подвал.
   -------------------------------------------------------------------------- */

.k-doc__more {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 72px;
    max-width: 968px;
    align-items: baseline;
    margin-top: clamp(48px, 7vw, 88px);
    padding-top: 26px;
    border-top: 1px solid var(--kt-line);
}

.k-doc__morelab {
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-doc__morelist { display: flex; flex-wrap: wrap; gap: 10px; }

.k-doc__morelist a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.k-doc__morelist a:hover { border-color: var(--kt-line-2); color: var(--kt-accent-ink); }
.k-doc__morelist svg { color: var(--kt-muted); transition: transform .25s var(--kt-ease); }
.k-doc__morelist a:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   УЗКИЕ ЭКРАНЫ.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    /* Липкой колонке нужна ширина, которой уже нет. Оглавление становится
       обычным блоком над текстом — свернуть его нечем, а прятать нельзя:
       без него в длинном документе не сориентироваться вовсе. */
    .k-doc__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }

    .k-doc__side {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 20px 22px;
        border: 1px solid var(--kt-line);
        border-radius: var(--kt-r-lg);
        background: var(--kt-surface);
    }

    .k-doc__tocli.is-current::before { left: -22px; }

    .k-doc__prose { max-width: none; }

    .k-doc__more { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 640px) {
    .k-doc__title { max-width: none; }
    .k-doc__prose { font-size: 15.5px; }
    .k-doc__prose h2 { margin-top: 40px; padding-top: 24px; }

    /* Таблицу из редактора на телефоне не сузить: пусть едет вбок сама,
       а не растягивает страницу. */
    .k-doc__prose table { display: block; overflow-x: auto; }
}