/* An article's body as a shop shows it (ADR 0014; mock docs/design/help-article.png): the shop's own type
   (Poppins) and tokens. Inside the shop app body.ap's --ap-* tokens apply, light or dark; elsewhere (the
   Super admin editor's frame, the preview) the fallbacks are the shop's light values.
   Only what ArticleHtml keeps is styled: headings, paragraphs, lists, steps (ol.hc-steps), callouts
   (div.hc-callout--tip|note|warning), figures and captions, videos (figure.hc-video), tables, code, quotes. */

.hc-prose {
    font-family: var(--ap-font, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    font-size: 15px;
    line-height: 1.8;
    color: var(--ap-text-2, #334155);
    overflow-wrap: anywhere;
}
.hc-prose > * { margin: 0; }
.hc-prose > * + * { margin-top: 16px; }
.hc-prose h2, .hc-prose h3, .hc-prose h4 { color: var(--ap-text, #0f172a); font-weight: 600; scroll-margin-top: 96px; }
.hc-prose h2 { margin-top: 36px; font-size: 21px; line-height: 1.3; }
.hc-prose h3 { margin-top: 28px; font-size: 17px; line-height: 1.35; }
.hc-prose h4 { margin-top: 22px; font-size: 15px; line-height: 1.4; }
.hc-prose strong, .hc-prose b { color: var(--ap-text, #0f172a); font-weight: 600; }
.hc-prose a { color: var(--ap-info-text, #1d4ed8); text-decoration: underline; text-underline-offset: 3px; }
.hc-prose ul, .hc-prose ol { padding-inline-start: 24px; }
.hc-prose li + li { margin-top: 6px; }
.hc-prose code, .hc-prose kbd {
    font-size: 12.5px; color: var(--ap-text, #0f172a); background: var(--ap-subtle, #f7f8fa);
    border: 1px solid var(--ap-border, #e8eaee); border-radius: 7px; padding: 2px 7px;
}
.hc-prose pre { padding: 14px 16px; border-radius: 14px; background: var(--ap-subtle, #f7f8fa); border: 1px solid var(--ap-border, #e8eaee); overflow-x: auto; }
.hc-prose pre code { border: 0; padding: 0; background: none; }
.hc-prose blockquote { margin-inline: 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--ap-border-strong, #d9dde3); color: var(--ap-muted, #64748b); }
.hc-prose hr { border: 0; border-top: 1px solid var(--ap-border, #e8eaee); }
.hc-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hc-prose th, .hc-prose td { padding: 9px 12px; border-bottom: 1px solid var(--ap-border, #e8eaee); text-align: start; vertical-align: top; }
.hc-prose th { color: var(--ap-text, #0f172a); font-weight: 600; background: var(--ap-subtle, #f7f8fa); }

/* Steps: numbered circles on a thread */
.hc-prose ol.hc-steps { list-style: none; counter-reset: hc-step; padding: 0; }
.hc-prose ol.hc-steps > li { counter-increment: hc-step; position: relative; padding: 0 0 16px 46px; margin: 0; }
.hc-prose ol.hc-steps > li::before {
    content: counter(hc-step); position: absolute; inset-inline-start: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 600; line-height: 1;
    color: var(--ap-btn-fg, #fff); background: var(--ap-btn-bg, linear-gradient(135deg, #2b3a52 0%, #0f172a 100%));
}
.hc-prose ol.hc-steps > li::after { content: ""; position: absolute; inset-inline-start: 15px; top: 36px; bottom: 4px; width: 1px; background: var(--ap-border, #e8eaee); }
.hc-prose ol.hc-steps > li:last-child::after { display: none; }

/* Callouts: Tip (green), Note (blue), Warning (amber) */
.hc-prose .hc-callout {
    padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.65;
    border: 1px solid var(--ap-success-line, rgba(22, 163, 74, .28)); background: var(--ap-success-soft, rgba(22, 163, 74, .10)); color: var(--ap-success-text, #15803d);
}
.hc-prose .hc-callout > * { margin: 0; }
.hc-prose .hc-callout > * + * { margin-top: 8px; }
.hc-prose .hc-callout strong, .hc-prose .hc-callout a { color: inherit; }
.hc-prose .hc-callout--note { border-color: var(--ap-info-line, rgba(37, 99, 235, .28)); background: var(--ap-info-soft, rgba(37, 99, 235, .10)); color: var(--ap-info-text, #1d4ed8); }
.hc-prose .hc-callout--warning { border-color: var(--ap-warning-line, rgba(245, 158, 11, .34)); background: var(--ap-warning-soft, rgba(245, 158, 11, .12)); color: var(--ap-warning-text, #b45309); }

/* Figures, images and videos */
.hc-prose figure { margin-inline: 0; }
.hc-prose img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--ap-border, #e8eaee); }
.hc-prose figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ap-muted, #64748b); text-align: center; }
.hc-prose figure.hc-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0d1416; border: 1px solid var(--ap-border, #e8eaee); }
.hc-prose figure.hc-video iframe, .hc-prose figure.hc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }