/* ===========================================================================
   QANON PROJECT — ДОКУМЕНТАЦИЯ (правила сервера / администрации / лидерские)
   Надстройка над wiki.css: тот же тёмный «досье»-язык, но заточенный под
   длинный нормативный документ — нумерованные пункты с якорями, блоки
   наказаний, досье фракций, липкое оглавление и живой поиск.
   Наследует токены .wiki-body (--red / --panel / --line / --on-dark…).
   =========================================================================== */

/* ---- хаб документации: карточки трёх сводов -------------------------------- */
.doc-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 18px;
}
.doc-hub__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.doc-hub__card::before {
    content: attr(data-i);
    position: absolute; right: 12px; top: 0;
    font-size: 86px; font-weight: 800; line-height: 1;
    color: rgba(255, 255, 255, .035);
    pointer-events: none;
}
a.doc-hub__card:hover {
    border-color: rgba(239, 59, 59, .5);
    transform: translateY(-3px);
    background: var(--panel-2);
}
.doc-hub__card.is-empty { opacity: .72; }
.doc-hub__tag {
    font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--red-br);
}
.doc-hub__card.is-empty .doc-hub__tag { color: var(--on-dark-faint); }
.doc-hub__title { margin: 10px 0 8px; font-size: 22px; font-weight: 800; color: var(--on-dark); }
.doc-hub__desc {
    font-family: var(--f-read);
    font-size: 14px; line-height: 22px; color: var(--on-dark-dim);
}
.doc-hub__meta {
    /* flex без переноса резал строку так, что разделитель «·» оставался один
       на третьей строке. Метку и дату разносим двумя элементами. */
    margin-top: auto; padding-top: 18px;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .05em;
    color: var(--on-dark-faint);
}
.doc-hub__meta b { color: var(--on-dark); font-weight: 800; letter-spacing: .02em; }
.doc-hub__meta span { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }

/* ===========================================================================
   ДОКУМЕНТ — раскладка: контент + липкое оглавление справа
   =========================================================================== */
.wiki-main--doc { max-width: 1000px; }
.doc-layout { display: block; }

/* ---- шапка документа ------------------------------------------------------ */
.doc-meta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 20px;
}
.doc-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    font-size: 12px; font-weight: 600; color: var(--on-dark-dim);
}
.doc-chip b { color: var(--on-dark); font-weight: 800; }
.doc-chip--warn { border-color: rgba(207, 41, 41, .45); color: #f0b4b4; }

/* ---- поиск по документу --------------------------------------------------- */
.doc-search {
    position: sticky; top: 64px; z-index: 60;
    margin: 0 0 26px;
    padding: 10px 0;
    background: linear-gradient(180deg, var(--bg) 62%, rgba(10, 11, 12, 0));
}
.doc-search__box {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel-2);
    transition: border-color var(--t-base) var(--ease-out);
}
.doc-search__box:focus-within { border-color: rgba(239, 59, 59, .55); }
.doc-search__box svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--on-dark-faint); stroke-width: 2; }
.doc-search__in {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: none; outline: none;
    font-family: var(--f-read); font-size: 14.5px; color: var(--on-dark);
}
.doc-search__in::placeholder { color: var(--on-dark-faint); }
.doc-search__key {
    flex: 0 0 auto;
    padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px;
    font-size: 11px; font-weight: 700; color: var(--on-dark-faint);
}
.doc-search__clear {
    flex: 0 0 auto;
    border: 0; background: none; cursor: pointer; padding: 2px 6px;
    font-size: 17px; line-height: 1; color: var(--on-dark-faint);
}
.doc-search__clear:hover { color: var(--red-br); }
.doc-search__count {
    padding: 8px 4px 0;
    font-size: 12.5px; color: var(--on-dark-dim);
}
.doc-search__count b { color: var(--red-br); }

/* ---- группа глав ---------------------------------------------------------- */
.doc-group__h {
    display: flex; align-items: baseline; gap: 12px;
    margin: 44px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--red-br);
}
.doc-group:first-child .doc-group__h { margin-top: 0; }
.doc-group__h span {
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none;
    color: var(--on-dark-faint);
}

/* ---- глава ---------------------------------------------------------------- */
.doc-ch {
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
    scroll-margin-top: 132px;
}
.doc-ch__h {
    display: flex; align-items: center; gap: 12px;
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .022);
    font-size: 17px; font-weight: 800; color: var(--on-dark);
}
.doc-ch__n {
    flex: 0 0 auto;
    min-width: 30px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 7px; border-radius: 6px;
    background: linear-gradient(var(--red), var(--red-d));
    color: #fff; font-size: 12px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.doc-ch__body { padding: 18px 22px 22px; }
.doc-ch__lead {
    margin: 0 0 16px;
    font-family: var(--f-read); font-size: 14.5px; line-height: 25px;
    color: var(--on-dark-dim);
}

/* ---- пункт ---------------------------------------------------------------- */
/* Пункт верхнего уровня = отдельный блок .doc-clause, его подпункты — внутри
   .doc-clause__kids на вертикальной направляющей. Так видно, где кончается «1»
   и начинается «2», а «1.1» читается как часть первого, а не как ещё одна
   строка в общей простыне. */
.doc-clause { padding: 15px 0; }
.doc-clause + .doc-clause { border-top: 1px solid rgba(255, 255, 255, .07); }
.doc-clause:first-child { padding-top: 2px; }
.doc-clause:last-child { padding-bottom: 2px; }

.doc-item {
    position: relative;
    display: flex; gap: 12px; align-items: flex-start;
    scroll-margin-top: 140px;
}
.doc-item__n {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 800; color: var(--red-br);
}
.doc-item__t {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--f-read); font-size: 15px; line-height: 26px;
    color: var(--on-dark);
}

/* верхний уровень: номер в плашке, текст крупнее */
.doc-item--lead > .doc-item__n {
    min-width: 27px; height: 23px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
    border: 1px solid rgba(207, 41, 41, .38);
    border-radius: 6px;
    background: rgba(207, 41, 41, .14);
    font-size: 12px; color: #ff8f8f;
}

/* подпункты: направляющая слева, шрифт мельче и тише */
.doc-clause__kids {
    margin: 11px 0 0 13px;
    padding-left: 19px;
    border-left: 1px solid rgba(255, 255, 255, .11);
}
.doc-clause__kids-in > .doc-item:not(.doc-item--note) { padding: 7px 0; }
.doc-clause__kids-in > .doc-item + .doc-item { border-top: 1px solid var(--hair); }
.doc-item--sub > .doc-item__n { min-width: 34px; font-size: 12.5px; font-weight: 700; color: #d98a8a; padding-top: 2px; }
.doc-item--sub > .doc-item__t { font-size: 14px; color: var(--on-dark-dim); }
.doc-item--sub[data-d="3"] { padding-left: 16px; }
.doc-item--sub[data-d="3"] > .doc-item__n { color: #b98080; font-size: 12px; }
.doc-item--sub[data-d="4"] { padding-left: 32px; }

.doc-item--bullet > .doc-item__n { min-width: 14px; color: var(--red-d); font-size: 15px; padding-top: 1px; }

/* примечания и исключения — врезка с плашкой-меткой, а не ещё один пункт.
   Метка нужна, чтобы короткое примечание не выглядело пустой растянутой
   коробкой с тонкой красной чёрточкой сбоку. */
.doc-item--note {
    display: block;
    margin: 9px 0 3px;
    padding: 9px 13px 9px 12px;
    border-left: 3px solid rgba(207, 41, 41, .5);
    border-radius: 0 7px 7px 0;
    background: rgba(255, 255, 255, .035);
}
.doc-clause > .doc-item--note { margin-left: 39px; }
.doc-clause__kids-in > .doc-item--note + .doc-item,
.doc-clause__kids-in > .doc-item--note { border-top: 0; }
.doc-item--note > .doc-item__n { display: none; }
.doc-item--note > .doc-item__t { font-size: 13.5px; line-height: 22px; color: var(--on-dark-dim); }
.doc-note__k {
    display: inline-block;
    margin-right: 9px;
    padding: 1px 8px;
    border-radius: 4px;
    background: rgba(207, 41, 41, .18);
    font-family: var(--f);
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #ff9a9a;
    vertical-align: 1px;
}

/* определение термина в начале главы — не примечание, а отдельная врезка */
.doc-def {
    margin: 0 0 18px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .028);
}
.doc-def__t {
    display: block;
    margin-bottom: 6px;
    font-size: 15px; font-weight: 800; color: #fff;
}
.doc-def__v {
    font-family: var(--f-read); font-size: 14.5px; line-height: 24px;
    color: var(--on-dark-dim);
}

/* досье фракций остаётся плоским списком буллетов */
.doc-fac__block .doc-item { padding: 8px 0; }
.doc-fac__block .doc-item + .doc-item { border-top: 1px solid var(--hair); }

/* якорь пункта: «§» появляется на ховере, клик копирует ссылку */
.doc-anchor {
    position: absolute; left: -22px; top: 8px;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; cursor: pointer;
    color: var(--on-dark-faint); font-size: 13px;
    opacity: 0; transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.doc-item:hover .doc-anchor, .doc-ch__h:hover .doc-anchor { opacity: 1; }
.doc-anchor:hover { color: var(--red-br); }
.doc-anchor:focus-visible { opacity: 1; }
/* Переход по прямой ссылке на пункт. Ссылку кидают в разбор — открывшийся
   пункт обязан сам себя показать, иначе человек ищет его глазами в главе.
   :target — на случай, когда переход сделал сам браузер, без нашего JS. */
.doc-item.is-linked, .doc-ch.is-linked > .doc-ch__h,
.doc-item:target {
    animation: docFlash 1.9s var(--ease-out) both;
}
@keyframes docFlash {
    0% {
        background: rgba(207, 41, 41, .30);
        box-shadow: -3px 0 0 var(--red-br), 0 0 0 1px rgba(239, 59, 59, .40);
    }
    22% {
        background: rgba(207, 41, 41, .26);
        box-shadow: -3px 0 0 var(--red-br), 0 0 0 1px rgba(239, 59, 59, .30);
    }
    100% {
        background: transparent;
        box-shadow: -3px 0 0 rgba(239, 59, 59, 0), 0 0 0 1px rgba(239, 59, 59, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    /* без мигания, но пункт всё равно помечен */
    .doc-item.is-linked, .doc-item:target {
        animation: none;
        background: rgba(207, 41, 41, .16);
        box-shadow: -3px 0 0 var(--red-br);
    }
}
.doc-ch__h .doc-anchor { position: static; opacity: 0; margin-left: auto; }

/* ---- наказание ------------------------------------------------------------ */
.doc-punish {
    display: flex; gap: 12px;
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(207, 41, 41, .34);
    border-left: 3px solid var(--red);
    border-radius: 0 10px 10px 0;
    background: rgba(207, 41, 41, .07);
}
.doc-punish__k {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--red-br);
    padding-top: 2px;
}
.doc-punish__v {
    font-family: var(--f-read); font-size: 14px; line-height: 22px; color: #f3ded9;
}

/* ===========================================================================
   ДОСЬЕ ФРАКЦИИ
   =========================================================================== */
.doc-fac__top {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .022);
}
.doc-fac__logo {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, .3);
    padding: 5px;
}
/* Фракции без герба (их четыре) рисовались пунктирным квадратом со знаком
   вопроса — это читалось как незагруженная картинка, а не как элемент вёрстки.
   Ставим нейтральный знак «станция метро» тем же приёмом, что и все остальные
   иконки свода: маска по currentColor, сплошная грань, никакого пунктира. */
.doc-fac__logo--none {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 0;
    color: rgba(231, 227, 218, .5);
}
.doc-fac__logo--none::before {
    content: "";
    width: 26px; height: 26px;
    background: currentColor;
    -webkit-mask: var(--m) center / 26px 26px no-repeat;
            mask: var(--m) center / 26px 26px no-repeat;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.2' r='3.1'/%3E%3Cpath d='M5.4 19.2c0-3.3 2.9-5.6 6.6-5.6s6.6 2.3 6.6 5.6'/%3E%3C/g%3E%3C/svg%3E");
}
.doc-fac__id { flex: 1 1 auto; min-width: 0; }
.doc-fac__name { margin: 0; font-size: 18px; font-weight: 800; color: var(--on-dark); }
.doc-fac__sub { margin: 3px 0 0; font-size: 12px; color: var(--on-dark-faint); }
.doc-fac__limit {
    flex: 0 0 auto; text-align: center;
    padding: 8px 14px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel-2);
}
.doc-fac__limit b { display: block; font-size: 20px; font-weight: 800; color: #fff; }
.doc-fac__limit span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-dim); }
.doc-fac__block + .doc-fac__block { margin-top: 18px; }
.doc-fac__k {
    margin: 0 0 9px;
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-faint);
}

/* ===========================================================================
   ОГЛАВЛЕНИЕ (липкое, справа)
   =========================================================================== */
.doc-toc { display: none; }          /* на десктопе список глав — в рейле */
.doc-toc__h {
    margin: 0 0 10px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--on-dark-faint);
}
.doc-toc__g {
    margin: 14px 0 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--red-br); opacity: .8;
}
.doc-toc__g:first-of-type { margin-top: 0; }
.doc-toc__a {
    display: flex; gap: 8px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12.5px; line-height: 18px;
    color: var(--on-dark-dim);
    transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.doc-toc__a i { font-style: normal; color: var(--on-dark-faint); font-weight: 700; min-width: 15px; }
.doc-toc__a:hover { color: var(--on-dark); background: rgba(255, 255, 255, .05); }
.doc-toc__a.is-here { color: #fff; background: rgba(207, 41, 41, .18); }
.doc-toc__a.is-here i { color: var(--red-br); }

/* ---- служебные состояния --------------------------------------------------- */
.doc-none {
    padding: 44px 24px; text-align: center;
    border: 1px dashed var(--line); border-radius: 12px;
    color: var(--on-dark-dim); font-family: var(--f-read);
}
.doc-none b { display: block; margin-bottom: 6px; color: var(--on-dark); font-size: 16px; }
mark.doc-hit { background: rgba(239, 59, 59, .3); color: #fff; border-radius: 3px; padding: 0 2px; }
.is-hidden { display: none !important; }

/* тост «ссылка скопирована» */
.doc-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 9500;
    transform: translate(-50%, 14px);
    padding: 10px 18px;
    border: 1px solid var(--line); border-radius: 9px;
    background: rgba(18, 19, 21, .97);
    color: var(--on-dark); font-size: 13px; font-weight: 600;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.doc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================================
   АДАПТИВ
   =========================================================================== */
@media (max-width: 1180px) {
    .doc-rail-tree { display: none; }
    .doc-toc {
        display: block;
        margin-bottom: 26px; padding: 16px 18px;
        border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
        columns: 2; column-gap: 26px;
    }
    .doc-toc__g, .doc-toc__a { break-inside: avoid; }
}
@media (max-width: 1180px) {
    .doc-search { top: 108px; }
    .doc-ch, .doc-item { scroll-margin-top: 180px; }
}
@media (max-width: 720px) {
    .doc-toc { columns: 1; }
    .doc-ch__body, .doc-ch__h, .doc-fac__top { padding-left: 15px; padding-right: 15px; }
    .doc-item { gap: 9px; }
    .doc-item--sub { padding-left: 13px; }
    .doc-item--note { margin-left: 0; }
    .doc-anchor { display: none; }
    .doc-fac__top { flex-wrap: wrap; }
}

/* ---- печать: разворачиваем всё, убираем хром ------------------------------- */
@media print {
    .wiki-topbar, .wiki-rail, .doc-search, .doc-toc, .footer, .footer_bg,
    .divider-another, .wiki-bg, .wiki-grain, .doc-anchor { display: none !important; }
    .has-rail { padding-left: 0 !important; }
    .wiki-body { background: #fff; color: #000; }
    .wiki-main { padding: 0; max-width: none; }
    .doc-ch { break-inside: avoid; border-color: #bbb; background: none; }
    .doc-ch__h, .doc-item__t, .doc-item__n, .wiki-lead__title { color: #000; }
    .doc-punish { background: none; border-color: #999; }
    .doc-punish__k {
        position: static; transform: none;
        color: #000; border-color: #666; background: none;
        box-shadow: none; text-shadow: none;
        margin-bottom: 6px;
    }
    .doc-punish__v, .doc-ch__lead { color: #222; }
}

/* ===========================================================================
   РЕЖИМ «ОДНА ГЛАВА» — список глав в левом рейле, крошка и пагинатор
   =========================================================================== */

/* ---- дерево глав внутри рейла (десктоп) ---------------------------------- */
.doc-rail-tree { margin: 4px 0 6px; }
.doc-rail-g {
    margin: 12px 0 4px;
    padding: 0 6px;
    font-family: var(--f, "Montserrat", sans-serif);
    font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--red-br, #ef3b3b); opacity: .75;
}
.doc-rail-g:first-child { margin-top: 0; }
.doc-rail-ch {
    display: flex; gap: 9px; align-items: baseline;
    padding: 5px 8px;
    border-radius: 6px;
    font-family: var(--f, "Montserrat", sans-serif);
    font-size: 12px; line-height: 16px;
    color: var(--on-dark-dim, #9a948a);
    transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.doc-rail-ch i {
    font-style: normal; font-weight: 700; font-size: 10.5px;
    min-width: 14px; flex: 0 0 auto;
    color: var(--on-dark-faint, #6d6860);
}
.doc-rail-ch:hover { color: var(--on-dark, #e7e3da); background: rgba(255, 255, 255, .05); }
.doc-rail-ch.is-here {
    color: #fff;
    background: linear-gradient(90deg, rgba(207, 41, 41, .24), rgba(207, 41, 41, .05));
}
.doc-rail-ch.is-here i { color: var(--red-br, #ef3b3b); }

/* ---- крошка группы над главой -------------------------------------------- */
.doc-crumb {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 0;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .012);
    font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--red-br);
}
.doc-crumb span {
    font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: none;
    color: var(--on-dark-faint);
}

/* в режиме одной главы карточка — вся страница, а не элемент списка */
body.doc-ready:not(.doc-searching) .doc-ch { margin-bottom: 0; }

/* ---- пагинатор: соседние главы -------------------------------------------- */
.doc-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
}
.doc-pager__a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel);
    transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.doc-pager__a:hover {
    border-color: rgba(239, 59, 59, .5);
    background: var(--panel-2);
    transform: translateY(-2px);
}
.doc-pager__a--next { text-align: right; }
.doc-pager__k {
    font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--on-dark-faint);
}
.doc-pager__t { font-size: 13.5px; font-weight: 700; line-height: 20px; color: var(--on-dark); }
.doc-pager__stub { display: block; }

/* ---- выход из режима поиска ------------------------------------------------ */
.doc-search__back {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--red-br); text-decoration: underline;
}
.doc-search__back:hover { color: #ff6a6a; }

@media (max-width: 720px) {
    .doc-pager { grid-template-columns: 1fr; }
    .doc-pager__a--next { text-align: left; }
    .doc-crumb { padding-left: 15px; padding-right: 15px; }
}

/* печать: разворачиваем ВСЕ главы, а не только открытую */
@media print {
    .doc-ch.is-hidden, .doc-group.is-hidden { display: block !important; }
    .doc-pager, .doc-rail-tree { display: none !important; }
    .doc-crumb { color: #444; border-color: #ccc; background: none; }
}

/* ===========================================================================
   РЕЙЛ В РЕЖИМЕ ДОКУМЕНТА
   Внутри свода левая панель — навигатор по документу, а не общее меню вики.
   Поэтому она шире (длинные названия глав должны влезать в одну-две строки),
   без вложенности и со своим тонким скроллбаром вместо системного.
   =========================================================================== */
body.doc-rail-mode { --rail-w: 288px; }

.doc-rail-mode .wiki-rail {
    overflow-x: hidden;                       /* убирает горизонтальную полосу */
    padding-left: 12px; padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(207, 41, 41, .55) transparent;
}
.doc-rail-mode .wiki-rail::-webkit-scrollbar { width: 8px; }
.doc-rail-mode .wiki-rail::-webkit-scrollbar-track { background: transparent; }
.doc-rail-mode .wiki-rail::-webkit-scrollbar-thumb {
    background: rgba(207, 41, 41, .5);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
.doc-rail-mode .wiki-rail:hover::-webkit-scrollbar-thumb { background: rgba(239, 59, 59, .8); background-clip: padding-box; }

/* назад ко всей документации */
.doc-rail-back {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--line, rgba(255, 255, 255, .09));
    border-radius: 8px;
    font-family: var(--f, "Montserrat", sans-serif);
    font-size: 12px; font-weight: 600;
    color: var(--on-dark-dim, #9a948a);
    transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.doc-rail-back::before { content: "←"; color: var(--red-br, #ef3b3b); font-weight: 800; }
.doc-rail-back:hover {
    color: var(--on-dark, #e7e3da);
    border-color: rgba(239, 59, 59, .45);
    background: rgba(255, 255, 255, .04);
}

/* название открытого свода */
.doc-rail-doc {
    margin: 0 0 4px;
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
    font-family: var(--f, "Montserrat", sans-serif);
    font-size: 14px; font-weight: 800; line-height: 18px;
    color: #fff;
}

/* пункт списка глав: номер не отрывается от названия, длинные слова переносятся */
.doc-rail-ch { padding: 6px 10px; font-size: 12.5px; }
.doc-rail-ch span { min-width: 0; overflow-wrap: anywhere; }
.doc-rail-ch i { min-width: 17px; }

/* «Глава N из M» над содержимым */
.doc-pos {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--on-dark-faint);
}
body.doc-searching .doc-pos { display: none; }

/* узкие экраны: рейл горизонтальный — список глав уезжает в контент */
@media (max-width: 1180px) {
    body.doc-rail-mode { --rail-w: 216px; }
    .doc-rail-doc { display: none; }
    /* ссылки «назад» остаются: в горизонтальной полосе это единственный выход */
    .doc-rail-back { margin: 0 6px 0 0; white-space: nowrap; flex: 0 0 auto; }
}

/* во время поиска главы без совпадений в списке слева гаснут */
.doc-rail-ch.is-dim, .doc-toc__a.is-dim { opacity: .28; }
.doc-rail-ch.is-dim:hover, .doc-toc__a.is-dim:hover { opacity: .7; }

/* ---- подводка и нумерованные примеры внутри пункта ------------------------ */
/* «Правильные игровые ники:» + список имён — это иллюстрация к пункту, а не
   отдельные пункты правил, поэтому без красных плашек и своей сеткой. */
.doc-item--cap { padding-bottom: 2px; }
.doc-item--cap > .doc-item__n { display: none; }
.doc-item--cap > .doc-item__t {
    font-family: var(--f); font-size: 12.5px; font-weight: 700;
    letter-spacing: .02em; color: var(--on-dark-dim);
}
.doc-exlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 0 18px;
    margin: 2px 0 10px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
}
.doc-clause__kids-in > .doc-exlist { margin-left: 0; }
.doc-exlist .doc-item { padding: 4px 0 !important; border-top: 0 !important; gap: 8px; }
.doc-item--ex > .doc-item__n {
    min-width: 15px; padding-top: 1px;
    font-size: 11.5px; font-weight: 700; color: var(--on-dark-faint);
}
.doc-item--ex > .doc-item__t { font-size: 13.5px; line-height: 20px; color: var(--on-dark); }

/* .doc-clause__kids-in > .doc-item задаёт padding:7px 0 и по специфичности бьёт
   .doc-item--note — из-за чего текст примечания прилипал к красной полосе.
   Возвращаем врезке её собственные отступы. */
.doc-clause__kids-in > .doc-item--note,
.doc-clause > .doc-item--note { padding: 9px 13px 9px 12px; }
.doc-clause__kids-in > .doc-exlist { padding: 8px 14px; }

/* Подводки и простые буллеты — самостоятельные строки, но подряд идущие не
   должны резаться разделителями: иначе глава из 46 буллетов выглядит решёткой. */
.doc-clause--flat { padding: 5px 0; }
.doc-clause--flat + .doc-clause--flat { border-top: 0; }
.doc-clause--flat + .doc-clause:not(.doc-clause--flat) { margin-top: 4px; }
.doc-clause--flat > .doc-item--cap { padding-top: 10px; }
.doc-clause:not(.doc-clause--flat) + .doc-clause--flat { border-top: 0; padding-top: 12px; }

/* ===========================================================================
   ПАС ПО ЧИТАЕМОСТИ
   Три вещи, которые мешали читать длинный свод:
   1) строка ~114 символов при комфортных 70–80 — глаз терял начало строки;
   2) шапка-герой на 244px повторялась над каждой главой;
   3) всё плоское, глубины нет — блоки не отделялись друг от друга.
   =========================================================================== */

/* ---- 1. длина строки ------------------------------------------------------ */
.doc-item__t, .doc-ch__lead, .doc-def__v, .doc-punish__v { max-width: 72ch; }
.doc-item--sub > .doc-item__t { max-width: 70ch; }
.doc-item--note > .doc-item__t { max-width: 74ch; }

/* ---- 2. компактная шапка при чтении --------------------------------------- */
.wiki-lead__title, .wiki-lead__sub, .doc-meta {
    transition: font-size var(--t-base) var(--ease-out), margin var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
body.doc-compact .wiki-lead { padding-bottom: 22px; }
body.doc-compact .wiki-lead__title { font-size: clamp(24px, 3vw, 34px); }
body.doc-compact .wiki-lead__sub { display: none; }
body.doc-compact .wiki-lead__kicker { margin-bottom: 10px; }
body.doc-compact .doc-meta { margin-top: 14px; }

/* ---- 3. глубина: мягкие градиенты вместо плоских заливок ------------------- */
.doc-ch {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 220px),
        var(--panel);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.doc-ch__h {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)),
        rgba(207, 41, 41, .05);
    font-size: 18px;
    padding: 20px 24px;
}
.doc-crumb {
    background: linear-gradient(90deg, rgba(207, 41, 41, .12), rgba(207, 41, 41, 0) 60%);
}
.doc-ch__n {
    background: linear-gradient(160deg, #e33b3b, var(--red-d));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 8px rgba(207, 41, 41, .35);
}
.doc-item--lead > .doc-item__n {
    background: linear-gradient(160deg, rgba(207, 41, 41, .3), rgba(207, 41, 41, .12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.doc-punish {
    background: linear-gradient(90deg, rgba(207, 41, 41, .16), rgba(207, 41, 41, .05) 70%);
}
.doc-def {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
        rgba(0, 0, 0, .18);
}
.doc-pager__a {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)), var(--panel);
}

/* ---- 4. акцент на ключевом слове пункта ------------------------------------ */
.doc-kw {
    font-style: normal;
    font-weight: 700;
    letter-spacing: .01em;
}
.doc-kw--no   { color: #ff7d7d; }
.doc-kw--yes  { color: #86c38a; }
.doc-kw--must { color: #d9b26a; }

/* ---- 5. мелочи ритма ------------------------------------------------------- */
.doc-item__t { font-size: 15.2px; line-height: 26px; }
.doc-item--sub > .doc-item__t { font-size: 14.3px; line-height: 24px; }
.doc-ch__body { padding: 22px 24px 26px; }
.doc-clause { padding: 17px 0; }

@media (max-width: 720px) {
    .doc-ch__h { padding: 16px 15px; font-size: 16px; }
    .doc-ch__body { padding: 16px 15px 20px; }
}

/* ===========================================================================
   ЭФФЕКТЫ
   Движение здесь служит навигации: показать, что глава сменилась, где ты в
   списке и сколько осталось прочитать. Всё отключается prefers-reduced-motion.
   =========================================================================== */

/* ---- вход главы: карточка всплывает, пункты проявляются лесенкой ---------- */
@keyframes docChIn {
    from { opacity: 0; transform: translateY(12px) scale(.995); }
    to   { opacity: 1; transform: none; }
}
@keyframes docClauseIn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
body:not(.doc-searching) .doc-ch.is-enter {
    animation: docChIn .36s cubic-bezier(.16, 1, .3, 1) both;
}
body:not(.doc-searching) .doc-ch.is-enter .doc-clause,
body:not(.doc-searching) .doc-ch.is-enter .doc-def,
body:not(.doc-searching) .doc-ch.is-enter .doc-punish,
body:not(.doc-searching) .doc-ch.is-enter .doc-fac__block {
    animation: docClauseIn .42s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 26ms + 70ms);
}

/* ---- бегунок в рейле: красная метка едет к активной главе ------------------ */
.doc-rail-tree { position: relative; }
.doc-rail-marker {
    position: absolute;
    left: 0; top: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--red-br, #ef3b3b), var(--red-d, #9e1414));
    box-shadow: 0 0 10px rgba(239, 59, 59, .55);
    opacity: 0;
    transition: transform var(--t-slow) cubic-bezier(.16, 1, .3, 1),
                height var(--t-slow) cubic-bezier(.16, 1, .3, 1),
                opacity var(--t-base) var(--ease-out);
    pointer-events: none;
}
.doc-rail-marker.is-on { opacity: 1; }
body.doc-searching .doc-rail-marker { opacity: 0; }

/* ---- прогресс чтения главы ------------------------------------------------ */
.doc-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--red-d, #9e1414), #ff5b50);
    box-shadow: 0 0 12px rgba(239, 59, 59, .6);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out);
    pointer-events: none;
}
.doc-progress.is-on { opacity: 1; }

/* ---- отклик на наведение --------------------------------------------------- */
.doc-item--lead > .doc-item__n,
.doc-ch__n { transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.doc-item--lead:hover > .doc-item__n {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 14px rgba(207, 41, 41, .45);
}
.doc-clause { transition: background var(--t-base) var(--ease-out); border-radius: 8px; }
.doc-clause:hover { background: rgba(255, 255, 255, .014); }
.doc-item--note, .doc-def, .doc-exlist { transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out); }
.doc-item--note:hover { border-left-color: var(--red-br); }

@media (prefers-reduced-motion: reduce) {
    body .doc-ch.is-enter,
    body .doc-ch.is-enter .doc-clause,
    body .doc-ch.is-enter .doc-def,
    body .doc-ch.is-enter .doc-punish,
    body .doc-ch.is-enter .doc-fac__block { animation: none; }
    .doc-rail-marker { transition: none; }
    .doc-progress { display: none; }
}

/* ---- уход главы при кроссфейде -------------------------------------------- */
@keyframes docChOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-8px) scale(.995); }
}
.doc-ch.is-leaving {
    animation: docChOut .15s ease-in both;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .doc-ch.is-leaving { animation: none; }
}

/* ===========================================================================
   ПАС ПО КОМПОЗИЦИИ
   1) карточка была шире колонки текста — строки жались влево, справа пусто;
   2) перед контентом стояли три слоя мета (позиция, группа, заголовок);
   3) наказание — главное в главе — выглядело как рядовая сноска.
   =========================================================================== */

/* ---- 1. колонка по мерке текста ------------------------------------------- */
.doc-layout { max-width: 820px; }
.wiki-main--doc .wiki-lead { max-width: 820px; margin-inline: auto; }

/* шапка документа как масthead, а не центрированный герой лендинга */
.wiki-main--doc .wiki-lead {
    text-align: left;
    padding-left: 2px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px;
    margin-bottom: 26px;
}
.wiki-main--doc .wiki-lead__sub { margin-left: 0; }
.wiki-main--doc .doc-meta { justify-content: flex-start; }
.wiki-main--doc .wiki-lead__kicker::after { display: none; }

/* ---- 2. крошка: группа слева, позиция справа ------------------------------ */
.doc-crumb { justify-content: space-between; align-items: center; }
.doc-crumb__pos {
    font-family: var(--f);
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-dark-faint);
    white-space: nowrap;
}

/* ---- 3. наказание как приговор в конце главы ------------------------------ */
.doc-punish {
    display: block;
    margin-top: 26px;
    position: relative;             /* точка отсчёта для оттиска */
    padding: 26px 20px 17px;        /* сверху — место под оттиск */
    border: 1px solid rgba(207, 41, 41, .34);
    border-left: 4px solid var(--red);
    border-radius: 0 12px 12px 0;
    background:
        linear-gradient(90deg, rgba(207, 41, 41, .2), rgba(207, 41, 41, .04) 65%),
        rgba(0, 0, 0, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* «НАКАЗАНИЕ» — единственное, что читают ради последствия. Раньше это была
   обычная строчка над текстом. Теперь она вынесена на верхнюю грань блока
   и выглядит как штамп, поставленный поверх документа: чуть повёрнут,
   с продавленной рамкой и тенью под ней. */
.doc-punish__k {
    position: absolute;
    top: -11px; left: 17px;
    display: inline-flex; align-items: center;
    margin: 0;
    /* Высота была дробной (23.88px) — при dpr=1 рамка ложилась на половину
       пикселя, одна грань выходила чёткой, другая мыльной. Прибиваем к целым:
       24 = 22 строка + 1 рамка сверху + 1 снизу. */
    height: 24px;
    padding: 0 11px;
    line-height: 22px;
    box-sizing: border-box;
    font-family: var(--f);
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase;
    /* letter-spacing вешает пробел после последней буквы — срезаем его
       справа, а не двигаем текст: text-indent ломал симметрию зазоров */
    padding-right: calc(11px - .22em);
    color: #ffb0b0;
    border: 1px solid rgba(239, 59, 59, .5);
    overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(180deg, #2b1719 0%, #1c1012 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 0 0 1px rgba(239, 59, 59, .12),
        0 2px 0 rgba(0, 0, 0, .45),
        0 8px 18px -10px rgba(239, 59, 59, .55);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
    white-space: nowrap;
}
.doc-punish__k::before { content: none; }
.doc-punish__v {
    max-width: 70ch;
    font-family: var(--f-read);
    font-size: 14.8px; line-height: 24px;
    color: #f6e6e2;
}

@media (max-width: 720px) {
    .wiki-main--doc .wiki-lead { padding-bottom: 16px; margin-bottom: 18px; }
    .doc-punish { padding: 24px 15px 15px; }   /* место под оттиск сохраняем */
    .doc-crumb { flex-wrap: wrap; gap: 4px 10px; }
}

/* ===========================================================================
   ФОН
   В wiki.css поверх main-bg.webp лежат линейный градиент (74–90% чёрного) и
   виньетка (ещё до 78%). В сумме от фотографии оставалось ~5% — страница
   читалась как плоская чернота. Здесь ослабляем затемнение, добавляем
   тлеющий красный подсвет сверху и делаем панели чуть плотнее, чтобы текст
   не потерял контраст на посветлевшем фоне.
   =========================================================================== */
.wiki-body[data-wiki-section="rules"] {
    /* фон — фотография, поэтому поверхность чтения делаем плотнее: сквозь
       карточку не должен просвечивать тоннель, иначе текст теряет контраст */
    --panel: rgba(19, 20, 23, .95);
    --panel-2: rgba(25, 26, 30, .96);
}

/* Штатный main-bg.webp — почти чёрный файл (средняя яркость 8 из 255), на нём
   страница читалась как плоская чернота. Здесь свой фон: свод тоннеля с
   обрушенным эскалаторным залом (wallhaven.cc/w/ox8mvm, 1920x1080 -> webp,
   99 КБ, яркость 26). Поверх — тлеющий красный сверху, холодный и тёплый
   отблески по нижним углам и умеренное затемнение, чтобы текст не терял
   контраст. */
.wiki-body[data-wiki-section="rules"] .wiki-bg {
    background:
        radial-gradient(72% 46% at 50% -8%, rgba(207, 41, 41, .18), transparent 64%),
        radial-gradient(46% 38% at 6% 90%, rgba(84, 106, 132, .12), transparent 70%),
        radial-gradient(60% 42% at 92% 82%, rgba(156, 78, 40, .1), transparent 72%),
        linear-gradient(180deg, rgba(9, 10, 12, .74), rgba(8, 9, 11, .84) 55%, rgba(9, 8, 8, .92)),
        url(../img/wiki-tunnel-bg.webp) center 32% / cover no-repeat fixed;
    /* лёгкое размытие уводит фотографию на задний план: она держит атмосферу,
       но не спорит с текстом. Отрицательный inset прячет светлую кайму,
       которую blur оставляет по краям элемента. */
    inset: -14px;
    filter: saturate(.78) blur(3px);
}
.wiki-body[data-wiki-section="rules"] .wiki-bg::after {
    /* без горизонтальной «дымки»: на градиентном фоне она читалась как лёгкий
       туман, а поверх фотографии превратилась в видимую полосу поперёк экрана */
    background: radial-gradient(140% 100% at 50% 6%, transparent 42%, rgba(0, 0, 0, .62) 100%);
}
.wiki-body[data-wiki-section="rules"] .wiki-grain { opacity: .05; }

/* мягкое свечение вдоль рейла — граница панели и «тоннеля» */
body.doc-rail-mode .wiki-rail {
    box-shadow: 24px 0 60px -30px rgba(0, 0, 0, .9);
}

/* колонка чтения получает собственную тень-подложку, чтобы отделиться от фона */
.doc-ch, .doc-pager__a { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ===========================================================================
   ЧИСТКА АКЦЕНТОВ
   Красный был у номера главы, номера пункта, ключевого слова, крошки, чипов,
   наказания, бегунка и прогресса — восемь сущностей одного веса, из-за чего
   ни одна не читалась как главная. Оставляем красное только за тремя:
   номер главы, запрет, наказание. Остальное уходит в нейтраль.
   =========================================================================== */

/* ---- номер пункта: цифра, а не кнопка ------------------------------------- */
.doc-item--lead > .doc-item__n {
    min-width: 30px; height: auto;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 14px; font-weight: 800;
    color: #bf5f5f;
    padding-top: 2px;
}
.doc-item--lead:hover > .doc-item__n { box-shadow: none; color: var(--red-br); }

/* номер главы остаётся единственной залитой плашкой на странице */
.doc-ch__n {
    min-width: 34px; height: 26px;
    font-size: 13px;
}
.doc-ch__h { font-size: 19px; letter-spacing: -.005em; }

/* ---- крошка: группа больше не красная ------------------------------------- */
.doc-crumb {
    background: none;
    border-bottom-color: rgba(255, 255, 255, .06);
    color: var(--on-dark-faint);
}
.doc-crumb > span:first-child { color: var(--on-dark-dim); }

/* ---- «Разрешено»: стальной, а не бутстраповский зелёный -------------------- */
.doc-kw--yes  { color: #8fb0ad; }
.doc-kw--must { color: #b9a274; }

/* ---- статистика и предупреждение в шапке ---------------------------------- */
.doc-meta { display: block; margin-top: 16px; }
.doc-stats {
    margin: 0;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--f-read);
    font-size: 13px; color: var(--on-dark-faint);
}
.doc-stats b { color: var(--on-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.doc-stats i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.doc-warn {
    margin: 12px 0 0;
    padding-left: 11px;
    border-left: 2px solid rgba(207, 41, 41, .6);
    font-family: var(--f-read);
    font-size: 13px; line-height: 1.45;
    color: var(--on-dark-dim);
}

/* ---- меньше декора на карточке -------------------------------------------- */
.doc-ch, .doc-pager__a { backdrop-filter: none; -webkit-backdrop-filter: none; }
.doc-ch { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .75); }

/* ---- наказание: линия вместо светящейся точки ----------------------------- */
/* точка перед подписью убрана: подпись стала оттиском */

/* ===========================================================================
   ИЕРАРХИЯ ПРИ ЧТЕНИИ
   Пока открыта глава, главный заголовок страницы — её название, а не название
   свода: свод и так подписан в рейле. Раньше «Правила сервера» были самым
   крупным текстом на экране, а читаемая глава набиралась вдвое мельче.
   =========================================================================== */
body.doc-compact .wiki-lead { padding-bottom: 14px; margin-bottom: 18px; }
body.doc-compact .wiki-lead__kicker { display: none; }
body.doc-compact .wiki-lead__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--on-dark-dim);
}
body.doc-compact .doc-warn { display: none; }   /* показываем только на входе */
body.doc-compact .doc-meta { margin-top: 8px; }
body.doc-compact .doc-stats { font-size: 12px; }

/* глава становится главным заголовком страницы */
body.doc-compact .doc-ch__h {
    font-size: 24px;
    padding: 22px 24px 20px;
}
/* размер цифры теперь один для всех глав — водяной знак ниже по файлу */

/* ---- поиск: тише и компактнее --------------------------------------------- */
.doc-search { padding: 8px 0; margin-bottom: 20px; }
.doc-search__box {
    padding: 8px 13px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .07);
}
.doc-search__in { font-size: 14px; }
.doc-search__box:focus-within {
    background: var(--panel-2);
    border-color: rgba(239, 59, 59, .5);
}

@media (max-width: 720px) {
    body.doc-compact .doc-ch__h { font-size: 19px; padding: 16px 15px; }
}

/* ===========================================================================
   ОБЪЁМ ПАНЕЛЕЙ
   Единое правило вместо случайных теней:
     ПОДНЯТЫЕ (карточка главы, кнопки, плашки) — блик по верхней грани,
     контактная тень вплотную и мягкая рассеянная под ней. Рамка светлее
     сверху и темнее снизу, как у реального ребра под верхним светом.
     УТОПЛЕННЫЕ (поле поиска, примечания, примеры, определение) — внутренняя
     тень сверху, блика нет. Тогда врезка читается как углубление в панели,
     а не как ещё одна карточка поверх.
   Токены ниже задают глубину один раз, дальше только ссылки на них.
   =========================================================================== */
.wiki-body[data-wiki-section="rules"] {
    --lift-edge: inset 0 1px 0 rgba(255, 255, 255, .07);
    --lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .45);
    --lift-2: 0 1px 2px rgba(0, 0, 0, .55), 0 22px 46px -24px rgba(0, 0, 0, .85);
    --sink: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .025);
    --edge-top: rgba(255, 255, 255, .1);
    --edge-side: rgba(255, 255, 255, .055);
    --edge-bottom: rgba(255, 255, 255, .025);
}

/* ---- поднятые ------------------------------------------------------------- */
.doc-ch {
    border-color: var(--edge-top) var(--edge-side) var(--edge-bottom);
    box-shadow: var(--lift-edge), var(--lift-2);
}
/* шапка главы — верхний план, тело под ней утоплено */
.doc-ch__h {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 10px 18px -14px rgba(0, 0, 0, .9);
    position: relative;
    z-index: 1;
}
.doc-crumb { box-shadow: 0 1px 0 rgba(0, 0, 0, .35); position: relative; z-index: 2; }

.doc-pager__a {
    border-color: var(--edge-top) var(--edge-side) var(--edge-bottom);
    box-shadow: var(--lift-edge), var(--lift-1);
}
.doc-pager__a:hover { box-shadow: var(--lift-edge), var(--lift-2); }
.doc-pager__a:active { transform: translateY(0); box-shadow: var(--sink); }

.doc-hub__card {
    border-color: var(--edge-top) var(--edge-side) var(--edge-bottom);
    box-shadow: var(--lift-edge), var(--lift-1);
}
a.doc-hub__card:hover { box-shadow: var(--lift-edge), var(--lift-2); }

.doc-rail-back { box-shadow: var(--lift-edge), 0 1px 2px rgba(0, 0, 0, .4); }
.doc-fac__limit {
    border-color: var(--edge-top) var(--edge-side) var(--edge-bottom);
    box-shadow: var(--lift-edge), var(--lift-1);
}

/* ---- утопленные ----------------------------------------------------------- */
.doc-search__box {
    box-shadow: var(--sink);
    border-color: rgba(0, 0, 0, .5) rgba(255, 255, 255, .05) rgba(255, 255, 255, .06);
}
.doc-search__box:focus-within {
    box-shadow: var(--sink), 0 0 0 3px rgba(207, 41, 41, .16);
}
.doc-def, .doc-exlist {
    box-shadow: var(--sink);
    border-color: rgba(0, 0, 0, .45) rgba(255, 255, 255, .045) rgba(255, 255, 255, .05);
}
.doc-item--note { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }

/* наказание — приподнято и слегка светится, это финал главы */
.doc-punish {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 1px 2px rgba(0, 0, 0, .5),
        0 16px 34px -22px rgba(207, 41, 41, .5);
}

/* ---- рейл: собственное ребро ---------------------------------------------- */
body.doc-rail-mode .wiki-rail {
    border-right-color: rgba(255, 255, 255, .07);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .5), 24px 0 60px -30px rgba(0, 0, 0, .9);
}

/* ---- досье фракции: лого лежит в углублении -------------------------------- */
.doc-fac__logo {
    box-shadow: var(--sink);
    border: 1px solid rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
    .doc-pager__a:active { transform: none; }
}

/* ---- вводка главы ---------------------------------------------------------
   После вычистки эха заголовка из данных первый абзац главы — это определение
   термина без самого термина (он и так стоит в заголовке выше). Подаём его
   как вводку: крупнее и светлее основного текста, с красной гранью слева. */
.doc-ch__body > .doc-ch__lead:first-child {
    margin: 0 0 20px;
    padding: 2px 0 2px 15px;
    border-left: 2px solid rgba(207, 41, 41, .45);
    font-size: 15.4px;
    line-height: 26px;
    color: var(--on-dark);
    max-width: 70ch;
}
.doc-ch__body > .doc-ch__lead:first-child + .doc-ch__lead { margin-top: -6px; }

/* ---- подзаголовок раздела внутри главы ------------------------------------
   «Проверка на «Софт»:», «Часть «Наказания»:» — это заголовки подразделов, а
   не подписи к спискам. Раньше они шли одним стилем с подводкой «Правильные
   ники:» и были 12.5px, то есть МЕЛЬЧЕ основного текста под ними. */
.doc-item--head { padding: 4px 0 2px; }
.doc-clause--flat > .doc-item--head { padding-top: 16px; }
.doc-clause--flat:first-child > .doc-item--head { padding-top: 2px; }
/* Заголовок раздела внутри главы. Иконка живёт в колонке номера — место под
   неё уже есть, поэтому текст не сдвигается ни на пиксель. */
.doc-item--head > .doc-item__n {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 22px;
    padding-top: 3px;
    color: var(--red-br);
}
.doc-head__ico {
    width: 17px; height: 17px;
    flex: 0 0 auto;
    opacity: .92;
    filter: drop-shadow(0 0 6px rgba(239, 59, 59, .35));
}
.doc-item--head > .doc-item__t {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--f);
    font-size: 17.5px; font-weight: 800; line-height: 24px;
    letter-spacing: .002em;
    color: #fff;
    max-width: none;
}
.doc-item--head > .doc-item__t::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 85%);
}
.doc-item--head { padding-top: 14px; }
.doc-clause--flat:first-child > .doc-item--head { padding-top: 2px; }

/* примечания были 13.5px — на границе комфортного, поднимаем */
.doc-item--note > .doc-item__t { font-size: 14.2px; line-height: 23px; color: #a8a29a; }
.doc-item--ex > .doc-item__t { font-size: 14px; }
.doc-ch__lead { font-size: 14.8px; }

/* ===========================================================================
   ПОДВАЛ НА ФОТО-ФОНЕ
   .divider-another и .footer_bg достались от общего style.css. Первый — блок
   94px с почти чёрным градиентом шириной по контенту (982px при экране 1270),
   из-за чего его боковые края читались как полоса поперёк экрана. Второй —
   footer-bg.webp на прозрачности .3, а сам файл почти чёрный (яркость 4.9),
   то есть просто тёмная плашка. На прежнем плоском фоне оба сливались, на
   фотографии стали артефактами. Заменяем их одной сплошной растяжкой.
   =========================================================================== */
.wiki-body[data-wiki-section="rules"] .divider-another { display: none; }

.wiki-body[data-wiki-section="rules"] .footer_bg {
    height: 360px;
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(6, 7, 8, 0) 0%,
        rgba(6, 7, 8, .55) 38%,
        rgba(5, 6, 7, .88) 100%);
}
.wiki-body[data-wiki-section="rules"] .footer { margin-top: 56px; }

/* ===========================================================================
   СПИСКИ И ТЕРМИНЫ
   Главы вроде «Правил группировок» — это списки вида «Термин: описание».
   Без выделения термина и видимого маркера они читались сплошной серой
   простынёй, где ни один пункт нельзя отличить от соседнего.
   =========================================================================== */

/* термин в начале пункта */
.doc-term {
    color: #fff;
    font-weight: 700;
}

/* маркер буллета был var(--red-d) — почти невидимый на тёмном */
.doc-item--bullet > .doc-item__n {
    min-width: 16px;
    color: rgba(207, 41, 41, .85);
    font-size: 13px;
    line-height: 26px;
    padding-top: 0;
}

/* подряд идущие пункты списка — плотнее и с тонкой разделительной линией,
   чтобы читались как перечень, а не как отдельные абзацы вразнобой */
.doc-clause--flat { padding: 0; }
.doc-clause--flat > .doc-item--bullet { padding: 10px 0; }
.doc-clause--flat + .doc-clause--flat > .doc-item--bullet {
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.doc-clause--flat + .doc-clause:not(.doc-clause--flat) { margin-top: 14px; }
.doc-clause:not(.doc-clause--flat) + .doc-clause--flat { padding-top: 8px; }

/* короткие нумерованные пункты подряд («1 Союз», «2 Дружба») не должны
   занимать по 60px каждый — сжимаем в компактный перечень */
.doc-clause--tight { padding: 0; }
.doc-clause--tight > .doc-item--lead { padding: 7px 0; }
.doc-clause--tight + .doc-clause--tight > .doc-item--lead {
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.doc-clause--tight > .doc-item--lead > .doc-item__n { font-size: 13px; padding-top: 1px; }

/* длинный пункт, разбитый на абзацы */
.doc-item__t > p { margin: 0 0 10px; }
.doc-item__t > p:last-child { margin-bottom: 0; }

/* ===========================================================================
   ЕДИНАЯ ШКАЛА ЗАГОЛОВКОВ И ЧИСТКА КРАСНОЙ ГРАНИ
   Заголовки разделов существовали в двух системах: в главах правил 15.5px
   белым с уходящей линией, в досье фракций — 11px серым капсом. Сводим к
   одной. Красная грань слева означала четыре разные вещи (вводка, примечание,
   наказание, предупреждение) — оставляем её только за наказанием.
   =========================================================================== */

/* заголовок раздела в досье фракции = заголовок раздела в главе правил */
.doc-fac__k {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 12px;
    font-family: var(--f);
    font-size: 15.5px; font-weight: 800; line-height: 22px;
    letter-spacing: .005em; text-transform: none;
    color: #fff;
}
.doc-fac__k::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent);
}
.doc-fac__block + .doc-fac__block { margin-top: 26px; }

/* вводка главы: отличается размером, а не декором */
.doc-ch__body > .doc-ch__lead:first-child {
    padding: 0;
    border-left: 0;
    margin-bottom: 18px;
    font-size: 15.6px;
    color: #d9d4ca;
}
/* проза внутри досье — обычный абзац, без отступа под маркер */
.doc-fac__block .doc-ch__lead { margin: 0 0 12px; max-width: 72ch; }
.doc-fac__block .doc-ch__lead:last-child { margin-bottom: 0; }

/* примечание: нейтральная грань, смысл несёт плашка-метка */
.doc-item--note { border-left-color: rgba(255, 255, 255, .16); }
.doc-item--note:hover { border-left-color: rgba(255, 255, 255, .28); }

/* шапка досье: имя фракции — главное, лимит — служебная цифра */
.doc-fac__name { font-size: 21px; letter-spacing: -.005em; }
.doc-fac__limit { padding: 6px 12px; background: rgba(255, 255, 255, .03); }
.doc-fac__limit b { font-size: 17px; color: var(--on-dark); }
.doc-fac__limit span { font-size: 9.5px; color: var(--on-dark-faint); }
.doc-fac__top { padding: 18px 24px; gap: 18px; }
.doc-fac__logo { width: 48px; height: 48px; }

/* ===========================================================================
   ГЛАВА КАК СТРАНИЦА, А НЕ КАК КАРТОЧКА
   Всё содержимое главы лежало в одной панели с рамкой, фоном и тенью: заголовок,
   текст, пункты, наказание. Получался один высокий серый прямоугольник —
   читается как виджет, а не как документ. Убираем оболочку: текст ложится прямо
   на страницу, а рамку сохраняем только за тем, что должно выделяться —
   наказание, шапка досье, сетка примеров, примечания, кнопки перехода.
   Читаемость поверх фотографии держит мягкая подложка колонки без видимых краёв.
   =========================================================================== */

/* подложка колонки: широкая и с размытыми краями, поэтому не читается рамкой */
.wiki-main--doc .doc-layout {
    position: relative;
}
/* Полупрозрачная подложка не спасала: сквозь неё просвечивала фактура
   фотографии, и текст читался тяжело. Нужен именно ЛИСТ — плотная поверхность
   под всю колонку сразу. Одна на весь документ, а не коробка вокруг каждой
   главы: тогда это страница, а не набор виджетов. */
.wiki-main--doc .doc-layout::before {
    content: "";
    position: absolute;
    inset: -26px -38px -34px -38px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .2);
    border-top-color: rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(15, 16, 19, .975), rgba(11, 12, 15, .99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 30px 70px -34px rgba(0, 0, 0, .95);
    pointer-events: none;
}

/* сама глава — прозрачный контейнер */
.doc-ch {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
}
.doc-ch__body { padding: 0; }

/* крошка — строка над заголовком, без плашки */
.doc-crumb {
    padding: 0 0 12px;
    border-bottom: 0;
    background: none;
    box-shadow: none;
}

/* заголовок главы: крупный, с линией под ним вместо панели */
.doc-ch__h {
    padding: 0 0 16px;
    margin-bottom: 22px;
    background: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    gap: 14px;
}
body.doc-compact .doc-ch__h { padding: 0 0 16px; font-size: 27px; }

/* шапка досье остаётся панелью — это карточка фракции */
.doc-fac__top {
    margin-bottom: 24px;
    border: 1px solid var(--edge-top);
    border-color: var(--edge-top) var(--edge-side) var(--edge-bottom);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)), var(--panel);
    box-shadow: var(--lift-edge), var(--lift-1);
}

/* низ главы: линия перед пагинатором вместо края карточки */
.doc-pager {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 720px) {
    .wiki-main--doc .doc-layout::before { inset: -24px -18px; }
    body.doc-compact .doc-ch__h { font-size: 21px; }
}

/* ===========================================================================
   РАЗДЕЛЕНИЕ ПУНКТОВ И ШКАЛА РАЗМЕРОВ
   1) Пункты отделялись только воздухом и волосяной линией в 7% белого — на
      тёмном фоне это почти не видно, список сливался. Даём номеру постоянную
      колонку (глаз ведёт по ней вниз), больше воздуха между пунктами и
      заметную линию между ними.
   2) Часть подписей была 9.5–10.5px — ниже порога, на котором текст читается
      без напряжения. Поднимаем нижнюю границу до 11.5px.
   =========================================================================== */

/* ---- 1. пункт как строка списка ------------------------------------------- */
.doc-clause { padding: 20px 0; }
.doc-clause + .doc-clause { border-top: 1px solid rgba(255, 255, 255, .085); }
.doc-item { gap: 16px; }

/* номер — постоянная колонка слева, по ней читается структура */
.doc-item--lead > .doc-item__n {
    min-width: 34px;
    font-size: 15px;
    font-weight: 800;
    padding-top: 1px;
}
.doc-clause__kids { margin-left: 16px; padding-left: 22px; }
.doc-item--sub > .doc-item__n { min-width: 38px; font-size: 13.5px; }
.doc-item--sub > .doc-item__t { font-size: 14.6px; }
.doc-clause__kids-in > .doc-item:not(.doc-item--note) { padding: 9px 0; }

/* подсветка активного пункта заметнее — видно, где он начинается и кончается */
.doc-clause {
    margin-left: -14px;
    padding-left: 14px;
    padding-right: 14px;
    margin-right: -14px;
}
.doc-clause:hover { background: rgba(255, 255, 255, .022); }

/* ---- 2. нижняя граница размеров ------------------------------------------- */
.doc-crumb { font-size: 11.5px; }
.doc-crumb__pos { font-size: 11.5px; }
.doc-item--cap > .doc-item__t { font-size: 13px; line-height: 18px; }
.doc-note__k { font-size: 11.5px; }
.doc-punish__k { font-size: 11.5px; }
.doc-fac__limit span { font-size: 11px; }
.doc-fac__limit b { font-size: 19px; }
.doc-stats { font-size: 13.5px; }
.doc-warn { font-size: 13.5px; }
.doc-rail-ch { font-size: 13px; }
.doc-rail-ch i { font-size: 11.5px; min-width: 18px; }
.doc-rail-g { font-size: 10.5px; }
.doc-rail-doc { font-size: 14.5px; }
.doc-rail-back { font-size: 12.5px; }
.doc-search__in { font-size: 14.5px; }
.doc-pager__k { font-size: 11.5px; }
.doc-pager__t { font-size: 14.5px; }
.doc-toc__a { font-size: 13px; }

@media (max-width: 720px) {
    .doc-clause { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
    .doc-clause__kids { margin-left: 6px; padding-left: 14px; }
    .doc-item--lead > .doc-item__n { min-width: 28px; }
    .doc-item--sub > .doc-item__n { min-width: 32px; }
}

/* последние подписи ниже порога: «Документ» над списком глав и счётчик в
   свёрнутой шапке. «/» в поиске оставляем — это изображение клавиши */
.doc-rail-mode .wiki-rail__label { font-size: 11.5px; }
body.doc-compact .doc-stats { font-size: 12.5px; }

/* подписи групп в рейле и оглавлении — последние 10.5px на странице */
.doc-rail-g, .doc-toc__g, .doc-toc__h { font-size: 11.5px; letter-spacing: .12em; }

/* ===========================================================================
   ШАПКА ВНУТРИ ЛИСТА
   Раньше .wiki-lead была снаружи .doc-layout: лист начинался под ней, и
   заголовок свода со статистикой висел отдельным куском прямо на фотографии.
   Теперь шапка — первый блок листа, отделённый от содержимого линией.
   =========================================================================== */
.wiki-main--doc .wiki-lead {
    max-width: none;
    margin: 0 0 22px;
    padding: 2px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
body.doc-compact .wiki-lead {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
}
body.doc-compact .wiki-lead__title { margin: 0; }
body.doc-compact .doc-meta { margin: 0; }
body.doc-compact .doc-stats { gap: 8px; }

/* лист начинается выше, чтобы принять шапку */
.wiki-main--doc .doc-layout::before { inset: -28px -38px -34px -38px; }
.wiki-main--doc { padding-top: clamp(88px, 11vh, 128px); }

@media (max-width: 720px) {
    body.doc-compact .wiki-lead { gap: 8px; }
}

/* ---- липкий поиск без «плашки» --------------------------------------------
   .doc-search имел градиентный фон (сплошной вверху -> прозрачный внизу): он
   был нужен, когда контент лежал прямо на фотографии. На плотном листе этот
   градиент читается как непонятная полоса над полем. Меняем на ровный цвет
   листа — при прокрутке поле по-прежнему перекрывает текст под собой. */
.doc-search {
    background: rgba(13, 14, 17, .97);
    margin-left: -38px;
    margin-right: -38px;
    padding-left: 38px;
    padding-right: 38px;
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .8);
}
@media (max-width: 720px) {
    .doc-search { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}

/* ===========================================================================
   РАСКРЫВАЮЩИЕСЯ ПУНКТЫ
   Глава вываливалась на человека целиком. Теперь подпункты свёрнуты, а кнопка
   говорит, сколько внутри — раскрытие становится осознанным выбором.
   Анимация высоты через grid 0fr -> 1fr: единственный способ плавно раскрыть
   содержимое неизвестной высоты без замеров в JS.
   =========================================================================== */
.doc-clause__kids {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    padding: 0;
    border: 0;
    transition: grid-template-rows var(--t-slow) var(--ease-out),
                margin-top var(--t-slow) var(--ease-out);
}
.doc-clause__kids-in {
    overflow: hidden;
    min-height: 0;
    margin-left: 16px;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .11);
}
.doc-clause.is-open > .doc-clause__kids { grid-template-rows: 1fr; margin-top: 10px; }

/* кнопка раскрытия */
.doc-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 10px 0 0 50px;
    padding: 5px 12px 5px 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    font-family: var(--f);
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: var(--on-dark-dim);
    transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.doc-toggle:hover {
    color: var(--on-dark);
    border-color: rgba(239, 59, 59, .45);
    background: rgba(255, 255, 255, .06);
}
.doc-toggle__i {
    width: 8px; height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--t-base) var(--ease-out);
}
.doc-clause.is-open > .doc-toggle {
    color: var(--on-dark);
    border-color: rgba(239, 59, 59, .4);
}
.doc-clause.is-open > .doc-toggle .doc-toggle__i {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* ---- метка примечания отдельной строкой ------------------------------------
   Плашка стояла в потоке текста, и вторая строка уползала под неё — выглядело
   съехавшим. Выносим метку над текстом: обтекания нет, левая грань ровная. */
.doc-note__k {
    display: block;
    width: fit-content;
    margin: 0 0 7px;
    padding: 2px 9px;
    vertical-align: baseline;
}
.doc-item--note { padding-top: 11px; padding-bottom: 11px; }

@media (prefers-reduced-motion: reduce) {
    .doc-clause__kids, .doc-toggle__i { transition: none; }
}
@media print {
    .doc-clause__kids { grid-template-rows: 1fr !important; }
    .doc-toggle { display: none !important; }
}
@media (max-width: 720px) {
    .doc-toggle { margin-left: 28px; }
    .doc-clause__kids-in { margin-left: 6px; padding-left: 14px; }
}

/* ===========================================================================
   ФИКСАЦИЯ ПУНКТА И ЧИСЛА В ТЕКСТЕ
   1) Пункты отделялись только волосяной линией — когда читаешь длинную главу,
      непонятно, где кончается один и начинается следующий. Даём каждому левую
      грань: прозрачную в покое, красную под курсором и у открытого. Плюс
      наведение подсвечивает пункт целиком, а не только строку.
   2) Операционная часть свода — числа: сроки банов, лимиты, суммы. В сплошном
      сером они терялись, хотя именно их ищут глазами.
   =========================================================================== */

/* ---- 1. пункт как отдельная единица ---------------------------------------- */
.doc-clause {
    border-left: 2px solid transparent;
    padding-left: 16px;
    margin-left: -18px;
    transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.doc-clause:hover {
    border-left-color: rgba(207, 41, 41, .55);
    background: rgba(255, 255, 255, .026);
}
.doc-clause.is-open {
    border-left-color: rgba(207, 41, 41, .38);
    background: rgba(255, 255, 255, .018);
}
.doc-clause.is-open:hover { border-left-color: rgba(207, 41, 41, .6); }

/* пункт, на который вела ссылка — держится подсвеченным дольше вспышки */
.doc-item.is-linked {
    box-shadow: -3px 0 0 var(--red-br);
    border-radius: 2px;
}

/* линия между пунктами заметнее и не липнет к грани */
.doc-clause + .doc-clause { border-top: 1px solid var(--rule); }

/* ---- 2. числа и сроки ------------------------------------------------------ */
.doc-num {
    font-weight: 700;
    color: #f0ece3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.doc-punish__v .doc-num {
    color: #fff;
    border-bottom: 1px solid rgba(255, 138, 138, .4);
    padding-bottom: 1px;
}

/* ---- 3. кавычки-ёлочки как акцент внутри фразы ------------------------------ */
.doc-item__t, .doc-ch__lead, .doc-punish__v { quotes: "«" "»"; }

@media (max-width: 720px) {
    .doc-clause { margin-left: -12px; padding-left: 10px; }
}
@media print {
    .doc-clause { border-left: 0; margin-left: 0; padding-left: 0; }
    .doc-num { color: #000; }
}

/* ---- хаб /wiki: те же поверхности и фон, что у документации ---------------- */
.wiki-body[data-wiki-section="hub"] {
    --panel: rgba(19, 20, 23, .95);
    --panel-2: rgba(25, 26, 30, .96);
    --lift-edge: inset 0 1px 0 rgba(255, 255, 255, .07);
    --lift-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .45);
    --lift-2: 0 1px 2px rgba(0, 0, 0, .55), 0 22px 46px -24px rgba(0, 0, 0, .85);
    --edge-top: rgba(255, 255, 255, .1);
    --edge-side: rgba(255, 255, 255, .055);
    --edge-bottom: rgba(255, 255, 255, .025);
}
.wiki-body[data-wiki-section="hub"] .wiki-bg {
    background:
        radial-gradient(72% 46% at 50% -8%, rgba(207, 41, 41, .18), transparent 64%),
        radial-gradient(46% 38% at 6% 90%, rgba(84, 106, 132, .12), transparent 70%),
        linear-gradient(180deg, rgba(9, 10, 12, .74), rgba(8, 9, 11, .84) 55%, rgba(9, 8, 8, .92)),
        url(../img/wiki-tunnel-bg.webp) center 32% / cover no-repeat fixed;
    inset: -14px;
    filter: saturate(.78) blur(3px);
}
.wiki-body[data-wiki-section="hub"] .wiki-bg::after {
    background: radial-gradient(140% 100% at 50% 6%, transparent 42%, rgba(0, 0, 0, .62) 100%);
}
.wiki-body[data-wiki-section="hub"] .wiki-grain { opacity: .05; }
.wiki-body[data-wiki-section="hub"] .divider-another { display: none; }
.wiki-body[data-wiki-section="hub"] .footer_bg {
    height: 360px; opacity: 1;
    background: linear-gradient(180deg, rgba(6, 7, 8, 0), rgba(6, 7, 8, .55) 38%, rgba(5, 6, 7, .88));
}

/* ===========================================================================
   ГЕРБЫ ФРАКЦИЙ
   В папке лежат 16 логотипов, которые нигде не использовались. В рейле все 15
   группировок выглядели одинаковыми строками — взгляд не цеплялся ни за одну.
   Теперь у каждой свой герб вместо номера, а в досье он же работает фоном.
   =========================================================================== */
.doc-rail-logo {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.doc-rail-ch:hover .doc-rail-logo { opacity: .85; filter: grayscale(.4); }
.doc-rail-ch.is-here .doc-rail-logo {
    opacity: 1;
    filter: none;
    transform: scale(1.08);
}


/* герб фоном в шапке досье */
.doc-fac__top { position: relative; overflow: hidden; }
.doc-fac__wm {
    position: absolute;
    right: -18px; top: 50%;
    transform: translateY(-50%);
    width: 168px; height: 168px;
    object-fit: contain;
    opacity: .07;
    filter: grayscale(1) contrast(1.2);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
            mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.doc-fac__top > *:not(.doc-fac__wm) { position: relative; z-index: 1; }

/* сам логотип в карточке — чуть крупнее и без утопленной подложки */
.doc-fac__logo { width: 52px; height: 52px; padding: 4px; }

@media (max-width: 720px) {
    .doc-fac__wm { width: 120px; height: 120px; right: -26px; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-rail-ch.is-here .doc-rail-logo { transform: none; }
}

/* ===========================================================================
   ОТНОШЕНИЯ ФРАКЦИЙ КАК ТАБЛИЦА
   В исходнике статус записан по-разному: «Вражда», «Идеологические враги
   (перманентная война)», «Союзники», «Абсолютный нейтралитет». Сводим к трём
   меткам — досье начинает читаться таблицей, а не абзацами.
   =========================================================================== */
.doc-rel { align-items: flex-start; }
.doc-rel__s {
    flex: 0 0 auto;
    width: 104px;
    margin-top: 1px;
    padding: 3px 0 3px 11px;
    border-left: 3px solid currentColor;
    font-family: var(--f);
    font-size: 11.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    line-height: 1.3;
}
.doc-rel--war   .doc-rel__s { color: #ff6b6b; }
.doc-rel--enemy .doc-rel__s { color: #e08a5a; }
.doc-rel--ally  .doc-rel__s { color: #8fb0ad; }
.doc-rel--neutral .doc-rel__s { color: #8b857c; }

.doc-rel .doc-item__t { padding-top: 1px; }

@media (max-width: 640px) {
    .doc-rel { flex-wrap: wrap; gap: 6px; }
    .doc-rel__s { width: auto; padding-left: 9px; }
}

/* ===========================================================================
   ЯКОРЬ ПУНКТА И МЯГКИЕ ПОДСВЕТКИ
   1) Значок ссылки стоял в left:-22px и налезал на левую грань пункта, которая
      появилась позже. Текст ограничен 72ch, поэтому справа есть пустое поле —
      туда якорь и переезжает: не спорит с гранью и не режет отступ.
   2) Плоские заливки на наведении заменяем градиентными: свет идёт от той
      грани, к которой относится элемент, и растворяется — движение читается
      мягче, чем равномерная подложка.
   =========================================================================== */

/* ---- 1. якорь справа -------------------------------------------------------- */
.doc-anchor {
    left: auto;
    right: 0;
    top: 3px;
    width: 22px; height: 22px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--on-dark-faint);
    background: rgba(255, 255, 255, .04);
    transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.doc-anchor:hover {
    color: #fff;
    background: rgba(207, 41, 41, .55);
}
.doc-item__t { padding-right: 30px; }
.doc-ch__h .doc-anchor { background: none; }

/* ---- 2. подсветки градиентом ------------------------------------------------
   ГРАДИЕНТЫ НЕ АНИМИРУЮТСЯ. background-image меняется скачком, никакой
   transition его не подхватывает — поэтому подсветка при наведении щёлкала
   мгновенно. Кладём градиент на псевдоэлемент и гоняем его прозрачность:
   opacity анимируется, считается на композиторе и ничего не перерисовывает.
   isolation:isolate — чтобы z-index:-1 остался внутри элемента: тогда
   подсветка ложится поверх его фона, но под его же текст. */
.doc-clause, .doc-rail-ch, .doc-item--note, .doc-toggle, .doc-pager__a {
    position: relative;
    isolation: isolate;
}
.doc-clause::before, .doc-clause::after,
.doc-rail-ch::before, .doc-item--note::before,
.doc-toggle::before, .doc-pager__a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out);
}

/* пункт: ::before — наведение, ::after — раскрытое состояние */
.doc-clause::before { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .008) 55%, transparent); }
.doc-clause::after  { background: linear-gradient(90deg, rgba(207, 41, 41, .09), rgba(255, 255, 255, .01) 50%, transparent); }
.doc-clause:hover::before   { opacity: 1; }
.doc-clause.is-open::after  { opacity: 1; }
.doc-clause.is-open:hover::after { opacity: 1.0; }

.doc-rail-ch::before { background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01)); }
.doc-rail-ch:hover::before { opacity: 1; }

.doc-item--note::before { background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02) 60%); }
.doc-item--note:hover::before { opacity: 1; }

.doc-toggle::before { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); }
.doc-toggle:hover::before { opacity: 1; }
.doc-toggle:hover { box-shadow: 0 0 0 3px rgba(207, 41, 41, .07); }

/* кнопки перехода: свет идёт со стороны, куда ведёт стрелка */
.doc-pager__a--prev::before { background: linear-gradient(90deg, rgba(207, 41, 41, .1), rgba(255, 255, 255, .02) 60%); }
.doc-pager__a--next::before { background: linear-gradient(270deg, rgba(207, 41, 41, .1), rgba(255, 255, 255, .02) 60%); }
.doc-pager__a:hover::before { opacity: 1; }

/* карточки хаба: сияние из-под верхней грани */
a.doc-hub__card::after {
    content: "";
    position: absolute; inset: -1px -1px auto;
    height: 90px;
    background: radial-gradient(60% 100% at 50% 0, rgba(207, 41, 41, .16), transparent 70%);
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-out);
    pointer-events: none;
}
a.doc-hub__card:hover::after { opacity: 1; }

/* строка новости/раздела в досье — лёгкий сдвиг света при наведении */
.doc-fac__block .doc-item { position: relative; isolation: isolate; border-radius: 6px; }
.doc-fac__block .doc-item::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 60%);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out);
}
.doc-fac__block .doc-item:hover::before { opacity: 1; }

@media (max-width: 720px) {
    .doc-anchor { display: none; }
    .doc-item__t { padding-right: 0; }
}

/* ===========================================================================
   ПЛАВНОСТЬ ПОИСКА
   Список перестраивался скачком: элементы мгновенно получали display:none,
   и при каждом нажатии клавиши выдача дёргалась. Теперь пока идёт пересчёт,
   область результатов приглушается, а готовый список проявляется целиком.
   =========================================================================== */
#docRoot { transition: opacity var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out); }
#docRoot.is-recalc { opacity: .35; filter: blur(1px); }

/* главы в выдаче появляются лесенкой, а не все разом */
@keyframes docFound {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
body.doc-searching .doc-ch:not(.is-hidden) {
    animation: docFound .3s cubic-bezier(.16, 1, .3, 1) both;
}
body.doc-searching .doc-ch:not(.is-hidden):nth-of-type(2)  { animation-delay: .03s; }
body.doc-searching .doc-ch:not(.is-hidden):nth-of-type(3)  { animation-delay: .06s; }
body.doc-searching .doc-ch:not(.is-hidden):nth-of-type(4)  { animation-delay: .09s; }
body.doc-searching .doc-ch:not(.is-hidden):nth-of-type(n+5){ animation-delay: .12s; }

/* найденные слова проявляются, а не возникают */
@keyframes docHit { from { background: transparent; } to { background: rgba(239, 59, 59, .3); } }
mark.doc-hit { animation: docHit .28s ease both; }

/* счётчик результатов меняется мягко */
.doc-search__count { transition: opacity var(--t-base) var(--ease-out); }
#docRoot.is-recalc ~ * .doc-search__count { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    #docRoot, #docRoot.is-recalc { transition: none; filter: none; opacity: 1; }
    body.doc-searching .doc-ch:not(.is-hidden) { animation: none; }
    mark.doc-hit { animation: none; }
}

/* ===========================================================================
   ЦВЕТ ФРАКЦИИ
   Акцент вычислен из герба при сборке: доминирующий оттенок приведён к ровной
   светлоте под тёмный фон. Красим только детали — рамку досье, свечение,
   подчёркивание заголовков и герб. Текст остаётся нейтральным, иначе читаемость
   поедет на каждой второй фракции.
   =========================================================================== */
.doc-ch--fac { --fac: var(--red-br); }

.doc-ch--fac .doc-fac__top {
    border-color: color-mix(in srgb, var(--fac) 30%, transparent)
                  var(--edge-side) var(--edge-bottom);
    box-shadow:
        var(--lift-edge),
        var(--lift-1),
        0 18px 40px -26px color-mix(in srgb, var(--fac) 55%, transparent);
}
.doc-ch--fac .doc-fac__top::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--fac), color-mix(in srgb, var(--fac) 30%, transparent) 45%, transparent 80%);
}
.doc-ch--fac .doc-fac__logo {
    border-color: color-mix(in srgb, var(--fac) 35%, transparent);
    box-shadow: 0 0 18px -6px color-mix(in srgb, var(--fac) 60%, transparent), var(--sink);
}
.doc-ch--fac .doc-fac__name { color: #fff; }
.doc-ch--fac .doc-fac__limit b { color: var(--fac); }

/* подчёркивание заголовков разделов внутри досье уходит в цвет фракции */
.doc-ch--fac .doc-fac__k::after {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--fac) 45%, transparent), transparent);
}

/* герб-водяной знак слегка тонируется */
.doc-ch--fac .doc-fac__wm { filter: none; opacity: .08; }

/* маркер активной фракции в рейле — в её цвете */
.doc-rail-ch.is-here.has-logo { position: relative; }

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    /* старые движки: обходимся общим красным, вёрстка не страдает */
    .doc-ch--fac .doc-fac__top { border-top-color: rgba(239, 59, 59, .3); }
    .doc-ch--fac .doc-fac__top::before { background: linear-gradient(90deg, var(--red-br), transparent 80%); }
}


/* ===========================================================================
   НАЙДЕННОЕ — КЛИКАБЕЛЬНО
   Раньше выдача была «read-only»: нашёл пункт и дальше ищи его руками. Теперь
   строка результата ведёт к себе же — глава открывается, подпункт
   разворачивается, страница встаёт на нужное место.
   =========================================================================== */
body.doc-searching .doc-q.is-hit {
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
body.doc-searching .doc-q.is-hit::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background: linear-gradient(90deg, rgba(207, 41, 41, .12), rgba(255, 255, 255, .02) 60%, transparent);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out);
}
body.doc-searching .doc-q.is-hit {
    isolation: isolate;
    box-shadow: -3px 0 0 rgba(239, 59, 59, 0);
    transition: box-shadow var(--t-base) var(--ease-out);
}
body.doc-searching .doc-q.is-hit:hover::before { opacity: 1; }
body.doc-searching .doc-q.is-hit:hover { box-shadow: -3px 0 0 var(--red-br); }
/* стрелка появляется по наведению и подсказывает, что строка ведёт дальше */
body.doc-searching .doc-q.is-hit::after {
    content: "→";
    position: absolute;
    right: 6px; top: 50%;
    transform: translate(-4px, -50%);
    font-size: 14px; font-weight: 700;
    color: var(--red-br);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
    pointer-events: none;
}
body.doc-searching .doc-q.is-hit:hover::after { opacity: 1; transform: translate(0, -50%); }
body.doc-searching .doc-q.is-hit { position: relative; }
body.doc-searching .doc-anchor { display: none; }   /* в выдаче перехватывал бы клик */

/* ===========================================================================
   ПЛАШКА ПОД ЗАГОЛОВКОМ ХАБА + ВОЗВРАТ НА ГЛАВНУЮ ВИКИ
   Заголовок «Википедия» висел прямо на фотографии и терялся. Подкладываем
   панель. Кикер «QANON PROJECT» убран из разметки — он дублировал логотип
   в шапке.
   =========================================================================== */
.wiki-lead--plate {
    position: relative;
    max-width: none;
    margin: 0 0 clamp(30px, 5vw, 52px);
    padding: clamp(40px, 7vw, 72px) clamp(20px, 4vw, 40px) clamp(34px, 5vw, 52px);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
/* Тёмного слоя здесь больше нет. Он растворялся влево и вправо, но сверху и
   снизу обрывался резко — на странице это читалось как светлый прямоугольник
   поперёк экрана. Оставляем только мягкое свечение: оно радиальное, у него
   вообще нет краёв. Заголовок держит читаемость собственной тенью. */
.wiki-lead--plate::before {
    content: "";
    position: absolute;
    inset: -10% -20% -30%;
    z-index: -1;
    background: radial-gradient(58% 62% at 50% 34%,
        rgba(207, 41, 41, .13), rgba(207, 41, 41, .05) 45%, transparent 72%);
    pointer-events: none;
}
/* тонкая черта под заголовком — с растворением, без жёстких концов */
.wiki-lead--plate::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: min(420px, 70%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(207, 41, 41, .6), transparent);
}
.wiki-lead--plate .wiki-lead__title {
    margin: 0;
    text-shadow: 0 6px 40px rgba(0, 0, 0, .8);
}
.wiki-lead--plate .wiki-lead__sub { margin: 16px auto 0; max-width: 560px; }

/* возврат на главную вики стоит выше возврата к сводам и заметнее */
.doc-rail-back--home {
    border-color: rgba(239, 59, 59, .3);
    color: var(--on-dark);
    margin-bottom: 8px;
}
.doc-rail-back--home:hover { border-color: rgba(239, 59, 59, .6); }

/* страховка от горизонтальной прокрутки: любой декоративный вынос обрезается */
.wiki-body[data-wiki-section="hub"],
.wiki-body[data-wiki-section="rules"] { overflow-x: clip; }
.wiki-main { overflow-x: clip; }

/* ===========================================================================
   КАРТОЧКИ РАЗДЕЛОВ: СВЕТ ЗА КУРСОРОМ И НАКЛОН
   Карточки были статичны — наводишь и ничего не происходит, кроме сдвига.
   Берём тот же приём, что у кнопки Discord: пятно света под курсором и
   светящаяся грань. Плюс лёгкий наклон к курсору — как у карточки Discord
   на лендинге. Углы маленькие (до 4°), иначе текст начинает «плыть».
   =========================================================================== */
.doc-hub { perspective: 1200px; }

.doc-hub__card {
    --mx: 50%;
    --my: 0%;
    --rx: 0deg;
    --ry: 0deg;
    transform-style: preserve-3d;
    transition: transform var(--t-slow) cubic-bezier(.16, 1, .3, 1),
                border-color var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
a.doc-hub__card.is-live {
    transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
    transition: transform var(--t-fast) linear, border-color var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}

/* пятно света под курсором — поверх фона, под текстом */
a.doc-hub__card::after {
    inset: 0;
    height: auto;
    background: radial-gradient(circle 220px at var(--mx) var(--my),
        rgba(207, 41, 41, .18), transparent 62%);
}

/* светящаяся грань у курсора, как у кнопки Discord */
a.doc-hub__card .doc-hub__edge {
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-out);
    background: radial-gradient(circle 260px at var(--mx) var(--my),
        rgba(255, 138, 138, .9), rgba(207, 41, 41, .35) 30%, transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
a.doc-hub__card.is-live .doc-hub__edge { opacity: 1; }

/* крупный номер оживает вместе с карточкой */
.doc-hub__card::before { transition: color var(--t-slow) var(--ease-out), transform var(--t-slow) cubic-bezier(.16, 1, .3, 1); }
a.doc-hub__card.is-live::before {
    color: rgba(255, 255, 255, .075);
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    a.doc-hub__card.is-live { transform: none; }
}

/* ===========================================================================
   НАКАЗАНИЯ: мера на строку + градация тяжести
   Раньше весь блок шёл сплошным текстом: «Бан от 36-и часов до 5-и дней. При
   массовых или грубых оскорблениях — блокировка от 7-и до 14-и дней…».
   Теперь каждая мера — своя строка с полосой слева, цвет полосы = тяжесть.
   Цвета проверены на контраст к листу: янтарь 8.75:1, охра 7.26:1,
   красный 6.91:1 — все проходят AA для мелкого текста.
   =========================================================================== */
.doc-punish__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.doc-punish__m {
    --grade: #d9a441;
    display: grid;
    grid-template-columns: 3px 1fr;
    gap: 12px;
    align-items: stretch;
}
.doc-punish__m[data-sev="light"] { --grade: #d9a441; }   /* до суток */
.doc-punish__m[data-sev="mid"]   { --grade: #e08a5a; }   /* до десяти дней */
.doc-punish__m[data-sev="heavy"] { --grade: #ff6b6b; }   /* дольше, пермобан, удаление */

/* полоса тяжести: чем тяжелее — тем плотнее и с лёгким переливом вниз */
.doc-punish__grade {
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--grade),
        color-mix(in srgb, var(--grade) 45%, transparent));
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--grade) 55%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .doc-punish__grade { background: var(--grade); }
}
.doc-punish__m[data-sev="heavy"] .doc-punish__grade {
    box-shadow: 0 0 14px -1px color-mix(in srgb, var(--grade) 75%, transparent);
}

.doc-punish__txt {
    font-family: var(--f-read);
    font-size: 14.8px; line-height: 24px;
    color: #f6e6e2;
    max-width: 70ch;
}
/* ужесточение — приглушённее базовой меры: это условие, а не основная санкция */
.doc-punish__m.is-esc .doc-punish__txt { color: #e4cfc9; }

/* число срока красим в цвет тяжести — глаз цепляет именно его */
.doc-punish__m[data-sev="heavy"] .doc-num { color: #ffc9c9; }

/* ===========================================================================
   СТРОКИ-ПРИМЕРЫ
   Пункт, который выглядит прозой, а на деле перечень пар «как говорят — как
   надо». Раньше слипался в кашу на четыре строки.
   =========================================================================== */
.doc-lines {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.doc-lines > li {
    position: relative;
    padding-left: 15px;
    line-height: 1.6;
}
.doc-lines > li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--red-d);
}
.doc-pair__a { color: var(--on-dark); font-weight: 600; }
.doc-pair__b { color: var(--on-dark-dim); }

@media (max-width: 720px) {
    .doc-punish__m { gap: 10px; }
}

/* ===========================================================================
   ХВОСТЫ ПУНКТА: уточнение и наказание
   Раньше и то и другое валялось прямо в предложении — уточнение в скобках,
   наказание через тире («— ПермБан.»), хотя наказание главы рисуется
   отдельным блоком с градацией. Приводим к одному языку.
   =========================================================================== */
.doc-clar {
    display: block;
    margin: 9px 0 0;
    padding: 8px 12px 8px 11px;
    border-left: 2px solid rgba(255, 255, 255, .18);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, .03);
    font-size: 13.8px; line-height: 22px;
    color: var(--on-dark-dim);
}
.doc-clar__k {
    display: block;
    margin-bottom: 3px;
    font-family: var(--f);
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--on-dark-faint);
}

/* наказание внутри пункта — та же градация тяжести, что и у блока главы */
.doc-pun-chip {
    --grade: #e08a5a;
    display: inline-flex; align-items: center;
    margin: 9px 0 0;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--grade) 45%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--grade) 12%, transparent);
    font-family: var(--f);
    font-size: 11px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--grade);
    /* Длинные меры («От 10 дней бана до пермабана в зависимости от тяжести
       нарушения») не влезали в 380px и утаскивали за собой всю панель.
       Переносим по словам, вертикальный ритм держим на line-height. */
    white-space: normal;
    line-height: 17px;
    max-width: 100%;
}
.doc-pun-chip[data-sev="light"] { --grade: #d9a441; }
.doc-pun-chip[data-sev="mid"]   { --grade: #e08a5a; }
.doc-pun-chip[data-sev="heavy"] { --grade: #ff6b6b; }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .doc-pun-chip { border-color: var(--grade); background: none; }
}
.doc-clar + .doc-pun-chip { margin-top: 8px; }

/* ===========================================================================
   ОПРЕДЕЛЕНИЯ ВНУТРИ ПУНКТА
   «Есть 2 вида плена… Небезопасный плен — это ситуация… Безопасный плен —
   это когда…» шло двумя абзацами сплошной прозы, хотя это таблица из двух
   терминов. Термин выносим на свою строку, значение под него.
   =========================================================================== */
.doc-idef {
    display: block;
    margin: 10px 0 0;
    padding: 9px 13px 10px 12px;
    border-left: 2px solid rgba(207, 41, 41, .45);
    border-radius: 0 7px 7px 0;
    background: rgba(255, 255, 255, .028);
}
.doc-idef__t {
    display: block;
    margin-bottom: 3px;
    font-family: var(--f);
    font-size: 14px; font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
}
.doc-idef__v {
    display: block;
    font-size: 14.6px; line-height: 24px;
    color: var(--on-dark);
    max-width: 70ch;
}
.doc-idef + .doc-idef { margin-top: 7px; }

/* ===========================================================================
   ШАПКА ГЛАВЫ
   Контурная цифра не сработала: у Montserrat 900 на 86px ноль превращается
   в жирный эллипс, единица в коробку с флажком, а заголовок в них врезается.
   Обводка на таком кегле у геометрического шрифта читается как клипарт.
   Берём водяной знак: та же цифра, но мягкой заливкой и заметно тише текста —
   она уходит на задний план и перестаёт спорить с заголовком.
   =========================================================================== */
.doc-ch__h {
    position: relative;
    display: flex; align-items: baseline;
    gap: 0;
    padding: 30px 0 18px 0;
    font-size: 32px;
    letter-spacing: -.015em;
    overflow: visible;
}
.doc-ch__n {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-46%);
    z-index: 0;
    min-width: 0; height: auto; padding: 0;
    border: 0; border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--f);
    font-size: 92px; font-weight: 900;
    line-height: 1; letter-spacing: -.055em;
    color: rgba(239, 59, 59, .34);
    -webkit-text-stroke: 0;
    text-shadow: none;
    /* Затухание вбок: цифра начинается плотной и растворяется вправо,
       уходя под буквы заголовка. Так она не спорит с текстом. */
    -webkit-mask-image: linear-gradient(96deg,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, .5) 74%, rgba(0, 0, 0, .12) 100%);
            mask-image: linear-gradient(96deg,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, .5) 74%, rgba(0, 0, 0, .12) 100%);
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
    transition: color var(--t-slow) var(--ease-out);
}
.doc-ch__n::before { content: none; }
.doc-ch:hover .doc-ch__n { color: rgba(239, 59, 59, .46); }

/* заголовок поверх водяного знака */
.doc-ch__h > *:not(.doc-ch__n) { position: relative; z-index: 1; }
.doc-ch__h { padding-left: 30px; }

/* группа: светящийся ромб */
.doc-crumb > span:first-child {
    position: relative;
    padding-left: 16px;
    color: #ddd6c8;
    letter-spacing: .2em;
}
/* Был повёрнутый квадратик со свечением — читался как случайный блик.
   Ставим внятный знак раздела: три штриха убывающей длины, маской по
   currentColor, поэтому цвет и прозрачность наследуются от текста. */
.doc-crumb > span:first-child::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 11px; height: 11px; margin-top: -5.5px;
    background: var(--red-br);
    -webkit-mask: var(--ico-sec) center / 11px 11px no-repeat;
            mask: var(--ico-sec) center / 11px 11px no-repeat;
}
.doc-crumb__pos {
    font-variant-numeric: tabular-nums;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 5px;
    background: rgba(255, 255, 255, .03);
}

/* ===========================================================================
   ЗАГОЛОВОК РАЗДЕЛА ВНУТРИ ГЛАВЫ
   Был мелкой иконкой и тонкой ниткой — начало нового куска не читалось.
   Даём ему настоящую отбивку: линия сверху, воздух, иконка в плашке,
   крупный текст и линия, доходящая до конца меры.
   =========================================================================== */
.doc-item--head {
    display: flex; align-items: center;
    /* Разделяем воздухом, а не линиями: две полупрозрачные нитки рядом
       (отбивка сверху и хвост справа) читались как мусор, а не как граница. */
    padding: 46px 0 16px !important;
    margin-top: 0;
    border-top: 0;
}
.doc-clause--flat:first-child > .doc-item--head,
.doc-ch__body > .doc-item--head:first-child {
    padding-top: 6px !important;
}
.doc-item--head > .doc-item__n {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    min-width: 30px;
    margin-right: 14px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(239, 59, 59, .3);
    background: linear-gradient(180deg, rgba(239, 59, 59, .16), rgba(239, 59, 59, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #ff8f8f;
}
.doc-head__ico { width: 15px; height: 15px; opacity: 1; filter: none; }
.doc-item--head > .doc-item__t {
    font-family: var(--f);
    font-size: 19px; font-weight: 800; line-height: 25px;
    letter-spacing: -.004em;
    color: #fff;
    max-width: none;
}
.doc-item--head > .doc-item__t::after { content: none; }

@media (max-width: 720px) {
    .doc-ch__h { font-size: 24px; padding-left: 22px; }
    .doc-ch__n { font-size: 62px; left: 10px; }
    .doc-item--head > .doc-item__t { font-size: 16.5px; }
    .doc-item--head { padding-top: 34px !important; }
}

/* ===========================================================================
   ЕДИНАЯ КЛАССИФИКАЦИЯ: ИСКЛЮЧЕНИЕ И ПУНКТ-САНКЦИЯ
   =========================================================================== */
/* исключение — та же врезка, что уточнение, но янтарная: это не пояснение,
   а изъятие из правила, и путать их нельзя */
.doc-clar--exc {
    border-left-color: rgba(217, 164, 65, .55);
    background: rgba(217, 164, 65, .05);
    color: #d6cdbb;
}
.doc-clar--exc .doc-clar__k { color: #d9a441; }

/* пункт, который целиком является санкцией */
.doc-item--sanction > .doc-item__t {
    padding: 10px 13px 10px 12px;
    border-left: 2px solid rgba(207, 41, 41, .5);
    border-radius: 0 6px 6px 0;
    background: rgba(207, 41, 41, .07);
    color: #f6e6e2;
}
.doc-item--sanction > .doc-item__n { color: var(--red-br); }

/* ===========================================================================
   ПАНЕЛИ ВМЕСТО СПЛОШНОГО ЛИСТА
   Вся страница свода лежала на одном листе, и блоки не отделялись друг от
   друга ничем, кроме воздуха. Разбиваем на плашки: шапка документа, поиск,
   шапка главы и каждый раздел — своя панель. Отбивка небольшая, 12px:
   больше — и страница рассыпается на карточки.
   =========================================================================== */
:root {
    --panel-gap: 12px;
    /* знак раздела: три штриха убывающей длины */
    --ico-sec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23000'%3E%3Crect x='1' y='2' width='10' height='2' rx='1'/%3E%3Crect x='1' y='5.5' width='7' height='2' rx='1'/%3E%3Crect x='1' y='9' width='4' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* лист выключаем — теперь поверхность у каждой панели своя */
.wiki-main--doc .doc-layout::before { content: none !important; }

.wiki-main--doc .doc-layout {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
}

/* общая заготовка панели */
.wiki-main--doc .wiki-lead,
.wiki-main--doc .doc-search,
.doc-ch__head-panel,
.doc-sec,
.doc-ch .doc-punish {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 16, 19, .975), rgba(11, 12, 15, .99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 1px 2px rgba(0, 0, 0, .5),
        0 14px 32px -24px rgba(0, 0, 0, .9);
}

/* шапка документа */
.wiki-main--doc .wiki-lead {
    margin: 0;
    padding: 26px 28px 24px;
}

/* поиск: панель, но плотнее */
.wiki-main--doc .doc-search {
    position: sticky;
    top: 74px;
    z-index: 60;
    margin: 0 !important;
    padding: 12px 14px !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    background: rgba(18, 19, 23, .93);
}

/* глава: её шапка и разделы — отдельные панели, сама .doc-ch прозрачная */
.doc-ch {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
}
.doc-ch__body {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
    padding: 0 !important;
    background: none !important;
}

/* шапка главы = крошка + заголовок в одной панели */
.doc-crumb {
    margin: 0 !important;
    padding: 14px 26px 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.doc-ch__h {
    margin: 0 !important;
    padding: 6px 26px 22px 56px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
/* позиция цифры задана выше, у самого водяного знака */

/* Водяной знак крупнее панели и вылезал на соседний блок — режем по краю.
   Обрезанная цифра под гранью читается как приём, наезд — как брак. */
.doc-ch__head-panel { display: block; overflow: hidden; }

/* раздел */
.doc-sec { padding: 4px 26px 20px; }
.doc-sec > .doc-item--head:first-child { padding-top: 20px !important; }
.doc-sec > .doc-clause:first-child > .doc-item--head { padding-top: 20px !important; }

/* наказание — своя панель, красная грань слева остаётся */
.doc-ch .doc-punish {
    margin: 0 !important;
    border-left: 3px solid var(--red) !important;
    border-radius: 12px !important;
}

@media (max-width: 720px) {
    :root { --panel-gap: 10px; }
    .wiki-main--doc .wiki-lead { padding: 20px 16px 18px; }
    .doc-sec { padding: 2px 16px 16px; }
    .doc-crumb { padding: 12px 16px 0 !important; }
    .doc-ch__h { padding: 6px 16px 18px 44px !important; }
    .doc-ch__n { left: 10px; font-size: 62px; }
}

/* досье фракции собирается другим путём — его блоки тоже делаем панелями */
.doc-ch--fac .doc-fac__block {
    margin: 0 !important;
    padding: 18px 26px 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 16, 19, .975), rgba(11, 12, 15, .99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 1px 2px rgba(0, 0, 0, .5),
        0 14px 32px -24px rgba(0, 0, 0, .9);
}
.doc-ch--fac .doc-ch__body {
    display: flex; flex-direction: column; gap: var(--panel-gap);
}
/* шапка досье и так карточка — выравниваем её по остальным панелям */
.doc-ch--fac .doc-fac__top {
    border-radius: 12px;
    margin: 0 !important;
}
/* у фракции в шапке-панели только крошка — не нужна лишняя высота */
.doc-ch--fac .doc-ch__head-panel { padding-bottom: 12px; }

@media (max-width: 720px) {
    .doc-ch--fac .doc-fac__block { padding: 14px 16px 16px; }
}

/* ===========================================================================
   ПУЛЬСАЦИЯ ОТТИСКА
   Медленный прогон тёплого блика по плашке наказания. Анимируется прозрачность
   псевдоэлемента и его сдвиг — обе величины считаются на композиторе, поэтому
   плашка не перерисовывается. Амплитуда низкая: эффект замечаешь боковым
   зрением, читать он не мешает.
   =========================================================================== */
.doc-punish__k::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 138, 138, .00) 28%,
        rgba(255, 170, 150, .30) 46%,
        rgba(255, 120, 120, .16) 56%,
        transparent 78%);
    opacity: 0;
    will-change: transform, opacity;
    animation: punSweep 6.5s cubic-bezier(.45, 0, .3, 1) infinite;
}
@keyframes punSweep {
    0%   { transform: translateX(-62%); opacity: 0; }
    18%  { opacity: .85; }
    46%  { opacity: .85; }
    64%  { transform: translateX(62%); opacity: 0; }
    100% { transform: translateX(62%); opacity: 0; }
}

/* и очень слабое дыхание самой рамки и свечения */
.doc-punish__k {
    animation: punGlow 6.5s ease-in-out infinite;
}
@keyframes punGlow {
    0%, 100% { border-color: rgba(239, 59, 59, .5);  box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 0 0 1px rgba(239, 59, 59, .12),
        0 2px 0 rgba(0, 0, 0, .45),
        0 8px 18px -10px rgba(239, 59, 59, .5); }
    38%      { border-color: rgba(255, 96, 96, .78); box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 0 0 1px rgba(239, 59, 59, .2),
        0 2px 0 rgba(0, 0, 0, .45),
        0 10px 24px -9px rgba(239, 59, 59, .8); }
}

@media (prefers-reduced-motion: reduce) {
    .doc-punish__k, .doc-punish__k::after { animation: none; }
    .doc-punish__k::after { opacity: 0; }
}

/* ===========================================================================
   ОПИСАНИЕ ГЛАВЫ В ШАПКЕ
   «RDM / FreeKill» и «Убийство игроков без веской на то причины» — одна
   сущность, а лежали двумя панелями друг под другом. Сводим в одну шапку:
   название слева, описание справа вложенной плашкой поверх панели.
   =========================================================================== */
.doc-ch__head-panel.has-desc { display: block; }
.doc-ch__desc {
    /* Было: своя грань, свой фон, своя тень — и стояло справа от заголовка
       отдельной карточкой. «RDM / FreeKill» и «Убийство игроков без веской на
       то причины» — одна сущность, название и его расшифровка. Ставим прямо
       под заголовком без коробки: плашка тут одна, и это сама шапка. */
    margin: -2px 26px 20px 0;
    padding: 0 0 0 15px;
    border-left: 2px solid rgba(239, 59, 59, .5);
    font-family: var(--f-read);
    font-size: 14.2px; line-height: 22px;
    color: var(--on-dark-dim);
    max-width: 62ch;
}

@media (max-width: 900px) {
    .doc-ch__desc { margin: -2px 16px 16px 0; }
}

/* ===========================================================================
   ЗНАКИ РАЗДЕЛОВ
   У каждой группы глав свой глиф — чтобы «Основа», «Игровой процесс»
   и «Группировки» отличались не только словом. Все 12x12, рисуются маской
   по currentColor.
   =========================================================================== */
:root {
    --ico-osnova: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23000'%3E%3Crect x='1' y='2' width='10' height='2' rx='1'/%3E%3Crect x='1' y='5.5' width='7' height='2' rx='1'/%3E%3Crect x='1' y='9' width='4' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
    --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.2'/%3E%3C/g%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%23000'/%3E%3C/svg%3E");
    --ico-lead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 6.2L6 2.6l3.8 3.6'/%3E%3Cpath d='M2.6 9.6h6.8'/%3E%3C/g%3E%3C/svg%3E");
    --ico-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 3.4L2.8 8.6M6 3.4l3.2 5.2M2.8 8.6h6.4'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='3' r='1.7'/%3E%3Ccircle cx='2.6' cy='9' r='1.7'/%3E%3Ccircle cx='9.4' cy='9' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
    --ico-append: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M3 1.6h6a1 1 0 0 1 1 1v7.8a.6.6 0 0 1-.94.49L6 8.7l-3.06 2.19A.6.6 0 0 1 2 10.4V2.6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.doc-ch[data-group="Основа"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: var(--ico-osnova); mask-image: var(--ico-osnova);
}
.doc-ch[data-group="Игровой процесс"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: var(--ico-play); mask-image: var(--ico-play);
}
.doc-ch[data-group="Лидеры"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: var(--ico-lead); mask-image: var(--ico-lead);
}
.doc-ch[data-group="Группировки"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: var(--ico-group); mask-image: var(--ico-group);
}
.doc-ch[data-group="Приложения"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: var(--ico-append); mask-image: var(--ico-append);
}

/* ===========================================================================
   ПАРА СПИСКОВ «ПРАВИЛЬНО / НЕПРАВИЛЬНО»
   Шли двумя блоками с разделительной линией, хотя это одна пара. Сливаем в
   одну панель: сверху зелёная галка, снизу красный крест, линии между ними нет.
   =========================================================================== */
.doc-ex--first, .doc-ex--last {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    background: none !important;
}
.doc-ex--first { padding-top: 16px !important; padding-bottom: 4px !important; }
.doc-ex--last  { padding-top: 10px !important; padding-bottom: 16px !important; }
.doc-ex--first::before, .doc-ex--last::before,
.doc-ex--first::after,  .doc-ex--last::after { content: none !important; }

/* знак у подписи списка */
.doc-ex--good > .doc-item--cap > .doc-item__t,
.doc-ex--bad  > .doc-item--cap > .doc-item__t {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.doc-ex--good > .doc-item--cap > .doc-item__t::before,
.doc-ex--bad  > .doc-item--cap > .doc-item__t::before {
    content: "";
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border-radius: 5px;
    background: currentColor;
    -webkit-mask: var(--m) center / 11px 11px no-repeat;
            mask: var(--m) center / 11px 11px no-repeat;
}
.doc-ex--good > .doc-item--cap > .doc-item__t {
    color: #86c38a;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.4 6.4l2.4 2.4L9.6 3.4'/%3E%3C/svg%3E");
}
.doc-ex--bad > .doc-item--cap > .doc-item__t {
    color: #ff7d7d;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E");
}

/* сетка примеров: у правильных зелёная грань, у неправильных красная */
.doc-ex--good .doc-exlist { border-left: 2px solid rgba(134, 195, 138, .45); }
.doc-ex--bad  .doc-exlist { border-left: 2px solid rgba(255, 125, 125, .45); }
.doc-ex--good .doc-item--ex > .doc-item__n { color: rgba(134, 195, 138, .8); }
.doc-ex--bad  .doc-item--ex > .doc-item__n { color: rgba(255, 125, 125, .8); }

/* ===========================================================================
   ВРЕЗКИ: УТОЧНЕНИЕ И ИСКЛЮЧЕНИЕ — доводка
   Были плоскими коробками с голой полосой слева. Даём им объём: мягкий
   градиент, внутренний блик по верхней грани, скругление с обеих сторон,
   а метку превращаем в чип со знаком.
   =========================================================================== */
.doc-clar {
    position: relative;
    display: block;
    margin: 11px 0 0;
    padding: 11px 15px 12px 16px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-left: 0;
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: 13.8px; line-height: 22px;
    color: var(--on-dark-dim);
    overflow: hidden;
}
/* грань слева — градиентом, а не сплошной полосой */
.doc-clar::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .04));
}
.doc-clar__k {
    /* было inline-flex — метка прилипала к тексту вплотную: «УТОЧНЕНИЕНапример,
       ВДНХ организует…». Метка это шапка врезки, ей нужна своя строка. */
    display: flex; align-items: center; gap: 6px;
    width: max-content; max-width: 100%;
    margin: 0 0 5px;
    font-family: var(--f);
    font-size: 9px; font-weight: 800; line-height: 16px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--on-dark-faint);
}
.doc-clar__k::before {
    content: "";
    width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: var(--m) center / 12px 12px no-repeat;
            mask: var(--m) center / 12px 12px no-repeat;
}
/* уточнение — знак «i» */
.doc-clar .doc-clar__k {
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 5.3v3.1' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='3.5' r='.85' fill='%23000'/%3E%3C/svg%3E");
}

/* исключение — янтарное, знак «развилка» */
.doc-clar--exc {
    border-color: rgba(217, 164, 65, .16);
    background: linear-gradient(180deg, rgba(217, 164, 65, .085), rgba(217, 164, 65, .022));
    box-shadow: inset 0 1px 0 rgba(255, 216, 150, .1);
    color: #ded4c0;
}
.doc-clar--exc::before {
    background: linear-gradient(180deg,
        rgba(217, 164, 65, .95), rgba(217, 164, 65, .45) 55%, rgba(217, 164, 65, .18));
}
.doc-clar--exc .doc-clar__k {
    color: #e0ab4d;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 9.6V6.2a1.6 1.6 0 0 1 1.6-1.6h5.6'/%3E%3Cpath d='M7.8 2.6l1.9 2-1.9 2'/%3E%3C/g%3E%3C/svg%3E");
}

/* команды чата в тексте правил */
.doc-cmd {
    font-family: var(--f-mono, ui-monospace, "JetBrains Mono", Consolas, monospace);
    font-size: .92em;
    line-height: 18px;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: #e7e3da;
    white-space: nowrap;
}

/* ===========================================================================
   ШАПКА ДОКУМЕНТА: ДАТА РЕДАКЦИИ + СЖАТАЯ ПОЛОСА
   Счётчик «36 глав · 500 пунктов» ничего не сообщал читателю — заменён датой.
   =========================================================================== */
.doc-stats {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 14px 0 0;
    padding: 5px 12px 5px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-family: var(--f);
    font-size: 11px;
}
.doc-stats > span {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-dark-faint);
}
.doc-stats > span::before {
    content: "";
    width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: var(--ico-date) center / 12px 12px no-repeat;
            mask: var(--ico-date) center / 12px 12px no-repeat;
}
.doc-stats > b {
    font-size: 12px; font-weight: 800; letter-spacing: .01em;
    color: var(--on-dark);
    font-variant-numeric: tabular-nums;
}
:root {
    --ico-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='1.4' y='2.4' width='9.2' height='8.2' rx='1.6'/%3E%3Cpath d='M1.4 5h9.2M3.9 1.3v2M8.1 1.3v2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

/* сжатая полоса: та же плашка, но в одну строку */
body.doc-compact .wiki-main--doc .wiki-lead {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 22px !important;
}
body.doc-compact .doc-stats { margin: 0; }
body.doc-compact .doc-warn { display: none; }

/* водяной знак в шапке досье фракции: та же логика, свои координаты */
.doc-fac__top { position: relative; overflow: hidden; }
.doc-ch__n--fac {
    left: auto !important;
    right: 18px;
    top: 50% !important;
    transform: translateY(-48%);
    font-size: 76px;
    /* у досье знак справа, поэтому и гаснет он влево */
    -webkit-mask-image: linear-gradient(264deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.12) 100%);
            mask-image: linear-gradient(264deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.12) 100%);
}
@media (max-width: 720px) { .doc-ch__n--fac { font-size: 54px; right: 10px; } }

/* ===========================================================================
   ГРАНЬ ПАНЕЛИ ДЕЛАЕТ ВСЮ РАБОТУ
   Заливка панели отличается от фона страницы на 1.04:1 — то есть не отличается
   вовсе. Осветлять заливку нельзя (меняет тон всей страницы), значит панель
   должна держаться на грани. При 7% это 1.18:1 — не видно. Ставим 20% (1.7:1):
   край читается, тон не тронут.
   =========================================================================== */
.doc-toggle {
    border-color: rgba(255, 255, 255, .18) !important;
}
.doc-crumb__pos {
    border-color: rgba(255, 255, 255, .16) !important;
}
.doc-exlist, .doc-def {
    border-color: rgba(255, 255, 255, .14) !important;
}

/* Плашка определения: термин сверху, значение снизу. Значение приходит из
   свода со строчной буквы («Сталкер — человек, который…»), и под жирным
   термином это читалось как обрывок. Поднимаем первую букву. */
.doc-def__v, .doc-idef__v { display: block; }
.doc-def__v::first-letter,
.doc-idef__v::first-letter { text-transform: uppercase; }

/* Раздел главы без номера («Захват станций», «Право на запрос выкупа»):
   раньше эти куски сваливались во врезку-примечание и прятались под кнопкой
   «2 уточнения» — за ней стояла половина главы. Теперь это самостоятельный
   блок, и заголовок в нём должен читаться заголовком, а не жирным зачином. */
.doc-item--sec { padding: 4px 0 2px; }
.doc-item--sec > .doc-item__n { display: flex; }
.doc-item--sec .doc-term {
    display: block;
    margin: 0 0 8px;
    font-family: var(--f);
    font-size: 15px; font-weight: 800; line-height: 20px;
    letter-spacing: .01em;
    color: var(--on-dark);
}

/* .footer_bg абсолютный и width:100% от body, но статическая позиция у него —
   после левого рейла, то есть с отступом 288px. 288 + 100% = страница шире
   окна ровно на ширину рейла, и внизу появлялась горизонтальная прокрутка.
   Прижимаем к обоим краям вместо ширины в процентах. */
.wiki-body[data-wiki-section="rules"] .footer_bg,
.wiki-body[data-wiki-section="hub"] .footer_bg {
    left: 0; right: 0; width: auto;
}

/* Фракция без герба: тот же знак, что и в шапке досье, в той же 18-пиксельной
   колонке. Раньше тут стояла точка — единственная в списке, где у всех либо
   номер, либо эмблема. */
.doc-rail-none {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    align-self: center;
    background: currentColor;
    opacity: .45;
    -webkit-mask: var(--m) center / 15px 15px no-repeat;
            mask: var(--m) center / 15px 15px no-repeat;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.2' r='3.1'/%3E%3Cpath d='M5.4 19.2c0-3.3 2.9-5.6 6.6-5.6s6.6 2.3 6.6 5.6'/%3E%3C/g%3E%3C/svg%3E");
}
.doc-rail-ch:hover .doc-rail-none { opacity: .75; }
.doc-rail-ch.is-here .doc-rail-none { opacity: 1; }

/* Футер общий с главным сайтом: .footer_block ограничен 1200px и рассчитан на
   полную ширину окна. В вики левый рейл съедает 288px, свободного места
   остаётся 1152 — ограничение не срабатывает, и копирайт «Qanon Project»
   упирался прямо в правый край экрана. Даём футеру собственные поля. */
.wiki-body[data-wiki-section="rules"] .footer,
.wiki-body[data-wiki-section="hub"] .footer {
    padding-left: 30px; padding-right: 30px;
    box-sizing: border-box;
}

/* ===========================================================================
   ГРАНИ, КОТОРЫХ НЕ БЫЛО ВИДНО
   Замер по всем элементам свода: у панелей и врезок контраст грани к фону
   держался на 1.02–1.30:1 — то есть их не было видно вообще. Панель .doc-sec
   уже подняли до 1.78:1, здесь добираем остальное тем же уровнем.

   Разделители МЕЖДУ пунктами внутри пункта сознательно не трогаем: их и так
   просили убрать, яркая сетка тут ни к чему. Поднимаем только то, что должно
   читаться как отдельная плашка.
   =========================================================================== */

/* врезка уточнения и исключения */
.doc-clar { border-color: rgba(255, 255, 255, .18); }
.doc-clar--exc { border-color: rgba(217, 164, 65, .34); }

/* описание главы в шапке */
.doc-ch__desc { border-color: rgba(255, 255, 255, .16); }

/* чип наказания: грань идёт от градации тяжести, но на .45 её не было видно */
.doc-pun-chip { border-color: color-mix(in srgb, var(--grade) 62%, transparent); }

/* плитка лимита состава, кнопки перехода между главами, команда в тексте */
.doc-fac__limit,
.doc-pager__a { border-color: rgba(255, 255, 255, .16); }
.doc-cmd { border-color: rgba(255, 255, 255, .18); }

/* акцент фракции: цветная грань досье на 30% сливалась с фоном полностью */
.doc-ch--fac .doc-fac__top {
    border-color: color-mix(in srgb, var(--fac) 52%, transparent);
}
.doc-ch--fac .doc-fac__logo {
    border-color: color-mix(in srgb, var(--fac) 58%, transparent);
}

/* input[type=search] рисует собственный крестик очистки, а рядом стоит наш
   .doc-search__clear — в поле было два крестика подряд. Свой оставляем: он
   в стиле документа и работает одинаково во всех браузерах. */
.doc-search__in {
    -webkit-appearance: none;
            appearance: none;
}
.doc-search__in::-webkit-search-cancel-button,
.doc-search__in::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.doc-search__in::-ms-clear { display: none; width: 0; height: 0; }

/* Строка-родитель, показанная в выдаче ради контекста: она сама под запрос не
   подошла, поэтому читается тише находок и не спорит с ними за внимание. */
.doc-searching .doc-item.is-ctx { opacity: .62; }
.doc-searching .doc-item.is-ctx::after {
    content: "контекст";
    margin-left: 8px;
    font-family: var(--f);
    font-size: 9px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
    vertical-align: 2px;
}

/* ===========================================================================
   НАКАЗАНИЕ — ОДИН ВИД НА ВЕСЬ СВОД

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

   Теперь шаблон один и тот же, что у «Уточнения» и «Исключения»: метка со
   значком на своей строке, текст под ней. Наказание отличается только цветом,
   и цвет говорит о тяжести меры: жёлтый — часы, оранжевый — дни, красный —
   от десяти дней до пермабана.
   =========================================================================== */
.doc-clar--pun {
    --grade: #e08a5a;
    border-color: color-mix(in srgb, var(--grade) 34%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--grade) 9%, transparent),
        color-mix(in srgb, var(--grade) 3%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--grade) 14%, transparent);
    color: #e6d9d2;
}
.doc-clar--pun[data-sev="light"] { --grade: #d9a441; }
.doc-clar--pun[data-sev="mid"]   { --grade: #e08a5a; }
.doc-clar--pun[data-sev="heavy"] { --grade: #ff6b6b; }
.doc-clar--pun::before {
    background: linear-gradient(180deg,
        var(--grade),
        color-mix(in srgb, var(--grade) 45%, transparent) 55%,
        color-mix(in srgb, var(--grade) 18%, transparent));
}
.doc-clar--pun .doc-clar__k {
    color: var(--grade);
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.2l3.8 1.4v3.2c0 2.3-1.6 3.8-3.8 4.9-2.2-1.1-3.8-2.6-3.8-4.9V2.6z'/%3E%3Cpath d='M6 4.2v2.3M6 8.1v.05'/%3E%3C/g%3E%3C/svg%3E");
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .doc-clar--pun { border-color: var(--grade); background: none; }
}

/* Плашка «Наказуемо» состоит из одной метки — нижний отступ ей не нужен,
   иначе внизу остаётся пустая полоса. */
.doc-clar__k:only-child { margin-bottom: 0; }

/* абзацы внутри врезки: суть отдельной строкой, подробности под ней */
.doc-clar__p { display: block; }
.doc-clar__p + .doc-clar__p { margin-top: 7px; color: color-mix(in srgb, currentColor 82%, transparent); }

/* ===========================================================================
   ВОДЯНОЙ НОМЕР ГЛАВЫ — УБРАТЬ ИЗ-ПОД БУКВ

   Цифра стояла на 18px от края и была шириной 118px, а заголовок начинался с
   56px — восемьдесят пикселей текста лежали прямо на цифре, и это читалось
   как слипшиеся слои, а не как приём. Уводим её за левую грань: панель режет
   цифру по краю, видна правая часть, заголовок начинается уже после неё.
   =========================================================================== */
.doc-ch__head-panel .doc-ch__n { left: -16px; }
.doc-ch__h { padding-left: 116px !important; }
@media (max-width: 720px) {
    .doc-ch__head-panel .doc-ch__n { left: -12px; font-size: 62px; }
    .doc-ch__h { padding-left: 76px !important; }
}

/* ===========================================================================
   ВОЛНА ПОД ЗАГОЛОВКОМ РАЗДЕЛА

   Раздел («Организационная часть») начинался, а где он начинался — понимал
   только тот, кто вчитывался: заголовок и первый пункт разделял один воздух.
   Прямая линейка тут читалась бы как ещё одна из тех декоративных полосок,
   которые просили убрать, поэтому граница волнистая: она видна, но не спорит
   с сеткой и сразу говорит «дальше другая тема».
   =========================================================================== */
.doc-item--head { position: relative; }
.doc-item--head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -13px;
    height: 7px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='7' viewBox='0 0 34 7'%3E%3Cpath d='M0 5.2c4.25 0 4.25-3.4 8.5-3.4s4.25 3.4 8.5 3.4 4.25-3.4 8.5-3.4 4.25 3.4 8.5 3.4' fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E")
        repeat-x left center;
    opacity: .42;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
    pointer-events: none;
}
/* у последнего заголовка в панели волна не нужна — снизу и так грань */
.doc-item--head:last-child::after { content: none; }

/* Пункт-санкция: плашку рисует вложенная врезка .doc-clar--pun — та же, что
   у санкции из хвоста пункта. Старое оформление самого текста пункта (своя
   левая грань, розовый фон) давало вторую грань и сдвиг — гасим его. */
.doc-item--sanction > .doc-item__t {
    padding: 0; border: 0; border-radius: 0;
    background: none; color: inherit;
}
.doc-item--sanction .doc-clar--pun { margin-top: 0; }

/* ===========================================================================
   РАЗДЕЛИТЕЛЬ ПОСЛЕ ПРИМЕРА
   Правило «после примечания разделителя нет» писалось для примечаний, идущих
   подряд, но оно же съедало линию между 1.2 и 1.3, если у 1.2 был «Пример»:
   между 1.1 и 1.2 линия есть, между 1.2 и 1.3 — нет. Возвращаем её пункту,
   который идёт после плашки, с отступом от неё.
   =========================================================================== */
.doc-clause__kids-in > .doc-item--note + .doc-item:not(.doc-item--note) {
    border-top: 1px solid var(--hair);
    margin-top: 10px;
}

/* ===========================================================================
   МЕТКА ПРИМЕЧАНИЯ — В ОДНОМ ЯЗЫКЕ С ОСТАЛЬНЫМИ ВРЕЗКАМИ
   «ПРИМЕР» был красной таблеткой, а «УТОЧНЕНИЕ», «ИСКЛЮЧЕНИЕ», «НАКАЗАНИЕ» —
   мелкими капсами со значком. Роль одна — метка врезки, значит и вид один.
   Красная полоса у примера тоже уходит: красный в своде означает наказание,
   а пример — просто иллюстрация.
   =========================================================================== */
.doc-note__k {
    display: flex; align-items: center; gap: 6px;
    width: max-content; max-width: 100%;
    margin: 0 0 5px; padding: 0;
    border-radius: 0; background: none;
    font-family: var(--f);
    font-size: 9px; font-weight: 800; line-height: 16px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--on-dark-faint);
    vertical-align: baseline;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 5.3v3.1' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='3.5' r='.85' fill='%23000'/%3E%3C/svg%3E");
}
.doc-note__k::before {
    content: "";
    flex: 0 0 auto;
    width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: var(--m) center / 12px 12px no-repeat;
            mask: var(--m) center / 12px 12px no-repeat;
}
.doc-note__k[data-k^="пример"] { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.6a3.3 3.3 0 0 0-2 5.9c.4.3.6.7.6 1.1v.4h2.8v-.4c0-.4.2-.8.6-1.1A3.3 3.3 0 0 0 6 1.6z'/%3E%3Cpath d='M4.9 10.6h2.2'/%3E%3C/g%3E%3C/svg%3E"); }
.doc-note__k[data-k^="важн"]   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.9'/%3E%3Cpath d='M6 3.4v3.3M6 8.6v.05'/%3E%3C/g%3E%3C/svg%3E"); }
.doc-item--note { border-left-color: rgba(255, 255, 255, .18); }

/* термин в шапке главы: «RolePlay — Логичная и обоснованная отыгровка…» */
.doc-ch__desc-t { color: var(--on-dark); font-weight: 700; }

/* ===========================================================================
   КОРОБКА ПРИМЕЧАНИЯ — ТЕМ ЖЕ ШАБЛОНОМ, ЧТО И ВРЕЗКИ
   Замер: у врезки («Уточнение», «Исключение», «Наказание») — тонкая грань по
   кругу, скругление 9px, мягкий градиент и светлая полоса слева. У «Примера»
   был свой вид: толстая левая грань, квадратные левые углы, тёмная тень. Две
   коробки одной роли рядом на экране — это то же расхождение, что было с
   санкциями. Селекторы с той же специфичностью, что у прежних правил, иначе
   их border-top:0 и отступы перебивали бы новое оформление.
   =========================================================================== */
.doc-item--note,
.doc-clause > .doc-item--note,
.doc-clause__kids-in > .doc-item--note {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .043), rgba(255, 255, 255, .01));
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 11px 15px 11px 16px;
}

/* Примечание с меткой «Исключение» — то же исключение, что и в хвосте пункта:
   янтарная коробка и янтарная метка со значком-развилкой, как у .doc-clar--exc.
   Раньше пять таких примечаний были нейтральными, и одна сущность снова
   выглядела двумя разными. */
.doc-item--note.doc-item--exc,
.doc-clause > .doc-item--note.doc-item--exc,
.doc-clause__kids-in > .doc-item--note.doc-item--exc {
    border-color: rgba(217, 164, 65, .34);
    background: linear-gradient(180deg, rgba(217, 164, 65, .085), rgba(217, 164, 65, .022));
    box-shadow: inset 3px 0 0 rgba(217, 164, 65, .8), inset 0 1px 0 rgba(255, 216, 150, .1);
    color: #ded4c0;
}
.doc-item--exc .doc-note__k { color: #e0ab4d; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 9.6V6.2a1.6 1.6 0 0 1 1.6-1.6h5.6'/%3E%3Cpath d='M7.8 2.6l1.9 2-1.9 2'/%3E%3C/g%3E%3C/svg%3E"); }

/* подписи внутри большого раздела («Интеграция:», «Сценарий ничьей:») — каждая
   открывает свой абзац и читается как подзаголовок строки, а не тонет в тексте */
.doc-sec__k { color: var(--on-dark); font-weight: 700; }
.doc-item--sec .doc-item__t > p + p { margin-top: 10px; }

/* этапы по порядку («дальний блокпост → ближний рубеж → станция»): три
   карточки в ряд с номерами и стрелками между ними, на телефоне столбиком */
.doc-seq { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: seq; }
.doc-seq li {
    position: relative; display: flex; gap: 12px; align-items: flex-start; counter-increment: seq;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
    transition: border-color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.doc-seq li:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.doc-seq li + li::before {
    content: ""; position: absolute; left: -10px; top: 50%; width: 8px; height: 8px;
    border-top: 2px solid rgba(255, 255, 255, .35); border-right: 2px solid rgba(255, 255, 255, .35);
    transform: translate(-50%, -50%) rotate(45deg);
}
.doc-seq__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: rgba(207, 41, 41, .16); box-shadow: inset 0 0 0 1px rgba(207, 41, 41, .4); color: #ff8a8a; font-family: var(--f); font-size: 12px; font-weight: 800; }
.doc-seq__n::before { content: counter(seq); }
.doc-seq__t { display: grid; gap: 2px; min-width: 0; line-height: 1.4; }
.doc-seq__t b { color: #fff; font-weight: 700; }
.doc-seq__t i { font-style: normal; font-size: 12.5px; color: var(--on-dark-dim); }
.doc-seq__t > span { margin-top: 4px; font-size: 14px; color: var(--on-dark); }
.doc-item--sec .doc-item__t > .doc-seq + p { margin-top: 12px; }
@media (max-width: 720px) {
    .doc-seq { grid-template-columns: 1fr; gap: 14px; }
    .doc-seq li + li::before { left: 50%; top: -9px; transform: translate(-50%, -50%) rotate(135deg); }
}

/* ===========================================================================
   ЗАГОЛОВОК РАЗДЕЛА-БЛОКА — КАК ОБЫЧНЫЙ ЗАГОЛОВОК
   «Захват станций», «Условия победы и исходы конфликта» рисовались голым
   красным значком на 15px, а обычные заголовки разделов — значком в плашке
   30×30 на 19px. Одна роль (название раздела) — один вид.
   =========================================================================== */
.doc-item--sec { align-items: flex-start; }
.doc-item--sec > .doc-item__n {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    min-width: 30px;
    margin: -3px 14px 0 0;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(239, 59, 59, .3);
    background: linear-gradient(180deg, rgba(239, 59, 59, .16), rgba(239, 59, 59, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #ff8f8f;
}
.doc-item--sec .doc-term {
    font-size: 19px; line-height: 25px;
    margin: 0 0 10px;
}

/* ===========================================================================
   ОПИСАНИЕ ГЛАВЫ — ПАНЕЛЬ НА ПАНЕЛИ
   Описание шло голым текстом с тонкой красной чертой и начиналось у самого
   края, под водяным номером, а заголовок — после номера: две левые кромки в
   одной шапке, и текст прилипал к названию. Теперь это мягкая вложенная
   панель чуть ниже заголовка, по кромке крошки. Грань и фон тише, чем у
   внешней панели, чтобы не спорить с ней. Фон почти непрозрачный: если
   водяная цифра краем заходит под панель, она не просвечивает сквозь текст.
   =========================================================================== */
.doc-ch__desc {
    position: relative; z-index: 1;
    margin: 4px 26px 22px;
    padding: 13px 18px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(24, 25, 30, .96), rgba(19, 20, 24, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    max-width: none;
    font-size: 14.2px; line-height: 23px;
    color: var(--on-dark-dim);
}
@media (max-width: 900px) {
    .doc-ch__desc { margin: 4px 16px 16px; padding: 12px 14px; }
}

/* ===========================================================================
   ЗНАЧКИ ГРУПП
   «Игровой процесс» был кружком с точкой — читался как мишень, а не как игра.
   Ставим геймпад. «Лидеры» — корона вместо абстрактной «крыши». Остальные три
   знака оставлены. Адреса прописаны прямо в правилах, а не через переменные:
   те же значки нужны в рейле, а он лежит вне главы, где объявлены переменные.
   =========================================================================== */
.doc-ch[data-group="Игровой процесс"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M3.6 3.4h4.8c1.5 0 2.4 1 2.7 2.6l.4 2.1c.2 1-.6 1.7-1.4 1.3L8.4 8.6H3.6L1.9 9.4c-.8.4-1.6-.3-1.4-1.3l.4-2.1C1.2 4.4 2.1 3.4 3.6 3.4z'/%3E%3Cpath stroke='%23000' stroke-width='1.2' stroke-linecap='round' d='M3.7 5.2v1.8M2.8 6.1h1.8'/%3E%3Ccircle cx='8.2' cy='5.6' r='.65' fill='%23000'/%3E%3Ccircle cx='9.1' cy='6.7' r='.65' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M3.6 3.4h4.8c1.5 0 2.4 1 2.7 2.6l.4 2.1c.2 1-.6 1.7-1.4 1.3L8.4 8.6H3.6L1.9 9.4c-.8.4-1.6-.3-1.4-1.3l.4-2.1C1.2 4.4 2.1 3.4 3.6 3.4z'/%3E%3Cpath stroke='%23000' stroke-width='1.2' stroke-linecap='round' d='M3.7 5.2v1.8M2.8 6.1h1.8'/%3E%3Ccircle cx='8.2' cy='5.6' r='.65' fill='%23000'/%3E%3Ccircle cx='9.1' cy='6.7' r='.65' fill='%23000'/%3E%3C/svg%3E");
}
.doc-ch[data-group="Лидеры"] .doc-crumb > span:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M1.8 3.6l2.3 2.2L6 2.6l1.9 3.2 2.3-2.2-.8 5.2H2.6z'/%3E%3Cpath stroke='%23000' stroke-width='1.3' stroke-linecap='round' d='M2.8 10.2h6.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M1.8 3.6l2.3 2.2L6 2.6l1.9 3.2 2.3-2.2-.8 5.2H2.6z'/%3E%3Cpath stroke='%23000' stroke-width='1.3' stroke-linecap='round' d='M2.8 10.2h6.4'/%3E%3C/svg%3E");
}

/* ===========================================================================
   ГРУППЫ В ЛЕВОМ РЕЙЛЕ: ЗНАЧОК, СЧЁТЧИК, СВОРАЧИВАНИЕ
   Заголовки групп были голой красной строкой: без значка, без числа глав,
   и свернуть группу было нельзя — 36 строк шли сплошняком. Теперь это кнопка:
   значок группы, название, число глав в маленьком тихом квадратике и стрелка.
   =========================================================================== */
.doc-rail-g {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    margin: 12px 0 4px;
    padding: 5px 8px;
    border: 0; border-radius: 6px;
    background: none;
    font-family: var(--f, "Montserrat", sans-serif);
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    line-height: 16px;
    color: var(--red-br, #ef3b3b); opacity: .85;
    text-align: left;
    cursor: pointer;
    transition: opacity .2s ease, background .2s ease;
}
.doc-rail-g:first-child { margin-top: 0; }
.doc-rail-g:hover { opacity: 1; background: rgba(255, 255, 255, .04); }
.doc-rail-g > span { flex: 1 1 auto; min-width: 0; }
.doc-rail-g__ico {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23000'%3E%3Crect x='1' y='2' width='10' height='2' rx='1'/%3E%3Crect x='1' y='5.5' width='7' height='2' rx='1'/%3E%3Crect x='1' y='9' width='4' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") center / 12px 12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23000'%3E%3Crect x='1' y='2' width='10' height='2' rx='1'/%3E%3Crect x='1' y='5.5' width='7' height='2' rx='1'/%3E%3Crect x='1' y='9' width='4' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.doc-rail-g[data-g="Игровой процесс"] .doc-rail-g__ico {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M3.6 3.4h4.8c1.5 0 2.4 1 2.7 2.6l.4 2.1c.2 1-.6 1.7-1.4 1.3L8.4 8.6H3.6L1.9 9.4c-.8.4-1.6-.3-1.4-1.3l.4-2.1C1.2 4.4 2.1 3.4 3.6 3.4z'/%3E%3Cpath stroke='%23000' stroke-width='1.2' stroke-linecap='round' d='M3.7 5.2v1.8M2.8 6.1h1.8'/%3E%3Ccircle cx='8.2' cy='5.6' r='.65' fill='%23000'/%3E%3Ccircle cx='9.1' cy='6.7' r='.65' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M3.6 3.4h4.8c1.5 0 2.4 1 2.7 2.6l.4 2.1c.2 1-.6 1.7-1.4 1.3L8.4 8.6H3.6L1.9 9.4c-.8.4-1.6-.3-1.4-1.3l.4-2.1C1.2 4.4 2.1 3.4 3.6 3.4z'/%3E%3Cpath stroke='%23000' stroke-width='1.2' stroke-linecap='round' d='M3.7 5.2v1.8M2.8 6.1h1.8'/%3E%3Ccircle cx='8.2' cy='5.6' r='.65' fill='%23000'/%3E%3Ccircle cx='9.1' cy='6.7' r='.65' fill='%23000'/%3E%3C/svg%3E");
}
.doc-rail-g[data-g="Лидеры"] .doc-rail-g__ico {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M1.8 3.6l2.3 2.2L6 2.6l1.9 3.2 2.3-2.2-.8 5.2H2.6z'/%3E%3Cpath stroke='%23000' stroke-width='1.3' stroke-linecap='round' d='M2.8 10.2h6.4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' d='M1.8 3.6l2.3 2.2L6 2.6l1.9 3.2 2.3-2.2-.8 5.2H2.6z'/%3E%3Cpath stroke='%23000' stroke-width='1.3' stroke-linecap='round' d='M2.8 10.2h6.4'/%3E%3C/svg%3E");
}
.doc-rail-g[data-g="Группировки"] .doc-rail-g__ico {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 3.4L2.8 8.6M6 3.4l3.2 5.2M2.8 8.6h6.4'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='3' r='1.7'/%3E%3Ccircle cx='2.6' cy='9' r='1.7'/%3E%3Ccircle cx='9.4' cy='9' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 3.4L2.8 8.6M6 3.4l3.2 5.2M2.8 8.6h6.4'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='3' r='1.7'/%3E%3Ccircle cx='2.6' cy='9' r='1.7'/%3E%3Ccircle cx='9.4' cy='9' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
}
.doc-rail-g[data-g="Приложения"] .doc-rail-g__ico {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M3 1.6h6a1 1 0 0 1 1 1v7.8a.6.6 0 0 1-.94.49L6 8.7l-3.06 2.19A.6.6 0 0 1 2 10.4V2.6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M3 1.6h6a1 1 0 0 1 1 1v7.8a.6.6 0 0 1-.94.49L6 8.7l-3.06 2.19A.6.6 0 0 1 2 10.4V2.6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.doc-rail-g__n {
    flex: 0 0 auto;
    min-width: 18px; height: 16px;
    padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    background: rgba(255, 255, 255, .03);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0;
    color: var(--on-dark-faint, #847e73);
    font-variant-numeric: tabular-nums;
}
.doc-rail-g__chev {
    flex: 0 0 auto;
    width: 6px; height: 6px;
    margin: -3px 3px 0 1px;
    border-right: 1.5px solid var(--on-dark-faint, #847e73);
    border-bottom: 1.5px solid var(--on-dark-faint, #847e73);
    transform: rotate(45deg);
    transition: transform .25s cubic-bezier(.16,1,.3,1), margin .25s cubic-bezier(.16,1,.3,1);
}
.doc-rail-g[aria-expanded="false"] .doc-rail-g__chev { transform: rotate(-45deg); margin-top: 0; }
.doc-rail-gbox {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .28s cubic-bezier(.16,1,.3,1);
}
.doc-rail-gbox.is-collapsed { grid-template-rows: 0fr; }
.doc-rail-gbox__in { overflow: hidden; min-height: 0; }
@media (max-width: 1180px) {
    .doc-rail-gbox.is-collapsed { grid-template-rows: 1fr; }
    .doc-rail-g__chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-rail-gbox, .doc-rail-g__chev { transition: none; }
}

/* ===========================================================================
   ВОЛНА ПОД ЗАГОЛОВКОМ — ВЕЗДЕ И СИММЕТРИЧНО
   Была ::after самого заголовка: пряталась, если заголовок — единственный
   ребёнок своего блока (так в двух случаях из трёх), и гасла только справа —
   слева обрубок, справа хвост. Теперь это отдельный элемент сразу после
   заголовка, одинаково гаснет с обоих концов, волна тоньше и спокойнее.
   =========================================================================== */
.doc-item--head::after { content: none !important; }
.doc-wave {
    height: 8px;
    margin: 2px 0 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 5C3 5 3 3 6 3s3 2 6 2 3-2 6-2 3 2 6 2' fill='none' stroke='%23e7e3da' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
    opacity: .38;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    pointer-events: none;
}
.doc-wave + .doc-clause,
.doc-wave + .doc-item { border-top: 0 !important; }
/* в выдаче поиска строки между волнами прячутся — волны вместе с ними */
.doc-searching .doc-wave { display: none; }

/* ===========================================================================
   ОПИСАНИЕ В ШАПКЕ — ПО ТЕКСТУ, А НЕ ВО ВСЮ ШИРИНУ
   Вложенная панель тянулась на всю шапку, и под короткой фразой («Убийство
   игроков без веской на то причины») висела пустая плита. Теперь панель по
   ширине текста с разумными полями, а длинное определение переносится на
   удобной для чтения длине строки. И чуть ниже от названия.
   =========================================================================== */
.doc-ch__head-panel .doc-ch__desc {
    width: -moz-fit-content; width: fit-content;
    max-width: min(68ch, calc(100% - 52px));
    margin: 10px 26px 22px;
    padding: 11px 16px 12px;
}
@media (max-width: 900px) {
    .doc-ch__head-panel .doc-ch__desc { max-width: calc(100% - 32px); margin: 8px 16px 16px; padding: 10px 13px; }
}

/* ===========================================================================
   ПЛАШКА «ГЛАВА 7 ИЗ 36»
   Была серой рамкой с мелким текстом. Теперь капсула: номер главы выделен,
   «из 36» тише, а по низу тонкая шкала показывает, где эта глава среди всех.
   =========================================================================== */
.doc-crumb .doc-crumb__pos {
    position: relative;
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 4px 11px 5px;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    font-family: var(--f);
    font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    line-height: 14px;
    color: var(--on-dark-faint);
    font-variant-numeric: tabular-nums;
}
.doc-crumb__pos i { font-style: normal; }
.doc-crumb__pos b { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.doc-crumb__pos em { font-style: normal; letter-spacing: .06em; }
.doc-crumb__pos::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 2px; width: calc(var(--p, 0) * 100%);
    background: linear-gradient(90deg, rgba(239, 59, 59, .3), rgba(239, 59, 59, .85));
}

/* ===========================================================================
   ПРИМЕРЫ «ПРАВИЛЬНО / НЕПРАВИЛЬНО» — РЯДОМ, ЧИПАМИ
   Две сетки по четыре колонки с номерами 1–5: «Максим Гончаренко» переносился,
   номера отвлекали, а до подпунктов приходилось листать через обе сетки.
   Теперь пара стоит рядом в две колонки, имена — компактные чипы без номеров,
   а подпункты идут сразу после пары.
   =========================================================================== */
.doc-expair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 12px 0 8px;
}
.doc-exgroup {
    min-width: 0;
    padding: 11px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}
.doc-exgroup.doc-ex--good {
    border-color: rgba(134, 195, 138, .28);
    background: linear-gradient(180deg, rgba(134, 195, 138, .075), rgba(134, 195, 138, .02));
}
.doc-exgroup.doc-ex--bad {
    border-color: rgba(255, 125, 125, .28);
    background: linear-gradient(180deg, rgba(255, 125, 125, .075), rgba(255, 125, 125, .02));
}
.doc-exgroup > .doc-item--cap { padding: 0 0 9px !important; border: 0 !important; }
.doc-exgroup > .doc-exlist {
    display: flex !important; flex-wrap: wrap; gap: 6px;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0;
    background: none !important;
}
.doc-exgroup .doc-exlist > .doc-item {
    padding: 3px 10px !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
}
.doc-exgroup.doc-ex--good .doc-exlist > .doc-item { border-color: rgba(134, 195, 138, .22) !important; }
.doc-exgroup.doc-ex--bad  .doc-exlist > .doc-item { border-color: rgba(255, 125, 125, .22) !important; }
.doc-exgroup .doc-exlist .doc-item__n { display: none !important; }
.doc-exgroup .doc-exlist .doc-item__t {
    font-size: 13px; line-height: 18px;
    white-space: nowrap;
    color: var(--on-dark);
}
@media (max-width: 720px) { .doc-expair { grid-template-columns: 1fr; } }

/* ===========================================================================
   УТОЧНЕНИЯ — КУРСИВОМ
   Уточнение — пояснение к правилу, а не само правило, и курсив сразу отделяет
   его на глаз. Метка («УТОЧНЕНИЕ», «ПРИМЕР») остаётся прямой; исключения и
   наказания — тоже прямые: это нормы, а не пояснения.
   =========================================================================== */
.doc-clar:not(.doc-clar--pun):not(.doc-clar--exc),
.doc-item--note:not(.doc-item--exc) > .doc-item__t { font-style: italic; }
.doc-clar__k, .doc-note__k, .doc-cmd { font-style: normal; }

/* ===========================================================================
   СЖАТАЯ ШАПКА ДОКУМЕНТА: НАЗВАНИЕ СЛЕВА, РЕДАКЦИЯ У ПРАВОГО КРАЯ
   Плашка «Последняя редакция» стояла вплотную к названию. Теперь название
   слева со знаком свода в плашке, дата — у правого края.
   =========================================================================== */
body.doc-compact .wiki-lead { align-items: center; }
body.doc-compact .doc-meta { margin-left: auto !important; }
body.doc-compact .wiki-lead__title { display: inline-flex; align-items: center; gap: 12px; }
body.doc-compact .wiki-lead__title::before {
    content: "";
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(239, 59, 59, .32);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ff8f8f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 2.2h4.6L12 5.3v8.5H4.3z'/%3E%3Cpath d='M8.7 2.3v3.1h3.2'/%3E%3Cpath d='M6.2 8.6h3.6M6.2 11h3.6'/%3E%3C/g%3E%3C/svg%3E") center / 16px 16px no-repeat,
        linear-gradient(180deg, rgba(239, 59, 59, .18), rgba(239, 59, 59, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px -10px rgba(239, 59, 59, .5);
}

/* ===========================================================================
   ПАНЕЛИ — МЯГЧЕ И ВОЗДУШНЕЕ
   Граница была ровной линией одной яркости по всему периметру и скруглением
   12px — панели читались коробками. Теперь скругление 18px, а грань — это
   градиент: светлее сверху, к низу тает почти в ноль, и мягкая глубокая тень.
   Фон панели прежний — светлее его не делаем.
   =========================================================================== */
.wiki-main--doc .wiki-lead,
.doc-search,
.doc-ch__head-panel,
.doc-sec,
.doc-ch .doc-punish {
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(15, 16, 19, .975), rgba(11, 12, 15, .99)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .09) 38%, rgba(255, 255, 255, .035)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 22px 48px -30px rgba(0, 0, 0, .95) !important;
}

/* Значение-список команд («/looc, /radioooc…») не поднимаем в заглавную:
   ::first-letter превращал «/looc» в «/Looc». */
.doc-def__v--cmd::first-letter { text-transform: none; }
/* Строки рейла — одной высоты. У фракций с гербом строка была выше, чем у глав
   с номером, и колонка шла неровно. */
.doc-rail-ch { min-height: 28px; align-items: center; }

/* Герб фракции 18px при тексте 16px раздвигал строку до 30px, а строки глав с
   номером — 28px. Видимый размер герба прежний, но в высоту строки он больше
   не лезет: колонка идёт одним шагом. */
.doc-rail-ch .doc-rail-logo,
.doc-rail-ch .doc-rail-none { margin-top: -1px; margin-bottom: -1px; }

/* В режиме документа у рейла была своя толстая красная полоса прокрутки —
   прячем её так же, как на остальных страницах: рисует тонкую wiki-nav.js. */
@media (min-width: 1181px) {
    .doc-rail-mode .wiki-rail { scrollbar-width: none; }
    .doc-rail-mode .wiki-rail::-webkit-scrollbar { width: 0; height: 0; }
}

/* ===========================================================================
   ПОИСК: ПУСТЫЕ ПАНЕЛИ И СЧЁТЧИКИ
   В выдаче кнопка «1 подпункт» стояла при нуле видимых строк — совпадения в
   подпунктах поиск и так раскрывает, кнопка там только врёт.
   =========================================================================== */
body.doc-searching .doc-toggle { display: none; }
.doc-sec.is-hidden, .doc-exlist.is-hidden, .doc-exgroup.is-hidden, .doc-expair.is-hidden { display: none !important; }

/* ===========================================================================
   ОТНОШЕНИЯ: ОБЩАЯ СТРОКА — В ТОЙ ЖЕ КОЛОНКЕ
   =========================================================================== */
.doc-rel--gen .doc-rel__s {
    color: var(--on-dark-dim, #9a948a) !important;
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* ===========================================================================
   ДОСЬЕ: «§» КАК У ГЛАВ
   =========================================================================== */
.doc-fac__name .doc-anchor {
    position: static; display: inline-flex; vertical-align: middle;
    margin: -2px 0 0 8px; background: none; opacity: 0;
}
.doc-fac__top:hover .doc-anchor, .doc-fac__name .doc-anchor:focus-visible { opacity: 1; }

/* ===========================================================================
   УЗКИЙ ЭКРАН: СОДЕРЖАНИЕ ОДНОЙ СТРОКОЙ, ПОИСК НЕ ПОД ПОЛОСОЙ РЕЙЛА
   Содержание стояло раскрытым перед каждой главой (1260px на 380px), а
   липкий поиск прилипал на 74px — под полосу рейла, которая кончается на
   ~123px, и верх поля был закрыт.
   =========================================================================== */
@media (max-width: 1180px) {
    .wiki-main--doc .doc-search { top: calc(var(--rail-top-live, var(--rail-top, 64px)) + 67px); }
    .doc-toc {
        columns: auto !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid transparent !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg, rgba(15, 16, 19, .975), rgba(11, 12, 15, .99)) padding-box,
            linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .09) 38%, rgba(255, 255, 255, .035)) border-box !important;
    }
    .doc-toc__h {
        display: flex; align-items: center; gap: 12px;
        width: 100%; margin: 0 !important;
        padding: 14px 18px;
        border: 0; background: none; cursor: pointer; text-align: left;
        font: inherit; font-size: 11.5px; font-weight: 800;
        letter-spacing: .12em; text-transform: uppercase;
        color: var(--on-dark-faint, #77726a);
    }
    .doc-toc__cur {
        flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
        color: var(--on-dark, #e8e4dc);
    }
    .doc-toc__cur:empty { display: none; }
    .doc-toc__chev {
        flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 auto;
        border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
        transform: rotate(45deg);
        transition: transform .25s ease, margin .25s ease;
    }
    .doc-toc.is-open .doc-toc__chev { transform: rotate(-135deg); margin-top: 3px; }
    .doc-toc__h:hover, .doc-toc.is-open .doc-toc__h { color: var(--on-dark, #e8e4dc); }
    .doc-toc__box {
        display: none;
        padding: 12px 18px 16px;
        border-top: 1px solid rgba(255, 255, 255, .07);
        columns: 2; column-gap: 26px;
    }
    .doc-toc.is-open .doc-toc__box { display: block; }
}
@media (max-width: 720px) { .doc-toc__box { columns: 1; } }

/* ===========================================================================
   ВТОРОЙ ПРОХОД РЕВЬЮ
   =========================================================================== */
/* Плоские и сжатые перечни шли реже нумерованного свода: у каждой строки
   20+20px и яркая линия — поздний .doc-clause перебивал задуманный padding:0. */
.doc-clause.doc-clause--flat, .doc-clause.doc-clause--tight { padding-top: 0; padding-bottom: 0; }
.doc-clause--flat + .doc-clause--flat, .doc-clause--tight + .doc-clause--tight { border-top: 0 !important; }
.doc-clause--flat + .doc-clause--flat > .doc-item--bullet,
.doc-clause--tight + .doc-clause--tight > .doc-item--lead { border-top: 1px solid rgba(255, 255, 255, .085); }

/* наказание: красная грань вернулась (её съела мягкая граница панелей),
   штамп больше не пульсирует — мерцание без причины мешало читать */
.doc-ch .doc-punish {
    box-shadow:
        inset 3px 0 0 rgba(207, 41, 41, .85),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 22px 48px -30px rgba(0, 0, 0, .95) !important;
}
.doc-punish__k, .doc-punish__k::after { animation: none !important; }
.doc-punish__k::after { content: none !important; }
@media (max-width: 720px) { .doc-ch .doc-punish { margin-top: 4px !important; } }

/* чипы примеров — ровные поля с обеих сторон */
.doc-exgroup .doc-exlist .doc-item__t { padding-right: 0 !important; }

/* определение внутри пункта — та же плашка, что и остальные определения;
   красная грань закреплена за наказанием */
.doc-idef {
    padding: 10px 14px 11px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .028);
}
.doc-idef__t { font-size: 15px; }

/* пример в хвосте пункта — метка и значок как у примечания «Пример» */
.doc-clar--ex .doc-clar__k { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.6a3.3 3.3 0 0 0-2 5.9c.4.3.6.7.6 1.1v.4h2.8v-.4c0-.4.2-.8.6-1.1A3.3 3.3 0 0 0 6 1.6z'/%3E%3Cpath d='M4.9 10.6h2.2'/%3E%3C/g%3E%3C/svg%3E"); }

/* раздел, разрезанный на заголовок и тело: у тела нет номера */
.doc-item--secbody > .doc-item__n { visibility: hidden; }

/* пустой счётчик поиска давал лишние 8px снизу */
.doc-search__count:empty { display: none; }

/* пейджер — такие же мягкие панели, как всё остальное */
.doc-pager { border-top: 0 !important; }
.doc-pager__a {
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(15, 16, 19, .975), rgba(11, 12, 15, .99)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .03)) border-box !important;
}

/* дробная высота таблеток: нижняя грань ложилась на полпикселя */
.doc-toggle { line-height: 16px; }
.doc-stats { line-height: 16px; }
.doc-rail-back { line-height: 16px; }
.doc-search__key { line-height: 14px; }

/* узкий экран: шапка документа не под полосой рейла, плашка редакции в строку */
@media (max-width: 1180px) {
    .wiki-main--doc { padding-top: calc(var(--rail-top, 64px) + 71px); }
}
@media (max-width: 480px) {
    .doc-stats { max-width: 100%; gap: 8px; padding-left: 10px; padding-right: 11px; }
    .doc-stats > span, .doc-stats > b { white-space: nowrap; }
    .doc-stats > span { letter-spacing: .08em; }
}

/* 380px: дата вылезала за правую грань плашки — ужимаем трекинг метки */
@media (max-width: 480px) {
    .doc-stats { font-size: 10px; gap: 7px; }
    .doc-stats > span { letter-spacing: .05em; }
    .doc-stats > b { font-size: 12px; }
}

/* ===========================================================================
   ТЯЖЕСТЬ НАРУШЕНИЯ: МЕТКА У ПУНКТА И ШКАЛА В КОНЦЕ «ОБЩЕЙ ИНФОРМАЦИИ»
   Метка — уровень и срок прямо в строке пункта, та же цветовая шкала, что у
   плашек «Наказание»; по нажатию ведёт к шкале.
   =========================================================================== */
.doc-sev, .doc-scale__row { --grade: #d9a441; }
.doc-sev[data-sev="2"], .doc-scale__row[data-sev="2"] { --grade: #e08a5a; }
.doc-sev[data-sev="3"], .doc-scale__row[data-sev="3"] { --grade: #ff6b6b; }
.doc-sev[data-sev="4"], .doc-scale__row[data-sev="4"] { --grade: #ff3d5a; }
.doc-sev {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 6px; padding: 0 9px 0 7px;
    vertical-align: 1px;
    border: 1px solid color-mix(in srgb, var(--grade) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--grade) 11%, transparent);
    color: var(--grade);
    font-family: var(--f); font-size: 10.5px; font-weight: 800; line-height: 18px;
    font-style: normal; letter-spacing: .05em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.doc-sev:hover, .doc-sev:focus-visible {
    background: color-mix(in srgb, var(--grade) 20%, transparent);
    border-color: var(--grade);
}
.doc-sev__r {
    font-weight: 700; letter-spacing: 0; text-transform: none;
    color: color-mix(in srgb, var(--grade) 62%, #fff);
}
.doc-sev__r::before { content: "·"; margin: 0 5px 0 0; opacity: .55; }
.doc-sev__bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.doc-sev__bars b { width: 2.5px; border-radius: 1px; background: currentColor; opacity: .25; }
.doc-sev__bars b:nth-child(1) { height: 4px; }
.doc-sev__bars b:nth-child(2) { height: 6px; }
.doc-sev__bars b:nth-child(3) { height: 8px; }
.doc-sev__bars b:nth-child(4) { height: 10px; }
[data-sev="1"] > .doc-sev__bars b:nth-child(-n+1),
[data-sev="2"] > .doc-sev__bars b:nth-child(-n+2),
[data-sev="3"] > .doc-sev__bars b:nth-child(-n+3),
[data-sev="4"] > .doc-sev__bars b:nth-child(-n+4),
[data-sev="1"] .doc-scale__name .doc-sev__bars b:nth-child(-n+1),
[data-sev="2"] .doc-scale__name .doc-sev__bars b:nth-child(-n+2),
[data-sev="3"] .doc-scale__name .doc-sev__bars b:nth-child(-n+3),
[data-sev="4"] .doc-scale__name .doc-sev__bars b:nth-child(-n+4) { opacity: 1; }

.doc-scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-scale__row {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 14px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--grade) 28%, transparent);
    border-radius: 11px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--grade) 12%, transparent),
        color-mix(in srgb, var(--grade) 2%, transparent) 70%);
}
.doc-scale__name {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--grade);
    font-family: var(--f); font-size: 12px; font-weight: 800; line-height: 18px;
    letter-spacing: .1em; text-transform: uppercase;
}
.doc-scale__txt { font-family: var(--f-read); font-size: 14.5px; line-height: 22px; color: var(--on-dark); }
@media (max-width: 720px) { .doc-scale__row { grid-template-columns: 1fr; gap: 4px; } }

/* наказание главы: к чему относится и подписи шкал */
.doc-punish__scope {
    margin: 0 0 12px;
    font-family: var(--f-read); font-size: 13.5px; line-height: 21px;
    color: var(--on-dark-dim);
    max-width: 72ch;
}
.doc-punish__for {
    margin: 16px 0 8px;
    font-family: var(--f); font-size: 10.5px; font-weight: 800; line-height: 16px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-dim);
}
.doc-punish__scope + .doc-punish__for { margin-top: 4px; }

/* ===========================================================================
   ВРЕЗКА-ПРИМЕЧАНИЕ — В КОЛОНКЕ ТЕКСТА СВОЕЙ СТРОКИ
   Тот же вид, что у «Уточнения» и «Исключения» из хвоста пункта: одна
   сущность — одна плашка, и все плашки начинаются по одной линии с текстом.
   =========================================================================== */
.doc-item__t > .doc-item--inset {
    position: relative;
    display: block;
    margin: 11px 0 0 !important;
    padding: 11px 15px 12px 16px !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-left: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    overflow: hidden;
}
.doc-item__t > .doc-item--inset::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .04));
}
.doc-item__t > .doc-item--inset > .doc-item__n { display: none; }
.doc-item__t > .doc-item--inset > .doc-item__t {
    padding: 0 !important;
    font-size: 13.8px; line-height: 22px;
    color: var(--on-dark-dim);
}
.doc-item__t > .doc-item--inset.doc-item--exc {
    border-color: rgba(217, 164, 65, .16) !important;
    background: linear-gradient(180deg, rgba(217, 164, 65, .085), rgba(217, 164, 65, .022)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 216, 150, .1) !important;
}
.doc-item__t > .doc-item--inset.doc-item--exc::before {
    background: linear-gradient(180deg,
        rgba(217, 164, 65, .95), rgba(217, 164, 65, .45) 55%, rgba(217, 164, 65, .18));
}
.doc-item__t > .doc-item--inset.doc-item--exc > .doc-item__t { color: #ded4c0; }
.doc-item__t > .doc-item--inset .doc-lines { margin-top: 2px; }

/* ===========================================================================
   УСЛОВИЯ — СПИСКОМ ПОД ТЕКСТОМ
   =========================================================================== */
.doc-conds { margin: 10px 0 2px; }
.doc-conds__k {
    display: block; margin: 0 0 4px;
    font-family: var(--f); font-size: 9px; font-weight: 800; line-height: 16px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--on-dark-faint);
}
.doc-conds ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.doc-conds li { position: relative; padding-left: 22px; }
.doc-conds li::before {
    content: "";
    position: absolute; left: 1px; top: 6px;
    width: 13px; height: 13px;
    background: #86c38a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.3 2.4 4.9-5.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.3 2.4 4.9-5.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

/* ===========================================================================
   ШАПКА ГЛАВЫ: НОМЕР СВОЕЙ КОЛОНКОЙ, НАЗВАНИЕ И ОПИСАНИЕ ПО ОДНОЙ ЛИНИИ
   Цифра растянута на всю высоту названия с описанием; справа от неё — общая
   левая граница: с неё начинаются и название, и описание.
   =========================================================================== */
.doc-ch__hgrid {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 22px;
    align-items: stretch;
    padding: 12px 26px 24px;
}
.doc-ch__num { position: relative; min-height: 64px; }
.doc-ch__num svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
}
.doc-ch__num text {
    font-family: var(--f); font-weight: 900; font-size: 100px;
    fill: url(#docNumGrad);
    transition: opacity .35s ease;
}
.doc-ch__hmain { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.doc-ch__head-panel .doc-ch__hmain > .doc-ch__h {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
.doc-ch__head-panel .doc-ch__hmain > .doc-ch__desc {
    margin: 12px 0 0 !important;
    max-width: min(68ch, 100%) !important;
}
@media (max-width: 720px) {
    .doc-ch__hgrid { grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; padding: 8px 16px 18px; }
    .doc-ch__num { min-height: 50px; }
    .doc-ch__head-panel .doc-ch__hmain > .doc-ch__desc { margin-top: 10px !important; }
}

/* досье: номер своей колонкой слева — как у глав, на всю высоту карточки */
.doc-fac__top { align-items: center; }
.doc-fac__top > .doc-ch__num--fac {
    flex: 0 0 64px;
    align-self: stretch;
    min-height: 56px;
    margin: 0 4px 0 0;
}
@media (max-width: 720px) {
    .doc-fac__top > .doc-ch__num--fac { flex-basis: 44px; min-height: 44px; margin-right: 0; }
}

/* 380px: «ПОСЛЕДНЯЯ РЕДАКЦИЯ» и дата в одну строку не влезали — в сжатой шапке
   правило body.doc-compact .doc-stats перебивало мобильный кегль, и плашка
   вылезала за край. На узком экране остаётся «Редакция · 11 сентября 2026». */
@media (max-width: 480px) {
    .doc-stats { max-width: 100%; }
    .doc-stats__long { display: none; }
    body.doc-compact .doc-stats { font-size: 10px; }
    body.doc-compact .doc-stats > b { font-size: 12px; }
}

/* ===========================================================================
   НАКАЗАНИЕ ГЛАВЫ: У КАЖДОЙ МЕРЫ — ПОДПИСЬ СЛУЧАЯ
   «Обычное нарушение» / «Массовое или грубое» — колонкой слева от срока.
   =========================================================================== */
.doc-punish__list--lv .doc-punish__m { grid-template-columns: 3px 178px minmax(0, 1fr); }
.doc-punish__lvl {
    align-self: center;
    font-family: var(--f); font-size: 10.5px; font-weight: 800; line-height: 16px;
    letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--grade) 72%, #fff);
}
@media (max-width: 720px) {
    .doc-punish__list--lv .doc-punish__m { grid-template-columns: 3px minmax(0, 1fr); row-gap: 2px; }
    .doc-punish__list--lv .doc-punish__grade { grid-row: span 2; }
    .doc-punish__list--lv .doc-punish__lvl,
    .doc-punish__list--lv .doc-punish__txt { grid-column: 2; }
}

/* описание главы из нескольких абзацев */
.doc-ch__desc--multi p { margin: 0; }
.doc-ch__desc--multi p + p { margin-top: 8px; }

/* ===========================================================================
   ПАРНЫЕ КАРТОЧКИ («Небезопасный плен» / «Безопасный плен»)
   =========================================================================== */
.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 2px; }
.doc-card {
    --tone: 255, 255, 255;
    position: relative;
    padding: 12px 15px 13px 17px;
    border: 1px solid rgba(var(--tone), .16);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(var(--tone), .075), rgba(var(--tone), .015));
    overflow: hidden;
}
.doc-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(var(--tone), .9), rgba(var(--tone), .2));
}
.doc-card[data-tone="warn"] { --tone: 224, 138, 90; }
.doc-card[data-tone="safe"] { --tone: 134, 195, 138; }
.doc-card__t {
    display: block; margin: 0 0 5px;
    font-family: var(--f); font-size: 14px; font-weight: 800; line-height: 20px;
    color: rgb(var(--tone));
}
.doc-card[data-tone="warn"] .doc-card__t { color: #f0a77e; }
.doc-card[data-tone="safe"] .doc-card__t { color: #9fd3a3; }
.doc-card__v {
    display: block;
    font-family: var(--f-read); font-size: 14px; line-height: 22px;
    color: var(--on-dark-dim);
}
@media (max-width: 720px) { .doc-cards { grid-template-columns: 1fr; } }

/* ===========================================================================
   «ПРАВИЛА ОБНОВЛЕНЫ» — плашка внизу, если свод пересобрали
   =========================================================================== */
.doc-fresh {
    position: fixed; left: 50%; bottom: 22px; z-index: 9500;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px;
    padding: 9px 10px 9px 18px;
    border: 1px solid rgba(239, 59, 59, .45);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(30, 20, 22, .97), rgba(18, 14, 16, .97));
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .9);
    font-family: var(--f); font-size: 13px; font-weight: 700; color: #fff;
    white-space: nowrap;
}
.doc-fresh button {
    padding: 7px 14px;
    border: 0; border-radius: 999px;
    background: linear-gradient(180deg, #e04545, #b52828);
    color: #fff; font: inherit; font-size: 12.5px; cursor: pointer;
}
.doc-fresh button:hover { filter: brightness(1.12); }

/* ===========================================================================
   DISCORD В ТЕКСТЕ — ПЛАШКА-ССЫЛКА НА СЕРВЕР ПРОЕКТА
   =========================================================================== */
.doc-dc {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0 1px; padding: 0 8px 0 6px;
    border: 1px solid rgba(88, 101, 242, .5);
    border-radius: 999px;
    background: rgba(88, 101, 242, .16);
    color: #c9cdff !important;
    font-family: var(--f); font-size: .86em; font-weight: 700; line-height: 1.6;
    font-style: normal; letter-spacing: 0; text-transform: none;
    text-decoration: none !important;
    vertical-align: 1px; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.doc-dc:hover, .doc-dc:focus-visible {
    background: rgba(88, 101, 242, .32);
    border-color: rgba(120, 132, 255, .9);
    color: #fff !important;
}
.doc-dc__ico {
    flex: 0 0 auto;
    width: 13px; height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.32 4.37a19.8 19.8 0 0 0-4.89-1.52.07.07 0 0 0-.08.04c-.21.38-.44.87-.6 1.25a18.3 18.3 0 0 0-5.49 0 12.6 12.6 0 0 0-.62-1.25.08.08 0 0 0-.08-.04 19.7 19.7 0 0 0-4.88 1.52.07.07 0 0 0-.03.03C.53 9.05-.32 13.58.1 18.06a.08.08 0 0 0 .03.06 19.9 19.9 0 0 0 5.99 3.03.08.08 0 0 0 .09-.03c.46-.63.87-1.3 1.22-1.99a.08.08 0 0 0-.04-.1 13.1 13.1 0 0 1-1.87-.9.08.08 0 0 1-.01-.13l.37-.29a.07.07 0 0 1 .08-.01c3.93 1.79 8.18 1.79 12.06 0a.07.07 0 0 1 .08.01l.37.29a.08.08 0 0 1-.01.13c-.6.35-1.22.65-1.87.89a.08.08 0 0 0-.04.11c.36.7.77 1.36 1.22 1.99a.08.08 0 0 0 .09.03 19.8 19.8 0 0 0 6-3.03.08.08 0 0 0 .03-.05c.5-5.18-.84-9.67-3.55-13.66a.06.06 0 0 0-.03-.03zM8.02 15.33c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.1 2.16 2.42 0 1.33-.96 2.42-2.16 2.42zm7.98 0c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.32 4.37a19.8 19.8 0 0 0-4.89-1.52.07.07 0 0 0-.08.04c-.21.38-.44.87-.6 1.25a18.3 18.3 0 0 0-5.49 0 12.6 12.6 0 0 0-.62-1.25.08.08 0 0 0-.08-.04 19.7 19.7 0 0 0-4.88 1.52.07.07 0 0 0-.03.03C.53 9.05-.32 13.58.1 18.06a.08.08 0 0 0 .03.06 19.9 19.9 0 0 0 5.99 3.03.08.08 0 0 0 .09-.03c.46-.63.87-1.3 1.22-1.99a.08.08 0 0 0-.04-.1 13.1 13.1 0 0 1-1.87-.9.08.08 0 0 1-.01-.13l.37-.29a.07.07 0 0 1 .08-.01c3.93 1.79 8.18 1.79 12.06 0a.07.07 0 0 1 .08.01l.37.29a.08.08 0 0 1-.01.13c-.6.35-1.22.65-1.87.89a.08.08 0 0 0-.04.11c.36.7.77 1.36 1.22 1.99a.08.08 0 0 0 .09.03 19.8 19.8 0 0 0 6-3.03.08.08 0 0 0 .03-.05c.5-5.18-.84-9.67-3.55-13.66a.06.06 0 0 0-.03-.03zM8.02 15.33c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.1 2.16 2.42 0 1.33-.96 2.42-2.16 2.42zm7.98 0c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===========================================================================
   ФРАКЦИЯ В ТЕКСТЕ - ПЛАШКА-ССЫЛКА НА КАРТОЧКУ ФРАКЦИИ (как Discord выше)
   =========================================================================== */
.doc-fac {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0 1px; padding: 0 8px 0 3px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #e6e6e6 !important;
    font-family: var(--f); font-size: .86em; font-weight: 700; line-height: 1.6;
    font-style: normal; letter-spacing: 0; text-transform: none;
    text-decoration: none !important;
    vertical-align: 1px; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.doc-fac:hover, .doc-fac:focus-visible {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .45);
    color: #fff !important;
}
.doc-fac__ico { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; }

/* ===========================================================================
   КАРТОЧКА ТЯЖЕСТИ — ОТКРЫВАЕТСЯ РЯДОМ С МЕТКОЙ
   =========================================================================== */
.doc-sev { cursor: pointer; }
.doc-sevpop {
    position: absolute; z-index: 9400;
    width: min(340px, calc(100vw - 24px));
    padding: 14px 14px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(26, 26, 31, .985), rgba(15, 16, 19, .985)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)) border-box;
    box-shadow: 0 26px 54px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: var(--ax, 24px) 0;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2);
    pointer-events: none;
}
.doc-sevpop.is-above { transform: translateY(6px) scale(.97); transform-origin: var(--ax, 24px) 100%; }
.doc-sevpop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.doc-sevpop::before {
    content: "";
    position: absolute; top: -6px; left: calc(var(--ax, 24px) - 6px);
    width: 11px; height: 11px;
    background: rgba(26, 26, 31, .985);
    border-left: 1px solid rgba(255, 255, 255, .24);
    border-top: 1px solid rgba(255, 255, 255, .24);
    transform: rotate(45deg);
}
.doc-sevpop.is-above::before {
    top: auto; bottom: -6px;
    background: rgba(15, 16, 19, .985);
    border-color: rgba(255, 255, 255, .07);
    transform: rotate(225deg);
}
.doc-sevpop__h {
    margin: 0 2px 10px;
    font-family: var(--f); font-size: 10.5px; font-weight: 800; line-height: 16px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-dim);
}
.doc-sevpop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.doc-sevpop__row {
    --grade: #d9a441;
    display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 10px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    opacity: .6;
}
.doc-sevpop__row[data-sev="2"] { --grade: #e08a5a; }
.doc-sevpop__row[data-sev="3"] { --grade: #ff6b6b; }
.doc-sevpop__row[data-sev="4"] { --grade: #ff3d5a; }
.doc-sevpop__row.is-here {
    opacity: 1;
    border-color: color-mix(in srgb, var(--grade) 45%, transparent);
    background: color-mix(in srgb, var(--grade) 13%, transparent);
}
.doc-sevpop__name {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--grade);
    font-family: var(--f); font-size: 11px; font-weight: 800; line-height: 16px;
    letter-spacing: .08em; text-transform: uppercase;
}
.doc-sevpop__txt { font-family: var(--f-read); font-size: 13px; line-height: 18px; color: var(--on-dark); }
[data-sev="1"] .doc-sevpop__name .doc-sev__bars b:nth-child(-n+1),
[data-sev="2"] .doc-sevpop__name .doc-sev__bars b:nth-child(-n+2),
[data-sev="3"] .doc-sevpop__name .doc-sev__bars b:nth-child(-n+3),
[data-sev="4"] .doc-sevpop__name .doc-sev__bars b:nth-child(-n+4) { opacity: 1; }
.doc-sevpop__foot {
    margin: 10px 2px 0;
    font-family: var(--f-read); font-size: 12px; line-height: 17px;
    color: var(--on-dark-faint);
}
.doc-sevpop__more {
    display: inline-block; margin: 8px 2px 0;
    font-family: var(--f); font-size: 12px; font-weight: 700; line-height: 16px;
    color: #ff8f8f; text-decoration: none;
}
.doc-sevpop__more:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .doc-sevpop { transition: opacity .15s ease; transform: none !important; } }

/* ===========================================================================
   ПРИМЕЧАНИЕ ОТДЕЛЬНОЙ СТРОКОЙ — ТОТ ЖЕ ВИД, ЧТО У ВРЕЗОК
   Врезки в строке пункта и примечания отдельной строкой («Важно», «Наказание»
   в досье) выглядели двумя разными коробками. Теперь одна плашка.
   =========================================================================== */
.doc-clause > .doc-item--note,
.doc-fac__block > .doc-item--note {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-left: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    overflow: hidden;
}
.doc-clause > .doc-item--note::before,
.doc-fac__block > .doc-item--note::before {
    content: "" !important;
    position: absolute; left: 0; top: 0; bottom: 0; right: auto;
    width: 3px; height: auto;
    opacity: 1 !important;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .04)) !important;
}
.doc-clause > .doc-item--note.doc-item--exc,
.doc-fac__block > .doc-item--note.doc-item--exc {
    border-color: rgba(217, 164, 65, .16) !important;
    background: linear-gradient(180deg, rgba(217, 164, 65, .085), rgba(217, 164, 65, .022)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 216, 150, .1) !important;
}
.doc-clause > .doc-item--note.doc-item--exc::before,
.doc-fac__block > .doc-item--note.doc-item--exc::before {
    background: linear-gradient(180deg,
        rgba(217, 164, 65, .95), rgba(217, 164, 65, .45) 55%, rgba(217, 164, 65, .18)) !important;
}
.doc-clause > .doc-item--note > .doc-item__t,
.doc-fac__block > .doc-item--note > .doc-item__t { padding-right: 0 !important; }

/* отдельная плашка — по линии текста соседних пунктов */
.doc-clause > .doc-item--note.doc-item--at-bul,
.doc-fac__block > .doc-item--note.doc-item--at-bul { margin-left: 32px !important; }
.doc-clause > .doc-item--note.doc-item--at-num { margin-left: 50px !important; }

/* примечание без строки-хозяина в «прочих» блоках досье — по линии текста */
.doc-fac__block > .doc-item--note.doc-item--at-bul,
.doc-ch__body > .doc-fac__block .doc-item--note.doc-item--at-bul { margin-left: 32px !important; }

/* поиск и начало документа — под шапкой высотой как на лендинге */
@media (min-width: 1181px) {
    .wiki-main--doc .doc-search { top: calc(var(--rail-top-live, var(--rail-top, 64px)) + 10px); }
}
@media (min-width: 821px) {
    .wiki-main--doc { padding-top: max(clamp(88px, 11vh, 128px), calc(var(--rail-top, 64px) + 16px)); }
}
/* перескок попапа шкалы сверху вниз и обратно - плавный переезд (wiki-rules.js) */
.doc-sevpop.is-flip { transition: opacity .2s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2), top .32s cubic-bezier(.2, .7, .2, 1), left .32s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .doc-sevpop.is-flip { transition: opacity .15s ease; } }