/* v2 documentation hub: site sidebar already in the shell; this is the topic TOC + article. */

.doc-v2-layout {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: var(--v2-space-6);
    align-items: start;
}

.doc-v2-toc {
    position: sticky;
    top: calc(var(--v2-topbar-h) + var(--v2-space-4));
    max-height: calc(100vh - var(--v2-topbar-h) - var(--v2-space-8));
    overflow-y: auto;
    padding: var(--v2-space-4);
    background: var(--v2-surface-1);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
}

.doc-v2-toc nav {
    font-size: var(--v2-text-sm);
    line-height: 1.45;
}

.doc-v2-toc .doc-nav-group {
    margin-bottom: var(--v2-space-4);
}

.doc-v2-toc .doc-nav-group:last-child {
    margin-bottom: 0;
}

.doc-v2-toc .doc-nav-group-title {
    margin: 0 0 var(--v2-space-2);
    font-size: 0.72rem;
    font-weight: var(--v2-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}

.doc-v2-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-v2-toc li {
    margin: 0 0 2px;
}

.doc-v2-toc .doc-nav-link,
.doc-v2-toc a.doc-nav-link,
.doc-v2-toc a.doc-nav-link:visited {
    display: block;
    padding: 6px 8px;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-muted);
    text-decoration: none;
}

.doc-v2-toc .doc-nav-link:hover,
.doc-v2-toc a.doc-nav-link:hover {
    background: var(--v2-surface-3);
    color: var(--v2-text);
    text-decoration: none;
}

.doc-v2-toc .doc-nav-link.doc-nav-active,
.doc-v2-toc a.doc-nav-link.doc-nav-active,
.doc-v2-toc a.doc-nav-link.doc-nav-active:visited {
    background: var(--v2-accent-soft);
    color: var(--v2-text);
}

.doc-v2-main {
    min-width: 0;
}

.doc-v2-main .card,
.doc-v2-main .v2-card {
    background: var(--v2-surface-1);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    box-shadow: none;
    padding: var(--v2-space-5);
    margin-bottom: var(--v2-space-4);
    text-align: left;
}

.doc-v2-main .doc-page-title {
    margin: 0 0 var(--v2-space-3);
    font-size: var(--v2-text-xl);
    font-weight: var(--v2-weight-semibold);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-space-2);
}

.doc-v2-main .doc-page-title .ico {
    flex: none;
    color: var(--v2-accent-strong);
}

.doc-v2-main .doc-page-lead,
.doc-v2-main .doc-lead {
    color: var(--v2-text-muted);
    line-height: 1.55;
}

.doc-breadcrumb {
    margin: 0 0 var(--v2-space-3);
    font-size: var(--v2-text-sm);
    color: var(--v2-text-dim);
}

.doc-breadcrumb a,
.doc-breadcrumb a:visited {
    color: var(--v2-text-muted);
}

.doc-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--v2-space-3);
    margin-top: var(--v2-space-3);
}

.doc-topic-card,
a.doc-topic-card,
a.doc-topic-card:visited {
    display: block;
    padding: var(--v2-space-4);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface-2);
    color: var(--v2-text);
    text-decoration: none;
}

.doc-topic-card:hover,
a.doc-topic-card:hover {
    border-color: var(--v2-accent);
    color: var(--v2-text);
    text-decoration: none;
}

.doc-topic-card h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-space-2);
    margin: 0 0 6px;
    font-size: var(--v2-text-md);
    color: var(--v2-text);
}

.doc-topic-card h3 .ico {
    flex: none;
    color: var(--v2-accent-strong);
}

.doc-topic-card p {
    margin: 0;
    font-size: var(--v2-text-sm);
    color: var(--v2-text-muted);
    line-height: 1.45;
}

.doc-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-space-2);
}

.perm-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--v2-text-sm);
    margin: 12px 0 0;
}

.perm-doc-table th,
.perm-doc-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--v2-border);
    vertical-align: top;
}

.perm-doc-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v2-text-dim);
}

.perm-doc-tag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--v2-surface-3);
    white-space: nowrap;
}

.feature-premium-mark {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--v2-warning, #f39c12);
    vertical-align: middle;
    white-space: nowrap;
}

.doc-list-tight li {
    margin-bottom: 6px;
}

.doc-v2-main .command-section h3 .ico {
    vertical-align: middle;
}

@media (max-width: 900px) {
    .doc-v2-layout {
        grid-template-columns: 1fr;
    }

    .doc-v2-toc {
        position: static;
        max-height: none;
    }
}