/* components.css — article component styles.
 *
 * These rules were previously copy-pasted into the inline <style> block of
 * every single post. They are identical in all of them, so they live here now
 * and every generated page picks them up automatically.
 *
 * Syntax-highlighting classes (.syntax-*) are already in style.css.
 */

/* ── tables ───────────────────────────────────────────────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.88rem; }
.comparison-table th { text-align: left; padding: 0.75rem 1rem; border-bottom: 2px solid var(--border-hover); color: var(--accent-1); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.comparison-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.comparison-table td strong { color: var(--text-primary); }
.comparison-table tr:hover td { background: rgba(0, 212, 170, 0.03); }

/* Tables overflow on phones; let them scroll instead of breaking the layout. */
.table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
.table-wrap .comparison-table { margin: 0; }

/* ── callouts ─────────────────────────────────────────────────────────── */
.verdict { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-1); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; }
.verdict .verdict-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 0.4rem; }
.verdict p { margin-bottom: 0 !important; color: var(--text-primary) !important; font-size: 0.98rem !important; }

.checkpoint { background: var(--gradient-subtle); border: 1px dashed var(--border-hover); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 2rem 0; font-size: 0.92rem; color: var(--text-secondary); }
.checkpoint strong { color: var(--accent-1); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; display: block; margin-bottom: 0.35rem; }

/* ── level headers (build-along posts) ────────────────────────────────── */
.level-header { display: flex; align-items: center; gap: 1rem; }
.level-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; padding: 0.3rem 0.8rem; border-radius: 50px; background: var(--gradient-accent); color: #000; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
[data-theme="light"] .level-chip { color: #fff; }

/* ── ascii pipeline diagrams ──────────────────────────────────────────── */
.pipeline { font-family: var(--font-mono); font-size: 0.82rem; line-height: 2; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0 2rem; color: var(--code-text); overflow-x: auto; white-space: pre; }
.pipeline .hl { color: var(--accent-1); font-weight: 600; }