/* ============================================================
   DOCS PAGE — Wiki / documentation layout
   依賴 tokens.css + base.css + components.css + home.css
   ============================================================ */

.wiki-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--ds-space-16);
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--ds-space-24) var(--ds-space-6) var(--ds-space-32);
}

.wiki-sidebar {
    position: sticky;
    top: 88px;
}
.wiki-sidebar-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-5);
}
.wiki-nav-link {
    display: block;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-muted);
    text-decoration: none;
    padding: var(--ds-space-2) var(--ds-space-3);
    border-left: 2px solid transparent;
    line-height: var(--ds-leading-relaxed);
    transition: all var(--ds-transition-fast);
}
.wiki-nav-link:hover {
    color: var(--ds-text-secondary);
    border-left-color: var(--ds-border-hover);
}
.wiki-nav-link.active {
    color: var(--ds-accent-bright);
    border-left-color: var(--ds-accent);
}
.wiki-nav-num {
    opacity: 0.4;
    margin-right: var(--ds-space-2);
}

.wiki-content { max-width: 640px; }
.wiki-section {
    padding-bottom: var(--ds-space-20);
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: var(--ds-space-20);
}
.wiki-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.wiki-section-num {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-muted);
    letter-spacing: 0.12em;
    margin-bottom: var(--ds-space-3);
}
.wiki-section-title {
    font-size: var(--ds-text-2xl);
    font-weight: var(--ds-weight-bold);
    color: var(--ds-text-primary);
    line-height: var(--ds-leading-snug);
    margin: 0 0 var(--ds-space-2);
}
.wiki-section-sub {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-10);
}

.wiki-body {
    font-size: var(--ds-text-base);
    color: var(--ds-text-secondary);
    line-height: var(--ds-leading-relaxed);
}
.wiki-body p { margin: 0 0 var(--ds-space-5); }
.wiki-body p:last-child { margin-bottom: 0; }
.wiki-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ds-accent-dim);
    margin: var(--ds-space-8) 0 var(--ds-space-4);
}
.wiki-hr { border: none; border-top: 1px solid var(--ds-border); margin: var(--ds-space-8) 0; }

.wiki-ul { list-style: none; padding: 0; margin: 0 0 var(--ds-space-5); }
.wiki-ul li {
    position: relative;
    padding: var(--ds-space-2) 0 var(--ds-space-2) var(--ds-space-6);
    color: var(--ds-text-secondary);
    line-height: var(--ds-leading-relaxed);
}
.wiki-ul li::before { content: '·'; position: absolute; left: var(--ds-space-2); color: var(--ds-accent-dim); }

.wiki-ol {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ds-space-5);
    counter-reset: wiki-ol;
}
.wiki-ol li {
    counter-increment: wiki-ol;
    position: relative;
    padding: var(--ds-space-3) 0 var(--ds-space-3) var(--ds-space-8);
    color: var(--ds-text-secondary);
    border-bottom: 1px solid var(--ds-border);
    line-height: var(--ds-leading-relaxed);
}
.wiki-ol li:last-child { border-bottom: none; }
.wiki-ol li::before {
    content: counter(wiki-ol) '.';
    position: absolute;
    left: 0;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-muted);
    top: var(--ds-space-4);
}

.wiki-strong { color: var(--ds-text-primary); font-weight: var(--ds-weight-semibold); }
.wiki-callout {
    border-left: 2px solid var(--ds-accent-dim);
    padding: var(--ds-space-5) var(--ds-space-6);
    margin: var(--ds-space-8) 0 0;
    background: rgba(69,162,158,0.04);
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}
.wiki-callout p { margin: 0; color: var(--ds-text-secondary); font-style: italic; line-height: var(--ds-leading-relaxed); }

.wiki-color-row { display: flex; flex-direction: column; gap: var(--ds-space-3); margin: var(--ds-space-2) 0 var(--ds-space-6); }
.wiki-color-item { display: flex; align-items: center; gap: var(--ds-space-4); }
.wiki-swatch { width: 36px; height: 20px; border-radius: var(--ds-radius-sm); flex-shrink: 0; }
.wiki-swatch--orange { background: rgba(255,165,60,0.45); border: 1px solid rgba(255,165,60,0.25); }
.wiki-swatch--cyan   { background: rgba(69,162,158,0.45);  border: 1px solid rgba(69,162,158,0.25); }

.wiki-paths { display: flex; flex-direction: column; gap: var(--ds-space-5); margin: var(--ds-space-8) 0; }
.wiki-path { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); background: var(--ds-bg-card); }
.wiki-path--a { border-color: rgba(69,162,158,0.2); background: rgba(69,162,158,0.03); }
.wiki-path-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-4);
}
.wiki-path--a .wiki-path-label { color: var(--ds-accent); }
.wiki-path .wiki-ul { margin-bottom: 0; }

.wiki-closing {
    margin-top: var(--ds-space-10);
    padding-top: var(--ds-space-8);
    border-top: 1px solid var(--ds-border);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-muted);
    line-height: var(--ds-leading-relaxed);
}

.wiki-img {
    width: 100%;
    display: block;
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--ds-border);
    margin-top: var(--ds-space-8);
}

.wiki-sidebar-sep {
    margin-top: var(--ds-space-8);
    padding-top: var(--ds-space-8);
    border-top: 1px solid var(--ds-border);
}

@media (max-width: 720px) {
    .wiki-wrap {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: var(--ds-space-16);
    }
    .wiki-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: var(--ds-space-2);
        padding-bottom: var(--ds-space-8);
        margin-bottom: var(--ds-space-10);
        border-bottom: 1px solid var(--ds-border);
    }
    .wiki-sidebar-label { display: none; }
    .wiki-nav-link {
        border-left: none;
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-full);
        padding: var(--ds-space-1) var(--ds-space-3);
    }
    .wiki-nav-link.active {
        border-color: var(--ds-accent);
        background: var(--ds-accent-glow);
    }
    .wiki-nav-num { display: none; }
}