/* Knowledge base.
 *
 * Article pages are read, not scanned, so this is the one place in the product
 * that optimises for long-form legibility: a narrower measure, larger line
 * height, and real vertical rhythm between blocks.
 *
 * Article bodies are authored as Markdown and rendered by js/markdown.js into
 * DOM nodes - never through innerHTML. Every element below is one that renderer
 * can emit; nothing else can appear here, which is why there is no styling for
 * arbitrary embedded markup.
 */

/* Browse */
.kb-head { margin-bottom: var(--spacing-2xl); }
.kb-head h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 10px;
}
.kb-head p { color: var(--text-muted); font-size: var(--font-size-lg); line-height: 1.6; }

.kb-search { margin-top: var(--spacing-xl); max-width: 520px; }
.kb-search input {
    width: 100%; padding: 13px 16px;
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); color: var(--text-primary);
    font-family: var(--font-family-body); font-size: var(--font-size-base);
}
.kb-search input::placeholder { color: var(--text-muted); }
.kb-search input:focus { outline: none; border-color: rgba(230,230,230,0.28); background: var(--bg-primary); }

.kb-layout { display: grid; grid-template-columns: 190px 1fr; gap: var(--spacing-2xl); align-items: start; }
.kb-side { position: sticky; top: 84px; }
.kb-side .section-title { display: block; margin-bottom: var(--spacing-md); }
.kb-topics { display: flex; flex-direction: column; gap: 1px; }
.kb-topics a {
    padding: 8px 11px; border-radius: var(--radius-sm);
    font-size: var(--font-size-sm); color: var(--text-tertiary); text-decoration: none;
}
.kb-topics a:hover { background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; }
.kb-topics a.active { background: var(--bg-tertiary); color: var(--text-primary); font-weight: var(--font-weight-medium); }
.kb-topic-count { float: right; color: var(--text-muted); font-size: var(--font-size-xs); }

/* Article */
.article-head { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--border-secondary); }
.article-topic {
    display: inline-block; margin-bottom: 12px;
    font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-purple);
}
.article-head h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 12px;
}
.article-meta { font-size: var(--font-size-xs); color: var(--text-muted); }

.article-body { font-size: var(--font-size-base); line-height: 1.8; color: var(--text-secondary); }
.article-body > * + * { margin-top: var(--spacing-md); }
.article-body h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
    color: var(--text-primary); margin-top: var(--spacing-2xl); letter-spacing: -0.01em;
}
.article-body h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
    color: var(--text-primary); margin-top: var(--spacing-xl);
}
.article-body ul, .article-body ol { padding-left: var(--spacing-lg); }
.article-body li { margin-bottom: 9px; }
.article-body li::marker { color: var(--text-muted); }
.article-body strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.article-body code {
    font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 0.9em;
    background: var(--bg-tertiary); padding: 2px 6px; border-radius: var(--radius-sm);
    color: var(--text-primary);
}
.article-body pre {
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); padding: var(--spacing-md);
    overflow-x: auto; font-size: var(--font-size-sm); line-height: 1.6;
}
.article-body pre code { background: none; padding: 0; }
.article-body blockquote {
    border-left: 2px solid rgba(163,21,206,0.5);
    padding: 4px 0 4px var(--spacing-md); color: var(--text-tertiary);
}
.article-body a { color: var(--color-cyan); }
.article-body hr { border: none; border-top: 1px solid var(--border-secondary); margin: var(--spacing-xl) 0; }

/* Helpfulness vote */
.article-vote {
    margin-top: var(--spacing-2xl); padding: var(--spacing-lg);
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;
}
.vote-question { font-size: var(--font-size-sm); color: var(--text-secondary); }
.vote-buttons { display: flex; gap: var(--spacing-sm); margin-left: auto; }
.vote-buttons .btn { padding: 9px 18px; }
.vote-thanks { font-size: var(--font-size-sm); color: #6FE3CC; width: 100%; }
.article-related { margin-top: var(--spacing-2xl); }

@media (max-width: 800px) {
    .kb-layout { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .kb-side { position: static; }
    .kb-topics { flex-direction: row; flex-wrap: wrap; }
    .kb-head h1 { font-size: var(--font-size-3xl); }
    .kb-topic-count { display: none; }
}