/* Setara media library — Frame.io V4 project view.
   One 44px toolbar row, grouped sections ("N Folders" / "N Assets"), folder cards with a tab and a split preview,
   16:9 asset cards, and a floating selection pill. No headings, no count text above the content.
   Every rule is scoped under .workspace-media or .wm-preview-dialog (specificity ≥ 0,2,0) so the sheet is
   independent of stylesheet order. Tokens and ds-* components come from design-system.css. */
.workspace-media{container-type:inline-size;container-name:wm;--wm-tile-min:220px;--wm-card:color-mix(in srgb,var(--ds-bg-elevated) 94%,var(--brand-paper-lit));--wm-card-hover:color-mix(in srgb,var(--ds-bg-elevated) 88%,var(--brand-paper-lit));--wm-well:color-mix(in srgb,var(--ds-bg-deep) 70%,var(--brand-ink-deep));--wm-list-columns:24px 64px minmax(160px,1fr) 130px 84px 120px 128px 30px;color:var(--ds-fg);min-width:0;font-size:var(--ds-text-md)}
.workspace-media .wm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Path row: compact, only inside a folder (the shell's top bar carries the page breadcrumb) ---------- */
.workspace-media .wm-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0;min-width:0;max-width:100%;min-height:24px;margin:0 0 2px;font-size:var(--ds-text-sm);color:var(--ds-muted)}
.workspace-media .wm-breadcrumbs[hidden],.workspace-media .wm-breadcrumbs.is-root{display:none}
.workspace-media .wm-crumb-item{display:inline-flex;align-items:center;min-width:0}
.workspace-media .wm-crumb-item.is-ellipsis{display:none}
.workspace-media .wm-crumb-sep{flex:none;padding:0 4px;color:var(--ds-faint);user-select:none}
.workspace-media .wm-breadcrumbs .wm-crumb{display:inline-block;min-height:0;min-width:0;padding:0 5px;background:transparent;border:0;border-radius:var(--ds-radius-control);box-shadow:none;color:var(--ds-muted);font-size:var(--ds-text-sm);font-weight:500;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle}
.workspace-media .wm-breadcrumbs .wm-crumb:first-child{margin-left:-5px}
.workspace-media .wm-breadcrumbs button.wm-crumb:hover:not(:disabled),.workspace-media .wm-breadcrumbs button.wm-crumb:active:not(:disabled){background:var(--ds-surface-hover);border-color:transparent;color:var(--ds-fg)}
.workspace-media .wm-breadcrumbs .wm-crumb[aria-current=page]{color:var(--ds-fg)}
.workspace-media .wm-breadcrumbs .wm-crumb-ellipsis{padding:0 6px;letter-spacing:.08em}
.workspace-media .wm-breadcrumbs .wm-crumb-ellipsis[aria-expanded=true]{background:var(--ds-surface-active);color:var(--ds-fg)}

/* ---------- Toolbar: one 44px row. Right edge reserved for the shell's Share + "•••" ---------- */
.workspace-media .wm-toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:0 0 6px;padding:0 240px 0 0}
.workspace-media .wm-toolbar-start{display:flex;align-items:center;gap:2px;min-width:0;flex-wrap:wrap}
.workspace-media .wm-toolbar-end{display:flex;align-items:center;gap:2px;flex:none}
.workspace-media .wm-tool-group{position:relative;display:inline-flex;align-items:center}
.workspace-media .wm-tool{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 8px 0 7px;background:transparent;border:1px solid transparent;border-radius:var(--ds-radius-control);box-shadow:none;color:var(--ds-muted);font-size:12.5px;font-weight:500;white-space:nowrap}
.workspace-media .wm-tool > svg{width:15px;height:15px;color:var(--ds-subtle);flex:none}
.workspace-media .wm-tool > .wm-tool-caret{width:12px;height:12px;margin-left:-2px;color:var(--ds-faint)}
.workspace-media .wm-tool:hover:not(:disabled),.workspace-media .wm-tool[aria-expanded=true]{background:var(--ds-surface-hover);border-color:transparent;color:var(--ds-fg);box-shadow:none}
.workspace-media .wm-tool:hover:not(:disabled) > svg,.workspace-media .wm-tool[aria-expanded=true] > svg{color:var(--ds-muted)}
.workspace-media .wm-tool:active:not(:disabled){background:var(--ds-surface-active);transform:none}
.workspace-media .wm-tool-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.workspace-media .wm-tool-icon{color:var(--ds-muted);background:transparent;border-color:transparent;box-shadow:none}
.workspace-media .wm-tool-icon > svg{width:15px;height:15px}
.workspace-media .wm-tool-icon.is-active,.workspace-media .wm-tool-icon[aria-expanded=true]{background:var(--ds-surface-active);color:var(--ds-fg)}
.workspace-media .wm-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:200px}
.workspace-media .wm-menu button{font-size:var(--ds-text-sm);gap:8px}
.workspace-media .wm-menu .wm-menu-check{opacity:0}
.workspace-media .wm-menu button[aria-checked=true] .wm-menu-check{opacity:1;color:var(--ds-accent-text)}
.workspace-media .wm-menu button[aria-checked=true]{color:var(--ds-fg)}
.workspace-media .wm-filters button[data-filter=folders] .wm-menu-check{opacity:1;color:var(--ds-muted)}
.workspace-media .wm-filters button[data-filter=folders][aria-checked=true] .wm-menu-check{color:var(--ds-accent-text)}
.workspace-media .wm-menu-count{margin-left:auto;padding-left:12px;color:var(--ds-subtle);font-size:var(--ds-text-xs);font-variant-numeric:tabular-nums}
.workspace-media .wm-menu-count:empty{display:none}
.workspace-media .wm-search{position:relative;display:flex;align-items:center;margin:0 2px;width:220px;max-width:100%;color:var(--ds-subtle);animation:ds-rise-in var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-search[hidden]{display:none}
.workspace-media .wm-search > svg{position:absolute;left:9px;width:14px;height:14px;pointer-events:none}
.workspace-media .wm-search input{width:100%;min-height:30px;height:30px;padding:0 10px 0 29px;font-size:var(--ds-text-sm)}
.workspace-media .wm-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:12px;height:12px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.workspace-media .wm-refresh > svg{transition:transform var(--ds-base) var(--ds-ease)}
.workspace-media .wm-refresh.is-busy > svg{animation:ds-spin .9s linear infinite}

/* ---------- Notices ---------- */
.workspace-media .wm-error{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;margin:0 0 12px;border:1px solid rgba(4,12,90,.3);border-radius:var(--ds-radius-control);background:var(--ds-danger-soft);color:var(--ds-danger-text);font-size:var(--ds-text-sm);line-height:1.5}
.workspace-media .wm-error[data-wm-error-kind=warning]{border-color:rgba(4,12,90,.3);background:var(--ds-warning-soft);color:var(--ds-warning-text)}
.workspace-media .wm-error[hidden]{display:none}

/* ---------- Sections: "☐ ⌄ N Folders" / "☐ ⌄ N Assets · 2:27" then the cards ---------- */
.workspace-media .wm-collection{min-height:160px;display:flex;flex-direction:column;gap:18px}
.workspace-media .wm-group{min-width:0}
.workspace-media .wm-group-head{display:flex;align-items:center;gap:2px;min-height:28px;margin:0 0 8px;padding:0 0 0 2px;color:var(--ds-muted);font-size:var(--ds-text-sm)}
.workspace-media .wm-group-check{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0;padding:0;cursor:pointer}
.workspace-media .wm-group-check input{width:14px;height:14px;margin:0;accent-color:var(--ds-accent-solid);cursor:pointer}
.workspace-media .wm-group-check input:disabled{opacity:.4;cursor:not-allowed}
.workspace-media .wm-group-toggle{width:22px;height:22px;min-height:22px;padding:0;background:transparent;border-color:transparent;box-shadow:none;color:var(--ds-subtle);border-radius:4px}
.workspace-media .wm-group-toggle > svg{width:14px;height:14px;transition:transform var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-group-toggle:hover:not(:disabled){background:var(--ds-surface-hover);border-color:transparent;color:var(--ds-fg);box-shadow:none}
.workspace-media .wm-group.is-collapsed .wm-group-toggle > svg{transform:rotate(-90deg)}
.workspace-media .wm-group.is-collapsed .wm-group-items{display:none}
.workspace-media .wm-group-count{display:inline-flex;align-items:center;gap:6px;padding-left:4px;font-size:var(--ds-text-sm);font-weight:500;color:var(--ds-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.workspace-media .wm-group-sep{color:var(--ds-faint)}
.workspace-media .wm-group-detail{font-weight:400;color:var(--ds-subtle)}
.workspace-media .wm-grid .wm-group-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--wm-tile-min),1fr));gap:14px;align-content:start}
.workspace-media .wm-grid .wm-group.is-folders .wm-group-items{padding-top:6px}

/* ---------- Asset cards: 10px card, 6px inner 16:9 well, chip top-right, checkbox on hover, name · meta · "•••" ---------- */
.workspace-media .wm-tile,.workspace-media .wm-folder-card{position:relative;min-width:0;border-radius:var(--ds-radius);scroll-margin-top:20px}
.workspace-media .wm-tile{padding:6px 6px 0;background:var(--wm-card);border:var(--ds-hair) solid var(--ds-border);box-shadow:none;transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-tile::before{display:none}
.workspace-media .wm-tile:hover{background:var(--wm-card-hover);border-color:var(--ds-border-strong);box-shadow:0 4px 14px rgba(0,0,0,.28);transform:translateY(-2px)}
.workspace-media .wm-tile.is-selected{border-color:var(--ds-border-accent);background:color-mix(in srgb,var(--ds-accent) 7%,var(--wm-card));box-shadow:0 0 0 1px var(--ds-border-accent)}
.workspace-media .wm-tile:has(.wm-preview:focus-visible),.workspace-media .wm-folder-card:has(.wm-folder:focus-visible){box-shadow:var(--ds-focus);border-color:var(--ds-accent)}
.workspace-media .wm-checkbox{cursor:pointer;margin:0;padding:0;line-height:1;top:12px;left:12px;border-radius:5px}
.workspace-media .wm-collection:has(.is-selected) .wm-checkbox{opacity:1}
.workspace-media .wm-checkbox input{accent-color:var(--ds-accent-solid);cursor:pointer;margin:0}
.workspace-media .wm-checkbox input:disabled{cursor:not-allowed;opacity:.5}
.workspace-media .wm-badges{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:4px;pointer-events:none;max-width:calc(100% - 24px)}
.workspace-media .wm-badges .ds-chip{min-height:18px;padding:0 6px;border-radius:4px;background:rgba(0,0,0,.62);border-color:rgba(255,255,255,.12);color:var(--ds-fg);font-size:var(--ds-text-xs)}
.workspace-media .wm-badges .ds-chip.is-warning + .wm-kind{display:none}
.workspace-media .wm-badges .ds-chip.is-warning{background:rgba(4,12,90,.22);border-color:rgba(4,12,90,.4);color:var(--ds-warning-text)}
.workspace-media .wm-preview{display:block;position:relative;width:100%;min-height:0;aspect-ratio:16/9;padding:0;margin:0;border:0;border-radius:var(--ds-radius-control);background:var(--wm-well);box-shadow:none;overflow:hidden;cursor:pointer;color:inherit}
.workspace-media .wm-preview:hover:not(:disabled),.workspace-media .wm-preview:active:not(:disabled){background:var(--wm-well);border-color:transparent;transform:none}
.workspace-media .wm-preview:focus-visible{outline:none;box-shadow:none}
.workspace-media .wm-preview > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity var(--ds-base) var(--ds-ease)}
.workspace-media .wm-preview > img.is-loading{opacity:0}
.workspace-media .wm-preview::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.14);opacity:0;transition:opacity var(--ds-fast) var(--ds-ease);pointer-events:none}
.workspace-media .wm-tile:hover .wm-preview::after{opacity:1}
.workspace-media .wm-play{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.22);color:var(--brand-paper-lit);opacity:0;transition:opacity var(--ds-fast) var(--ds-ease);pointer-events:none}
.workspace-media .wm-play > svg{width:15px;height:15px;margin-left:2px}
.workspace-media .wm-tile:hover .wm-play,.workspace-media .wm-tile:focus-within .wm-play{opacity:1}
.workspace-media .wm-duration{z-index:1;border-radius:4px}
.workspace-media .wm-fallback{display:none;z-index:1;border-radius:inherit}
.workspace-media .wm-fallback > svg{width:22px;height:22px}
.workspace-media .wm-tile.is-missing .wm-fallback,.workspace-media .wm-tile.is-pending .wm-fallback{display:flex}
.workspace-media .wm-tile.is-missing .wm-preview > img,.workspace-media .wm-tile.is-pending .wm-preview > img{visibility:hidden}
.workspace-media .wm-tile.is-missing .wm-play,.workspace-media .wm-tile.is-pending .wm-play,.workspace-media .wm-tile.is-missing .wm-preview::after{display:none}
.workspace-media .wm-file-details{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px;row-gap:1px;align-items:center;padding:8px 2px 8px 4px;background:transparent}
.workspace-media .wm-file-name{grid-column:1;grid-row:1;display:block;width:100%;min-height:0;padding:0;margin:0;text-align:left;background:transparent;border:0;border-radius:3px;box-shadow:none;color:var(--ds-fg);font-size:var(--ds-text-md);font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.workspace-media .wm-file-name:hover:not(:disabled),.workspace-media .wm-file-name:active:not(:disabled){background:transparent;border-color:transparent;box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:2px}
.workspace-media .wm-file-meta{grid-column:1;grid-row:2;font-size:var(--ds-text-xs);color:var(--ds-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.workspace-media .wm-more{opacity:.55;transition:opacity var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-file-details .wm-more{grid-column:2;grid-row:1/span 2}
.workspace-media .wm-tile:hover .wm-more,.workspace-media .wm-tile:focus-within .wm-more,.workspace-media .wm-folder-card:hover .wm-more,.workspace-media .wm-folder-card:focus-within .wm-more,.workspace-media .wm-more[aria-expanded=true],.workspace-media .wm-more:focus-visible{opacity:1}
.workspace-media .wm-col{display:none}

/* ---------- Folder cards: tab on the top-left edge, split preview (1 large + 2 stacked), name · count · "•••" ---------- */
.workspace-media .wm-folder-card{display:flex;flex-direction:column;padding-top:6px;overflow:visible;background:transparent;border:0;box-shadow:none;border-radius:0 var(--ds-radius) var(--ds-radius) var(--ds-radius)}
.workspace-media .wm-folder-tab{position:absolute;top:0;left:0;z-index:2;width:56px;height:8px;border:var(--ds-hair) solid var(--ds-border);border-bottom:0;border-radius:6px 8px 0 0;background:var(--wm-card);pointer-events:none;transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-folder-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:inherit}
.workspace-media .wm-folder-card .wm-folder{position:relative;z-index:1;border-top-left-radius:0;display:flex;flex:1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;width:100%;min-height:0;padding:6px 6px 0;border:var(--ds-hair) solid var(--ds-border);border-radius:0 var(--ds-radius) var(--ds-radius) var(--ds-radius);background:var(--wm-card);box-shadow:none;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-folder-card .wm-folder:hover:not(:disabled),.workspace-media .wm-folder-card .wm-folder:active:not(:disabled){background:var(--wm-card-hover);border-color:var(--ds-border-strong);box-shadow:0 4px 14px rgba(0,0,0,.28);transform:none}
.workspace-media .wm-folder-card:hover{transform:translateY(-2px)}
.workspace-media .wm-folder-card{transition:transform var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-folder-card:hover .wm-folder-tab{background:var(--wm-card-hover);border-color:var(--ds-border-strong)}
.workspace-media .wm-folder-card .wm-folder:focus-visible{outline:none;box-shadow:none}
.workspace-media .wm-folder-card.is-selected .wm-folder,.workspace-media .wm-folder-card.is-selected .wm-folder-tab{border-color:var(--ds-border-accent);background:color-mix(in srgb,var(--ds-accent) 7%,var(--wm-card))}
.workspace-media .wm-folder-card.is-selected .wm-folder{box-shadow:0 0 0 1px var(--ds-border-accent)}
.workspace-media .wm-folder-card:has(.wm-folder:focus-visible) .wm-folder{box-shadow:var(--ds-focus);border-color:var(--ds-accent)}
.workspace-media .wm-folder-card:has(.wm-folder:focus-visible){box-shadow:none;border-color:transparent}
.workspace-media .wm-folder-covers{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:4px;aspect-ratio:16/9;padding:0;overflow:hidden}
.workspace-media .wm-cover-stack{display:grid;grid-template-rows:1fr 1fr;gap:4px;min-height:0}
.workspace-media .wm-cover{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border-radius:var(--ds-radius-control);background:var(--wm-well);overflow:hidden;color:var(--ds-faint)}
.workspace-media .wm-cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.workspace-media .wm-cover > img.is-missing{display:none}
.workspace-media .wm-cover > svg{width:22px;height:22px;flex:none}
.workspace-media .wm-cover-stack .wm-cover > svg{width:16px;height:16px}
.workspace-media .wm-cover:not(:has(> img)){background:var(--ds-surface-active);color:var(--ds-subtle)}
.workspace-media .wm-folder-card .wm-checkbox{top:13px;left:12px}
.workspace-media .wm-folder-card .ds-card-check{opacity:0}
.workspace-media .wm-folder-card:hover .ds-card-check,.workspace-media .wm-folder-card:focus-within .ds-card-check,.workspace-media .wm-folder-card.is-selected .ds-card-check,.workspace-media .wm-folder-card .ds-card-check:has(input:checked){opacity:1}
.workspace-media .wm-folder-details{display:grid;grid-template-columns:minmax(0,1fr);row-gap:1px;padding:8px 32px 8px 4px;background:transparent}
.workspace-media .wm-folder-details strong{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ds-fg);font-size:var(--ds-text-md);font-weight:500;line-height:1.35}
.workspace-media .wm-folder-details strong > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-media .wm-folder-count{font-size:var(--ds-text-xs);color:var(--ds-muted);font-variant-numeric:tabular-nums}
.workspace-media .wm-folder-more{position:absolute;right:8px;bottom:9px;z-index:2}
.workspace-media .wm-folder-share{position:absolute;top:13px;right:12px;z-index:2;width:28px;height:28px;min-height:28px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.2);color:var(--brand-paper-lit);opacity:0;transition:opacity var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-folder-share > svg{width:15px;height:15px}
.workspace-media .wm-folder-card:hover .wm-folder-share,.workspace-media .wm-folder-card:focus-within .wm-folder-share,.workspace-media .wm-folder-card.is-selected .wm-folder-share{opacity:1}
.workspace-media .wm-folder-card:hover .wm-folder-share:disabled,.workspace-media .wm-folder-card:focus-within .wm-folder-share:disabled{opacity:.35}
.workspace-media .wm-folder-share:hover:not(:disabled){background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.35);color:var(--brand-paper-lit)}

/* ---------- List layout (Name / Type / Duration / Size / Status), one box per section ---------- */
.workspace-media .wm-list .wm-group-items{display:flex;flex-direction:column;gap:0;border:var(--ds-hair) solid var(--ds-border);border-radius:var(--ds-radius);background:var(--wm-card);overflow:hidden}
.workspace-media .wm-list-heading{display:grid;grid-template-columns:var(--wm-list-columns);gap:12px;align-items:center;min-height:32px;padding:0 12px;border-bottom:var(--ds-hair) solid var(--ds-border);background:var(--ds-surface);color:var(--ds-subtle);font-size:var(--ds-text-xs);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.workspace-media .wm-list-heading > span:nth-child(1){grid-column:3}
.workspace-media .wm-list-heading > span:nth-child(2){grid-column:4}
.workspace-media .wm-list-heading > span:nth-child(3){grid-column:5}
.workspace-media .wm-list-heading > span:nth-child(4){grid-column:6}
.workspace-media .wm-list-heading > span:nth-child(5){grid-column:7}
.workspace-media .wm-list .wm-tile,.workspace-media .wm-list .wm-folder-card{display:grid;grid-template-columns:var(--wm-list-columns);gap:12px;align-items:center;min-height:50px;padding:6px 12px;border:0;border-bottom:var(--ds-hair) solid var(--ds-border);border-radius:0;background:transparent;box-shadow:none;transform:none;transition:background-color var(--ds-fast) var(--ds-ease);overflow:hidden}
.workspace-media .wm-list .wm-group-items > :last-child{border-bottom:0}
.workspace-media .wm-list .wm-tile:hover,.workspace-media .wm-list .wm-folder-card:hover{background:var(--ds-surface-hover);border-color:var(--ds-border);box-shadow:none;transform:none}
.workspace-media .wm-list .wm-tile.is-selected,.workspace-media .wm-list .wm-folder-card.is-selected{background:var(--ds-accent-soft);border-color:var(--ds-border);box-shadow:inset 2px 0 var(--ds-accent)}
.workspace-media .wm-list .wm-tile:has(.wm-preview:focus-visible),.workspace-media .wm-list .wm-folder-card:has(.wm-folder:focus-visible){box-shadow:inset 0 0 0 2px var(--ds-accent)}
.workspace-media .wm-list .wm-checkbox{position:static;grid-column:1;grid-row:1;width:auto;height:auto;background:transparent;border:0;opacity:1}
.workspace-media .wm-list .wm-badges{display:none}
.workspace-media .wm-list .wm-preview{grid-column:2;grid-row:1;width:64px;aspect-ratio:16/9;border-radius:4px}
.workspace-media .wm-list .wm-preview::after,.workspace-media .wm-list .wm-play,.workspace-media .wm-list .wm-duration{display:none}
.workspace-media .wm-list .wm-fallback > svg{width:16px;height:16px}
.workspace-media .wm-list .wm-fallback > span{display:none}
.workspace-media .wm-list .wm-file-details{display:contents}
.workspace-media .wm-list .wm-file-name{grid-column:3;grid-row:1}
.workspace-media .wm-list .wm-file-meta{display:none}
.workspace-media .wm-list .wm-file-details .wm-more{grid-column:8;grid-row:1}
.workspace-media .wm-list .wm-col{display:block;grid-row:1;min-width:0;color:var(--ds-muted);font-size:var(--ds-text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.workspace-media .wm-list .wm-file-kind{grid-column:4}
.workspace-media .wm-list .wm-list-duration{grid-column:5}
.workspace-media .wm-list .wm-file-dimensions{grid-column:6}
.workspace-media .wm-list .wm-file-status{grid-column:7;overflow:visible}
.workspace-media .wm-list .wm-folder-card{padding-top:6px}
.workspace-media .wm-list .wm-folder-tab{display:none}
.workspace-media .wm-list .wm-folder-card .wm-folder{grid-column:2/span 6;grid-row:1;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.workspace-media .wm-list .wm-folder-card .wm-folder:hover:not(:disabled){background:transparent;border-color:transparent;box-shadow:none}
.workspace-media .wm-list .wm-folder-card.is-selected .wm-folder{box-shadow:none;border-color:transparent;background:transparent}
.workspace-media .wm-list .wm-folder-covers{width:64px;aspect-ratio:16/9;gap:1px;border-radius:4px}
.workspace-media .wm-list .wm-cover{border-radius:2px}
.workspace-media .wm-list .wm-cover > svg{width:14px;height:14px}
.workspace-media .wm-list .wm-cover-stack .wm-cover > svg{width:9px;height:9px}
.workspace-media .wm-list .wm-folder-details{padding:0;background:transparent;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
.workspace-media .wm-list .wm-folder-details strong{grid-column:1}
.workspace-media .wm-list .wm-folder-count{grid-column:2;grid-row:1}
.workspace-media .wm-list .wm-folder-share{position:static;grid-column:8;grid-row:1;opacity:1;background:transparent;border-color:transparent;color:var(--ds-muted)}
.workspace-media .wm-list .wm-folder-share:hover:not(:disabled){background:var(--ds-surface-active);color:var(--ds-fg);border-color:transparent}
.workspace-media .wm-list .wm-folder-more{display:none}
.workspace-media .wm-list .wm-empty{grid-column:auto;border:0;border-radius:0}

/* ---------- Skeletons / empty ---------- */
.workspace-media .wm-grid .wm-skeleton{display:none}
.workspace-media .wm-collection[aria-busy=true]{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--wm-tile-min),1fr));gap:14px;align-content:start}
.workspace-media .wm-collection[aria-busy=true] .wm-skeleton{display:block}
.workspace-media .wm-skeleton{padding:6px;border:var(--ds-hair) solid var(--ds-border);border-radius:var(--ds-radius);background:var(--wm-card);overflow:hidden}
.workspace-media .wm-skeleton-thumb{aspect-ratio:16/9;border-radius:var(--ds-radius-control)}
.workspace-media .wm-skeleton-lines{display:grid;gap:7px;padding:11px 4px 6px}
.workspace-media .wm-skeleton-line{height:10px;width:68%;border-radius:4px}
.workspace-media .wm-skeleton-line.is-short{height:8px;width:42%}
.workspace-media .wm-list[aria-busy=true]{display:flex;flex-direction:column;gap:0;border:var(--ds-hair) solid var(--ds-border);border-radius:var(--ds-radius);background:var(--wm-card);overflow:hidden}
.workspace-media .wm-list .wm-skeleton{display:grid;grid-template-columns:24px 64px minmax(0,1fr);gap:12px;align-items:center;min-height:50px;padding:6px 12px;border:0;border-bottom:var(--ds-hair) solid var(--ds-border);border-radius:0;background:transparent}
.workspace-media .wm-list .wm-skeleton-thumb{grid-column:2;width:64px;border-radius:4px}
.workspace-media .wm-list .wm-skeleton-lines{grid-column:3;padding:0;max-width:360px}
.workspace-media .wm-empty{grid-column:1/-1;min-height:280px;border:1px dashed var(--ds-border);border-radius:var(--ds-radius)}
.workspace-media .wm-empty strong{margin:0;font-size:var(--ds-text-md);font-weight:500;color:var(--ds-fg)}
.workspace-media .wm-empty button{margin-top:10px}

/* ---------- Selection pill: floats at the bottom while something is selected ("N selected · Share selected · Clear") ---------- */
.workspace-media .wm-selection-bar{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:center;width:100%;margin:16px 0 0;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease),visibility 0s linear var(--ds-base)}
.workspace-media .wm-selection-bar.has-selection{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.workspace-media .wm-selection-pill{display:flex;align-items:center;gap:4px;min-height:44px;padding:6px 6px 6px 16px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-radius-pill);background:var(--ds-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--ds-shadow-pop);pointer-events:auto}
.workspace-media .wm-selection-count{padding-right:8px;font-size:var(--ds-text-sm);color:var(--ds-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.workspace-media .wm-selection-count strong{color:var(--ds-fg);font-weight:600}
.workspace-media .wm-link{min-height:30px;padding:0 10px;background:transparent;border-color:transparent;box-shadow:none;color:var(--ds-muted);font-size:var(--ds-text-sm);font-weight:500;border-radius:var(--ds-radius-pill)}
.workspace-media .wm-link:hover:not(:disabled){background:var(--ds-surface-hover);border-color:transparent;color:var(--ds-fg)}
.workspace-media .wm-share{gap:6px;white-space:nowrap;border-radius:var(--ds-radius-pill);min-height:32px;padding:0 14px}
.workspace-media .wm-share:disabled{background:var(--ds-control);border-color:var(--ds-border);color:var(--ds-subtle);box-shadow:none;opacity:1}

/* ---------- Focused viewer (lives on <body>) ---------- */
dialog.wm-preview-dialog{box-sizing:border-box;width:min(1280px,96vw);max-width:96vw;height:min(920px,92dvh);max-height:92dvh;margin:auto;padding:0;border:var(--ds-hair) solid var(--ds-border);border-radius:var(--ds-radius-dialog);background:var(--ds-bg-elevated);color:var(--ds-fg);overflow:hidden;box-shadow:var(--ds-shadow-dialog);font:var(--ds-text-md)/1.45 var(--ds-font);overscroll-behavior:contain}
dialog.wm-preview-dialog[open]{display:flex;flex-direction:column}
dialog.wm-preview-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(2px)}
.wm-preview-dialog .wm-dialog-header{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px 6px 16px;border-bottom:var(--ds-hair) solid var(--ds-border);flex:none}
.wm-preview-dialog .wm-dialog-kind{flex:none}
.wm-preview-dialog .wm-dialog-title{display:flex;flex:1;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.wm-preview-dialog .wm-dialog-name{flex:none;min-width:0;margin:0;font-size:var(--ds-text-md);font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-preview-dialog .wm-dialog-meta{display:block;min-width:0;margin:0;color:var(--ds-muted);font-family:var(--ds-mono);font-size:var(--ds-text-xs);line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-preview-dialog .wm-dialog-meta > span{color:var(--ds-subtle);margin:0 5px}
.wm-preview-dialog .wm-dialog-meta > .wm-review-note{margin:0;color:var(--ds-warning-text);font-family:var(--ds-font);vertical-align:middle}
.wm-preview-dialog .wm-dialog-tools{display:flex;align-items:center;gap:2px;flex:none}
.wm-preview-dialog .wm-dialog-tools .wm-share{margin-right:6px}
.wm-preview-dialog .wm-dialog-player{position:relative;display:flex;flex:1;flex-direction:column;min-height:0;background:var(--ds-stage)}
.wm-preview-dialog .wm-dialog-player:fullscreen{background:var(--ds-stage)}
.wm-preview-dialog .wm-dialog-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ds-stage);overscroll-behavior:contain}
.wm-preview-dialog .wm-dialog-stage video,.wm-preview-dialog .wm-dialog-stage img{display:block;width:100%;height:100%;object-fit:contain;background:var(--ds-stage)}
.wm-preview-dialog .wm-dialog-stage.is-zoomed{display:block;overflow:auto;cursor:grab}
.wm-preview-dialog .wm-dialog-stage.is-zoomed.is-panning{cursor:grabbing;user-select:none}
.wm-preview-dialog .wm-dialog-stage.is-zoomed img{height:auto;max-width:none;max-height:none;object-fit:initial}
.wm-preview-dialog .wm-transport{flex:none;display:flex;flex-direction:column;background:var(--ds-bg-elevated);border-top:var(--ds-hair) solid var(--ds-border)}
.wm-preview-dialog .wm-scrub{display:flex;align-items:center;height:14px;padding:0 12px}
.wm-preview-dialog .wm-scrub-input{--wm-played:0%;width:100%;height:14px;margin:0;padding:0;min-height:0;border:0;appearance:none;-webkit-appearance:none;background:transparent;box-shadow:none;cursor:pointer;accent-color:var(--ds-accent)}
.wm-preview-dialog .wm-scrub-input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ds-accent) var(--wm-played),rgba(255,255,255,.18) var(--wm-played))}
.wm-preview-dialog .wm-scrub:hover .wm-scrub-input::-webkit-slider-runnable-track{height:6px}
.wm-preview-dialog .wm-scrub-input::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.wm-preview-dialog .wm-scrub-input::-moz-range-progress{height:4px;border-radius:2px;background:var(--ds-accent)}
.wm-preview-dialog .wm-scrub-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:var(--brand-paper-lit);opacity:0;transition:opacity var(--ds-fast) var(--ds-ease)}
.wm-preview-dialog .wm-scrub:hover .wm-scrub-input::-webkit-slider-thumb{margin-top:-3px}
.wm-preview-dialog .wm-scrub:hover .wm-scrub-input::-webkit-slider-thumb,.wm-preview-dialog .wm-scrub-input:focus-visible::-webkit-slider-thumb{opacity:1}
.wm-preview-dialog .wm-scrub-input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--brand-paper-lit)}
/* Keyboard focus on the scrubber: a visible ring around the track (the thumb alone is too small a cue). */
.wm-preview-dialog .wm-scrub-input:focus-visible{outline:none;border-radius:7px;box-shadow:var(--ds-focus)}
.wm-preview-dialog .wm-scrub-input:focus-visible::-webkit-slider-runnable-track{height:6px}
.wm-preview-dialog .wm-scrub-input:focus-visible::-webkit-slider-thumb{margin-top:-3px}
/* One 44px transport bar under the stage: controls left, timecode centre, fullscreen right (zoom tools for images). */
.wm-preview-dialog .wm-transport-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:44px;padding:0 8px}
.wm-preview-dialog .wm-transport.is-image .wm-transport-row{grid-template-columns:auto 1fr auto}
.wm-preview-dialog .wm-transport-group{display:flex;align-items:center;gap:2px;min-width:0}
.wm-preview-dialog .wm-transport-group.is-end{justify-content:flex-end}
.wm-preview-dialog .wm-transport-time{display:flex;align-items:baseline;gap:6px;color:var(--ds-fg);font-family:var(--ds-mono);font-size:var(--ds-text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.wm-preview-dialog .wm-timecode-total{color:var(--ds-subtle)}
.wm-preview-dialog .wm-timecode-total::before{content:"/ "}
.wm-preview-dialog .wm-speed{min-height:26px;padding:0 8px;background:transparent;border-color:transparent;box-shadow:none;color:var(--ds-muted);font-family:var(--ds-mono);font-size:var(--ds-text-xs);font-variant-numeric:tabular-nums}
.wm-preview-dialog .wm-speed:hover:not(:disabled),.wm-preview-dialog .wm-speed[aria-expanded=true]{background:var(--ds-surface-hover);border-color:transparent;color:var(--ds-fg)}
/* Speed menu lives inside the modal player (a body-level popover would sit behind the top layer). */
.wm-preview-dialog .wm-speed-menu{position:absolute;z-index:40;min-width:120px;max-width:200px}
.wm-preview-dialog .wm-speed-menu button{font-family:var(--ds-mono);font-size:var(--ds-text-sm);font-variant-numeric:tabular-nums}
.wm-preview-dialog .wm-speed-menu button[aria-checked=true]{color:var(--ds-fg)}
.wm-preview-dialog .wm-speed-menu button[aria-checked=true] > svg{color:var(--ds-accent-text)}
.wm-preview-dialog .wm-menu-gap{display:inline-block;width:16px;height:16px;flex:none}
.wm-preview-dialog .wm-volume{width:72px;min-height:0;margin:0 4px 0 2px;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--ds-accent)}
.wm-preview-dialog .wm-transport .ds-icon-btn[aria-pressed=true]{color:var(--ds-accent-text);background:var(--ds-accent-soft)}
.wm-preview-dialog .wm-zoom{display:flex;align-items:center;gap:8px;margin:0 0 0 10px;color:var(--ds-muted);font-size:var(--ds-text-xs)}
.wm-preview-dialog .wm-zoom input{width:96px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--ds-accent)}
.wm-preview-dialog .wm-zoom output{min-width:40px;font-family:var(--ds-mono);font-variant-numeric:tabular-nums}
.wm-preview-dialog .wm-share{gap:6px;white-space:nowrap}


/* ---------- Responsive (the toolbar and list columns follow the library's own width so the sidebar state is respected) ---------- */
@media (min-width:1500px){.workspace-media{--wm-tile-min:236px}}
@container wm (max-width:1100px){
  .workspace-media .wm-toolbar{padding-right:200px}
  .workspace-media .wm-search{width:180px}
}
@container wm (max-width:820px){
  .workspace-media .wm-toolbar{padding-right:120px}
  .workspace-media .wm-sort-prefix{display:none}
}
@container wm (max-width:640px){
  .workspace-media .wm-tool > .wm-tool-label{display:none}
  .workspace-media .wm-tool{padding:0 6px}
}
/* List columns track the library's own width (sidebar open or closed), never the viewport. */
@container wm (max-width:860px){.workspace-media .wm-list{--wm-list-columns:24px 60px minmax(120px,1fr) 100px 64px 92px 100px 30px}}
@container wm (max-width:700px){
  .workspace-media .wm-list{--wm-list-columns:24px 56px minmax(120px,1fr) 100px 64px 100px 30px}
  .workspace-media .wm-list-heading > span:nth-child(4),.workspace-media .wm-list .wm-file-dimensions{display:none}
  .workspace-media .wm-list-heading > span:nth-child(5),.workspace-media .wm-list .wm-file-status{grid-column:6}
  .workspace-media .wm-list .wm-file-details .wm-more,.workspace-media .wm-list .wm-folder-share{grid-column:7}
  .workspace-media .wm-list .wm-folder-card .wm-folder{grid-column:2/span 5;grid-template-columns:56px minmax(0,1fr)}
  .workspace-media .wm-list .wm-preview,.workspace-media .wm-list .wm-folder-covers{width:56px}
}
@container wm (max-width:600px){
  .workspace-media .wm-toolbar{padding-right:96px}
  .workspace-media .wm-list{--wm-list-columns:24px 56px minmax(120px,1fr) 70px 30px}
  .workspace-media .wm-list-heading > span:nth-child(2),.workspace-media .wm-list-heading > span:nth-child(4),.workspace-media .wm-list-heading > span:nth-child(5),.workspace-media .wm-list .wm-file-kind,.workspace-media .wm-list .wm-file-dimensions,.workspace-media .wm-list .wm-file-status{display:none}
  .workspace-media .wm-list-heading > span:nth-child(3),.workspace-media .wm-list .wm-list-duration{grid-column:4}
  .workspace-media .wm-list .wm-file-details .wm-more,.workspace-media .wm-list .wm-folder-share{grid-column:5}
  .workspace-media .wm-list .wm-folder-card .wm-folder{grid-column:2/span 3}
}
/* Viewport fallback for engines without container queries. */
@supports not (container-type:inline-size){
  @media (max-width:1100px){.workspace-media{--wm-list-columns:24px 64px minmax(140px,1fr) 110px 70px 100px 110px 30px}}
  @media (max-width:750px){
    .workspace-media{--wm-list-columns:24px 56px minmax(120px,1fr) 70px 30px}
    .workspace-media .wm-toolbar{padding-right:96px}
    .workspace-media .wm-tool > .wm-tool-label{display:none}
    .workspace-media .wm-list-heading > span:nth-child(2),.workspace-media .wm-list-heading > span:nth-child(4),.workspace-media .wm-list-heading > span:nth-child(5),.workspace-media .wm-list .wm-file-kind,.workspace-media .wm-list .wm-file-dimensions,.workspace-media .wm-list .wm-file-status{display:none}
    .workspace-media .wm-list-heading > span:nth-child(3){grid-column:4}
    .workspace-media .wm-list .wm-list-duration{grid-column:4}
    .workspace-media .wm-list .wm-file-details .wm-more,.workspace-media .wm-list .wm-folder-share{grid-column:5}
    .workspace-media .wm-list .wm-folder-card .wm-folder{grid-column:2/span 3;grid-template-columns:56px minmax(0,1fr)}
    .workspace-media .wm-list .wm-preview,.workspace-media .wm-list .wm-folder-covers{width:56px}
  }
}
@media (max-width:750px){
  .workspace-media{--wm-tile-min:170px}
  .workspace-media .wm-grid .wm-group-items,.workspace-media .wm-collection[aria-busy=true]{gap:10px}
  .workspace-media .wm-selection-bar{bottom:8px}
  dialog.wm-preview-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
}
@media (max-width:450px){
  .workspace-media{--wm-tile-min:0px}
  .workspace-media .wm-grid .wm-group-items,.workspace-media .wm-collection[aria-busy=true]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .workspace-media .wm-toolbar-start{gap:0}
  /* The search field takes its own row so the icon row never overflows the reserved edge. */
  .workspace-media .wm-search{order:10;flex:1 0 100%;width:100%;margin:2px 0 6px}
  .workspace-media .wm-tile{padding:4px 4px 0}
  .workspace-media .wm-checkbox{top:10px;left:10px}
  .workspace-media .wm-badges{top:10px;right:10px}
  .workspace-media .wm-badges .wm-kind{display:none}
  .workspace-media .wm-file-details{padding:7px 0 7px 3px}
  /* Middle crumbs collapse into one "…" button (its menu lists the parents); the leaf keeps its full title. */
  .workspace-media .wm-crumb-item.is-collapsible{display:none}
  .workspace-media .wm-crumb-item.is-ellipsis{display:inline-flex}
  .workspace-media .wm-selection-pill{gap:2px;padding:4px 4px 4px 12px;min-height:40px}
  .wm-preview-dialog .wm-dialog-header{padding-left:12px;gap:8px}
  .wm-preview-dialog .wm-dialog-kind{display:none}
  .wm-preview-dialog .wm-dialog-tools .wm-share{width:36px;min-height:36px;padding:0;margin-right:2px;justify-content:center}
  .wm-preview-dialog .wm-dialog-tools .wm-share > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .wm-preview-dialog .wm-transport-row{grid-template-columns:1fr auto;padding:0 4px}
  .wm-preview-dialog .wm-transport.is-video .wm-transport-time{grid-column:1/-1;grid-row:2;justify-content:center;padding-bottom:6px}
  /* Only the volume slider is dropped on phones: the compact speed button stays (Mute covers volume). */
  .wm-preview-dialog .wm-volume{display:none}
}

/* ---------- Coarse pointers: reveal-on-hover controls stay visible; larger hit areas ---------- */
@media (hover:none) and (pointer:coarse){
  .workspace-media .wm-checkbox,.workspace-media .wm-more,.workspace-media .wm-folder-share,.workspace-media .wm-play,.workspace-media .wm-folder-card .ds-card-check{opacity:1}
  .workspace-media .wm-checkbox.ds-card-check{width:36px;height:36px}
  .workspace-media .wm-folder-card:hover .wm-folder-share:disabled{opacity:.35}
  .workspace-media .wm-tool,.workspace-media .wm-link,.workspace-media .wm-group-toggle{min-height:36px}
  .workspace-media .wm-group-check{width:36px;height:36px}
  .workspace-media .wm-breadcrumbs .wm-crumb{line-height:36px}
  .workspace-media .wm-share,.wm-preview-dialog .wm-share{min-height:40px}
  .wm-preview-dialog .wm-transport .ds-icon-btn{width:40px;height:40px;min-height:40px}
}

/* ---------- Content visibility: intrinsic size tracks the 16:9 card ---------- */
@supports (content-visibility:auto){
  .workspace-media .wm-grid .wm-group-items > .wm-tile,.workspace-media .wm-grid .wm-group-items > .wm-folder-card{content-visibility:auto;contain-intrinsic-size:auto 196px}
}

/* ---------- Reduced motion / forced colors ---------- */
@media (prefers-reduced-motion:reduce){
  .workspace-media .wm-selection-bar,.workspace-media .wm-preview > img,.workspace-media .wm-play,.workspace-media .wm-more,.workspace-media .wm-folder-share,.workspace-media .wm-tile,.workspace-media .wm-folder-card,.workspace-media .wm-folder-card .wm-folder,.workspace-media .wm-folder-tab,.workspace-media .wm-group-toggle > svg,.workspace-media .wm-search{transition:none;animation:none}
  .workspace-media .wm-refresh.is-busy > svg{animation:none}
}
@media (forced-colors:active){
  .workspace-media .wm-tile.is-selected,.workspace-media .wm-folder-card.is-selected .wm-folder,.workspace-media .wm-menu button[aria-checked=true]{outline:2px solid Highlight;outline-offset:-2px}
  .workspace-media .wm-checkbox,.workspace-media .wm-more,.workspace-media .wm-folder-share,.workspace-media .wm-play,.workspace-media .wm-folder-card .ds-card-check{opacity:1}
  .workspace-media .wm-badges .ds-chip,.workspace-media .wm-play,.workspace-media .wm-folder-share,.workspace-media .wm-selection-pill,.workspace-media .wm-folder-tab{border:1px solid CanvasText}
  .wm-preview-dialog .wm-scrub-input::-webkit-slider-runnable-track{background:ButtonText}
  .wm-preview-dialog .wm-scrub-input:focus-visible{outline:2px solid Highlight;outline-offset:2px}
}

/* === Frame.io toolbar and section metrics === */
.workspace-media .wm-toolbar{min-height:64px;margin:0 0 8px;padding:16px 240px 16px 0;border-bottom:var(--ds-hair) solid var(--ds-border)}
.workspace-media .wm-tool{min-height:32px;padding:0 8px 0 4px;border-radius:4px;color:var(--ds-fg);font-size:13px;font-weight:402}
.workspace-media .wm-tool > svg{width:16px;height:16px;color:var(--ds-muted)}
.workspace-media .wm-tool .wm-tool-value{color:var(--ds-muted)}
.workspace-media .wm-group-head{min-height:32px;margin:0 0 16px;padding-left:12px;font-size:12px;font-weight:402;color:var(--ds-muted)}
.workspace-media .wm-group + .wm-group{margin-top:32px}
.workspace-media .wm-collection.wm-grid{gap:16px}

/* The top bar already carries the folder path (Frame.io shows one breadcrumb only). */
.workspace-media [data-wm-breadcrumbs]{display:none}
@container wm (max-width: 700px){.workspace-media .wm-toolbar{padding-right:120px;min-height:48px;padding-top:8px;padding-bottom:8px}.workspace-media .wm-toolbar-start{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
@container wm (max-width: 480px){.workspace-media .wm-toolbar{padding-right:96px}}

/* Motion: the first real collection after the skeletons rises in with a short stagger. `wm-enter` is set once by
   renderCollection and dropped at the container's own animationend (its 520 ms hold outlasts the last card), so later
   polls patch cards in place without replaying anything. */
@keyframes wm-hold{from{opacity:.999}to{opacity:1}}
@keyframes wm-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .workspace-media .wm-collection.wm-enter{animation:wm-hold 520ms linear both}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card){animation:wm-card-in 240ms var(--ds-ease) both}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(2){animation-delay:20ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(3){animation-delay:40ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(4){animation-delay:60ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(5){animation-delay:80ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(6){animation-delay:100ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(7){animation-delay:120ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(8){animation-delay:140ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(9){animation-delay:160ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(10){animation-delay:180ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(11){animation-delay:200ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(12){animation-delay:220ms}
  .workspace-media .wm-collection.wm-enter :is(.wm-tile,.wm-folder-card):nth-child(n+13){animation-delay:240ms}
  .workspace-media .wm-preview > img{transition:opacity 260ms var(--ds-ease)}
  .workspace-media .wm-collection[aria-busy=true] .wm-skeleton{animation:ds-fade-in 200ms var(--ds-ease) 120ms both}
  .workspace-media .wm-empty{animation:ds-fade-in 220ms var(--ds-ease) both}
}

/* Folder lip matched to Frame.io's folder card (measured from their light UI): 14px card corners, a low tab about 45%
   wide and 14px tall with a 14px left shoulder, and a short S on the right (10px convex into an 8px concave fillet).
   Tab and body are both translucent, so they meet edge to edge with no overlap: the body's top hairline is drawn by a
   pseudo that starts after the fillet, never underneath the tab. */
.workspace-media .wm-folder-card{padding-top:14px;border-radius:0 14px 14px 14px}
.workspace-media .wm-folder-card .wm-folder{border-top:0;border-radius:0 14px 14px 14px}
.workspace-media .wm-folder-card .wm-folder::before{content:"";position:absolute;top:0;right:0;left:calc(45% + 8px);height:14px;border:var(--ds-hair) solid var(--ds-border);border-width:var(--ds-hair) var(--ds-hair) 0 0;border-top-right-radius:14px;pointer-events:none;transition:border-color var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-folder-card .wm-folder:hover:not(:disabled)::before{border-color:var(--ds-border-strong)}
.workspace-media .wm-folder-card.is-selected .wm-folder::before{border-color:var(--ds-border-accent)}
.workspace-media .wm-folder-tab{width:45%;min-width:64px;height:14px;border-radius:14px 10px 0 0}
.workspace-media .wm-folder-tab::before{content:"";position:absolute;right:-8px;bottom:0;width:8px;height:8px;background:radial-gradient(circle at 100% 0,transparent 7.25px,var(--ds-border) 7.75px,var(--wm-card) 8.25px);transition:background var(--ds-fast) var(--ds-ease)}
.workspace-media .wm-folder-card:hover .wm-folder-tab::before{background:radial-gradient(circle at 100% 0,transparent 7.25px,var(--ds-border-strong) 7.75px,var(--wm-card-hover) 8.25px)}
.workspace-media .wm-folder-card.is-selected .wm-folder-tab::before{background:radial-gradient(circle at 100% 0,transparent 7.25px,var(--ds-border-accent) 7.75px,color-mix(in srgb,var(--ds-accent) 7%,var(--wm-card)) 8.25px)}
.workspace-media .wm-folder-tab::after{display:none}
.workspace-media .wm-list .wm-folder-card{padding-top:6px;border-radius:0}
.workspace-media .wm-list .wm-folder-card .wm-folder::before{display:none}

/* Asset review: one fitted stage with share-link notes alongside it in either producer theme. */
.wm-preview-body{display:flex;flex:1;min-height:0;min-width:0;overflow:hidden}
.wm-preview-body>.wm-dialog-player{min-width:0}
.workspace-media .wm-comment-count{position:absolute;left:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:2px 6px;border-radius:4px;background:var(--ds-stage);color:var(--brand-paper-lit);font:500 12px/1.4 var(--ds-font)}
.workspace-media .wm-comment-count[hidden]{display:none}
.wm-comment-count svg{width:16px;height:16px}
.workspace-media .wm-list .wm-comment-count{left:2px;bottom:2px;font-size:10px;padding:0 3px;min-height:17px}
.workspace-media .wm-list .wm-comment-count svg{width:12px;height:12px}
dialog.wm-preview-dialog.has-feedback{width:calc(100vw - 32px);max-width:1800px;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}
.wm-feedback{width:340px;flex:none;min-height:0;display:flex;flex-direction:column;border-left:var(--ds-hair) solid var(--ds-border);background:var(--ds-surface-solid);color:var(--ds-fg)}
.wm-feedback>header{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:var(--ds-hair) solid var(--ds-border)}
.wm-feedback>header strong{font-size:13px;font-weight:500}.wm-feedback [data-wm-note-total]{color:var(--ds-muted);margin-left:6px}
.wm-feedback [data-wm-feedback-status]:not(:empty){padding:12px 16px;font-size:12px;line-height:1.5;color:var(--ds-warning-text)}
.wm-feedback-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px}
.wm-feedback-note{padding:12px;margin-bottom:10px;background:var(--ds-surface);border:1px solid transparent;border-radius:8px}
.wm-feedback-note.is-active{border-color:var(--ds-border-accent);background:var(--ds-accent-soft)}
.wm-feedback-note.is-reply{margin-left:16px}
.wm-note-author{display:flex;align-items:center;gap:8px;min-height:28px}.wm-note-author strong{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;font-weight:500}.wm-note-author small{color:var(--ds-muted);font-size:10px;text-transform:capitalize}
.wm-note-avatar{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--ds-accent-soft);color:var(--ds-accent-text);font-size:12px}
.wm-feedback .wm-note-content{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px;width:100%;padding:8px 0;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;background:transparent;border:0;border-radius:0;box-shadow:none;font-size:13px;font-weight:400;line-height:1.55}
.wm-note-content>span:not(.ds-timecode){min-width:0}.wm-note-content small,.wm-note-reply-label{color:var(--ds-muted);font-size:11px}
.wm-feedback .wm-note-source{display:flex;justify-content:flex-start;gap:5px;min-height:26px;max-width:100%;padding:0;background:transparent;border:0;color:var(--ds-muted);font-size:10px;font-weight:400;box-shadow:none}.wm-note-source svg{width:12px;height:12px;flex:none}.wm-note-source span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-feedback-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 16px;color:var(--ds-muted)}.wm-feedback-empty>svg{width:28px;height:28px;margin-bottom:12px}.wm-feedback-empty strong{font-size:13px;color:var(--ds-fg);font-weight:500}.wm-feedback-empty p{font-size:12px;line-height:1.5}
.wm-preview-dialog .wm-scrub{position:relative;margin-bottom:12px}.wm-note-markers{position:absolute;left:12px;right:12px;top:15px;height:10px;pointer-events:none}.wm-note-markers button{position:absolute;transform:translateX(-50%);min-height:9px;width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--ds-timecode);background:var(--ds-timecode);pointer-events:auto;box-shadow:none}.wm-note-markers button:focus-visible{outline:2px solid var(--ds-fg);outline-offset:2px}
.wm-feedback-overlay{position:absolute;pointer-events:none}.wm-feedback-overlay svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ds-timecode);stroke-width:3}.wm-feedback-overlay polyline{vector-effect:non-scaling-stroke}.wm-feedback-pin{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--ds-timecode);border:2px solid var(--brand-paper-lit)}
@media(min-width:761px){.has-feedback [data-wm-dialog-action="comments"]{display:none}}
@media(max-width:1000px) and (min-width:761px){.wm-feedback{width:290px}.has-feedback .wm-volume{display:none}.has-feedback .wm-transport-row{grid-template-columns:1fr auto}.has-feedback .wm-transport-time{grid-row:2;grid-column:1/-1;justify-content:center;padding-bottom:6px}}
@media(max-width:760px){dialog.wm-preview-dialog.has-feedback{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.wm-feedback{display:none;position:absolute;z-index:10;left:0;right:0;bottom:0;width:auto;height:65%;border-left:0;border-top:var(--ds-hair) solid var(--ds-border);border-radius:12px 12px 0 0;box-shadow:var(--ds-shadow-dialog)}.is-comments-open .wm-feedback{display:flex}.has-feedback .wm-dialog-header{min-height:52px}.has-feedback .wm-dialog-meta{max-width:130px}}
.wm-preview-dialog .wm-feedback .wm-note-content{color:var(--ds-fg)}
.wm-preview-dialog .wm-feedback .wm-note-source{color:var(--ds-muted)}
/* The owner preview hosts the client page itself, isolating its layout from producer CSS. */
dialog.wm-preview-dialog.is-client-preview{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:var(--ds-stage)}
.wm-preview-dialog.is-client-preview iframe{display:block;flex:1;width:100%;height:100%;min-height:0;border:0;background:var(--ds-stage)}

/* Asset tiles retain the name and actions without technical metadata. */
.workspace-media .wm-file-meta:empty { display: none; }

.workspace-media .wm-grid .wm-preview{aspect-ratio:16/9}
.workspace-media .wm-grid .wm-tile{align-self:stretch}
.workspace-media .wm-list .wm-preview{width:64px;max-width:64px;height:36px;aspect-ratio:16/9;justify-self:center}
.wm-generating-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:16px}
.wm-generating-tile{min-width:0;padding:8px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-surface)}
.wm-generating-thumb{position:relative;aspect-ratio:16/9;border-radius:6px;background:var(--ds-stage)}
.wm-generating-tile strong{display:block;font-size:12px;font-weight:500;padding:10px 4px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.workspace-media .wm-collection.has-pending-only{display:none}
.wm-generating-grid[hidden]{display:none}

/* Skip offscreen card painting while retaining selection, find and keyboard order. */
@supports (content-visibility:auto){
  .workspace-media [data-wm-tile],.workspace-media .wm-folder-card{content-visibility:auto;contain-intrinsic-block-size:auto 240px}
  .workspace-media .wm-list [data-wm-tile],.workspace-media .wm-list .wm-folder-card{contain-intrinsic-block-size:auto 64px}
}