/* Grouped Imagery cards; workspace columns and rail scroll bounds are shared
   studio-toolbar / inspector-scroll responsibilities. Other modes stay flat. */
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true]{min-width:0;padding:16px 12px;border:var(--studio-panel-border,1px solid var(--ui-border,#d4d5d7));border-radius:18px;background:var(--ui-panel,#fff);color:var(--ui-text,#090909)}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true]>.section-line{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:0 4px 16px;border:0}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true]>.section-line>span:first-child{display:flex;align-items:baseline;gap:8px;font-size:0;line-height:1}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .motion-library-separator{display:none}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] :is(#motion-library-title,.studio-library-title){font-size:20px;line-height:1.2;letter-spacing:-.025em}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] :is(#treatment-count,.studio-library-count){font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--ui-muted,#636569)}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .library-status{display:flex;align-items:flex-start;flex-direction:column;gap:4px;margin:0;font-size:11px;line-height:1.4;text-align:left;color:var(--ui-muted,#636569)}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] #library-preview-note{font-size:11px;line-height:1.4;color:var(--ui-muted,#636569)}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .library-status:not(:has(>:not([hidden]))){display:none}
:is(#motion-library,.studio-treatment-library)[data-library-grouped=true] #effects{display:block;min-width:0;margin:0}
.motion-library-group{min-width:0;border-top:1px solid var(--ui-border,#d4d5d7)}
.motion-library-group>.motion-library-group-heading{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 4px;margin:0;font-weight:400;cursor:default;color:var(--ui-text,#090909);font-size:13px;line-height:1.35}
.motion-library-group-title{flex:1;min-width:0}
.motion-library-group-count{font-size:11px;font-variant-numeric:tabular-nums;color:var(--ui-muted,#636569)}
.motion-library-group>.motion-library-group-heading:focus-visible{outline:2px solid var(--ui-text,#090909);outline-offset:-2px;border-radius:4px}
.motion-library-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px 6px;min-width:0;padding:0 0 14px}
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card{display:flex;flex-direction:column;align-self:start;min-width:0;gap:7px;padding:6px;margin:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ui-text,#090909)}
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card>.effect-media{order:1;border:0;border-radius:6px;outline:none;width:100%;margin:0;aspect-ratio:4/5}
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card>.studio-card-title{order:2;min-width:0;margin:0;padding:0;font-size:12px;line-height:1.35;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;color:var(--ui-text,#090909)}
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card[aria-pressed=true]{background:var(--ui-raised,#f7f8f9);border-color:var(--ui-border,#d4d5d7);outline:none}
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card:not(:disabled):hover{background:var(--ui-raised,#f7f8f9);color:var(--ui-text,#090909);border-color:var(--ui-border,#d4d5d7)}
html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card:focus-visible{outline:2px solid var(--ui-text,#090909);outline-offset:-2px}
html body.site-design .motion-library-drawer{position:fixed;inset:12px auto 12px 12px;margin:0;padding:20px;max-width:440px;width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;scroll-padding:12px;background:var(--ui-panel,#fff);color:var(--ui-text,#090909);border:var(--studio-panel-border,1px solid var(--ui-border,#d4d5d7));border-radius:20px}
html body.site-design .motion-library-drawer :is(#motion-library,.studio-treatment-library)[data-library-grouped=true]{padding:0;border:0;border-radius:0;background:transparent}
.motion-library-drawer :is(#motion-library,.studio-treatment-library)[data-library-grouped=true]>.section-line{padding-right:52px}
html body.site-design .motion-library-close{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--ui-border,#d4d5d7);border-radius:999px;background:var(--ui-raised,#f7f8f9);color:var(--ui-text,#090909);font-size:28px;line-height:1}
.motion-library-close[hidden]{display:none!important}
@media(max-width:480px){html body.site-design .motion-library-drawer{padding:16px}.motion-library-group-grid{gap:14px 8px}.motion-library-group>.motion-library-group-heading{font-size:14px}html body.site-design :is(#motion-library,.studio-treatment-library)[data-library-grouped=true] .effect-card>.studio-card-title{font-size:13px}}

/* Prepared examples and local project snapshots remain plain idle images. */
.effect-media>.imagery-template-preview{display:block;width:100%;height:100%;object-fit:cover;background:#e4e5e6}

/* A single temporary hover surface covers the lightweight idle template. */
.effect-media>canvas.treatment-hover-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* Reserve the header line; updating never shifts cards during scrolling. */
#motion-library[data-library-grouped=true]>.section-line>span:first-child{width:100%}
#library-preview-status{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.4;color:var(--ui-muted,#636569)}
.effect-media[data-poster-state=pending],.effect-media[data-poster-state=failed]{background:var(--ui-raised,#e4e5e6)}
.effect-media[data-poster-state=pending]>.imagery-template-preview,.effect-media[data-poster-state=failed]>.imagery-template-preview{visibility:hidden}