/* Interaction details from the design prototype (docs/prototype/Explore.dc.html). */
html { color-scheme: dark; }
a:hover { color: #FFB547; }
button, select { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #FFB547; outline-offset: 2px; }
[x-cloak] { display: none !important; }

.play { transition: transform .15s ease; }
.play:hover { transform: scale(1.06); }
.solid:hover { color: #0C0D10; background: #FFFFFF; }
.ghost:hover { background: #1F232B; color: #F2F1EE; }
.navlink:hover { background: #171A20; color: #F2F1EE; }
.chip:hover { border-color: #4A505E; }
.chip.is-on:hover { border-color: #F2F1EE; color: #0C0D10; }
.vcard { transition: transform .2s ease, border-color .2s ease; }
.vcard:hover { transform: translateY(-3px); border-color: #3A3F4B; }

/* Waveform: idle bars are static, the playing voice dances in amber. */
.wave span { background: rgba(242, 241, 238, 0.55); transform-origin: bottom; transition: background .2s ease; }
.is-playing .wave span { background: #FFB547; animation: wave 0.9s ease-in-out infinite alternate; }
.is-playing .wave span:nth-child(3n) { animation-delay: -.3s; }
.is-playing .wave span:nth-child(3n+1) { animation-delay: -.6s; }
.is-playing .wave span:nth-child(4n) { animation-duration: .7s; }
@keyframes wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .is-playing .wave span { animation: none; } }

.scroll-row { scrollbar-width: thin; scrollbar-color: #2A2E38 transparent; }
.htmx-request .results-fade { opacity: .55; transition: opacity .15s ease; }