/* Help center. Layout and components are Bulma (columns, box, breadcrumb, menu,
   buttons); this adds only what Bulma lacks. Tokens come from page-blog.css. */
.hlp-main { max-width: 704px; }
.hlp-hero-search { max-width: 560px; margin-inline: auto; text-align: start; }
/* Suggestions float under the search field. */
.hlp-search { position: relative; }
.hlp-suggest { position: absolute; inset-inline: 0; top: 100%; z-index: 30; margin-top: 4px; padding: 6px; }
.hlp-suggest-item { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.hlp-suggest-item:hover, .hlp-suggest-item:focus { background: var(--orange-soft); color: var(--ink); }
/* Article lists: plain rows with a divider. */
.hlp-list li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.hlp-list a { color: var(--ink); }
.hlp-list a:hover { color: var(--orange-d); }
.hlp-main mark { background: var(--orange-soft); color: inherit; border-radius: 3px; }
.hlp-tile, .hlp-step { height: 100%; color: var(--ink); }
.hlp-section { scroll-margin-top: 80px; }
.hlp-side > summary { cursor: pointer; padding: 6px 0; }
/* Current article: bold text with an orange edge, not Bulma's solid orange fill (too loud inside a list). */
.hlp-side .menu-list a.is-active { background: none; color: var(--ink); font-weight: 600; border-inline-start: 3px solid var(--orange); border-radius: 0; }
/* Bulma sizes boxes by inheritance, which the browser's wrapper inside <details> breaks:
   without this the padded menu links grow wider than their column. */
.hlp-side * { box-sizing: border-box; }
.hlp-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; }
.hlp-body h3 { font-size: 1.1rem; margin-top: 1.6em; }
/* Phones and tablets: the panel sits above the article, so keep it compact. */
@media (max-width: 1023px) {
  .hlp-side { font-size: 0.875rem; }
  .hlp-side .menu-list a { padding: 0.3em 0.6em; }
  /* Collapsed on phones, so the toggle must read as a link: link colour, normal case, a 44px tap row. */
  .hlp-side > summary { color: var(--orange-d); text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 600; padding: 4px 0; line-height: 24px; }
  /* Bulma's menu-label gap (1em) is for an open list; none when the panel is collapsed. */
  .hlp-side { --bulma-menu-label-spacing: 0.5em; margin-bottom: -8px; }
  .hlp-side:not([open]) > summary { margin-bottom: 0; }
  .hlp-side-count { margin-inline-start: 0.3em; }
}
/* The count only earns its place where the list is hidden. */
@media (min-width: 1024px) { .hlp-side-count { display: none; } }
@media (min-width: 1024px) {
  .hlp-main { max-width: 900px; }
  .hlp-side > summary { cursor: default; }
}