/* how-it-works.css — Merged from methodology.css + evidence.css + inline styles */

/* Download cards (from methodology) */
.download-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
.download-card h3 { color: var(--accent); margin-bottom: 0.5rem; }
.download-link { display: inline-block; margin-top: 0.75rem; color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; }

/* Evidence cards */
.evidence-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin: 1.25rem 0; }
.evidence-card h3 { color: var(--accent); margin-bottom: 0.75rem; }
.stat { font-family: var(--font-mono); font-weight: 700; }
.stat-green { color: var(--green); }
.stat-red { color: var(--red); }
.stat-accent { color: var(--accent); }
.witness-table td:first-child { font-weight: 600; }

/* Experiment filters (from evidence) */
.exp-filter { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.exp-filter:hover { border-color: var(--accent); }
.exp-filter.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Experiment cards (from methodology inline styles) */
.exp-grid { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.exp-card { background: var(--bg-card, #111); border: 1px solid var(--border, #222); border-radius: 4px; padding: 1rem 1.25rem; }
.exp-card-header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.exp-id { font-family: monospace; font-size: 0.82rem; font-weight: 700; color: var(--text-dim, #aaa); }
.exp-title { font-weight: 600; font-size: 0.95rem; }
.exp-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15em 0.55em; border-radius: 3px; }
.badge-pass    { background: #1a3a22; color: #3ddc84; }
.badge-fail    { background: #3a1a1a; color: #ff6666; }
.badge-partial { background: #2a2a1a; color: #ffcc44; }
.badge-pending { background: #1a2030; color: #8899cc; }
.badge-irr             { background: #1a2535; color: #66aadd; }
.badge-replication     { background: #1a3530; color: #44ddaa; }
.badge-simulation      { background: #251a35; color: #aa88dd; }
.badge-natural_experiment { background: #352520; color: #dd9966; }
.badge-concordance     { background: #252535; color: #8888cc; }
.badge-other           { background: #252525; color: #999; }
.exp-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.5rem 0; font-size: 0.78rem; color: var(--text-dim, #aaa); }
.exp-stat-item { display: flex; gap: 0.3rem; }
.exp-stat-key { color: var(--text-faint, #666); }
.exp-desc { font-size: 0.83rem; color: var(--text-dim, #aaa); margin: 0.4rem 0; }
.exp-result { font-size: 0.83rem; color: var(--text, #ddd); margin: 0.4rem 0; }
.exp-papers { font-size: 0.75rem; color: var(--text-faint, #666); margin-top: 0.4rem; }
.exp-papers a { color: var(--text-dim, #aaa); }
.exp-links { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.exp-link { font-size: 0.75rem; color: var(--accent, #667eea); text-decoration: none; }
.exp-link:hover { text-decoration: underline; }
.exp-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.exp-filter-btn { font-size: 0.75rem; padding: 0.25em 0.75em; border-radius: 3px; border: 1px solid var(--border, #222); background: transparent; color: var(--text-dim, #aaa); cursor: pointer; }
.exp-filter-btn.active { border-color: var(--accent, #667eea); color: var(--accent, #667eea); }
#exp-loading { color: var(--text-faint, #666); font-size: 0.85rem; padding: 1rem 0; }
.exp-date { font-size: 0.75rem; color: var(--text-faint, #666); }