/* Popular words: a centred list of small boxes (the owner's choice, like the lookup-word tags), each well over the
   24px a target needs (WCAG 2.5.8). */

.popular {
  margin: var(--space-20) 0 var(--space-4);
  text-align: center;
}

.popular h2 {
  margin: 0 0 var(--space-6);
  font-weight: var(--weight-medium);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  max-width: var(--width-intro);
  margin: 0 auto;
}

/* In a full-width section (`.full`) the chips use the whole width. */
.full .chips {
  max-width: none;
}

.chip {
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  text-decoration: none;
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);
}

/* Hover (mouse only, so a tap doesn't leave it lifted): a soft accent tint, lifted a little with a gentle shadow;
   pressing sets it back down. */
@media (hover: hover) {
  .chip:hover {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface));
    box-shadow: var(--shadow-sm);
    translate: 0 calc(-1 * var(--space-half));
  }

  .chip:active {
    translate: 0;
    box-shadow: none;
  }
}

/* English pages: the Latin spelling on a second line, so the chips stay narrow. */
[data-favorites-more] {
  margin-top: var(--space-5);
}

.chip .romanized {
  display: block;
  margin: var(--space-half) 0 0;
  font-size: var(--text-xs);
}