/* Worked examples use the same reading, label and spacing roles as the site. */
.article-body .worked-example { min-width: 0; }
.article-body .worked-example > p:first-child { margin-top: 0; }
.guide-visual { width: 100%; max-width: 640px; margin: var(--space-32) auto var(--space-12); overflow: hidden; border: 1px solid #e6e2d5; border-radius: 12px; background: #f8f3e7; }
.guide-visual picture { display: block; }
.guide-visual img { display: block; width: 100%; height: auto; max-width: 640px; margin-inline: auto; }
.guide-visual figcaption { padding: var(--space-24) var(--space-24) 0; font: 400 var(--type-caption)/var(--line-compact) var(--sans); color: #52645b; }
.guide-visual figcaption strong { display: block; color: #203c32; font: 400 var(--type-subheading)/var(--line-heading) var(--serif); }
.visual-values { margin: 0 0 var(--space-24); font: 400 var(--type-compact)/var(--line-compact) var(--sans); color: #4a4640; }
.visual-values summary { min-height: 44px; padding: var(--space-8) 0; cursor: pointer; color: #1d6b45; text-decoration: underline; text-underline-offset: 4px; }
.visual-values dl > div { padding: var(--space-12) 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
.visual-values dd { margin: 0; }
.visual-values dd span { display: block; font-size: var(--type-caption); }
.article-body .example-steps { list-style: none; padding: 0; margin: 0; }
.article-body .example-steps > li { padding: var(--space-24) 0 var(--space-24) var(--space-48); border-top: 1px solid var(--border); font-family: var(--body); }
.article-body .example-steps > li::before { display: none; }
.example-step-number { position: absolute; left: 0; width: 32px; height: 32px; top: var(--space-24); border-radius: 50%; background: #e8f4ed; color: #1d6b45; display: grid; place-items: center; font: 600 var(--type-control)/1 var(--sans); }
.article-body .example-steps > li > strong { display: block; font: 500 var(--type-body)/var(--line-label) var(--sans); }
.article-body .example-steps p { font-size: var(--type-compact); margin-top: var(--space-8); line-height: var(--line-compact); }
.example-result { background: #e8f4ed; border-left: 3px solid #1d6b45; padding: var(--card-padding); margin-top: var(--space-16); border-radius: 0 8px 8px 0; }
.example-result > span { font: 600 var(--type-control)/var(--line-label) var(--sans); color: #1d6b45; }
.article-body .example-result p { margin-top: var(--space-8); font-size: var(--type-body); line-height: var(--line-body); color: #1a1816; }
.article-body .example-assumptions { font: 400 var(--type-caption)/var(--line-compact) var(--sans); color: #4a4640; margin: 0 0 var(--space-24); }
.article-body .supporting-example { scroll-margin-top: 96px; }
.article-example-links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin-top: var(--space-24); font: 600 var(--type-control)/var(--line-label) var(--sans); }
.article-example-links a { display: inline-flex; align-items: center; min-height: 44px; color: #1d6b45; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .guide-visual { max-width: 320px; margin-top: var(--space-24); }
  .guide-visual img { max-width: 320px; }
  .guide-visual figcaption { padding: var(--space-20) var(--space-20) 0; }
  .article-body .example-steps > li { padding-left: 40px; }
}
@media print {
  .article-example-links { display: none; }
  .guide-visual, .example-result, .example-steps > li { break-inside: avoid; }
}