/* The Help Center pages: lists of articles, the article text and its screenshots. The tokens and
   every other component are app.css's; this sheet is linked by the Help pages only, so the header's
   ? button and Help tab (which every page has) cost nothing elsewhere. */

.help-list { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.help-list li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); }
.help-list a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; overflow-wrap: anywhere; }

.help-nowrap { white-space: nowrap; }

.help-body { max-width: var(--measure); overflow-wrap: break-word; }
.help-body > * + * { margin-top: var(--s-3); }
.help-body > h2, .help-body > h3 { margin-top: var(--s-5); }
.help-body h2 { font-size: var(--fs-lg); }
.help-body h3 { font-size: var(--fs-md); }
.help-body h4, .help-body h5, .help-body h6 { font-size: 1rem; }
.help-body ol, .help-body ul { padding-left: var(--s-5); }
.help-body li + li { margin-top: var(--s-1); }
.help-body em { font-style: normal; font-weight: 700; }
.help-body code { font-family: var(--mono); font-size: .9em; }
.help-body blockquote { margin-left: 0; padding: var(--s-1) var(--s-4); border-left: 4px solid var(--turmeric); background: var(--surface); }
.help-body table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
.help-body th, .help-body td { padding: var(--s-2); border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.help-body th { background: var(--brand-l); color: var(--brand-d); }

.help-shot { max-width: 100%; }
.help-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }