/* Topics Index Page */
.topics-index-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 768px) {
  .topics-index-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* The prompt under (or instead of) the list. Was a block of inline styles --
   the only thing in the app that looked hand-placed. */
.topics-create-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 0 8px;
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--fs-base);
}

.topics-create-prompt p {
  margin: 0;
}

.topics-create-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--ease), border-color var(--ease);
}

.topics-create-link:hover {
  color: var(--leaf);
  border-color: var(--leaf);
}