/* Help library styles (REA-995) — loaded on /<lang>/help/ pages ON TOP of
 * css/blog.css.
 *
 * Why a third stylesheet rather than a `help-*` block inside blog.css: the help
 * pages reuse the article shell (.blog-main, .blog-content, .blog-post-*) as-is,
 * so help must not become a third visual language — but editing blog.css would
 * change its content hash and re-stamp the `?v=` on every already-shipped blog
 * page. A separate file leaves /<lang>/blog/** byte-identical.
 *
 * Only the two things help actually adds live here: the hub's reference list
 * (ordered by the article's `order`, so no dates lead it) and figures. Existing
 * design tokens only — no new colour literals, both themes inherited. */

.help-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }

.help-list-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.help-list-title { font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.5rem; }
.help-list-title a { color: var(--text); }
.help-list-title a:hover { color: var(--primary); }
.help-list-desc { color: var(--text-secondary); }
.help-list-meta { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.5rem; }
.help-list-more { display: inline-block; margin-top: 0.75rem; font-weight: 600; }

/* Screenshots carry intrinsic width/height read from the PNG header at build
 * time, so the box is reserved before the image loads; `height: auto` keeps it
 * responsive without reintroducing the layout shift. */
.help-figure {
  margin: 1.75rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  box-shadow: var(--shadow);
}

.help-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 0.25rem);
}

.help-figure figcaption {
  margin-top: 0.6rem;
  padding: 0 0.25rem 0.25rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* Inline app-control icons — `{icon:<name>}`, scripts/lib/icons.js (REA-998).
 * Drawn as a small key-cap so the reader's eye separates "the button" from the
 * words around it, the way it is separated in the app's own toolbar. Sized in
 * `em` so it tracks the surrounding text, including inside a heading. */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.35em;
  margin: 0 0.15em;
  vertical-align: -0.35em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 0.9em;
  line-height: 1;
}

/* The SVG icons are stroke-drawn with stroke="currentColor", so they inherit
 * .help-icon's colour and flip with the theme like the glyph ones do. */
.help-icon-svg {
  width: 1em;
  height: 1em;
}

@media (max-width: 600px) {
  .help-list-title { font-size: 1.25rem; }
}