/* An article's text: help, blog and legal pages, and the admin's editor, so both look the same */
.doc { display: grid; gap: 18px; font-size: 17px; line-height: 1.7; color: var(--fg); }
.doc h1, .doc h2, .doc h3, .doc p, .doc ul, .doc ol, .doc figure { margin: 0; }
.doc h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--strong); }
.doc .lead { font-size: 19px; }
.doc h2 { margin-top: 18px; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--strong); }
.doc h3 { font-size: 20px; font-weight: 600; color: var(--strong); }
.doc ul, .doc ol { padding-left: 22px; display: grid; gap: 6px; }
.doc .meta { font-size: 14px; color: var(--quiet); }
.doc .ui { padding: 1px 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); font-size: .9em; font-weight: 650; white-space: nowrap; }
.doc .doc-steps { list-style: none; padding: 0; counter-reset: st; gap: 14px; }
.doc .doc-steps li { counter-increment: st; position: relative; min-height: 32px; padding-left: 46px; }
.doc .doc-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--btn-bg, #1e8542); color: #ffffff; font-size: 14px; font-weight: 700; }
.doc .note, .doc .warning { padding: 16px 20px; border-left: 3px solid; border-radius: 0 var(--r, 8px) var(--r, 8px) 0; font-size: 16px; }
.doc .note { background: #e6f4eb; color: #164f2a; border-left-color: #1e8542; }
.doc .warning { background: #fdf0e3; color: #7a3d0a; border-left-color: #9a6400; }
.doc figure { margin: 6px 0; display: grid; gap: 8px; }
.doc > *, .doc figure > * { min-width: 0; }
.doc img { max-width: 100%; height: auto; border-radius: var(--r, 8px); border: 1px solid var(--line); }
.doc img.is-zoomable { cursor: zoom-in; }
.doc figcaption { font-size: 14px; color: var(--quiet); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.doc th { color: var(--strong); font-weight: 650; }
@media (max-width: 640px) { .doc table { display: block; overflow-x: auto; } .doc th, .doc td { min-width: 120px; } }