.hux-wave-c {
  color: var(--hux-ink, #dbe9ef);
  display: grid;
  gap: 0.75rem;
}

.hux-wave-c h3,
.hux-wave-c p {
  margin: 0;
}

.hux-wave-c--gap {
  background: color-mix(in srgb, var(--hux-panel, #101922) 92%, #2b8398);
  border: 1px dashed var(--hux-line, #35505d);
  border-radius: 0.8rem;
  padding: 1rem;
}

.hux-wave-c--gap strong {
  color: var(--hux-muted, #91aab5);
}

.hux-wave-c__status,
.hux-wave-c__error {
  border-radius: 0.65rem;
  margin: 0;
  padding: 0.75rem;
}

.hux-wave-c__status {
  background: color-mix(in srgb, var(--hux-panel, #101922) 90%, #20bfd1);
}

.hux-wave-c__error {
  background: color-mix(in srgb, var(--hux-panel, #101922) 88%, #b14a64);
  border: 1px solid #b14a64;
}

.hux-wave-c__list,
.hux-wave-c__releases {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hux-wave-c__list li,
.hux-wave-c__releases li {
  background: var(--hux-panel, #101922);
  border: 1px solid var(--hux-line, #35505d);
  border-radius: 0.65rem;
  padding: 0.7rem;
}

.hux-wave-c__releases li {
  align-items: start;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) auto;
}

.hux-wave-c__releases li[data-live-verified="true"] {
  border-color: var(--hux-accent, #20bfd1);
}

.hux-wave-c__note,
.hux-wave-c__kicker {
  color: var(--hux-muted, #91aab5);
  font-size: 0.82rem;
}

.hux-wave-c__kicker {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hux-wave-c--suggestion {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hux-panel, #101922) 92%, #20bfd1),
    var(--hux-panel, #101922));
  border: 1px solid var(--hux-line, #35505d);
  border-radius: 0.8rem;
  padding: 1rem;
}

.hux-wave-c__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hux-wave-c button {
  background: transparent;
  border: 1px solid var(--hux-line, #35505d);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
}

.hux-wave-c button:hover {
  border-color: var(--hux-accent, #20bfd1);
}

.hux-wave-c button:focus-visible {
  outline: 3px solid var(--hux-accent, #20bfd1);
  outline-offset: 3px;
}

@media (max-width: 46rem) {
  .hux-wave-c__releases li {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hux-wave-c *,
  .hux-wave-c *::before,
  .hux-wave-c *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}