/* Article body styles. Everything is scoped to .jiva-article so a developer can lift an article fragment
   (see /fragments) into another page together with this one stylesheet. Uses the same brand tokens as help.css,
   with fallbacks so it also works on a page that does not define them. */
.jiva-article{font:400 17px/28px var(--textf,'Lato',system-ui,sans-serif);color:var(--text,#030A0C);overflow-wrap:break-word}
.jiva-article>header h1{font:700 clamp(28px,4.2vw,42px)/1.12 var(--display,'Sora',system-ui,sans-serif);letter-spacing:-.02em;margin:0 0 12px}
.jiva-article>header p{font-size:19px;line-height:30px;margin:0 0 24px}
.jiva-article h2{font:600 24px/30px var(--display,'Sora',system-ui,sans-serif);margin:40px 0 12px;scroll-margin-top:96px}
.jiva-article h3{font:700 18px/26px var(--textf,'Lato',system-ui,sans-serif);margin:26px 0 8px}
.jiva-article p{margin:0 0 16px}
.jiva-article a{color:var(--green-700,#007A3A);text-underline-offset:3px}
.jiva-article ul,.jiva-article ol{margin:0 0 18px;padding-left:24px}
.jiva-article li{margin:6px 0}
.jiva-article ol.steps{list-style:none;padding:0;counter-reset:step}
.jiva-article ol.steps>li{position:relative;padding:14px 16px 14px 62px;margin:10px 0;border:1px solid var(--line,#DDE3DF);border-radius:var(--radius-md,14px);background:var(--surface-raised,#fff)}
.jiva-article ol.steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:14px;top:12px;width:34px;height:34px;border-radius:var(--radius-sm,8px);display:grid;place-items:center;background:var(--green-500,#24B424);color:var(--on-green,#030A0C);font:600 15px/1 var(--display,'Sora',system-ui,sans-serif)}
.jiva-article ul.checklist{list-style:none;padding:0}
.jiva-article ul.checklist li{position:relative;padding-left:32px}
.jiva-article ul.checklist li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border:2px solid var(--line-strong,#8A948F);border-radius:5px}
.jiva-article table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;line-height:22px;display:block;overflow-x:auto}
.jiva-article th,.jiva-article td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line,#DDE3DF)}
.jiva-article thead th{font:700 12px/16px var(--textf,'Lato',system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#5E6763);border-bottom:2px solid var(--ink,#030A0C);white-space:nowrap}
.jiva-article tbody th{white-space:nowrap;font-weight:700}
.jiva-article .callout{border:1px solid var(--line,#DDE3DF);border-left:4px solid var(--green-500,#24B424);border-radius:var(--radius-sm,8px);background:var(--surface-alt,#F4F7F2);padding:12px 16px;margin:0 0 18px}
.jiva-article .callout p{margin:0;font-size:15px;line-height:23px}
.jiva-article .callout-warning{border-left-color:var(--saffron,#F2B90F)}
.jiva-article .callout-sample{border-left-color:var(--ocean,#035AA6)}
.jiva-article .callout-sample p::before{content:"Sample content. ";font-weight:700;color:var(--ocean,#035AA6)}
.jiva-article dl.glossary dt{font-weight:700;margin-top:14px}
.jiva-article dl.glossary dd{margin:2px 0 0;color:var(--text-muted,#5E6763)}
.jiva-article code{font:500 14px var(--mono,'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace);background:var(--surface-alt,#F4F7F2);padding:2px 5px;border-radius:5px}
.jiva-article img{max-width:100%;height:auto;border-radius:var(--radius-sm,8px);border:1px solid var(--line,#DDE3DF)}