/* =========================================================================
   Help and the public pages.

   The help screens have to render two ways: inside the app shell for someone
   signed in, and on their own for someone who is not. Everything here styles
   the content itself, so it looks the same either way, and only .helpbar and
   .helptabs exist for the signed out case.
   ========================================================================= */

.helpbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}
.helpbar .brand { flex: none; }
.helpbar > .btn { margin-left: auto; }

.helptabs {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}
.helptab {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 550;
  white-space: nowrap;
}
.helptab:hover { background: var(--sunken); text-decoration: none; }
.helptab.on { background: var(--brand); color: #fff; }

/* A numbered step. The number carries the meaning, because these are things
   done in an order and a bullet would hide that. */
.hstep {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.hstep:last-of-type { border-bottom: 0; }
.hnum {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  margin-top: 2px;
}
.hstep h3 { font-size: 16px; margin: 0 0 4px; font-weight: 650; }
.hstep p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 70ch;
}

.hqa { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.hqa:last-of-type { border-bottom: 0; }
.hqa h3 { font-size: 15.5px; margin: 0 0 5px; font-weight: 650; }
.hqa p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 70ch;
}

@media (max-width: 700px) {
  .helpbar { padding: var(--s3) var(--s4); gap: var(--s3); }
  .helpbar > .btn { margin-left: 0; }
  .helptabs { order: 3; width: 100%; flex: none; }
  .hstep { gap: var(--s3); }
}