/* listen-experience.css — the "Play Something For Me" colour-wheel page. */
.listen-experience{display:grid;gap:18px;max-width:1240px;margin:0 auto;padding:6px 0 24px;color:var(--text,#f6f7ff)}
.listen-steps{display:flex;gap:8px;flex-wrap:wrap}
.listen-steps button{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid #c5a9f52c;border-radius:999px;background:#a179d00f;color:#d8ccea;font:inherit;font-size:.86rem;cursor:pointer}
.listen-steps button span{font-size:.7rem;letter-spacing:.14em;color:#a99dc2}
.listen-steps button[aria-current=step]{background:linear-gradient(175deg,#7a3ce6,#5a24c4);border-color:#c88bff99;color:#fff}
.listen-steps button:disabled{opacity:.55;cursor:default}
.listen-heading{display:grid;gap:6px}
.listen-step-count{margin:0;font-size:.72rem;letter-spacing:.22em;color:#b5a8cf}
.listen-heading h1{margin:0;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:460;letter-spacing:-.045em;line-height:1.08}
.listen-heading h1:focus{outline:0}
.listen-note{margin:0;color:var(--muted,#abb8d1);max-width:60ch}
.listen-wheel-host{min-width:0;min-height:420px}
.listen-wheel-host[aria-busy=true]:empty:before{content:'Opening the colour wheel…';display:block;padding:120px 0;text-align:center;color:#a99dc2}
.listen-bottom{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 24px;padding:14px 18px;border:1px solid #c5a9f52e;border-radius:18px;background:#0e131ef2;backdrop-filter:blur(14px);box-shadow:0 10px 40px #0008}
.listen-summary{display:grid;gap:3px;min-width:0}
.listen-summary small{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#a99dc2}
.listen-summary span{overflow-wrap:anywhere;font-size:.98rem}
.listen-refine{grid-column:1/-1;font-size:.86rem;color:#cfc3e3}
.listen-refine summary{cursor:pointer;color:#b9a4ff}
.listen-refine-fields{display:flex;flex-wrap:wrap;gap:14px;padding-top:10px}
.listen-refine label{display:grid;gap:4px;font-size:.78rem;color:#a99dc2}
.listen-refine select{min-width:200px;padding:8px 10px;border:1px solid #c5a9f52c;border-radius:10px;background:#141a28;color:#fff;font:inherit}
.listen-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
.listen-actions .text-button,.listen-actions a{color:#cdbfe6;text-decoration:none;font-size:.9rem;padding:10px 12px;background:none;border:0;cursor:pointer;font-family:inherit}
.listen-actions .text-button:hover,.listen-actions a:hover{color:#fff;text-decoration:underline}
.listen-actions button:disabled{opacity:.55;cursor:default}
.listen-feedback{grid-column:1/-1;min-height:1.2em;margin:0;font-size:.86rem;color:#f5c7d5}
@media (max-width:860px){
  .listen-bottom{grid-template-columns:1fr}
  .listen-actions{justify-content:stretch}.listen-actions .primary{flex:1 1 100%}
  .listen-wheel-host{min-height:360px}
}
@media (prefers-reduced-motion:reduce){.listen-steps button,.listen-actions button{transition:none}}