/* help.html: the contact form first, then the hijacked-account steps and privacy. */
.help { padding-bottom: var(--space-9); }
.help-hero p { max-width: 60ch; }

.help-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-6) var(--space-9); padding-block: var(--space-9); border-top: 1px solid var(--color-line); margin-top: var(--space-9); }
.help-section-head { display: grid; gap: var(--space-3); align-content: start; }
.help-section-head p { color: var(--color-ink-2); }
.help-section > :not(.help-section-head) { grid-column: 2; }
.help-section-first { margin-top: var(--space-7); }
.help-aside { font-size: var(--text-sm); }

.help-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.help-steps li { position: relative; padding-left: 52px; counter-increment: step; line-height: var(--leading-normal); }
.help-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-green-tint);
  color: var(--color-green-ink);
  font-weight: var(--weight-bold);
}

.help-form { display: grid; gap: var(--space-5); }
.help-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.help-files { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.help-files:empty { display: none; }
.help-files li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-tile-2);
  font-size: var(--text-sm);
}
.help-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-count { text-align: right; }
.help-mail { font-size: var(--text-sm); color: var(--color-ink-2); }
.help-list { display: grid; gap: var(--space-3); margin: 0; padding-left: 1.2em; line-height: var(--leading-normal); }

@media (max-width: 760px) {
  .help-section { grid-template-columns: minmax(0, 1fr); }
  .help-section > :not(.help-section-head) { grid-column: 1; }
}