/* Approved sound-step composition, scoped to word practice; feedback unchanged. */
.word-studio-shell .word-sound-controls{display:block;width:100%;min-width:0;text-align:left}
.word-studio-shell .word-sound-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.word-studio-shell .word-sound-heading h3{font-size:17px;line-height:1.3;margin:0;color:var(--brand-ink)}
.word-studio-shell .word-sound-heading>span{font-size:13px;color:var(--brand-ink-soft)}
.word-studio-shell .word-sound-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:6px}
.word-studio-shell .word-sound-grid button{min-height:62px;min-width:44px;padding:7px 3px;border:1px solid var(--brand-aqua);border-radius:12px;background:var(--brand-panel-mint);color:var(--brand-emerald);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;line-height:1.2}
.word-studio-shell .word-sound-grid button strong{font-size:22px;overflow-wrap:anywhere}
.word-studio-shell .word-sound-grid button span{font-size:12px}
.word-studio-shell .word-sound-grid button[aria-pressed=true]{background:var(--brand-emerald);color:var(--brand-canvas)}
.word-studio-shell .word-sound-grid button.is-playing{outline:2px solid var(--brand-gold);outline-offset:2px}
.word-studio-shell [data-sound-player-slot]{display:none!important}
.word-studio-shell .word-sound-status:not(.is-error){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.word-studio-shell .word-sound-status.is-error,.word-studio-shell .word-sound-unavailable{font-size:15px;color:var(--brand-ink);background:var(--brand-canvas);padding:12px;border-radius:12px}
.word-studio-shell .word-sound-letter.selected{background:var(--brand-panel-mint);color:var(--brand-emerald);box-shadow:0 3px var(--brand-gold)}
.word-studio-shell .word-audio-controls:has(.word-sound-controls){display:flex;flex-direction:column;align-items:center;gap:8px}
.word-studio-shell .word-audio-controls:has(.word-sound-controls) .word-cue-button{width:auto;max-width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border:1px solid var(--brand-aqua);border-radius:12px;font-size:15px;line-height:1.2;box-shadow:none}
.word-studio-shell .word-audio-controls:has(.word-sound-controls) .word-cue-button>span{width:auto;min-width:0}
.word-studio-shell .word-audio-controls:has(.word-sound-controls) .hear-button{background:var(--brand-canvas);color:var(--brand-emerald);border-color:var(--brand-aqua)}
.word-studio-shell .word-audio-controls:has(.word-sound-controls) .word-cue-button>img{width:22px;height:22px;flex:none;object-fit:contain}
.word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-title-row{gap:10px;display:flex;flex-direction:column}
.word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-with-picture{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:10px;min-height:0;height:auto;margin:0;padding:6px 0;flex:0 0 auto;font-size:clamp(36px,7vw,48px);line-height:1.12}
.word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-with-picture>span:first-child{order:2;text-align:center;max-width:100%;overflow-wrap:anywhere}
/* Bound the actual image as well as its reveal wrapper: the old wrapper cap
   left the original 192px image overflowing into the word on desktop. */
.word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-with-picture>:not(:first-child){order:1;width:104px;height:104px;max-width:104px;max-height:104px;flex:none}
.word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-picture-illustration{width:104px;height:104px;max-width:100%;max-height:100%;object-fit:contain;border-radius:14px}
.word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-primary-copy{flex:0 0 auto}
.word-studio-shell .word-sound-controls button:focus-visible{outline:3px solid var(--brand-emerald);outline-offset:3px}
@media(max-width:360px){
 .word-studio-shell .word-sound-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .word-studio-shell .word-sound-grid button strong{font-size:20px}
 .word-studio-shell .word-sound-grid button span{font-size:11px}
 .word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-with-picture>:not(:first-child){width:80px;height:80px;max-width:80px;max-height:80px}
 .word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)) .word-picture-illustration{width:80px;height:80px}
}
@media(min-width:781px){
 .word-studio-shell .minimal-word-card:has(.word-sound-controls):not(:has(.live-feedback)){padding:16px 24px;min-height:0}
 .word-studio-shell .minimal-word-card:not(:has(.live-feedback)) .word-audio-layout:has(.word-sound-controls){max-width:600px;margin-inline:auto;width:100%}
 .word-studio-shell .word-sound-grid{grid-template-columns:repeat(auto-fit,minmax(66px,1fr))}
}