/* Motion composition shares the console palette and keeps its controls bounded. */
.motion-audio-panel{display:grid;gap:12px;min-width:0;margin-top:22px;padding-top:20px;border-top:1px solid var(--af-border,#CBD3E1)}.motion-audio-panel>h3{margin:0;font-size:16px;font-weight:500}.motion-audio-panel>.field-help{margin:0;line-height:1.7;color:var(--af-muted,#526078)}.motion-audio-actions{display:flex;flex-wrap:wrap;gap:8px}.motion-audio-actions .button{min-height:48px}.motion-audio-card{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid var(--af-border,#CBD3E1);border-radius:12px;background:var(--af-paper,#F5F7FC);margin-bottom:12px}.motion-audio-card h4{margin:0;font-size:14px;line-height:1.5;font-weight:500}.motion-audio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.motion-audio-mute{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}#view-motion .motion-audio-mute input{width:18px;min-height:18px;flex:0 0 18px;accent-color:var(--af-link,#3344C9)}#view-motion .motion-audio-panel .motion-field{font-size:14px;line-height:21px}#view-motion .motion-audio-panel :is(input:not([type=checkbox]),select){min-height:48px;font-size:16px;line-height:24px}@media(max-width:480px){.motion-audio-actions .button{flex:1}.motion-audio-card{padding:12px}.motion-audio-grid{grid-template-columns:minmax(0,1fr)}}
.motion-document-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,1fr);gap:20px;align-items:center;background:#f4f3fc;border:1px solid #e5e0f7;border-radius:16px;padding:18px 22px;margin:0 0 22px}.motion-document-bar>label{display:grid;gap:7px;font-size:12px;font-weight:600}.motion-document-controls{display:grid;gap:9px;justify-items:end;min-width:0}.motion-document-controls>.field-help{margin:0;text-align:right;overflow-wrap:anywhere}.motion-document-controls .button-row{justify-content:flex-end;flex-wrap:wrap;gap:8px}.motion-track-library{margin-top:24px}.motion-track-row{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #edf0f5;padding:14px 0;min-width:0}.motion-track-row>div{display:grid;gap:5px;min-width:0}.motion-track-row a{font-size:14px;font-weight:600;overflow-wrap:anywhere}.motion-track-row .field-help{font-size:12px;margin:0}.motion-track-row .button{flex-shrink:0}.motion-track-versions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #edf0f5}.motion-track-versions:empty{display:none}.motion-track-versions label{display:grid;gap:6px;font-size:12px;flex:1;min-width:130px}.motion-track-versions .button{align-self:end;white-space:nowrap}.motion-track-version-tag{color:#6655ab;background:#f1edfc;border-radius:6px;padding:3px 6px;font-size:11px}.motion-history-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.motion-document-bar .button{min-height:40px}.motion-sketch-layer{pointer-events:none}.motion-stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.motion-layer-order{display:flex;gap:5px;flex-shrink:0}.motion-layer-toggle{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:12px}#view-motion .motion-layer-toggle input{width:16px;min-height:16px;flex:0 0 16px;accent-color:#7460df}.motion-layer-toggle+ .field-help{margin-top:8px}
@media(max-width:800px){.motion-document-bar{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}.motion-document-controls{justify-items:start}.motion-document-controls>.field-help{text-align:left}.motion-document-controls .button-row{justify-content:flex-start}.motion-track-library{padding:18px}}
@media(max-width:480px){.motion-document-controls .button-row{width:100%}.motion-document-controls .button{flex:1;min-height:44px;justify-content:center}.motion-track-row{align-items:flex-start}.motion-track-row .button{padding:8px 10px;min-height:44px}.motion-track-versions .button{min-height:44px}}
.motion-animation-controls{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;padding-top:10px;border-top:1px solid #e4e7ee}.motion-engine-note{overflow-wrap:anywhere;line-height:1.5}.motion-engine-unavailable{color:#8b5222}
#view-motion{max-width:1480px}.motion-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:24px;align-items:start}.motion-compose,.motion-preview-panel{min-width:0}.motion-intro{max-width:66ch}.motion-settings{display:grid;grid-template-columns:1fr 1fr;gap:14px}.motion-settings label,.motion-field{display:grid;gap:6px;min-width:0;font-size:13px;font-weight:600}.motion-full{grid-column:1/-1}#view-motion :is(input,select,textarea){box-sizing:border-box;width:100%;max-width:100%;min-width:0;border:1px solid #dfe3eb;border-radius:10px;background:#fff;color:#1d2635;font:inherit;font-weight:400;padding:10px 12px}#view-motion select{height:42px;white-space:nowrap;text-overflow:ellipsis}#view-motion textarea{resize:vertical;min-height:72px}#view-motion input[type=file]{font-size:12px;padding:10px}#view-motion input[type=range]{padding:0;border:0;accent-color:#7460df}#view-motion .compact-select{min-width:0;max-width:100%}#view-motion .compact-select-trigger{min-height:42px;max-width:100%}.motion-divider{border:0;border-top:1px solid #edf0f5;margin:22px 0}.motion-layer-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.motion-layer-toolbar .button{padding:8px 10px;font-size:12px;min-height:36px}.motion-layer-card{border:1px solid #e4e7ee;border-radius:14px;background:#fafbfc;padding:16px;display:grid;gap:12px;margin-bottom:12px}.motion-layer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.motion-layer-heading h3{font-size:14px;line-height:1.35;margin:0}.motion-layer-heading .button{font-size:12px}.motion-timing{display:grid;grid-template-columns:1fr 1fr;gap:12px}.motion-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.motion-plan-summary{font-size:13px;line-height:1.6;color:#51429b;margin:12px 0}.motion-preview-panel{position:sticky;top:90px}.motion-stage-wrap{background:#eef0f5;border-radius:16px;display:grid;place-items:center;padding:22px;overflow:hidden}.motion-stage{background:linear-gradient(145deg,#151e37,#303363);position:relative;overflow:hidden;width:min(100%,260px);aspect-ratio:9/16;border-radius:8px;box-shadow:0 12px 24px #26335426;color:#fff}.motion-stage[data-aspect="16:9"]{width:100%;aspect-ratio:16/9}.motion-background-label{position:absolute;inset:0;display:grid;place-items:center;color:#d2d7e8;font-size:12px}.motion-sketch-layer{position:absolute;box-sizing:border-box;overflow:hidden;font-size:14px;line-height:1.25}.motion-sketch-text{left:8%;right:8%;top:28%;text-align:center;font-size:clamp(18px,2vw,28px);font-weight:600;text-wrap:balance}.motion-sketch-lower_third{left:6%;right:6%;bottom:20%;padding:10px 12px;background:#fff;color:#182544;border-left:4px solid #8570ed;display:grid;gap:3px}.motion-sketch-lower_third span{font-size:10px}.motion-sketch-ticker{bottom:8%;left:0;right:0;background:#785fe8;padding:8px;font-size:11px;white-space:nowrap}.motion-sketch-logo{right:7%;top:7%;font-size:14px;background:#ffffff22;padding:8px;border:1px solid #ffffff55;border-radius:6px}.motion-sketch-chart{left:10%;right:10%;top:44%;height:28%;font-size:12px}.motion-sketch-bars{height:70%;display:flex;gap:12px;align-items:end;margin-top:10px}.motion-sketch-bar{height:100%;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:5px}.motion-sketch-bar i{display:block;background:#b8a6ff;width:100%;max-width:50px;min-height:2px;border-radius:4px 4px 0 0}.motion-sketch-bar span{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.motion-scrub{display:flex;align-items:center;gap:12px;font-size:12px;color:#687488;margin-top:16px}.motion-scrub input{flex:1}.motion-scrub output{white-space:nowrap}.motion-result-video{display:block;width:100%;max-height:600px;object-fit:contain;background:#111;border-radius:12px;margin:12px 0}.motion-queue-panel{margin-top:24px}.motion-history-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;border-top:1px solid #edf0f5}.motion-history-link{flex:1;min-width:150px;overflow-wrap:anywhere;font-size:13px}.motion-queue-panel .tag{font-size:11px}.motion-result:empty{display:none}.motion-result{margin-top:24px;border-top:1px solid #edf0f5;padding-top:16px}.motion-preview-title{display:flex;justify-content:space-between;gap:10px;align-items:center}.motion-preview-title h2{font-size:18px}.motion-preview-title .tag{font-size:11px}#view-motion [hidden]{display:none!important}
@media(max-width:1100px){.motion-layout{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:16px}.motion-stage-wrap{padding:16px}.motion-compose,.motion-preview-panel{padding:20px}}
@media(max-width:800px){.motion-layout{grid-template-columns:minmax(0,1fr)}.motion-preview-panel{position:static;top:auto}.motion-stage{width:min(100%,220px)}.motion-stage[data-aspect="16:9"]{width:min(100%,560px)}.motion-sketch-text{font-size:22px}.motion-sketch-chart{font-size:11px}.motion-compose,.motion-preview-panel{padding:18px}.motion-queue-panel{padding:18px}}
@media(max-width:480px){.motion-settings{gap:12px}.motion-layer-card{padding:12px}#view-motion :is(input,select,textarea){font-size:16px;min-height:44px}#view-motion input[type=file]{font-size:12px}.motion-layer-toolbar .button{min-height:40px}.motion-actions .button{flex:1;justify-content:center;min-height:44px}.motion-stage-wrap{padding:12px}.motion-preview-title{align-items:start}.motion-preview-title h2{font-size:17px}}
/* The floating production queue owns a desktop rail while expanded. Keep the
   whole editor, including its save bar and preview, outside that rail. */
#view-motion{container:motion-workspace / inline-size}
@media(min-width:761px){
 body:has(#view-motion:not([hidden])):has(#queue-dock:not([hidden]).is-expanded){--motion-queue-rail:clamp(230px,calc(100vw - 800px),350px)}
 body:has(#queue-dock:not([hidden]).is-expanded) #view-motion{width:calc(100% - var(--motion-queue-rail));margin-right:var(--motion-queue-rail)}
 body:has(#view-motion:not([hidden])) #queue-dock:not([hidden]).is-expanded{width:calc(var(--motion-queue-rail) - 22px)}
}
@container motion-workspace (max-width:900px){
 .motion-layout{grid-template-columns:minmax(0,1fr)!important}
 .motion-preview-panel{position:static!important;top:auto}
 .motion-document-bar{grid-template-columns:minmax(0,1fr);gap:12px}
 .motion-document-controls{justify-items:start}
 .motion-document-controls>.field-help{text-align:left}
 .motion-document-controls .button-row{justify-content:flex-start}
}
@container motion-workspace (max-width:420px){
 .motion-settings,.motion-animation-controls{grid-template-columns:minmax(0,1fr)}
 .motion-layer-heading{flex-wrap:wrap}
 .motion-layer-heading h3{flex:1;min-width:110px}
 .motion-layer-order{flex:1;justify-content:flex-end}
 .page-heading{flex-wrap:wrap;align-items:flex-start}
 .page-heading>.button{max-width:100%;white-space:normal}
 .motion-track-row{flex-wrap:wrap}
}
@media(max-width:480px){
 .motion-layer-heading h3{flex-basis:100%}
 .motion-layer-order{flex:1 0 100%;justify-content:flex-start;flex-wrap:wrap}
 .motion-layer-order .button,.motion-audio-card .motion-layer-heading .button{flex:0 0 auto;width:auto;min-width:44px;white-space:nowrap;overflow-wrap:normal;word-break:normal}
}