/* Listening Flow is a separate, compact strip below the player. */
.listening-flow{--flow-tint:color-mix(in srgb,var(--accent) 5%,var(--panel));position:relative;margin:16px 0;border:1px solid var(--line-2);border-radius:18px;background:var(--panel);color:var(--ink);text-align:left;min-width:0}
.listening-flow[hidden]{display:none!important}
.listening-flow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.listening-flow summary{cursor:pointer;list-style:none}.listening-flow summary::-webkit-details-marker{display:none}
.listening-flow>.flow-summary{display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:64px;border-radius:18px;touch-action:manipulation}
.flow-mark{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line-2);border-radius:11px;background:var(--flow-tint);color:var(--accent)}
.flow-summary-copy{display:flex;align-items:baseline;gap:12px;min-width:0}.flow-heading{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.02em}.flow-teaser{font-size:12px;line-height:1.4;color:var(--muted)}
.flow-summary-tail{display:flex;gap:10px;align-items:center;margin-left:auto;flex-shrink:0}.flow-current{font-size:12px;line-height:1.4;color:var(--muted)}.flow-summary-tail>svg{width:16px;transition:transform .18s}.listening-flow[open] .flow-summary-tail>svg{transform:rotate(180deg)}
.flow-body{padding:0 16px 16px;min-width:0}.flow-controls,.flow-recommendations{min-width:0}
.flow-section-label{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:600;margin:0 0 8px}
.flow-intents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.listening-flow button{font:inherit;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);border-radius:10px;cursor:pointer;touch-action:manipulation;min-height:44px;font-size:12px;padding:8px 10px;transition:background .18s,border-color .18s}
.listening-flow .flow-intents button{display:flex;position:relative;gap:7px;text-align:left;align-items:center;min-height:44px;padding:8px 23px 8px 10px}
.flow-mode-icon{color:var(--muted);display:flex}.flow-mode-icon svg{width:16px;height:16px}.flow-mode-copy{min-width:0}.flow-mode-copy strong{font-size:12px;font-weight:500;line-height:1.4}
.flow-mode-check{position:absolute;right:6px;top:50%;transform:translateY(-50%);opacity:0;display:flex;color:var(--accent)}.flow-mode-check svg{width:12px;height:12px;stroke-width:2.5}
.listening-flow .flow-intents button[aria-pressed=true]{background:var(--flow-tint);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.flow-intents button[aria-pressed=true] .flow-mode-icon{color:var(--accent)}.flow-intents button[aria-pressed=true] .flow-mode-check{opacity:1}
.listening-flow :is(button,summary,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}.listening-flow button:disabled{opacity:.65;cursor:default}
.flow-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:4px 0}.flow-count{font-size:12px;font-weight:600;color:var(--ink)}.listening-flow .flow-list-head button{display:flex;gap:6px;align-items:center;border:0;background:transparent;padding:8px 0 8px 10px;color:var(--muted)}.flow-list-head button svg{width:14px;height:14px}
.flow-picks{display:grid;gap:8px}.flow-pick{display:grid;grid-template-columns:40px minmax(0,1fr) 78px;gap:8px;align-items:start;border:1px solid var(--line-2);border-radius:12px;padding:10px;background:var(--flow-tint);min-width:0}
.flow-art{width:40px;height:40px;background-size:cover!important;background-position:center!important;border-radius:8px;border:1px solid var(--line-2)}.flow-info{display:grid;gap:4px;min-width:0}.flow-track-title{font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.flow-artist{font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-reason{font-size:11px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.flow-pick-actions{display:grid;justify-items:end;gap:2px;min-width:0}.listening-flow .flow-choose{display:flex;gap:4px;align-items:center;justify-content:center;white-space:nowrap;min-width:78px;padding:8px 6px;font-weight:500;font-size:11px}.flow-choose svg{width:14px;height:14px}
.flow-feedback{position:relative}.flow-feedback>summary{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:10px;color:var(--muted)}.flow-feedback>summary svg{stroke-width:3}
.flow-feedback-options{display:grid;gap:4px;width:174px;position:absolute;right:0;top:100%;z-index:8;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);box-shadow:0 8px 24px #0002}.flow-feedback-options button{text-align:left;border-color:transparent}
.flow-auto{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;margin-top:6px;cursor:pointer}.flow-auto input{position:absolute;right:0;width:44px;height:44px;opacity:0;cursor:pointer;margin:0;z-index:1}.flow-auto input:focus-visible~.flow-switch{outline:2px solid var(--accent);outline-offset:4px}.flow-auto-copy{flex:1;min-width:0}.flow-auto-copy strong{font-size:12px;font-weight:500;line-height:1.4}.flow-switch{width:32px;height:20px;border-radius:20px;background:var(--line-2);flex-shrink:0;position:relative;transition:background .18s}.flow-switch:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--panel);box-shadow:0 1px 3px #0003;transition:transform .18s}.flow-auto input:checked~.flow-switch{background:var(--accent)}.flow-auto input:checked~.flow-switch:after{transform:translateX(12px)}
.flow-options{position:relative}.flow-options>summary{font-size:11px;color:var(--muted);min-height:44px;display:flex;align-items:center;width:max-content;text-decoration:underline;text-underline-offset:3px}.flow-options-panel{position:absolute;left:0;top:100%;width:min(260px,calc(100vw - 80px));z-index:9;border:1px solid var(--line-2);border-radius:12px;padding:12px;background:var(--panel);box-shadow:0 8px 24px #0002}.flow-options-panel p{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 8px}
.flow-empty{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0}.flow-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0}
@media(min-width:1100px){.flow-body{display:grid;grid-template-columns:minmax(225px,.8fr) minmax(0,2fr);gap:24px;border-top:1px solid var(--line-2);padding-top:12px}.flow-picks{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-list-head{margin-top:-8px}.flow-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:12px}.flow-section-label,.flow-intents{grid-column:1/-1}.flow-auto{margin-top:6px}.flow-options{margin-top:6px}.flow-options-panel{left:auto;right:0}}
@media(min-width:761px) and (max-width:1099px){.flow-intents{grid-template-columns:repeat(4,minmax(0,1fr))}.flow-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px}.flow-section-label,.flow-intents{grid-column:1/-1}.flow-options{margin-top:6px}.flow-picks{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-options-panel{left:auto;right:0}}
@media(max-width:760px){.listening-flow{margin:12px 0}.listening-flow>.flow-summary{padding:12px;gap:10px}.flow-summary-copy{display:grid;gap:3px}.flow-teaser{font-size:11px}.flow-current{display:none}.flow-body{padding:0 12px 12px}.flow-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}.flow-section-label,.flow-intents{grid-column:1/-1}.flow-options{margin-top:6px}.flow-options-panel{left:auto;right:0}.flow-pick{grid-template-columns:32px minmax(0,1fr) 78px}.flow-art{width:32px;height:32px}.flow-mode-copy strong{font-size:11px}.listening-flow .flow-intents button{padding-left:8px;gap:5px}.flow-mode-icon svg{width:14px;height:14px}.flow-list-head{margin:4px 0}.flow-reason{font-size:11px}}
@media(hover:hover){.listening-flow button:not(:disabled):hover,.flow-feedback>summary:hover{background:var(--flow-tint);border-color:var(--accent)}}
@media(prefers-reduced-motion:reduce){.listening-flow *,.listening-flow *:after{transition:none!important}}
.vip-existing-access{margin:16px 0}.vip-existing-access>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:13px;color:var(--muted)}.vip-existing-access .vip-field{margin-top:12px}