.help-content {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
}

.help-content .page-heading,
.help-content .page-heading h1 {
  margin: 0;
}

.help-shell > .action-link {
  justify-self: start;
  margin-block-end: 0;
}

.help-search,
.help-topic {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-card);
}

.help-search {
  display: grid;
  width: min(100%, 48rem);
  min-width: 0;
  gap: var(--space-3);
}

.help-search__field {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.help-search__field input {
  width: min(100%, 32rem);
  min-height: 2.75rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
}

.help-search__field .field-help {
  max-width: 62ch;
}

.help-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help-grid {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  margin: 0;
}

.help-topic {
  display: grid;
  gap: var(--space-2);
}

.help-topic h2,
.help-topic p,
.help-grid > .empty-state {
  margin: 0;
}

@media (max-width: 40rem) {
  .help-content {
    gap: var(--space-4);
  }

  .help-search__actions .button {
    width: 100%;
  }
}
