/* The help page (templates/help.html). practice.css brings the page of reading
   and the folded questions; this adds the row of topics at the top and the
   lists and word tables inside an answer. Every value comes from book.css's
   tokens, so dark mode needs nothing of its own. */

/* The topics: one link a line on a phone, so each is a whole tap target. */
.help-groups { margin: 26px 0 0; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.help-groups ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: 1.4em; }
.help-groups a { display: flex; align-items: center; min-height: 48px; font-weight: 700; }

/* An open answer: its lists and word tables read at the same measure as its
   paragraphs, and the last thing in it keeps the space under the fold. */
.help .faq-list details p,
.help .faq-list details ul,
.help .faq-list details ol,
.help-words { max-width: 40em; }
.help .faq-list details > :last-child { margin-bottom: 24px; }
.help .faq-list details ul,
.help .faq-list details ol { margin-top: 0; padding-left: 1.3em; }
.help .faq-list details li + li { margin-top: 8px; }

/* Words beside what they mean, ruled like a test's facts, the word above its line. */
.help-words { margin: 0 0 24px; border-top: 1px solid var(--ink-soft); }
.help-words > div { padding: 10px 0; border-bottom: 1px solid var(--ink-soft); }
.help-words dt { font-weight: 700; }
.help-words dd { margin: 2px 0 0; }

.help-end > p { margin-top: 18px; }