/**
 * <HelpDrawer> — inline expandable region below a form field.
 *
 * The drawer contains:
 *   - A title (`.c-help__title`)
 *   - Numbered steps (`.c-help__steps > li`)
 *   - An annotated screenshot (`.c-help__screenshot`, issue #72) of the
 *     e-Financials admin with the target control highlighted. PNGs live
 *     under `/img/help/<field>.png` and are produced by
 *     `scripts/annotate-help-screenshots.mjs`.
 *
 * Progressive enhancement: when JS is disabled, render the panel WITHOUT
 * `hidden` attribute server-side (or in the SPA renderer) — the `[hidden]`
 * rule is the only thing standing between the user and the content.
 */

.c-help {
  margin-top: var(--space-1);
}

.c-help__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-small);
  color: var(--info-text);
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.c-help__toggle:hover,
.c-help__toggle:focus-visible {
  text-decoration: underline;
}

.c-help__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.c-help__toggle-hide {
  display: none;
}

.c-help__toggle[aria-expanded="true"] .c-help__toggle-show {
  display: none;
}

.c-help__toggle[aria-expanded="true"] .c-help__toggle-hide {
  display: inline;
}

.c-help__panel[hidden] {
  display: none;
}

.c-help__panel {
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
}

.c-help__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--text-primary);
}

.c-help__steps {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-7);
  font-size: var(--font-size-small);
  color: var(--text-primary);
  line-height: var(--line-height-body);
}

.c-help__steps li + li {
  margin-top: var(--space-1);
}

/* ----- Annotated admin screenshot (issue #72) ----- */

.c-help__screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-1);
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
}