/* The help pages (#574). Prose is `.ss-prose` (public.css); this is what a help page adds to it. */

/* The header is sticky, so an anchor must stop below it. */
.ss-help h2[id] { scroll-margin-top: calc(var(--ss-topbar-h) + var(--ss-space-4)); }
.ss-help__crumb { margin: 0 0 var(--ss-space-4); font-size: var(--ss-text-sm); color: var(--ss-ink-2); }
.ss-help__crumb a { color: var(--ss-ink-2); }

/* "On this page": a short list under the lead, so a phone reaches a section without scrolling for it. */
.ss-help__toc {
  margin-top: var(--ss-space-6);
  padding: var(--ss-space-4) var(--ss-space-5);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-print);
}
.ss-help__toc-title {
  margin: 0;
  font: var(--ss-weight-semibold) var(--ss-text-xs) / 1.4 var(--ss-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-ink-2);
}
.ss-help__toc ul { margin: var(--ss-space-2) 0 0; padding: 0; list-style: none; }
.ss-help__toc li { margin: 0; }
.ss-help__toc a { display: block; padding: var(--ss-space-1) 0; }
@media (pointer: coarse) { .ss-help__toc a { padding: var(--ss-space-3) 0; } }

.ss-help__figure { margin: var(--ss-space-6) 0 0; }
.ss-help__figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-md);
}
/* A tall, narrow picture (a menu, a panel) stays a column rather than stretching to the page. */
.ss-help__figure--narrow img { max-width: min(100%, 22rem); }

.ss-help dt { margin-top: var(--ss-space-4); font-weight: var(--ss-weight-semibold); }
.ss-help dd { margin: var(--ss-space-1) 0 0; line-height: var(--ss-leading-prose); }

.ss-help__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ss-space-3);
  margin-top: var(--ss-space-12);
  padding-top: var(--ss-space-6);
  border-top: 1px solid var(--ss-line);
}
.ss-help__pager a { display: inline-block; padding: var(--ss-space-2) 0; }
@media (pointer: coarse) { .ss-help__pager a { padding: var(--ss-space-3) 0; } }

/* The index: each page is a block, its sections a row of links beneath. */
.ss-help__pages { margin: var(--ss-space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--ss-space-4); }
.ss-help__pages > li { margin: 0; }
.ss-help__page {
  padding: var(--ss-space-5);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-print);
}
.ss-help__page h2 { margin: 0; font: var(--ss-weight-medium) var(--ss-display-s) / 1.25 var(--ss-font-display); }
.ss-help__page p { margin: var(--ss-space-2) 0 0; color: var(--ss-ink-2); }
.ss-help__sections {
  margin: var(--ss-space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-1) var(--ss-space-4);
  font-size: var(--ss-text-sm);
}
.ss-help__sections li { margin: 0; }
.ss-help__sections a { display: inline-block; padding: var(--ss-space-1) 0; }
@media (pointer: coarse) { .ss-help__sections a { padding: var(--ss-space-3) 0; } }