/* Extracted from pages/articles.html */
.articles-header { text-align: center; padding: 3rem 0 2rem; max-width: 700px; margin: 0 auto; }
.articles-header p { color: var(--text-dim); margin-top: 0.5rem; }
.constraint-banner {
    background: rgba(61,220,132,0.08); border: 1px solid var(--green);
    border-radius: 8px; padding: 1.25rem; margin: 1.5rem 0; font-size: 0.9rem;
}
.constraint-banner strong { color: var(--green); }
.constraint-banner p { color: var(--text-dim); margin-top: 0.25rem; }
.filter-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0; }
.filter-btn {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-dim); padding: 0.35rem 0.75rem; font-size: 0.8rem;
    cursor: pointer; font-family: var(--font-mono); transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active { color: var(--accent); border-color: var(--accent); }
.article-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    padding: 1.75rem; margin: 1.25rem 0; text-decoration: none; display: block;
    transition: background 0.2s, border-color 0.2s;
}
.article-card:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
.article-card h2 { color: var(--accent); font-size: 1.15rem; margin-bottom: 0.25rem; }
.article-card .subtitle { color: var(--text); font-size: 0.95rem; margin-bottom: 0.75rem; }
.article-meta {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
    font-size: 0.8rem; font-family: var(--font-mono); color: var(--text-dim); margin-bottom: 0.75rem;
}
.article-tag {
    background: rgba(74,158,255,0.1); color: var(--accent); padding: 0.15rem 0.5rem;
    border-radius: 3px; font-size: 0.75rem; font-family: var(--font-mono);
}
.article-summary { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }
.check-pass { color: var(--green); font-size: 0.8rem; font-family: var(--font-mono); }
.empty-state { text-align: center; padding: 3rem; color: var(--text-dim); }