/* =========================================================
   Article system (Milestone 3) — loaded only on single posts.
   Reuses Design-System tokens from style.css.
   ========================================================= */

/* ---- Reading progress ---- */
.reading-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: transparent; z-index: 200; }
.reading-progress__bar { display: block; height: 100%; width: 0; background: var(--navy); transition: width .1s linear; }

/* ---- Layout: article keeps the reading column ---- */
.article > .container { padding-top: var(--sp-3); }
.article-header { padding-top: var(--sp-2); }
.article-header__cat { display: inline-block; margin-bottom: var(--sp-1); }
.article-header__title { margin: var(--sp-1) 0 var(--sp-2); }
.article-header__meta { color: var(--muted); font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.article-featured { margin: var(--sp-4) auto; }
.article-featured img { width: 100%; border-radius: var(--radius-md); }

/* ---- Claim Snapshot ---- */
.claim-snapshot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-3); margin: var(--sp-4) 0; }
.claim-snapshot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.claim-snapshot__row { display: flex; flex-direction: column; gap: 2px; }
.claim-snapshot__row dt { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.claim-snapshot__row dd { margin: 0; color: var(--ink); font-weight: 500; }
.claim-snapshot__pill { display: inline-block; background: var(--slate-blue); color: #fff; font-size: var(--fs-small); font-weight: 600; padding: 2px 12px; border-radius: 999px; }
@media (max-width: 560px) { .claim-snapshot__grid { grid-template-columns: 1fr; } }

/* ---- Table of contents ---- */
.article-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin: var(--sp-4) auto; }
.article-toc__toggle { background: none; border: 0; font-family: var(--font-heading); font-weight: 600; color: var(--navy); font-size: var(--fs-h4); cursor: pointer; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.article-toc__toggle::after { content: "▾"; color: var(--slate-blue); transition: transform .15s; }
.article-toc__toggle[aria-expanded="false"]::after { transform: rotate(-90deg); }
.article-toc__list { margin: var(--sp-2) 0 0; padding-left: 1.25em; display: grid; gap: 8px; }
.article-toc__list a { color: var(--slate-blue); }
.article-toc.is-collapsed .article-toc__list { display: none; }

/* ---- Article body typography ---- */
.article-content { font-size: var(--fs-body); }
.article-content h2 { margin: var(--sp-6) 0 var(--sp-2); scroll-margin-top: 24px; }
.article-content h3 { margin: var(--sp-4) 0 var(--sp-2); scroll-margin-top: 24px; }
.article-content p, .article-content ul, .article-content ol { margin-bottom: var(--sp-3); }
.article-content a { text-decoration: underline; }
.article-content img { border-radius: var(--radius-md); margin: var(--sp-3) 0; }
.article-content blockquote { border-left: 4px solid var(--navy); padding-left: var(--sp-3); margin: var(--sp-4) 0; font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--navy); }
.article-content figure { margin: var(--sp-4) 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-small); }
.article-content th, .article-content td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.article-content thead th { background: var(--surface); color: var(--navy); }

/* ---- Signature components ---- */
.mce-quick-answer { background: var(--surface); border-left: 4px solid var(--navy); border-radius: var(--radius-sm); padding: var(--sp-3); margin: var(--sp-4) 0; }
.mce-quick-answer p { margin: 0; }

.mce-expert-insight { background: rgba(31,56,100,.06); border-left: 4px solid var(--navy); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.mce-expert-insight__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--slate-blue); margin-bottom: 6px !important; }
.mce-expert-insight p:last-child { font-family: var(--font-heading); font-size: var(--fs-h4); color: var(--navy); margin: 0; }

.mce-common-mistakes { background: rgba(180,83,9,.06); border-left: 4px solid var(--warning-amber); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.mce-common-mistakes h3 { color: var(--navy); margin-top: 0; }
.mce-common-mistakes ul { margin-bottom: 0; }

.mce-legal-refs { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.mce-legal-refs__note { color: var(--muted); font-size: var(--fs-small); margin: var(--sp-1) 0 0 !important; }

.mce-key-takeaways { background: var(--surface); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.mce-key-takeaways h3 { margin-top: 0; }

.mce-verdict { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-4); margin: var(--sp-6) 0; }
.mce-verdict h2, .mce-verdict h3, .mce-verdict strong { color: #fff; }
.mce-verdict__badge { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #9fc0ff !important; margin-bottom: var(--sp-1) !important; }
.mce-verdict__pill { display: inline-block; background: #fff; color: var(--navy); font-weight: 700; padding: 4px 16px; border-radius: 999px; margin-bottom: var(--sp-2) !important; }
.mce-verdict p { margin-bottom: var(--sp-2); }
.mce-verdict ul { margin-bottom: var(--sp-2); }
.mce-verdict__confidence { margin-bottom: 0 !important; }

.mce-continue-learning { margin: var(--sp-6) 0; }
.mce-continue-learning .mce-path { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.mce-continue-learning .mce-path li { counter-increment: step; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-3) var(--sp-3) 64px; box-shadow: var(--shadow-card); }
.mce-continue-learning .mce-path li::before { content: counter(step); position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: var(--navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-heading); }

.mce-resource-download { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); margin: var(--sp-4) 0; }
.mce-resource-download__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--slate-blue); margin-bottom: 6px !important; }
.mce-resource-download h3 { margin-top: 0; }

/* ---- Related guides + nav ---- */
.related { padding-top: var(--sp-6); }
.article-nav { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-6); }
.article-nav .nav-previous, .article-nav .nav-next { max-width: 48%; }
.article-nav .article-nav__label { display: block; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.article-nav a { font-family: var(--font-heading); color: var(--navy); font-weight: 600; }