/* Choose a voice, then hear its unchanged recording or written-sentence output. */
.voice-audition{min-width:0}
.app-panel[data-product="aftertone"] .voice-audition{container-type:inline-size;container-name:voice-workbench}
.audition-task{margin:0 0 18px;min-width:0}
.audition-task>h4{margin:0 0 7px;font-family:var(--font-display);font-size:30px;font-weight:var(--weight-medium);line-height:1.14;letter-spacing:-.03em;text-wrap:balance}
.audition-task>p{margin:0;font-size:18px;line-height:1.4;color:var(--muted)}
.voice-audition .audition-studio{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;padding:0;border:0;border-radius:0;background:transparent}
.voice-audition .audition-stage-identity{grid-column:1/-1;display:flex;align-items:center;gap:18px;min-width:0;margin:0;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--accent) 13%,transparent)}
.voice-audition .audition-stage-name{min-width:0;flex:1}
.voice-audition .audition-recorded{margin:0 0 4px;color:var(--ink);font-size:14px;line-height:1.3}
/* The selected voice remains named in the picker, Compare action, and output label. */
.voice-audition [data-audition-name]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.voice-audition .audition-comparison-state{margin:0;color:var(--muted);font-size:var(--type-note);line-height:1.35}
.voice-audition .audition-compare{display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;min-height:48px;max-width:330px;padding:12px 18px;border:0;border-radius:10px;background:var(--control-selected);color:var(--control-selected-ink);font-size:var(--type-control-large);font-weight:var(--weight-strong);line-height:1.25;text-align:left;cursor:pointer;transition:background-color .16s,color .16s,box-shadow .16s;box-shadow:0 8px 18px -12px color-mix(in srgb,var(--accent) 65%,transparent)}
.voice-audition .audition-compare:hover{background:color-mix(in srgb,var(--accent) 90%,#171225)}
.voice-audition .audition-compare[aria-pressed="true"]{background:var(--control-surface);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* Workflow modes share the primary segment material; voice choices stay outlined. */
.voice-audition .product-mode-choices{display:flex;width:min(100%,250px);gap:16px;margin:0;padding:0;border:0;border-bottom:1px solid var(--line-app);border-radius:12px;background:var(--control-surface)}
.voice-audition .product-mode-choices button{flex:1;min-height:44px;padding:9px 4px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:var(--type-control);font-weight:var(--weight-medium);line-height:1.25;box-shadow:none}
.voice-audition .product-mode-choices button[aria-pressed="true"]{background:var(--control-selected);color:var(--control-selected-ink);font-weight:var(--weight-strong);box-shadow:none}
.voice-audition .product-mode-choices button:hover:not([aria-pressed="true"]){background:var(--control-hover);color:var(--accent)}
.voice-audition .audition-voice-choices{display:block;min-width:0;max-width:100%;margin:0;padding:0;border:0}
.voice-audition .audition-picker-caption{min-width:0;margin:0 0 8px;color:var(--ink);font-size:var(--type-body);font-weight:var(--weight-semibold);line-height:1.3}
.voice-audition .audition-choice-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0;max-width:100%;overflow:visible}
.voice-audition .audition-voice-choices button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:9px 12px;border:1px solid var(--line-app);border-radius:12px;background:var(--control-surface);color:var(--muted);font-size:var(--type-control-large);font-weight:var(--weight-semibold);line-height:1.2;white-space:normal;text-align:center;cursor:pointer;transition:background-color .16s,color .16s,border-color .16s}
.voice-audition .audition-voice-choices button[aria-pressed="true"]{background:var(--control-surface);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.voice-audition .audition-voice-choices button:hover{background:var(--control-hover);color:var(--accent);border-color:var(--accent)}
.voice-audition .audition-voice-choices button:focus-visible,.voice-audition .audition-compare:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Read the same recording from source to conversion, on two long listening lanes. */
.voice-audition .audition-recordings{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;padding:0;background:transparent;border-radius:0;box-shadow:none;container-type:inline-size}
.voice-audition .audition-original{--audition-ink:#52465e}
.voice-audition .audition-conversions,.voice-audition .audition-typed-workspace{--audition-ink:var(--accent);min-width:0}
.voice-audition .audition-conversions{padding-top:20px;border-top:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.voice-audition .audition-voice-panel{min-width:0}
.voice-audition .audition-voice-panel+.audition-voice-panel{margin-top:20px}
.voice-audition[data-audition-ready] .audition-voice-panel{margin-top:0}
.voice-audition .audio-sample{min-width:0;margin:0;padding:0}
.voice-audition .audio-sample label{display:block;margin:0 0 10px;color:var(--ink);font-size:var(--type-label);line-height:1.25;font-weight:var(--weight-semibold);letter-spacing:-.025em}
.voice-audition .audio-sample audio{display:block;width:100%;height:46px}
.voice-audition .audio-controls{display:flex;align-items:center;gap:18px;min-height:78px}
.voice-audition .audio-controls button{display:grid;place-items:center;width:64px;height:64px;flex:0 0 64px;border:1px solid var(--audition-ink);border-radius:50%;background:var(--control-surface);color:var(--audition-ink);font-size:var(--type-body-large);cursor:pointer;transition:background-color .16s,color .16s,box-shadow .16s}
.voice-audition .audio-controls button:hover,.voice-audition .sample-playing .audio-controls button{color:#fff;background:var(--audition-ink);box-shadow:0 8px 22px color-mix(in srgb,var(--audition-ink) 23%,transparent)}
.voice-audition .sample-wave{position:relative;flex:1;min-width:0;--sample-progress:0%;--audition-wave-height:64px;color:var(--audition-ink)}
.voice-audition .sample-wave svg{display:block;width:100%;height:var(--audition-wave-height);fill:currentColor;opacity:.85}
.voice-audition .audio-sample .sample-wave .sample-wave-shape>svg{opacity:.65}
.voice-audition .sample-wave::before{content:"";position:absolute;left:0;top:calc(var(--audition-wave-height) + 2px);height:2px;width:var(--sample-progress);max-width:100%;background:currentColor;pointer-events:none}
.voice-audition .sample-wave::after{content:"";position:absolute;top:3px;left:clamp(0%,var(--sample-progress),100%);width:1px;height:calc(var(--audition-wave-height) - 5px);background:currentColor;opacity:0;pointer-events:none}
.voice-audition .sample-playing .sample-wave::after{opacity:.8}
.voice-audition .sample-wave>[data-audio-time]{display:block;margin-top:7px;color:var(--muted);font-size:14px;line-height:1.35;font-variant-numeric:tabular-nums}
.voice-audition .audio-status{color:var(--muted);font-size:var(--type-note-small);line-height:1.4;margin-top:8px}
.voice-audition .audio-status:empty{display:none}
.voice-audition .audition-scope{margin:0;color:var(--muted);font-size:var(--type-note);line-height:1.45}

/* Written input stays truthful: a recorded sentence, not an editable fake prompt. */
.voice-audition .audition-tts{margin:0;border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-bottom:0}
.voice-audition .audition-tts summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:15px 0;list-style:none;color:var(--ink);font-size:var(--type-control);font-weight:var(--weight-semibold);line-height:1.35;cursor:pointer}
.voice-audition .audition-tts summary::-webkit-details-marker{display:none}
.voice-audition .audition-tts summary>span{flex:none;color:var(--accent);font-size:23px}
.voice-audition .audition-tts[open] summary>span{transform:rotate(45deg)}
.voice-audition .audition-typed-workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;align-items:start;padding:0;background:transparent;border-radius:0}
.voice-audition .audition-written-input{min-width:0}
.voice-audition .audition-written-input .eyebrow{color:var(--accent);font-size:var(--type-metadata);margin:0 0 12px}
.voice-audition .audition-typed-workspace blockquote{margin:0;max-width:820px;font-size:23px;line-height:1.35;letter-spacing:-.025em}
.voice-audition .audition-typed-workspace .audio-sample label{font-size:var(--type-label)}
.voice-audition .audition-typed-outputs{min-width:0}
.voice-audition .audition-typed-note{grid-column:1/-1;margin:0;color:var(--muted);font-size:var(--type-note);line-height:1.45}
.voice-audition[data-product-modes-ready] .audition-tts{border:0}
.voice-audition[data-product-modes-ready] .audition-tts>summary{display:none}
.voice-audition [data-audition-stage][hidden],.voice-audition [data-audition-compare][hidden],.voice-audition [data-audition-choices][hidden],.voice-audition [data-audition-panel][hidden],.voice-audition .audio-controls[hidden],.voice-audition audio[hidden]{display:none!important}

/* Label beside the transport only when this bench, not the screen, has room. */
@container(min-width:620px){
 .voice-audition .audition-recordings .audio-sample{display:grid;grid-template-columns:minmax(140px,.24fr) minmax(0,1fr);gap:0 20px;align-items:center}
 .voice-audition .audition-recordings .audio-sample label{grid-column:1;grid-row:1;margin:0}
 .voice-audition .audition-recordings .audio-sample :is(audio,.audio-controls){grid-column:2;grid-row:1}
 .voice-audition .audition-recordings .audio-status{grid-column:2}
}

@media(width <768px){
 .audition-task{margin-bottom:16px}
 .audition-task>h4{font-size:24px}
 .audition-task>p{font-size:16px}
 .voice-audition .audition-studio{gap:12px}
 .voice-audition .product-mode-choices{width:min(100%,230px)}
 .voice-audition .product-mode-choices button{font-size:var(--type-control);min-height:44px;padding-inline:4px}
 .voice-audition .audition-stage-identity{flex-wrap:nowrap;gap:12px;padding-bottom:12px}
 .voice-audition .audition-compare{min-height:48px;max-width:100%;padding:11px 14px;font-size:var(--type-control);line-height:1.25}
 .voice-audition .audition-stage-name{flex-basis:auto}
 .voice-audition .audition-comparison-state{font-size:var(--type-note-small);line-height:1.35}
 .voice-audition .audition-picker-caption{font-size:var(--type-control-large);margin-bottom:8px}
 .voice-audition .audition-choice-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0;overflow:visible}
 .voice-audition .audition-voice-choices button{min-width:0;min-height:56px;padding:8px 4px;font-size:var(--type-control);line-height:1.2;white-space:normal}
 .voice-audition[data-product-modes-ready] .product-mode-choices{width:100%;gap:8px}
 .voice-audition .audition-recordings{gap:16px;padding:0}
 .voice-audition .audition-conversions{padding-top:16px}
 .voice-audition .audio-sample label{margin-bottom:8px;font-size:var(--type-label)}
 .voice-audition .audio-controls{min-height:78px;gap:14px}
 .voice-audition .audio-controls button{width:56px;height:56px;flex-basis:56px}
 .voice-audition .sample-wave{--audition-wave-height:56px}
 .voice-audition .sample-wave>[data-audio-time]{margin-top:6px;font-size:14px}
 .voice-audition .audition-scope{font-size:var(--type-note-small);line-height:1.4}
 .voice-audition .audition-tts summary{min-height:54px;padding-block:13px;font-size:var(--type-caption)}
 .voice-audition .audition-typed-workspace{grid-template-columns:1fr;gap:18px;padding:0}
 .voice-audition .audition-typed-workspace blockquote{font-size:var(--type-label);line-height:1.35}
 .voice-audition .audition-typed-workspace .audio-sample label{font-size:var(--type-body)}
 .voice-audition .audition-typed-note{font-size:var(--type-note-small)}
}
@media(width <360px){
 .voice-audition .audition-choice-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .voice-audition .audition-voice-choices button{font-size:var(--type-control);padding-inline:6px}
 .voice-audition .audition-recordings{padding:12px;gap:16px}
 .voice-audition .audio-controls{gap:12px}
 .voice-audition .audition-typed-workspace{padding:12px}
 .voice-audition .audition-typed-workspace blockquote{font-size:var(--type-body-large)}
}
/* Pair only the two enhanced transports in the full app Experience. Native
   controls, including error fallback, keep the full-width listening lanes. */
@container voice-workbench (min-width:320px){
 .app-panel[data-product="aftertone"] .voice-audition[data-audition-ready] .audition-recordings:has(.audition-original .audio-controls:not([hidden])):has(.audition-conversions>.audition-voice-panel:not([hidden]) .audio-controls:not([hidden])){
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:14px
 }
 .app-panel[data-product="aftertone"] .voice-audition[data-audition-ready] .audition-recordings:has(.audition-original .audio-controls:not([hidden])):has(.audition-conversions>.audition-voice-panel:not([hidden]) .audio-controls:not([hidden])) .audition-conversions{
  padding-top:0;border-top:0
 }
 .app-panel[data-product="aftertone"] .voice-audition[data-audition-ready] .audition-recordings:has(.audition-original .audio-controls:not([hidden])):has(.audition-conversions>.audition-voice-panel:not([hidden]) .audio-controls:not([hidden])) .audio-sample{
  display:block
 }
 .app-panel[data-product="aftertone"] .voice-audition[data-audition-ready] .audition-recordings:has(.audition-original .audio-controls:not([hidden])):has(.audition-conversions>.audition-voice-panel:not([hidden]) .audio-controls:not([hidden])) .audio-sample label{
  min-height:2.5em
 }
}
@media(width >=360px) and (width <768px){
 .app-panel[data-product="aftertone"] .voice-audition[data-audition-ready] .audition-recordings .audio-controls{gap:10px}
}
@media(prefers-reduced-motion:reduce){.voice-audition .audition-voice-choices button,.voice-audition .audio-controls button,.voice-audition .audition-compare{transition:none}}
.motion-paused .voice-audition .audition-voice-choices button,.motion-paused .voice-audition .audio-controls button,.motion-paused .voice-audition .audition-compare{transition:none}