/*
 * CONTENT — сторінки, що складаються з ТЕКСТУ: публічний контент і юридичні
 * документи (`/about`, `/privacy`, `/terms`, `/rules`, `/cookies`, …).
 *
 * ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ ПЕРЕНЕСЕНИЙ ЛЕГАСІ-CSS. Легасі-версія цих сторінок
 * мала зашиті `#fff`, власні радіуси й власні компонентні класи — гейт каталогу
 * компонентів і контракт акценту почервоніли одразу, і правильно: це була друга
 * система стилів усередині чистого пакета. Тому легасі-CSS не перенесено, а
 * написано ці ~90 рядків на самих токенах.
 *
 * НАСЛІДОК, ЯКИЙ ВИДНО НА ЗНІМКАХ: у релізі v1.1.6.105 сторінки читались, але
 * нумерація розділів злипалась із заголовком («01Вступ»), бо номер жив у
 * `<span>` без стилю. Тут це полагоджено на рівні розділу, а не пробілом у
 * тексті — текст належить перекладам, а не оформленню.
 */

.kp-page {
    max-width: var(--kp-layout-content-max);
    margin: 0 auto;
    padding: var(--kp-space-6) var(--kp-space-gutter) var(--kp-space-8);
}

/* ── Шапка документа ─────────────────────────────────────────────────────*/
.kp-legal__head,
.kp-pub__hero {
    margin-bottom: var(--kp-space-6);
    padding-bottom: var(--kp-space-4);
    border-bottom: var(--kp-border-width) solid var(--kp-color-border);
}

.kp-legal__eyebrow,
.kp-pub__eyebrow {
    display: block;
    margin-bottom: var(--kp-space-1);
    font-size: var(--kp-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kp-color-text-muted);
}

.kp-legal__meta {
    font-size: var(--kp-text-sm);
    color: var(--kp-color-text-muted);
}

.kp-pub__lead {
    font-size: var(--kp-text-lg);
    line-height: var(--kp-leading-loose);
    color: var(--kp-color-text-muted);
}

/* ── Зміст ───────────────────────────────────────────────────────────────*/
.kp-legal__toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kp-space-2) var(--kp-space-3);
    margin-bottom: var(--kp-space-6);
    padding: var(--kp-space-3);
    background: var(--kp-color-surface-muted);
    border-radius: var(--kp-radius-md);
    font-size: var(--kp-text-sm);
}

/*
 * Номер розділу — окремий елемент із власним ритмом. Саме його відсутність
 * давала «01Вступ» замість «01 · Вступ»: без правила два інлайнові вузли
 * стоять упритул.
 */
.kp-legal__toc .num,
.kp-legal__sec .n {
    display: inline-block;
    min-width: 2.25em;
    margin-right: var(--kp-space-2);
    font-family: var(--kp-font-mono);
    font-size: var(--kp-text-sm);
    color: var(--kp-color-text-muted);
}

/* ── Розділи ─────────────────────────────────────────────────────────────*/
.kp-legal__sec,
.kp-pub section {
    margin-bottom: var(--kp-space-6);
    scroll-margin-top: var(--kp-space-6);
}

.kp-legal__doc,
.kp-legal-quick-links__item {
    display: inline-block;
    margin: 0 var(--kp-space-2) var(--kp-space-2) 0;
}

.kp-legal__foot,
.kp-pub__foot {
    margin-top: var(--kp-space-7);
    padding-top: var(--kp-space-4);
    border-top: var(--kp-border-width) solid var(--kp-color-border);
    font-size: var(--kp-text-sm);
    color: var(--kp-color-text-muted);
}

/* ── Заклик до дії всередині документа ───────────────────────────────────*/
.kp-legal__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kp-space-3);
    margin: var(--kp-space-5) 0;
    padding: var(--kp-space-4);
    background: var(--kp-color-surface-raised);
    border: var(--kp-border-width) solid var(--kp-color-border);
    border-radius: var(--kp-radius-lg);
}

/* ── Решта структурних класів контентних сторінок (v1.1.6.111) ───────────
 * REV16 (CONTENT-STYLE-P1-01) порахував 13 структурних класів без жодного
 * селектора; повний вимір по шаблонах дав 21. Це не оздоблення: без правил
 * сітка карток стає стовпчиком, а навігація документа — купою рядків.
 *
 * Іменні класи-обгортки (`kp-privacy`, `kp-terms`, `kp-rules`, `kp-cookies`)
 * НЕ отримують власного вигляду: вони існують як гачок для сторінкових
 * винятків, і дати їм стилі означало б завести чотири майже однакові теми
 * документа. Тому вони лише успадковують `.kp-page`.
 */
.kp-legal__wrap { display: block; }
.kp-legal__title { margin-bottom: var(--kp-space-2); }
.kp-legal__docs { display: flex; flex-wrap: wrap; gap: var(--kp-space-2); }
.kp-legal__doc-link { text-decoration: underline; }

.kp-legal__cta-text { margin: 0; }
.kp-legal__cta-btn {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kp-control-height-md);
  padding: 0 var(--kp-space-4);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  text-decoration: none;
  font-weight: var(--kp-weight-medium);
}

/* Публічні сторінки: сітка карток і навігація розділу. */
.kp-pub__grid {
  display: grid;
  gap: var(--kp-space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block: var(--kp-space-5);
}
.kp-pub__nav { margin-block: var(--kp-space-5); }
.kp-pub__nav-title { font-size: var(--kp-text-md); margin-bottom: var(--kp-space-2); }
.kp-pub__nav-links { display: flex; flex-wrap: wrap; gap: var(--kp-space-3); }

.kp-pub__cta-wrap { margin-block: var(--kp-space-6); }
.kp-pub__cta {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kp-control-height-md);
  padding: 0 var(--kp-space-4);
  border-radius: var(--kp-radius-pill);
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  text-decoration: none;
  font-weight: var(--kp-weight-medium);
}
.kp-pub__note { font-size: var(--kp-text-sm); color: var(--kp-color-text-muted); }

.kp-page--legal_delete_account .kp-legal__sec { max-inline-size: 60ch; }