Suggested Tags Strip

<div class="nuda-chip-suggest">
  <span class="nuda-chip-suggest__label">Suggested</span>
  <div class="nuda-chip-suggest__row">
    <button type="button" class="nuda-chip-suggest__chip">+ marketing</button>
    <button type="button" class="nuda-chip-suggest__chip">+ launch</button>
    <button type="button" class="nuda-chip-suggest__chip">+ q4</button>
    <button type="button" class="nuda-chip-suggest__chip">+ brand</button>
    <button type="button" class="nuda-chip-suggest__chip">+ growth</button>
  </div>
</div>

/* Suggested Tags Strip
   Dashed-outline chips that solidify on hover.
   Customize: --suggest-accent */

.nuda-chip-suggest {
  --suggest-accent: #e4ff54;
  width: 100%;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
}

.nuda-chip-suggest__label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #63636e;
}

.nuda-chip-suggest__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-suggest__chip {
  padding: 4px 10px;
  color: #a0a0a8;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.nuda-chip-suggest__chip:hover {
  color: var(--suggest-accent);
  border-color: var(--suggest-accent);
  border-style: solid;
  background: rgba(228, 255, 84, 0.06);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-suggest__chip { transition: none; }
  .nuda-chip-suggest__chip:hover { transform: none; }
}