.kanji-index-controls {
  margin-block: var(--spacing-lg) var(--spacing-md);
}

.kanji-index-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.kanji-index-control-row label {
  font-weight: 700;
}

.kanji-index-control-row select {
  max-width: 100%;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.4rem 2rem 0.4rem 0.6rem;
  font: inherit;
}

.kanji-index-control-row select:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.kanji-index-status,
.kanji-index-note {
  color: var(--color-gray);
  font-size: var(--font-size-small-plus);
}

.kanji-index-status {
  min-height: 1.7em;
  margin-block: 0.35rem 0;
}

.kanji-index-note {
  margin-block: var(--spacing-md) var(--spacing-lg);
}

.kanji-index-heading {
  margin-block: var(--spacing-xl) 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.kanji-index-list {
  margin-block: 0 var(--spacing-lg);
  padding-inline-start: 1.5rem;
}

.kanji-index-list li + li {
  margin-top: 0.2rem;
}

@media screen and (max-width: 480px) {
  .kanji-index-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .kanji-index-control-row select {
    width: 100%;
  }
}