/* Explore Kona experience — shared by the standalone /explore page and the hub
   landing section. Mobile-first; on-brand with design-system.css tokens. ONE
   control type: pills for both audience and voice. All motion is gated behind
   prefers-reduced-motion: reduce. No emojis. */

.xp { max-width: 820px; margin: 0 auto; }

.xp-controls { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.xp-label {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}

/* Pill group. Audience wraps (few, short); voice scrolls (eight names). */
.xp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-pills-scroll {
    /* EXPLORE-12: the voice row WRAPS (like the audience row) so all eight
       voice pills are always fully visible. The previous nowrap + overflow-x
       scroll clipped the last/selected pill ("Attenborough") at the container
       edge on desktop and pushed pills off-screen on mobile; a right-edge
       mask-image fade (also removed) had only hidden that clip behind a
       gradient instead of fixing it. */
    flex-wrap: wrap;
}

.xp-pill {
    flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-secondary); font: inherit;
    font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.xp-pill:hover { color: var(--text); background: var(--surface-hover); border-color: var(--primary-border); }
.xp-pill[aria-checked="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.xp-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* "Surprise me" is a pill too (one consistent control type) but reads as an
   action, not a selectable option, via a dashed outline. */
.xp-actions { display: flex; }
.xp-action { border-style: dashed; color: var(--text-muted); }
.xp-action:hover { color: var(--primary); border-color: var(--primary-border); background: var(--surface-hover); }

.xp-stage {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
    padding: 28px 28px 30px;
}
.xp-content { font-size: 16px; line-height: 1.75; color: var(--text); transition: opacity 0.18s var(--ease); }
.xp-content p { margin: 0 0 16px; }
.xp-content p:last-child { margin-bottom: 0; }
.xp-content.is-swapping { opacity: 0; }

@media (max-width: 600px) {
    .xp-stage { padding: 22px 20px 24px; }
    .xp-content { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .xp-pill, .xp-content { transition: none; }
    .xp-content.is-swapping { opacity: 1; }
}