/* Юридические страницы «Котомёта» (политика, соглашение, согласие, права) — оформление, 14.10.2026.
   Текст документов не меняется; legal.js собирает шапку документа, переключатель, содержание и карточки разделов.
   Без скрипта страница остаётся читаемой одной колонкой. Печать — отдельным блоком внизу. */
.doc { padding: clamp(22px, 4vw, 44px) 0 clamp(48px, 7vw, 90px); }
.doc .wrap { max-width: 1000px; }   /* та же колонка, что у «Вопросов», «Как играть», «Установки» (.g-body, .g-hero .wrap) */
.doc h1 { font-size: clamp(26px, 7.4vw, 56px); letter-spacing: -.02em; overflow-wrap: break-word; }

/* ---- шапка документа ---- */
.doc-hero { margin-bottom: clamp(18px, 3vw, 30px); }
.doc-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #ffe2b8; box-shadow: 0 3px 0 var(--ink);
  font: 800 12px/1 Rubik, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.doc-kicker svg { width: 18px; height: 18px; flex: none; }
.doc-hero h1 { margin: 16px 0 12px; max-width: 18ch; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.doc-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; color: var(--muted); }
.doc-chips .chip svg { width: 15px; height: 15px; flex: none; }
.doc-hero .meta { margin: 0; }

/* переключатель документов */
.doc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 2px 2px 8px; }
.doc-tabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 2px solid var(--ink); border-radius: 13px; background: var(--card); box-shadow: 0 4px 0 var(--ink);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; transition: transform .12s, box-shadow .12s; }
.doc-tabs a svg { width: 18px; height: 18px; flex: none; }
.doc-tabs a:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.doc-tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.doc-tabs a[aria-current="page"] svg { stroke: #fff; }

/* ---- раскладка: содержание + текст ---- */
.doc-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.doc-toc { position: sticky; top: 84px; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 14px 12px; }
.doc-toc summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 10px; font: 800 13px/1 Rubik, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary::after { content: ''; width: 9px; height: 9px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-top: -3px; }
.doc-toc[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 11px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; }
.doc-toc a .n { flex: none; width: 24px; height: 24px; border-radius: 8px; background: #ffe9cc; color: var(--accent-d); display: grid; place-items: center; font: 800 12px/1 Rubik, system-ui, sans-serif; margin-top: -1px; }
.doc-toc a:hover { background: #fff3dd; }
.doc-toc a.on { background: #ffe9cc; box-shadow: inset 3px 0 0 var(--accent); }
.doc-toc a.on .n { background: var(--accent); color: #fff; }

/* ---- карточки разделов ---- */
.doc-body { min-width: 0; }
.doc-sec { background: var(--card); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); padding: clamp(18px, 3vw, 30px); margin: 0 0 22px; scroll-margin-top: 84px; }
.doc-sec > h2 { display: flex; align-items: center; gap: 13px; margin: 0 0 .7em; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.15; }
.doc-sec > h2 .num { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--accent); color: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; font: 900 18px/1 Rubik, system-ui, sans-serif; }
.doc-sec p { max-width: 70ch; }
.doc-sec p:last-child, .doc-sec ul:last-child { margin-bottom: 0; }
.doc-sec ul { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 9px; max-width: 70ch; }
.doc-sec li { position: relative; margin: 0; padding-left: 30px; }
.doc-sec li::before { content: ''; position: absolute; left: 0; top: .32em; width: 19px; height: 19px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 76% no-repeat; }
.doc-sec li b, .doc-sec p b { font-weight: 800; }
.doc-sec a { font-weight: 600; text-underline-offset: 3px; }
.doc-sec code { font-size: .92em; background: #fff3dd; border-radius: 6px; padding: 1px 6px; }
.doc-sec .meta { margin: 0 0 1em; }

/* ---- выноска «Коротко» ---- */
.doc-body .note { position: relative; margin: 0 0 22px; padding: 18px 20px 18px 68px; background: #fff3dd; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); font-size: 16px; line-height: 1.55; }
.doc-body .note::before { content: 'i'; position: absolute; left: 18px; top: 17px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--ink); display: grid; place-items: center; font: italic 900 20px/1 Georgia, serif; }
.doc-body .note b { font-weight: 800; }

/* ---- «главное в четырёх карточках» (политика) ---- */
.doc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.doc-facts .fact { background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 14px 15px 15px; display: grid; gap: 6px; align-content: start; }
.doc-facts .fact .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 2px solid var(--ink); background: #ffe2b8; }
.doc-facts .fact:nth-child(2) .ic { background: #cfe8f6; } .doc-facts .fact:nth-child(3) .ic { background: #e3d9f7; } .doc-facts .fact:nth-child(4) .ic { background: #d4efc9; }
.doc-facts .fact .ic svg { width: 24px; height: 24px; }
.doc-facts .fact b { font: 900 17px/1.2 Rubik, system-ui, sans-serif; }
.doc-facts .fact span { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* ---- блоки данных (права): dl как карточки ---- */
.doc-sec dl { margin: 0 0 1em; display: grid; grid-template-columns: max-content 1fr; gap: 0; background: #fffaf0; border: 2px solid var(--line); border-radius: 16px; padding: 4px 18px; }
.doc-sec dt, .doc-sec dd { padding: 11px 0; border-bottom: 1px dashed var(--line); }
.doc-sec dt { color: var(--muted); font-weight: 600; padding-right: 22px; }
.doc-sec dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.doc-sec dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---- нижний блок «вопросы» ---- */
.doc-end { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--night); color: #f6e8d2; border-radius: 22px; padding: clamp(20px, 3vw, 30px); border: 2px solid var(--ink); box-shadow: 0 5px 0 rgba(43,29,20,.35); }
.doc-end h3 { margin: 0 0 4px; color: #fff; font-size: 22px; } .doc-end p { margin: 0; color: #d9c4a6; max-width: 52ch; }
.doc-end .btn { flex: none; }
.doc-end a:not(.btn) { color: #ffb066; }

/* ---- индикатор чтения и «наверх» ---- */
.doc-progress { position: fixed; left: 0; top: 0; height: 4px; width: 0; z-index: 30; background: linear-gradient(90deg, var(--accent), #ffb347); border-radius: 0 4px 4px 0; transition: width .08s linear; }
.doc-top { position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--ink); background: var(--accent); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.doc-top.on { opacity: 1; pointer-events: auto; transform: none; } .doc-top svg { width: 22px; height: 22px; }

/* ---- планшет и телефон ---- */
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: 18px; }
  .doc-toc { position: static; }
}
@media (max-width: 900px) { .doc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .doc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin-right: -20px; padding-right: 20px; } }
@media (max-width: 560px) {
  .doc-hero h1 { max-width: none; }
  .doc-sec { border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
  .doc-sec > h2 { gap: 10px; } .doc-sec > h2 .num { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
  .doc-body .note { padding: 16px 16px 16px 16px; } .doc-body .note::before { position: static; display: inline-grid; margin: 0 8px -10px 0; width: 28px; height: 28px; font-size: 16px; }
  .doc-facts { gap: 10px; } .doc-facts .fact { padding: 12px; } .doc-facts .fact b { font-size: 15px; }
  .doc-sec dl { grid-template-columns: 1fr; padding: 8px 14px; } .doc-sec dt { padding: 8px 0 0; border: 0; } .doc-sec dd { padding: 0 0 10px; }
  .doc-sec dl > :nth-last-child(-n+2) { border-bottom: 1px dashed var(--line); } .doc-sec dl > dd:last-child { border: 0; }
  .doc-end { flex-direction: column; align-items: flex-start; } .doc-end .btn { width: 100%; }
}

/* ---- печать: чистый текст без украшений ---- */
@media print {
  .top, #top, #foot, footer, .doc-tabs, .doc-toc, .doc-progress, .doc-top, .doc-end, .doc-kicker { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .doc-layout { display: block; }
  .doc-sec, .doc-body .note, .doc-facts .fact { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .doc-sec > h2 .num { background: none; color: #000; border: 1px solid #000; box-shadow: none; }
}

/* ---- страница Cookie (18.10.2026): таблица cookie и кнопки выбора ---- */
.ck-table { margin: 0 0 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); overflow: hidden; }
.ck-row { display: grid; grid-template-columns: 1.1fr 2fr 1fr 1.2fr; gap: 6px 16px; padding: 12px 16px; border-top: 1px dashed var(--line); font-size: 15px; line-height: 1.45; }
.ck-row:first-child { border-top: 0; }
.ck-row b { display: block; overflow-wrap: anywhere; } .ck-row small { color: var(--muted); }
.ck-head { background: #ffe2b8; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.ck-state { margin: 0 0 10px; }
.ck-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ck-btn { height: 44px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 13px; background: var(--card); color: var(--ink); font: 800 15px Rubik, system-ui, sans-serif; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.ck-btn.ck-yes { background: var(--accent); color: #fff; }
.ck-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ck-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .ck-row { grid-template-columns: 1fr; } .ck-head { display: none; }
  .ck-btn { flex: 1 1 auto; }
}
@media (max-width: 700px) {
  .ck-row > span:nth-child(2)::before { content: 'Зачем: '; font-weight: 800; }
  .ck-row > span:nth-child(3)::before { content: 'Срок: '; font-weight: 800; }
  .ck-row > span:nth-child(4)::before { content: 'Согласие: '; font-weight: 800; }
}