/* Compact composition workspace. Keep editor, delivery settings and review in view. */
.studio-composer{--composer-top:66px}
body #main:has(.studio-composer){scroll-padding-top:76px}
body #songForm.studio-composer,body .studio-composer[data-draft-field=songForm]{display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,30%,600px);gap:16px;align-items:start;margin-top:12px}
.composer-editing{display:grid;gap:16px;min-width:0;container:sound-editor / inline-size}
body .studio-composer .editor-main{min-height:0;padding:18px;gap:14px;border-radius:12px}
body .studio-composer .song-identity input{font-size:1rem;padding:6px 9px}
body .studio-composer textarea{min-height:200px;line-height:1.65}
body .studio-composer .card-heading{margin:0;gap:10px}
body .studio-composer .card-heading h2{font-size:15px;margin:0}
body .studio-composer .availability-note{font-size:12px;line-height:1.5;margin:0}
body .creation-steps{padding:0;font-size:12px;gap:12px;flex-wrap:wrap}
body .creation-steps b{flex:none}
body .studio-composer #advancedProduction,body .studio-composer [data-draft-field=advancedProduction]{padding:16px;border:1px solid var(--ui-border,var(--line));border-radius:12px;background:var(--panel);margin:0}
body .studio-composer :is(#advancedProduction,[data-draft-field=advancedProduction])>p{font-size:12px;line-height:1.6;margin:6px 0 12px}
body .studio-composer :is(#advancedProduction,[data-draft-field=advancedProduction])>.control-grid{margin:12px 0 0;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
body .studio-composer .song-language{width:100%;max-width:280px}
.composer-rail{position:sticky;top:var(--composer-top);min-width:0;display:grid;gap:12px;max-height:calc(100dvh - var(--header,64px) - var(--composer-top) - var(--dock,76px) - 32px);overflow:auto;scrollbar-width:thin;padding:0 2px 2px}
body .studio-composer .composer-rail .editor-side{padding:16px;border-radius:12px;gap:12px}
body .composer-rail .control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
body .composer-rail .control-grid>.full{grid-column:1/-1}
body .studio-composer .composer-rail .production-summary{padding:14px 16px;border-radius:12px;font-size:12px;line-height:1.75}
body .composer-rail .production-summary strong{font-size:12px;margin-bottom:7px}
body .studio-composer .composer-rail .generation-price-bar{position:static;display:grid;gap:14px;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,var(--panel));box-shadow:none}
body .studio-composer .generation-price-bar .generation-price-actions{justify-items:stretch;text-align:start;gap:8px}
body .studio-composer .generation-price-bar .generation-price-actions>button{width:100%;justify-self:stretch;padding:9px 12px;font-size:13px;min-height:38px}
body .composer-actions.recipe-tools{position:static;top:auto;z-index:auto;display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0 0 12px;padding:6px;border:1px solid var(--ui-border,var(--line));border-radius:12px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(16px);box-shadow:0 6px 24px #0002}
.recipe-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:7px 12px;margin:0;font-size:11px;line-height:1.6}
.recipe-facts dt{color:var(--muted);font-weight:400}.recipe-facts dd{margin:0;color:var(--text);overflow-wrap:anywhere;text-align:end}
body .composer-actions>a{padding:6px 10px;font-size:12px;white-space:nowrap}
body .composer-actions>button{white-space:nowrap}
body .direction-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body .direction-picker{padding:4px 10px 6px;border-radius:8px;align-self:start}
body .direction-picker legend{font-size:12px;font-weight:550}
body .direction-chips{margin:0;gap:4px}
body :is(#main,.window-body) .direction-options>summary,body :is(#main,.window-body) .direction-options[open]>summary{font-size:12px;min-height:32px;margin:0;border:0;padding:5px 0}
body .direction-options[open]>summary{color:var(--accent)}
body :is(#main,.window-body) .direction-chips:empty+.direction-options>summary{font-weight:300;color:color-mix(in srgb,var(--muted) 80%,transparent)}
body .direction-popover{position:fixed;inset:auto;margin:0;box-sizing:border-box;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 38px #0005;z-index:150;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
body .direction-search{margin:0 0 8px}
body .direction-popover .direction-results{max-height:220px}
body .direction-popover .direction-option{min-height:34px;padding:6px;gap:8px;font-size:12px}
body .direction-popover .direction-add{min-height:32px;font-size:12px;padding:5px 10px;margin-top:8px}
body .direction-popover input[type=search]{width:100%;min-height:34px;font-size:13px;padding:6px 9px}
body .direction-popover .direction-option input{width:16px;height:16px;flex:none}
.window-body .studio-composer{--composer-top:8px}
@container sound-editor (max-width:720px){
 body .direction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container sound-editor (max-width:480px){
 body .direction-grid{grid-template-columns:minmax(0,1fr)}
}
@container studio-page (max-width:900px){
 body #songForm.studio-composer,body .studio-composer[data-draft-field=songForm]{grid-template-columns:minmax(0,1fr)}
 .composer-rail{position:static;max-height:none;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;padding:0}
 .composer-rail>.editor-side{grid-row:span 2}
 body .studio-composer .composer-rail .production-summary{grid-column:2}
}
@container studio-page (max-width:540px){
 body .direction-grid,.composer-rail{grid-template-columns:minmax(0,1fr)}
 body .studio-composer .composer-rail .production-summary{grid-column:auto}
 .composer-rail>.editor-side{grid-row:auto}
 body .studio-composer .editor-main{padding:14px}
 body .composer-actions.recipe-tools{gap:4px;width:100%;justify-content:space-between;flex-wrap:nowrap}
 :root body #main .composer-actions.recipe-tools :is(button,a){font-size:11px;padding-inline:7px;min-height:44px;display:flex;align-items:center}
}
@media(pointer:coarse){body .direction-options>summary,body .direction-popover .direction-option,body .direction-popover .direction-add{min-height:44px}body .direction-popover input[type=search]{font-size:16px;min-height:44px}}

@container studio-page (max-width:340px){
 body .composer-actions.recipe-tools{flex-wrap:wrap;justify-content:flex-start}
}