.page-toc {
    float: right;
    position: static;

    box-sizing: border-box;
    width: 20rem;
    max-width: 42%;

    margin: 0 0 1.5rem 2rem;
    padding: 1rem 1.25rem;

    background: var(--q2-bg-elev);
    color: var(--q2-text);
    border: 1px solid var(--q2-border-ring);
    border-radius: var(--q2-radius);
    box-shadow: var(--q2-shadow-card);

    font-size: 0.95rem;
    line-height: 1.35;
}

.page-toc h4 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--q2-text-strong);
}

.page-toc ul {
    margin: 0;
    padding-left: 1.15rem;
}

.page-toc li {
    margin: 0.12rem 0;
    font-size: inherit;
    line-height: inherit;
}

.page-toc a,
.page-toc a:visited,
.page-toc a:hover,
.page-toc a:focus {
    text-decoration: none;
}

.page-toc a {
    display: block;
    color: var(--q2-link);
    text-decoration: none;
    overflow-wrap: anywhere;

    padding: 0.12rem 0.3rem;
    border-radius: var(--q2-radius-xs);

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

.page-toc a:hover {
    background: var(--q2-bg-muted);
    color: var(--q2-text-strong);
}

@media (max-width: 840px) {
    .page-toc {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 1.5rem;
    }
}