/* === Documentation styles for demo app === */

.doc-section {
    margin-bottom: 2.5rem;
}

.doc-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--btk-text-strong, #0f172a);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--btk-border-light, #e5e7eb);
}

.doc-section p, .doc-section li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--btk-text-label, #334155);
}

.doc-section ul {
    padding-left: 1.25rem;
}

.doc-lead {
    font-size: 1rem;
    color: var(--btk-text-muted, #64748b);
    margin-bottom: 1.5rem;
    max-width: 700px;
}

/* Code blocks */
.doc-code {
    margin: 1rem 0;
    border: 1px solid var(--btk-border-light, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.doc-code-title {
    padding: 6px 14px;
    background: var(--btk-bg-surface, #f8fafc);
    border-bottom: 1px solid var(--btk-border-light, #e2e8f0);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--btk-text-muted, #64748b);
}

.doc-code-content {
    margin: 0;
    padding: 14px 16px;
    background: var(--btk-code-bg, #1e1e2e);
    color: var(--btk-code-text, #cdd6f4);
    font-family: var(--btk-font-family-mono, 'SF Mono', 'Fira Code', monospace);
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

/* Param table */
.doc-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
    margin: 1rem 0;
}

.doc-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--btk-bg-surface, #f8fafc);
    border-bottom: 2px solid var(--btk-border-light, #e2e8f0);
    font-weight: 600;
    color: var(--btk-text-label, #334155);
}

.doc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--btk-border-light, #e2e8f0);
    color: var(--btk-text, #111827);
    vertical-align: top;
}

.doc-table code {
    background: var(--btk-bg-muted, #f1f5f9);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.78rem;
}

/* Tab navigation for Demo / Docs */
.doc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--btk-border-light, #e2e8f0);
    margin-bottom: 1.5rem;
}

.doc-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--btk-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.doc-tab:hover {
    color: var(--btk-text, #111827);
}

.doc-tab-active {
    color: var(--btk-primary, #3b82f6);
    border-bottom-color: var(--btk-primary, #3b82f6);
}

/* Live demo container */
.doc-live-demo {
    padding: 1.5rem;
    border: 1px solid var(--btk-border-light, #e2e8f0);
    border-radius: 8px;
    background: var(--btk-bg-surface, #f8fafc);
    margin-bottom: 1.5rem;
}

.doc-live-demo-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--btk-text-faint, #94a3b8);
    margin-bottom: 1rem;
}