/**
 * GitHub-style technical docs for Lab about / audit pages.
 * Load AFTER about-calendar.css / about-tuvi.css to neutralize cards & tinted panels.
 */

:root {
    --gh-fg: #1f2328;
    --gh-fg-muted: #656d76;
    --gh-border: #d0d7de;
    --gh-canvas: #ffffff;
    --gh-canvas-subtle: #f6f8fa;
    --gh-accent: #0969da;
    --gh-code-bg: rgba(175, 184, 193, 0.2);
}

[data-theme="dark"] {
    --gh-fg: #e6edf3;
    --gh-fg-muted: #8b949e;
    --gh-border: #30363d;
    --gh-canvas: #0d1117;
    --gh-canvas-subtle: #161b22;
    --gh-accent: #2f81f7;
    --gh-code-bg: rgba(110, 118, 129, 0.4);
}

body {
    background: var(--gh-canvas) !important;
    color: var(--gh-fg);
}

.container {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3.5rem;
}

.page-title {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gh-border);
}

.page-title h1 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    color: var(--gh-fg) !important;
    gap: 0.5rem !important;
}

.page-title h1 i {
    color: var(--gh-fg-muted) !important;
    font-size: 0.9em;
}

.subtitle {
    font-size: 0.95rem !important;
    color: var(--gh-fg-muted) !important;
    margin-top: 0.35rem !important;
}

.back-link {
    background: transparent !important;
    border: 1px solid var(--gh-border) !important;
    border-radius: 6px !important;
    color: var(--gh-fg) !important;
    box-shadow: none !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.85rem !important;
    transform: none !important;
}

.back-link:hover {
    background: var(--gh-canvas-subtle) !important;
    color: var(--gh-fg) !important;
    border-color: var(--gh-border) !important;
    transform: none !important;
}

/* Flatten article “card” */
.article,
.audit-doc {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    animation: none !important;
}

.article-header {
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 1.25rem !important;
}

.article-title {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: var(--gh-fg) !important;
    border-bottom: 1px solid var(--gh-border);
    padding-bottom: 0.45rem;
}

.article-intro {
    font-style: normal !important;
    color: var(--gh-fg) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

.section {
    margin-bottom: 1.75rem !important;
}

.section-title,
.article h2,
.audit-doc__body h2,
.terms-article h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--gh-fg) !important;
    margin: 1.75rem 0 0.75rem !important;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gh-border);
    display: block !important;
    gap: 0 !important;
}

.section-title i {
    display: none !important;
}

.section-content,
.article p,
.audit-doc__body,
.terms-article {
    color: var(--gh-fg) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

.article a,
.audit-doc a,
.section-content a,
.terms-article a {
    color: var(--gh-accent) !important;
}

code,
.audit-code,
.audit-doc__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.85em !important;
    padding: 0.15em 0.35em !important;
    border-radius: 6px !important;
    background: var(--gh-code-bg) !important;
    color: inherit !important;
    border: 0 !important;
}

/* Kill tinted callouts / green / purple panels */
.ai-answer,
.highlight-box,
.highlight-section,
.section.highlight-section,
[style*="rgba(56, 189, 248"],
[style*="rgba(16, 185, 129"] {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ai-answer {
    border-left: 3px solid var(--gh-border) !important;
    padding: 0 0 0 0.85rem !important;
    margin: 0 0 1rem !important;
    background: transparent !important;
}

.ai-facts {
    display: block !important;
    margin: 0 0 1.25rem !important;
}

.ai-fact {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.35rem 0 !important;
    border-bottom: 1px solid var(--gh-border);
    font-size: 0.95rem !important;
}

.ai-fact:last-child {
    border-bottom: 0;
}

/* Feature / school / source “cards” → flat list blocks */
.new-features-grid,
.sources-grid,
.schools-comparison,
.stats-grid,
.pipeline-layers,
.api-grid {
    display: block !important;
    margin: 0.75rem 0 1.25rem !important;
}

.feature-card,
.source-item,
.school-card,
.stat-card,
.pipeline-layer,
.api-endpoint,
.accuracy-card,
.benchmark-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gh-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.85rem 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
}

.feature-card:hover,
.source-item:hover,
.school-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--gh-border) !important;
}

.feature-icon,
.school-header,
.source-tag,
.stat-icon,
.pipeline-layer::before {
    display: none !important;
}

.feature-card h4,
.source-item h4,
.school-card h4,
.school-header h4 {
    margin: 0 0 0.35rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--gh-fg) !important;
}

.feature-card p,
.source-item p,
.school-card p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: var(--gh-fg-muted) !important;
}

.school-card.bac-tong,
.school-card.nam-tong,
.school-card.thien-luong,
.school-card.dai-loan {
    border-top: 0 !important;
}

.example,
.highlight-box,
pre,
.markdown-example {
    background: var(--gh-canvas-subtle) !important;
    border: 1px solid var(--gh-border) !important;
    border-radius: 6px !important;
    border-left: 1px solid var(--gh-border) !important;
    box-shadow: none !important;
}

.feature-list li::before {
    content: '•' !important;
    color: var(--gh-fg-muted);
}

/* Audit page already prose; keep aligned */
.audit-doc__header {
    border-bottom-color: var(--gh-border) !important;
}

.audit-doc__header h1,
.audit-doc__crumb,
.audit-doc__meta {
    color: var(--gh-fg) !important;
}

.audit-doc__crumb,
.audit-doc__meta {
    color: var(--gh-fg-muted) !important;
}

.audit-doc__body .sev {
    color: var(--gh-fg-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

.terms-article blockquote {
    background: transparent !important;
    border-left: 3px solid var(--gh-border) !important;
    color: var(--gh-fg-muted);
}

hr {
    border: 0 !important;
    border-top: 1px solid var(--gh-border) !important;
    margin: 1.5rem 0 !important;
}

.title-header h1,
.about-header h1,
.page-header h1 {
    color: var(--gh-fg) !important;
}

.back-link {
    border-radius: 6px !important;
    border-color: var(--gh-border) !important;
    color: var(--gh-fg) !important;
    background: transparent !important;
}

.method-card,
.school-item,
.info-card,
.card,
.panel,
.chip-row,
.tag-pill,
.badge-row {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gh-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.75rem 0 !important;
}

.method-card:hover,
.info-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.method-grid,
.school-grid {
    display: block !important;
    margin: 0.5rem 0 1rem !important;
}

.method-badge {
    display: none !important;
}

.method-card h4 {
    color: var(--gh-fg) !important;
}

.section-title {
    border-bottom: 1px solid var(--gh-border) !important;
}

@media (max-width: 640px) {
    .container {
        padding: 1.15rem 1rem 2.75rem;
    }
    .article {
        padding: 0 !important;
    }
}