/* ===================================
   Article Component Styles — Calc84 v10.6.4
   All CSS variables from main theme system.
   No global resets. No body/html overrides.
   No typography overrides (h1-h4, p, a).
   Only article-specific component classes.
   =================================== */

/* ---- Article content spacing ---- */
.lead-text { font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 1.5rem; }
.byline { font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }

/* ---- Code Blocks ---- */
pre { background: #1e1e1e; color: #d4d4d4; padding: 1.25rem; border-radius: 0.5rem; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9rem; margin: 1.5rem 0; line-height: 1.5; }
code { background: rgba(30,144,255,0.1); color: var(--text-info); padding: 0.1875rem 0.5rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.95em; }
.cmd { color: #569cd6; font-weight: bold; }
.str { color: #ce9178; }
.num { color: #b5cea8; }
.var { color: #9cdcfe; }
.comment { color: #6a9955; font-style: italic; }

/* ---- Tables ---- */
.comparison-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Blockquotes & Callouts ---- */
blockquote { border-left: 0.25rem solid var(--text-info); padding: 1.25rem 1.5rem; margin: 1.5rem 0; background: rgba(30,144,255,0.05); border-radius: 0 0.5rem 0.5rem 0; font-style: italic; }
.callout { padding: 1.25rem; border-radius: 0.5rem; margin: 1.5rem 0; border-left: 0.25rem solid; }
.callout-info { background: rgba(30,144,255,0.1); border-color: var(--text-info); }
.callout-warning { background: rgba(245,158,11,0.1); border-color: var(--text-warning); }
.callout-success { background: rgba(16,185,129,0.1); border-color: var(--text-success); }

/* ---- Table of Contents ---- */
.toc { background: var(--bg-tertiary); padding: 1.5rem; border-radius: 0.5rem; margin: 1.5rem 0; border: 1px solid var(--border-color); }
.toc h3 { margin-top: 0; }
.toc ul { list-style: none; padding-left: 0; }
.toc a { display: block; padding: 0.5rem 0; border-bottom: 1px dashed var(--border-color); }
.toc a:hover { padding-left: 0.625rem; }

/* ---- Feedback Widget ---- */
.feedback-widget { display: flex; gap: 1rem; margin: 2rem 0; padding: 1.5rem; background: var(--bg-tertiary); border-radius: 0.5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.feedback-btn { background: var(--bg-primary); border: 1px solid var(--border-color); padding: 0.625rem 1.25rem; border-radius: 1.5rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.feedback-btn:hover { transform: translateY(-0.125rem); box-shadow: 0 0.25rem 0.75rem var(--shadow-color); }
.feedback-btn.up:hover { background: var(--text-success); color: #fff; }
.feedback-btn.down:hover { background: var(--accent-color); color: #fff; }

/* ---- Calculator Embed ---- */
.calculator-embed { width: 100%; height: 37.5rem; border: none; border-radius: 0.5rem; box-shadow: 0 0.5rem 1.5rem var(--shadow-color); margin: 1.5rem 0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .calculator-embed { height: 25rem; }
    .feedback-widget { flex-direction: column; }
}