/*
 * Оглавление статьи.
 * На обычных экранах — встроенный блок.
 * На широких экранах — плавающая панель слева.
 */

.sysnotes-toc {
    margin: 3rem 0;
    padding: 2rem 2rem;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;

    background: #f8f9fb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.sysnotes-toc-title {
    margin: 0 0 1.4rem 0;

    color: #15171a;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.sysnotes-toc-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sysnotes-toc-item {
    margin: 0;
}

.sysnotes-toc-item + .sysnotes-toc-item {
    margin-top: 0.35rem;
}

.sysnotes-toc-item.is-h3 {
    padding-left: 1.2rem;
}

.sysnotes-toc-link {
    position: relative;

    display: block;
    padding: 0.7rem 1rem 0.7rem 1.2rem;

    border-radius: 10px;

    color: #5f6b7a;
    text-decoration: none;

    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.4;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.sysnotes-toc-link::before {
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0;

    width: 3px;
    border-radius: 3px;

    background: transparent;

    content: "";
}

.sysnotes-toc-link:hover {
    background: rgba(0, 122, 255, 0.07);
    color: #007aff;
    transform: translateX(2px);
}

.sysnotes-toc-link.is-active {
    background: rgba(0, 122, 255, 0.10);
    color: #1f6feb;
    font-weight: 700;
}

.sysnotes-toc-link.is-active::before {
    background: #1f6feb;
}

.sysnotes-anchor-heading {
    scroll-margin-top: 100px;
}

/*
 * Плавающее оглавление слева на широких экранах
 */
@media (min-width: 1450px) {
    .sysnotes-toc {
        position: fixed;
        top: 11rem;
        left: 2.4rem;
        z-index: 80;

        width: 30rem;
        max-height: calc(100vh - 14rem);
        margin: 0;
        padding: 1.6rem 1.4rem;

        overflow-x: hidden;
        overflow-y: auto;

        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 20px;

        background: rgba(248, 249, 251, 0.95);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
    }

    .sysnotes-toc::-webkit-scrollbar {
        width: 6px;
    }

    .sysnotes-toc::-webkit-scrollbar-track {
        background: transparent;
    }

    .sysnotes-toc::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.18);
    }

    .sysnotes-toc-title {
        position: sticky;
        top: -1.6rem;
        z-index: 2;

        margin: -1.6rem -1.4rem 1rem;
        padding: 1.4rem 1.4rem 1.1rem;

        border-bottom: 1px solid rgba(0, 0, 0, 0.08);

        background: rgba(248, 249, 251, 0.97);
    }

    .sysnotes-toc-link {
        font-size: 1.35rem;
        line-height: 1.35;
    }
}

/*
 * На средних экранах — обычный блок в статье
 */
@media (max-width: 1449px) {
    .sysnotes-toc {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
    }
}

/*
 * На телефонах делаем ещё компактнее
 */
@media (max-width: 700px) {
    .sysnotes-toc {
        margin: 2.4rem 0;
        padding: 1.5rem;
        border-radius: 16px;
    }

    .sysnotes-toc-title {
        font-size: 1.75rem;
    }

    .sysnotes-toc-link {
        padding: 0.65rem 0.85rem 0.65rem 1rem;
        font-size: 1.4rem;
    }

    .sysnotes-toc-item.is-h3 {
        padding-left: 0.9rem;
    }
}

/*
 * Тёмная тема
 */
@media (prefers-color-scheme: dark) {
    .sysnotes-toc {
        border-color: rgba(255, 255, 255, 0.10);
        background: #1f2228;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    }

    .sysnotes-toc-title {
        color: #ffffff;
    }

    .sysnotes-toc-link {
        color: #c9d1d9;
    }

    .sysnotes-toc-link:hover {
        background: rgba(77, 163, 255, 0.12);
        color: #4da3ff;
    }

    .sysnotes-toc-link.is-active {
        background: rgba(77, 163, 255, 0.16);
        color: #4da3ff;
    }

    .sysnotes-toc-link.is-active::before {
        background: #4da3ff;
    }
}

@media (min-width: 1450px) and (prefers-color-scheme: dark) {
    .sysnotes-toc {
        background: rgba(31, 34, 40, 0.95);
        border-color: rgba(255, 255, 255, 0.10);
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }

    .sysnotes-toc-title {
        border-bottom-color: rgba(255, 255, 255, 0.08);
        background: rgba(31, 34, 40, 0.97);
    }

    .sysnotes-toc::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
    }
}

/*
 * Скрываем плавающее содержание за пределами текста статьи.
 */

@media (min-width: 1450px) {
    .sysnotes-toc {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
    }

    .sysnotes-toc.is-hidden-by-scroll {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-18px);
    }
}

/*
 * SysNotes TOC — компактный стиль документации.
 * Этот блок должен находиться в конце файла.
 */

@media (min-width: 1450px) {
    .sysnotes-toc {
        position: fixed;
        top: 12rem;
        left: 2.6rem;
        z-index: 80;

        width: 29rem;
        max-height: calc(100vh - 17rem);
        margin: 0;
        padding: 0 1.2rem 0 1.5rem;

        overflow-x: hidden;
        overflow-y: auto;

        border: 0 !important;
        border-left: 2px solid #e5e7eb !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .sysnotes-toc:hover {
        scrollbar-color: #d1d5db transparent;
    }

    .sysnotes-toc::-webkit-scrollbar {
        width: 5px;
    }

    .sysnotes-toc::-webkit-scrollbar-track {
        background: transparent;
    }

    .sysnotes-toc::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: transparent;
    }

    .sysnotes-toc:hover::-webkit-scrollbar-thumb {
        background: #d1d5db;
    }

    .sysnotes-toc-title {
        position: sticky;
        top: 0;
        z-index: 2;

        margin: 0 0 1rem;
        padding: 0.2rem 0 1rem;

        border: 0 !important;
        border-bottom: 1px solid #eceff3 !important;

        background: #fff !important;
        color: #111827;

        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.02em;
    }

    .sysnotes-toc-list {
        margin: 0;
        padding: 0;
    }

    .sysnotes-toc-item {
        margin: 0;
        padding: 0;
    }

    .sysnotes-toc-item + .sysnotes-toc-item {
        margin-top: 0.15rem;
    }

    .sysnotes-toc-item.is-h3 {
        padding-left: 1rem;
    }

    .sysnotes-toc-link {
        position: relative;

        display: block;
        padding: 0.55rem 0.65rem 0.55rem 1rem;

        border-radius: 7px;

        background: transparent !important;
        color: #6b7280 !important;
        text-decoration: none !important;

        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.35;

        transition:
            color 0.15s ease,
            background-color 0.15s ease;
    }

    .sysnotes-toc-link::before {
        position: absolute;
        top: 0.65rem;
        bottom: 0.65rem;
        left: -1.65rem;

        width: 3px;

        border-radius: 3px;
        background: transparent;

        content: "";
    }

    .sysnotes-toc-link:hover {
        background: #f6f8fa !important;
        color: #2563eb !important;
        text-decoration: none !important;
        transform: none !important;
    }

    .sysnotes-toc-link.is-active {
        background: #eff6ff !important;
        color: #2563eb !important;
        font-weight: 700;
        text-decoration: none !important;
    }

    .sysnotes-toc-link.is-active::before {
        background: #2563eb !important;
    }

    .sysnotes-toc.is-hidden-by-scroll {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-14px);
    }
}

@media (min-width: 1450px) and (prefers-color-scheme: dark) {
    .sysnotes-toc {
        border-left-color: #374151 !important;
        background: transparent !important;
    }

    .sysnotes-toc-title {
        border-bottom-color: #30363d !important;
        background: #111315 !important;
        color: #f3f4f6;
    }

    .sysnotes-toc-link {
        color: #9ca3af !important;
    }

    .sysnotes-toc-link:hover {
        background: #1f2937 !important;
        color: #60a5fa !important;
    }

    .sysnotes-toc-link.is-active {
        background: rgba(37, 99, 235, 0.16) !important;
        color: #60a5fa !important;
    }
}

/*
 * Шрифты оглавления наследуются от темы SysNotes.
 */

.sysnotes-toc,
.sysnotes-toc-title,
.sysnotes-toc-list,
.sysnotes-toc-item,
.sysnotes-toc-link {
    font-family: inherit !important;
}

.sysnotes-toc-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: normal;
}

.sysnotes-toc-link {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.45;
}

.sysnotes-toc-link.is-active {
    font-weight: 600;
}

@media (max-width: 700px) {
    .sysnotes-toc-title {
        font-size: 1.55rem;
    }

    .sysnotes-toc-link {
        font-size: 1.4rem;
    }
}

/*
 * Более компактный заголовок оглавления.
 */
.sysnotes-toc-title {
    font-size: 1.45rem !important;
    font-weight: 650 !important;
    line-height: 1.3;
}