/* Setara producer shell — Frame.io V4 layout on the shared design-system tokens.
   Owns: sign-in page, icon rail, project sidebar (switcher row, asset tree, workspace rows, share links),
   breadcrumb top bar, project switcher popover, projects home, tab panes, new-project form, responsive shell.
   Other modules own their own classes (.wm-*, .share-*, .pr-*, .review-*): only their host
   containers (#workspace-media, #project-share-dialog) are sized here. */
:root {
  color-scheme: dark;
  font-family: var(--ds-font);
  font-size: 13px;
  line-height: 1.45;
  --bg: var(--ds-bg);
  --panel: var(--ds-bg-elevated);
  --raised: var(--ds-control);
  --line: var(--ds-border);
  --muted: var(--ds-muted);
  --accent: var(--ds-accent-text);
  --error: var(--ds-danger-text);
  --amber: var(--ds-warning-text);
  background: var(--ds-bg);
  color: var(--ds-fg);
}
body.workspace-app { background: var(--ds-bg); color: var(--ds-fg); }
#automation-app { min-height: 100vh; }

/* ---------- Flat controls (Frame.io): no glow rings, no sheen, secondary buttons on --ds-surface ---------- */
.shell { --ds-control: var(--ds-surface); --ds-control-hover: var(--ds-surface-hover); --ds-shadow-button: none; --ds-shadow-accent: none; --ds-shadow-accent-hover: none; }
.shell button, .shell button:hover:not(:disabled), .shell button:active:not(:disabled) { box-shadow: none; transform: none; }
.shell button.primary::after { display: none; }
.shell button.primary:hover:not(:disabled) { filter: none; }

/* ---------- Status colours shared by dots, chips and rows ---------- */
.shell .ds-dot.status-ready, .shell .run-link-dot.status-ready, .page .ds-dot.status-ready { background: var(--ds-success); }
.shell .ds-dot.status-active, .shell .run-link-dot.status-active, .page .ds-dot.status-active { background: var(--ds-accent); }
.shell .ds-dot.status-attention, .shell .run-link-dot.status-attention, .page .ds-dot.status-attention { background: var(--ds-warning); }
.shell .ds-dot.status-cancelled, .shell .run-link-dot.status-cancelled, .page .ds-dot.status-cancelled { background: var(--ds-subtle); }
.page .summary-status.status-ready .ds-dot, .page .project-card-status.status-ready .ds-dot { background: var(--ds-success); }
.page .summary-status.status-active .ds-dot, .page .project-card-status.status-active .ds-dot { background: var(--ds-accent); }
.page .summary-status.status-attention .ds-dot, .page .project-card-status.status-attention .ds-dot { background: var(--ds-warning); }
.page .summary-status.status-cancelled .ds-dot, .page .project-card-status.status-cancelled .ds-dot { background: var(--ds-subtle); }

/* ---------- Shell grid: rail · sidebar · main ---------- */
.shell { display: grid; grid-template-columns: var(--ds-rail) var(--ds-sidebar) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--ds-base) var(--ds-ease); }
.shell.sidebar-collapsed { grid-template-columns: var(--ds-rail) 0px minmax(0, 1fr); }
.shell > main { min-width: 0; display: flex; flex-direction: column; }
.sidebar-scrim { display: none; }

/* Rail */
.shell .rail { position: sticky; top: 0; z-index: 22; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100vh; padding: 10px 0 12px; background: var(--ds-bg-elevated); border-right: var(--ds-hair) solid var(--ds-border); }
.shell .rail .brand { width: 36px; height: 36px; margin-bottom: 10px; justify-content: center; gap: 0; }
.shell .rail .brand > span:last-child { display: none; }
.shell .rail .brand-mark { width: 28px; height: 28px; font-size: 13px; }
.shell .rail-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ds-muted); box-shadow: none; }
.shell .rail-btn > svg { width: 18px; height: 18px; }
.shell .rail-btn:hover { background: var(--ds-surface-hover); border-color: transparent; color: var(--ds-fg); }
.shell .rail-btn[aria-current="page"], .shell .rail-btn[aria-expanded="true"] { background: var(--ds-surface-active); color: var(--ds-fg); }
.shell .rail-end { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; }
.shell .rail-btn[data-action="account-menu"] { border-radius: 50%; background: var(--ds-surface-active); color: var(--ds-muted); }
.shell .rail-btn[data-action="account-menu"]:hover { color: var(--ds-fg); background: var(--ds-control-hover); }

/* Environment badge: in the rail it is the coloured dot only (title carries the words; the account menu spells it out),
   in the phone drawer footer the full pill. */
.mode-badge { gap: 6px; padding-left: 8px; }
.mode-badge .mode-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mode-badge .mode-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .rail-mode { display: flex; align-items: center; justify-content: center; width: 36px; height: 20px; }
.shell .rail-mode .mode-badge { min-height: 0; padding: 4px; border: 0; background: transparent; }
.shell .rail-mode .mode-badge .mode-dot { width: 7px; height: 7px; }
.shell .rail-mode .mode-badge .mode-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Sidebar */
.shell .sidebar { position: sticky; top: 0; z-index: 21; height: 100vh; min-width: 0; overflow: hidden; background: var(--ds-bg-elevated); border-right: var(--ds-hair) solid var(--ds-border); transition: visibility 0s 0s, border-color var(--ds-base) var(--ds-ease); }
.shell.sidebar-collapsed .sidebar { visibility: hidden; border-right-width: 0; transition: visibility 0s var(--ds-base), border-color var(--ds-base) var(--ds-ease); }
.shell .sidebar-inner { display: flex; flex-direction: column; gap: 10px; width: var(--ds-sidebar); height: 100%; padding: 8px 8px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.shell .sidebar-top { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 4px; }
.shell .sidebar-top .brand { font-size: 14px; }
.shell .workspace-nav { display: none; gap: 2px; }
.shell .workspace-nav button { width: 100%; min-height: 32px; padding: 0 8px; justify-content: flex-start; gap: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 500; box-shadow: none; }
.shell .workspace-nav button > svg { width: 16px; height: 16px; color: var(--ds-subtle); }
.shell .workspace-nav button:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.shell .workspace-nav button[aria-current="page"] { background: var(--ds-surface-active); color: var(--ds-fg); }
.shell .workspace-nav button.primary { color: var(--ds-accent-contrast); background: var(--ds-accent-gradient); }
.shell .workspace-nav button.primary > svg { color: inherit; }
.shell .sidebar-label { display: block; margin: 0; padding: 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-subtle); }

/* Project switcher row: poster · title / status · ⇕ */
.shell .project-switcher { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 6px 4px 6px 6px; border-radius: 8px; }
.shell .project-switcher:hover { background: var(--ds-surface-hover); }
.shell .switcher-thumb { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--ds-surface-active); color: var(--ds-subtle); }
.shell .switcher-thumb > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shell .switcher-thumb > svg { width: 16px; height: 16px; }
.shell .switcher-thumb.is-broken > img { display: none; }
.shell .switcher-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.shell #sidebar-project-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .sidebar-project-status { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; line-height: 1.3; color: var(--ds-muted); }
.shell .sidebar-project-status .ds-dot { flex: none; }
.shell .sidebar-project-status .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .switcher-btn { flex: none; color: var(--ds-subtle); }
.shell .switcher-btn[aria-expanded="true"] { background: var(--ds-surface-active); color: var(--ds-fg); }

/* Switcher popover: the finder's results (#run-list). Fixed so it works from the drawer and the top-bar search alike. */
.project-switcher-pop { position: fixed; top: 62px; left: calc(var(--ds-rail) + 8px); z-index: 40; display: flex; flex-direction: column; width: 300px; max-height: min(70vh, 560px); padding: 6px; background: var(--ds-bg-elevated); border: var(--ds-hair) solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-pop); animation: ds-rise-in var(--ds-fast) var(--ds-ease); }
.project-switcher-pop .switcher-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0 6px; }
.project-switcher-pop .switcher-pop-head .text-button { min-height: 26px; padding: 0 8px; gap: 6px; font-size: 12px; }
.project-switcher-pop .switcher-pop-head .text-button > svg { width: 14px; height: 14px; }
.shell .run-list { display: grid; gap: 1px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.shell .run-link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-muted); text-align: left; box-shadow: none; }
.shell .run-link-thumb { position: relative; display: grid; place-items: center; grid-row: 1 / span 2; width: 44px; height: 26px; border-radius: 4px; overflow: hidden; background: var(--ds-surface-active); color: var(--ds-subtle); }
.shell .run-link-thumb > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shell .run-link-thumb > svg { width: 14px; height: 14px; }
.shell .run-link-thumb.is-broken > img { display: none; }
.shell .run-link strong { display: block; grid-column: 2; font-size: 12.5px; font-weight: 450; line-height: 1.35; color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .run-link small { display: flex; align-items: center; gap: 6px; grid-column: 2; margin-top: 1px; font-size: 11px; line-height: 1.35; color: var(--ds-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .run-link-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-subtle); }
.shell .run-link:hover { background: var(--ds-surface-hover); }
.shell .run-link.active { background: var(--ds-surface-active); }
.shell .run-link.active strong { font-weight: 500; }
.shell .empty-list { padding: 8px; }

/* Workspace rows and the asset tree: Media (root) › folders › Episode › Production › Review findings.
   The tablist keeps its three buttons (roving tabindex) but lays out through the parent so the tree can sit under Media. */
.shell .sidebar-project { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shell .workspace-tabs { display: contents; }
.shell #tab-overview { order: 1; }
.shell #tab-media { order: 2; }
.shell #sidebar-assets { order: 3; }
.shell #tab-production { order: 4; }
.shell .sidebar-findings { order: 5; }
.shell .workspace-tab { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 500; text-align: left; box-shadow: none; }
.shell .workspace-tab > svg { width: 16px; height: 16px; flex: none; color: var(--ds-subtle); }
.shell .workspace-tab:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.shell .workspace-tab[aria-selected="true"] { color: var(--ds-fg); }
.shell .workspace-tab[aria-selected="true"] > svg { color: var(--ds-fg); }
.shell .workspace-tab:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.shell #sidebar-startup-tara { order: 5; margin-top: 12px; min-height: 0; transform-origin: top left; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface-solid); }
.shell.has-startup-tara .sidebar-project { flex: 1; min-height: 0; }
.shell.has-startup-tara .sidebar-inner { overflow: hidden; }
.shell.has-startup-tara #sidebar-assets { max-height: 26vh; overflow: auto; flex-shrink: 1; }
.shell.has-startup-tara #sidebar-startup-tara { flex: 1; display: flex; }
.shell.has-startup-tara #sidebar-shares { display: none; }
.shell #sidebar-startup-tara .startup-reference-chat { display: flex; flex-direction: column; width: 100%; min-height: 160px; max-height: none; border-top: 0; padding: 12px; overflow: hidden; }
.shell #sidebar-startup-tara header { display: flex; align-items: center; gap: 8px; flex: none; }
.shell #sidebar-startup-tara header img { width: 23px; height: 25px; }
.shell #sidebar-startup-tara header strong { font-size: 14px; font-weight: 500; }
.shell #sidebar-startup-tara .tara-mark { width: 23px; height: 25px; flex: none; }
.shell #sidebar-tara-mode { margin-left: auto; font-size: 10px; height: 28px; min-width: 0; width: 88px; padding: 3px 16px 3px 5px; border: 1px solid var(--ds-border); background-color: transparent; border-radius: 6px; }
.shell .sidebar-tara-status { font-size: 11px; color: var(--ds-muted); margin: 10px 0 8px; line-height: 1.5; }
.shell #sidebar-startup-tara [role="log"] { min-height: 0; flex: 1; overflow: auto; scrollbar-width: thin; padding-block: 4px 10px; }
.shell #sidebar-startup-tara article { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.shell #sidebar-startup-tara .reference-question img { width: 100%; height: 96px; object-fit: contain; }
.shell #sidebar-startup-tara article.is-user { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: #c7afe910; }



.shell .sidebar-tara-actions { display: grid; gap: 6px; padding-top: 10px; flex: none; }
.shell .sidebar-tara-actions button, .shell .sidebar-open-episode { font-size: 12px; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.shell .sidebar-tara-actions small { font-size: 10px; line-height: 1.5; color: var(--ds-muted); text-align: center; }
.shell .sidebar-open-episode { margin-top: 10px; flex: none; }
.shell #tab-overview[aria-selected="true"], .shell #tab-production[aria-selected="true"], .shell #tab-media.is-root { background: var(--ds-surface-active); }
.shell .sidebar-tree { display: grid; gap: 1px; }
.shell .tree-children { display: grid; gap: 1px; }
.shell .tree-row { display: flex; align-items: center; gap: 0; min-width: 0; }
.shell .tree-row.depth-0 { padding-left: 20px; }
.shell .tree-row.depth-1 { padding-left: 40px; }
.shell .tree-row.depth-2 { padding-left: 60px; }
.shell .tree-row.depth-3 { padding-left: 80px; }
.shell .tree-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 30px; min-height: 0; margin-right: 2px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ds-subtle); box-shadow: none; }
.shell .tree-toggle > svg { width: 12px; height: 12px; transition: transform var(--ds-fast) var(--ds-ease); }
.shell .tree-toggle[aria-expanded="true"] > svg { transform: rotate(90deg); }
.shell .tree-toggle:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.shell .tree-toggle.is-leaf { pointer-events: none; }
.shell .tree-node { display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 30px; padding: 0 8px 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 450; text-align: left; box-shadow: none; }
.shell .tree-node > svg { width: 16px; height: 16px; flex: none; color: var(--ds-subtle); }
.shell .tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .tree-count { flex: none; font-size: 11px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; }
.shell .tree-node:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.shell .tree-node.is-active { background: var(--ds-surface-active); color: var(--ds-fg); }
.shell .tree-node.is-active > svg { color: var(--ds-fg); }
.shell .sidebar-findings { width: 100%; padding-left: 8px; font-weight: 500; }
.shell .sidebar-findings.has-findings .tree-count { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border-radius: var(--ds-radius-pill); background: var(--ds-warning-soft); color: var(--ds-warning-text); font-weight: 500; }
.shell .sidebar-findings:not(.has-findings) { color: var(--ds-subtle); }

/* Share links */
.shell .sidebar-shares { display: grid; gap: 2px; margin-top: auto; padding-top: 10px; border-top: var(--ds-hair) solid var(--ds-border); }
.shell .sidebar-shares-heading { display: flex; align-items: center; gap: 2px; min-height: 26px; }
.shell .sidebar-shares-heading .sidebar-label { flex: 1; min-width: 0; }
.shell .sidebar-shares-heading .ds-icon-btn { color: var(--ds-subtle); }
.shell .sidebar-shares-heading .ds-icon-btn[aria-pressed="true"] { color: var(--ds-fg); background: var(--ds-surface-active); }
.shell #sidebar-share-list { display: grid; gap: 1px; max-height: 236px; overflow-y: auto; scrollbar-width: thin; }
.shell #sidebar-share-list button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 30px; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 450; text-align: left; box-shadow: none; overflow: hidden; }
.shell #sidebar-share-list button > svg { width: 16px; height: 16px; flex: none; color: var(--ds-subtle); }
.shell #sidebar-share-list button[data-action="all-shares"] { color: var(--ds-fg); font-weight: 500; }
.shell #sidebar-share-list button:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.shell .share-thumb { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 24px; border-radius: 4px; overflow: hidden; background: var(--ds-surface-active); color: var(--ds-subtle); }
.shell .share-thumb > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shell .share-thumb > svg { width: 13px; height: 13px; }
.shell .share-thumb.is-broken > img { display: none; }
/* Titles ellipsize inside the flex row (a bare text node never gets text-overflow); the count keeps its right slot. */
.shell #sidebar-share-list button .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell #sidebar-share-list button .count { flex: none; margin-left: auto; font-size: 11px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; }
/* Phone drawer footer: the rail (account menu + Sign out) is gone below 700px, so the drawer carries them. */
.shell .sidebar-account { display: none; }

/* Top bar: sidebar toggle + breadcrumb | search. Nothing else. */
.shell .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--ds-topbar); min-height: var(--ds-topbar); padding: 0 16px 0 10px; background: var(--ds-bg); border-bottom: var(--ds-hair) solid var(--ds-border); }
.shell .topbar-start { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
.shell .sidebar-toggle { color: var(--ds-muted); }
.shell .sidebar-toggle > svg { width: 18px; height: 18px; }
.shell .sidebar-toggle .sidebar-toggle-menu { display: none; }
.shell .workspace-breadcrumb { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; font-size: 13px; color: var(--ds-muted); }
.shell .crumb { display: block; flex: 0 1 auto; max-width: 34ch; min-width: 0; min-height: 26px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 450; line-height: 26px; box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .crumb-link[data-action="library"] { flex: none; }
.shell .crumb.is-current { color: var(--ds-fg); font-weight: 500; }
.shell .crumb-link:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
.shell .crumb-sep { flex: none; color: var(--ds-faint); font-size: 12px; }
.shell .topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.shell .topbar-search { position: relative; display: inline-flex; align-items: center; }
.shell .topbar-search > svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--ds-subtle); pointer-events: none; }
/* The id keeps this above automation.css's `input:not([type=…])` (0,4,1) width:100% rule. */
.shell .topbar-search #project-search { width: 220px; min-height: 30px; padding-left: 30px; background: var(--ds-surface); transition: width var(--ds-base) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease); }

/* Page */
.shell .page { flex: 1; width: 100%; max-width: 1680px; padding: 8px 24px 56px; }
.skip-link:focus { z-index: 100; }
/* The skip link's target is programmatically focusable (tabindex=-1); no ring on the whole main column. */
main#main:focus, main#main:focus-visible { outline: none; box-shadow: none; }

/* ---------- Projects home ---------- */
.page .projects-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 44px; margin-bottom: 14px; }
.page .toolbar-sort { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.page .toolbar-sort-label { font-size: 12.5px; color: var(--ds-muted); white-space: nowrap; }
.page .toolbar-select { width: auto; min-width: 0; }
.page .toolbar-ghost { min-height: 30px; padding-right: 26px; border-color: transparent; background-color: transparent; color: var(--ds-fg); font-weight: 500; }
.page .toolbar-ghost:hover { background-color: var(--ds-surface-hover); }
.page .toolbar-search { position: relative; display: inline-flex; align-items: center; }
.page .toolbar-search > svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--ds-subtle); pointer-events: none; }
.page .toolbar-search input { width: 200px; min-height: 30px; padding-left: 30px; background: var(--ds-surface); }
.page .toolbar-count { padding-left: 4px; font-size: 12px; color: var(--ds-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page .projects-toolbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.page .projects-toolbar-end .primary > svg { width: 15px; height: 15px; }
.page .projects-toolbar .connection { width: 100%; }
.page .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 16px; }
.page .project-card-wrap { position: relative; min-width: 0; }
/* Frame.io project tile: 4px inset square poster (radius 6) on an 8px card, caption over a bottom scrim, 32px foot with "Updated …" and •••. */
.page .project-card { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; min-height: 0; padding: 4px 4px 0; text-align: left; border: var(--ds-hair) solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); box-shadow: none; overflow: hidden; transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease); }
.page .project-card:hover { background: var(--ds-surface-hover); box-shadow: none; }
/* Portrait 9:16 poster: vertical episode frames fill the tile with no letterbox (owner request). */
.page .project-poster { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--ds-stage); }
.page .project-poster > img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.page .project-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ds-surface-hover); color: var(--ds-faint); }
.page .project-card-placeholder > svg { width: 28px; height: 28px; }
.page .project-poster:has(> img:not([hidden])) .project-card-placeholder { display: none; }
.page .project-poster.is-broken > img { display: none; }
.page .project-poster.is-broken .project-card-placeholder { display: grid; }
.page .project-poster::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 62%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.74) 100%); pointer-events: none; }
.page .project-card-caption { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; display: grid; gap: 2px; min-width: 0; }
.page .project-card-caption strong { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .project-card-caption small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page .project-card-caption .ds-dot { flex: none; width: 6px; height: 6px; background: var(--ds-subtle); }
.page .project-card-foot { display: flex; align-items: center; min-height: 32px; padding: 0 32px 0 8px; font-size: 12px; line-height: 16px; color: var(--ds-muted); white-space: nowrap; }
.page .project-card-foot > span { min-width: 0; line-height: 16px; overflow: hidden; text-overflow: ellipsis; }
.page .project-card-more { position: absolute; right: 4px; bottom: 4px; z-index: 3; width: 24px; height: 24px; min-height: 24px; color: var(--ds-subtle); opacity: 1; }
.page .project-card-more:hover, .page .project-card-more[aria-expanded="true"] { color: var(--ds-fg); background: var(--ds-surface-active); }
.page .project-card-created, .page .project-card-spend, .page .project-list-head { display: none; }
/* List view (Frame.io): 40px header with column dividers, 40px rows on a grid of 42 · name · status 200 · updated 140 · created 200 · ••• 24;
   24px square thumb (radius 6); the poster and caption become `display: contents` so their parts land in the cells. */
.page .project-grid.is-list { display: block; }
.page .project-grid.is-list .project-list-head, .page .project-grid.is-list .project-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 200px 140px 110px 200px 24px; align-items: center; min-height: 40px; }
.page .project-grid.is-list .project-list-head { display: grid; margin-bottom: 4px; border-bottom: var(--ds-hair) solid var(--ds-border); font-size: 12px; color: var(--ds-muted); }
.page .project-grid.is-list .project-list-head > span { display: flex; align-items: center; min-height: 40px; padding: 0 12px 0 10px; white-space: nowrap; }
.page .project-grid.is-list .project-list-head > span:nth-child(2) { padding-left: 0; }
.page .project-grid.is-list .project-list-head > span:nth-child(n+3):nth-child(-n+6) { border-left: 1px solid var(--ds-border-strong); }
.page .project-grid.is-list .project-card-wrap + .project-card-wrap { border-top: 0; }
.page .project-grid.is-list .project-card { padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; }
.page .project-grid.is-list .project-card:hover { background: var(--ds-surface-hover); }
.page .project-grid.is-list .project-poster, .page .project-grid.is-list .project-card-caption { display: contents; }
.page .project-grid.is-list .project-poster::after { display: none; }
.page .project-grid.is-list .project-poster > img, .page .project-grid.is-list .project-card-placeholder { position: static; grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin-left: 8px; border-radius: 6px; object-fit: cover; }
.page .project-grid.is-list .project-card-placeholder > svg, .page .project-grid.is-list .project-poster[data-status] .project-card-placeholder > svg { display: none; }
.page .project-grid.is-list .project-card-caption strong { grid-column: 2; grid-row: 1; min-width: 0; padding-right: 12px; font-size: 13px; font-weight: 400; line-height: 20px; color: var(--ds-fg); }
.page .project-grid.is-list .project-card-caption small { grid-column: 3; grid-row: 1; padding: 0 12px 0 10px; font-size: 13px; line-height: 20px; color: var(--ds-muted); }
.page .project-grid.is-list .project-card-foot { grid-column: 4; grid-row: 1; min-height: 0; padding: 0 12px 0 10px; font-size: 13px; color: var(--ds-muted); }
.page .project-grid.is-list .project-card-spend { display: block; grid-column: 5; grid-row: 1; padding: 0 12px 0 10px; font-size: 13px; color: var(--ds-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page .project-grid.is-list .project-card-created { display: block; grid-column: 6; grid-row: 1; padding: 0 12px 0 10px; font-size: 12px; color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page .project-grid.is-list .project-card-foot > span { display: block; }
.page .project-grid.is-list .project-card-more { top: 50%; right: 0; bottom: auto; transform: translateY(-50%); }
.page .projects-empty { grid-column: 1 / -1; padding: 56px 16px; }
.page .projects-empty h2 { font-size: 13px; font-weight: 500; }

/* ---------- Project panes ---------- */
.page #run-simulation .notice { margin: 6px 0 12px; }
.page .workspace-panel { min-width: 0; }
.page .workspace-panel .connection:empty, .page .connection:empty { display: none; }
/* Media: the module's own toolbar is the first row; the host's Share + ••• overlay its right end (the module pads for them). */
.page #pane-media { position: relative; }
.page #workspace-media { min-width: 0; }
.page .pane-actions { position: absolute; top: 7px; right: 16px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.page .pane-actions .primary, .page .pane-toolbar-end .primary { min-height: 30px; padding: 0 10px 0 8px; gap: 6px; }
.page .pane-actions .primary > svg, .page .pane-toolbar-end .primary > svg { width: 15px; height: 15px; }
.page .pane-actions .ds-icon-btn[aria-expanded="true"], .page .pane-toolbar-end .ds-icon-btn[aria-expanded="true"] { background: var(--ds-surface-active); color: var(--ds-fg); }
/* Episode / Production: a 44px toolbar row with the pane title and its controls, no page heading. */
.page .pane-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 44px; margin-bottom: 12px; }
.page .pane-title { font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ds-fg); }
.page .pane-toolbar-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.page .workspace-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.page .summary-status.ds-chip { color: var(--ds-fg); }
.page .summary-item { display: inline-flex; align-items: center; gap: 4px; }
.page .summary-item .meta { font-size: 12px; color: var(--ds-subtle); }
.page .summary-findings > svg { width: 14px; height: 14px; color: var(--ds-subtle); }
.page .summary-findings.has-findings { color: var(--ds-warning-text); }
.page .summary-findings.has-findings > svg { color: var(--ds-warning-text); }

/* Episode pane */
.page .episode-workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--ds-panel); align-items: start; gap: 16px; }
.page .episode-player { padding: 0; background: transparent; border: 0; box-shadow: none; }
.page .review-notes { margin: 0; padding: 14px; box-shadow: none; }
.page .review-notes h3 { margin-bottom: 3px; }
.page .review-notes > p { margin-bottom: 10px; font-size: 12px; line-height: 1.6; }
.page #review-note { min-height: 110px; }
.page .saved-notes { max-height: 360px; overflow: auto; }

/* Production pane */
.page #pane-production .panel { box-shadow: none; }
.page .production-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.page .production-detail-grid > .panel + .panel { margin-top: 0; }
.page .source-media-details { margin-top: 16px; }
.page .source-media-details > summary { font-size: 13px; color: var(--ds-fg); }

/* ---------- New project ---------- */
.page .new-project { width: 100%; max-width: 800px; margin: 12px auto 0; }
.page .new-project .intro { margin-bottom: 18px; }
.page .new-project .intro p { margin-top: 6px; font-size: 13px; line-height: 1.6; }
.page .autorun-panel { margin-bottom: 14px; }
.page .setup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.page .step-label { display: flex; align-items: center; gap: 9px; }
.page .step-number { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-accent-soft); color: var(--ds-accent-text); font-size: 11px; font-weight: 600; }
.page .setup-aside h2 { margin-top: 2px; }
.page .production-workflow { margin-top: 14px; }

/* ---------- Sign-in ---------- */
.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card { display: grid; gap: 22px; justify-items: start; width: 100%; max-width: 400px; }
.auth-card .intro h1 { font-size: 20px; }
.auth-card .intro p { margin-top: 6px; font-size: 13px; line-height: 1.6; }
.auth-card .panel { width: 100%; padding: 20px; }
.auth-card .panel .badge { margin-bottom: 12px; }
.auth-card .side-note { margin: 0 0 14px; }
.auth-card .notice { width: 100%; }

.shell .brand, .auth-card .brand { color: var(--ds-fg); }

/* ---------- Focus ---------- */
.shell button:focus-visible, .shell a:focus-visible, .shell summary:focus-visible, .auth-page button:focus-visible, .project-switcher-pop button:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.shell .workspace-tab:focus-visible, .shell .tree-node:focus-visible, .shell .run-link:focus-visible { box-shadow: var(--ds-focus); }

/* ---------- Responsive ---------- */
@media (min-width: 1500px) {
  .shell .page { padding-inline: 32px; }
  .shell .topbar { padding-inline: 24px 24px; }
}
/* Projects home on desktop is rail + content: the sidebar (collapsed by automation.js) has no toggle, and the
   top-bar finder yields to the grid's own search. Drawer sizes keep both. */
@media (min-width: 1051px) {
  .shell.is-library .sidebar-toggle, .shell.is-library .topbar-search { display: none; }
  .shell.is-library .topbar { padding-left: 16px; }
}
@media (max-width: 1050px) {
  .shell, .shell.sidebar-collapsed { grid-template-columns: var(--ds-rail) minmax(0, 1fr); }
  .shell .sidebar, .shell.sidebar-collapsed .sidebar { position: fixed; top: 0; bottom: 0; left: var(--ds-rail); z-index: 31; width: var(--ds-sidebar); height: auto; border-right: var(--ds-hair) solid var(--ds-border); visibility: hidden; transform: translateX(-100%); transition: transform var(--ds-base) var(--ds-ease), visibility 0s var(--ds-base); }
  .shell.drawer-open .sidebar { visibility: visible; transform: none; box-shadow: var(--ds-shadow-dialog); transition: transform var(--ds-base) var(--ds-ease), visibility 0s 0s; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity var(--ds-base) var(--ds-ease); }
  .shell.drawer-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .shell .sidebar-top { display: flex; }
  .shell .sidebar-top .brand { display: none; }
  .shell .sidebar-toggle > svg:first-child { display: none; }
  .shell .sidebar-toggle .sidebar-toggle-menu { display: block; }
  .shell .topbar-search #project-search { width: 170px; }
  .shell .crumb { max-width: 24ch; }
  .page .episode-workspace, .page .production-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .page .page, .shell .page { padding-inline: 20px; }
  .page .pane-actions { right: 12px; }
}
@media (max-width: 700px) {
  .shell .rail { display: none; }
  .shell, .shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .shell .sidebar, .shell.sidebar-collapsed .sidebar { left: 0; width: min(300px, 86vw); }
  .shell .sidebar-inner { width: 100%; }
  .shell .sidebar-top .brand { display: inline-flex; }
  .shell .workspace-nav { display: grid; padding-bottom: 8px; border-bottom: var(--ds-hair) solid var(--ds-border); }
  .shell .sidebar-shares { margin-top: 8px; }
  .shell .sidebar-account { display: grid; gap: 2px; margin-top: auto; padding-top: 10px; border-top: var(--ds-hair) solid var(--ds-border); }
  .shell .sidebar-mode { display: flex; min-width: 0; padding: 0 8px 6px; }
  .shell .sidebar-mode .badge { max-width: 100%; }
  .shell .sidebar-signout { width: 100%; min-height: 32px; padding: 0 8px; justify-content: flex-start; gap: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-muted); font-size: 13px; font-weight: 500; box-shadow: none; }
  .shell .sidebar-signout > svg { width: 16px; height: 16px; color: var(--ds-subtle); }
  .shell .sidebar-signout:hover { background: var(--ds-surface-hover); color: var(--ds-fg); }
  .project-switcher-pop { top: var(--ds-topbar); left: 8px; right: 8px; width: auto; }
  .shell .topbar { padding: 0 10px 0 6px; gap: 6px; }
  .shell .topbar-actions { gap: 6px; }
  .shell .topbar-search #project-search { width: 32px; padding-left: 30px; padding-right: 0; color: transparent; }
  .shell .topbar-search #project-search:focus { width: 168px; padding-right: 8px; color: var(--ds-fg); }
  .shell .topbar-search input::placeholder { color: transparent; }
  .shell .topbar-search input:focus::placeholder { color: var(--ds-subtle); }
  .shell .crumb { max-width: 18ch; }
  .shell .workspace-breadcrumb > .crumb.is-current { flex: 1 1 auto; min-width: 56px; }
  .shell .workspace-breadcrumb > .crumb-link[data-action="library"], .shell .workspace-breadcrumb > .crumb-link[data-action="library"] + .crumb-sep { display: none; }
  .shell .page { padding: 8px 12px 40px; }
  /* Phones show the project and the current folder only; intermediate folder crumbs stay one tap away in the drawer tree. */
  .shell .workspace-breadcrumb > .crumb-link[data-folder]:not([data-folder=""]), .shell .workspace-breadcrumb > .crumb-link[data-folder]:not([data-folder=""]) + .crumb-sep { display: none; }
  .page .pane-toolbar .workspace-summary { flex-basis: 100%; order: 3; }
  .page .pane-actions { right: 8px; }
  .page .pane-actions .primary > span, .page .pane-toolbar-end .primary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .page .pane-actions .primary, .page .pane-toolbar-end .primary { width: 30px; padding: 0; justify-content: center; }
  .page .projects-toolbar { margin-bottom: 12px; }
  .page .toolbar-search { flex: 1 1 140px; }
  .page .toolbar-search input { width: 100%; }
  .page .toolbar-count { display: none; }
  /* Phones keep name and spend; status, updated and created stay one tap away in the project. */
  .page .project-grid.is-list .project-list-head, .page .project-grid.is-list .project-card { grid-template-columns: 42px minmax(0, 1fr) 84px 24px; }
  .page .project-grid.is-list .project-card-caption small, .page .project-grid.is-list .project-card-foot, .page .project-grid.is-list .project-card-created, .page .project-list-head > span:nth-child(3), .page .project-list-head > span:nth-child(4), .page .project-list-head > span:nth-child(6) { display: none; }
  .page .project-grid.is-list .project-card-spend, .page .project-list-head > span:nth-child(5) { grid-column: 3; }
  .page .pane-toolbar { margin-bottom: 10px; }
}
@media (max-width: 420px) {
  .page .project-grid { gap: 12px; }
  .page .projects-toolbar-end { width: 100%; justify-content: space-between; }
  .page .projects-toolbar-end .primary { flex: 1; justify-content: center; }
}
@media (hover: none) and (pointer: coarse) {
  .page .project-card-more { opacity: 1; }
  .shell .rail-btn, .shell .sidebar-toggle { width: 40px; height: 40px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .shell .sidebar, .shell.sidebar-collapsed .sidebar, .shell.drawer-open .sidebar, .sidebar-scrim, .shell .topbar-search #project-search, .shell .tree-toggle > svg, .page .project-card, .project-switcher-pop { transition: none; animation: none; }
}
@media (forced-colors: active) {
  .shell .rail, .shell .sidebar, .shell .topbar, .page .project-card, .page .project-card-status, .project-switcher-pop { border: 1px solid CanvasText; }
  .shell .ds-dot, .shell .run-link-dot, .page .ds-dot, .mode-badge .mode-dot { forced-color-adjust: none; border: 1px solid CanvasText; }
  .shell .workspace-tab[aria-selected="true"], .shell .tree-node.is-active, .shell .run-link.active, .shell .rail-btn[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* === Frame.io window framing: black ground, rounded var(--ds-surface) panels with 2px seams, header spanning the sidebar === */
@media (min-width: 1051px) {
  body.workspace-app { background: var(--brand-ink-deep); }
  .shell { --shell-side: var(--ds-sidebar); background: var(--brand-ink-deep); column-gap: 2px; padding: 1px 2px 2px; }
  .shell.sidebar-collapsed { --shell-side: 0px; }
  .shell .rail { background: transparent; border-right: 0; padding: 8px 0 16px; gap: 24px; }
  .shell .rail .rail-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 4px; color: var(--ds-subtle); }
  .shell .rail .rail-btn > svg { width: 24px; height: 24px; }
  .shell .sidebar { margin-top: calc(var(--ds-topbar) + 2px); height: calc(100vh - var(--ds-topbar) - 5px); border-right: 0; border-radius: 8px; background: var(--ds-bg-elevated); }
  .shell > main { background: transparent; }
  .shell .topbar { height: var(--ds-topbar); min-height: var(--ds-topbar); margin-left: calc(-1 * var(--shell-side) - 2px); width: calc(100% + var(--shell-side) + 2px); padding: 0 12px; border-bottom: 0; border-radius: 8px; background: var(--ds-bg-elevated); z-index: 23; }
  .shell #page, .shell .page { margin-top: 2px; border-radius: 8px; background: var(--ds-bg-elevated); min-height: calc(100vh - var(--ds-topbar) - 5px); }
}
.shell .sidebar-toggle { width: 32px; height: 32px; min-height: 32px; border-radius: 6px; color: var(--ds-muted); }
.shell .crumb { min-height: 20px; line-height: 20px; padding: 0 4px; font-size: 13px; font-weight: 402; color: var(--ds-muted); text-decoration: none; }
.shell .crumb.is-current { color: var(--ds-fg); font-weight: 500; }
.shell .crumb-link:hover, .shell .crumb-link:focus-visible, .shell .crumb-link:active { background: transparent; text-decoration: none; color: var(--ds-fg); }
.shell .crumb-sep { color: var(--ds-subtle); }
.shell .topbar-search { width: 224px; }
.shell .topbar-search input, .shell #project-search { height: 32px; min-height: 32px; border-radius: 48px; background: rgba(4,12,90,.3); border: 1.5px solid rgba(4,12,90,.35); padding-left: 34px; }
.shell .tree-node { min-height: 32px; padding: 0 4px 0 6px; font-weight: 402; }
.shell .tree-node > svg { color: var(--ds-muted); }
.shell .tree-node.is-active { background: var(--ds-surface-active); color: var(--ds-fg); }
.shell .pane-actions .primary, .shell .pane-toolbar .primary { min-height: 24px; height: 24px; padding: 2px 8px; font-size: 12px; font-weight: 500; border-radius: 6px; background: var(--ds-accent-solid); color: var(--brand-paper-lit); }
.shell .pane-actions .primary > svg, .shell .pane-toolbar .primary > svg { width: 16px; height: 16px; }
.shell .pane-actions { top: 20px; }
.shell #sidebar-share-list button { min-height: 48px; border-radius: 8px; padding: 4px 6px; gap: 12px; }
.shell #sidebar-share-list button[data-action="all-shares"] { padding-left: 6px; }
.shell #sidebar-share-list .share-thumb, .shell #sidebar-share-list img { width: 48px; height: 32px; border-radius: 4px; background: var(--ds-surface); box-shadow: 0 1px 12px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.12); }
/* Frame.io geometry with Setara navy/cream, without paper grain or glass. */
body.workspace-app,.shell{background:var(--ds-bg-deep)}
.shell .rail{background:var(--ds-bg-deep);border:0;box-shadow:none;backdrop-filter:none}
.shell .sidebar,.shell .topbar,.shell #page{background:var(--ds-bg-elevated);border:0;border-radius:8px;box-shadow:none;backdrop-filter:none}
.shell .rail .brand .brand-mark,.shell .sidebar .brand .brand-mark{font-size:0;display:block;width:28px;height:28px;background:var(--setara-mark) center/contain no-repeat;box-shadow:none;border:0;border-radius:0}
.shell .topbar-search input,.shell #project-search{background:var(--ds-surface);border-color:var(--ds-border);border-radius:999px}
.shell .pane-actions .primary,.shell .pane-toolbar .primary{color:var(--ds-accent-contrast)}
.workspace-media{--wm-card:var(--ds-surface);--wm-card-hover:var(--ds-surface-hover);--wm-well:var(--media-dark)}
.workspace-media .wm-tile:hover{transform:none;box-shadow:none}
.workspace-media .wm-folder-card .wm-folder:hover:not(:disabled){box-shadow:none}
.workspace-media .wm-preview::after{background:none}
.workspace-media .wm-badges .ds-chip{color:var(--on-media-dark);background:var(--media-dark)}
.workspace-media .wm-cover>img{object-fit:contain;background:var(--media-dark)}
.ds-interface .auth-card{max-width:420px}
.ds-interface .auth-card .panel{padding:0;border:0}

.shell .pane-actions .primary,.shell .pane-toolbar .primary{background:var(--ds-accent-gradient);color:var(--ds-accent-contrast)}

/* Viewport shell: only the content pane and the sidebar's own list scroll. */
.shell {height:100dvh;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}
.shell > main {min-height:0}
.shell .rail {height:100%;min-height:0}
.shell .topbar {flex:none}
.shell #page {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scroll-padding-block:20px}
.shell .sidebar-inner > * {flex-shrink:0}
.shell .sidebar-inner {scrollbar-gutter:stable}
.shell.is-library .topbar-search {display:inline-flex}
.shell .topbar-search {flex:none;width:auto}
@media (min-width:1051px){.shell .sidebar{height:calc(100dvh - var(--ds-topbar) - 5px)}}
@media (max-width:700px){.shell .topbar-search #project-search:focus{width:32px;padding-right:0}.shell .topbar-search input:focus::placeholder{color:transparent}}

/* Quick search and expanded results share one keyboard-accessible dialog. */
.workspace-search {position:fixed;inset:10dvh 0 auto;margin:0 auto;padding:0;width:min(720px,calc(100vw - 32px));max-width:none;max-height:80dvh;border:0;background:transparent;color:var(--ds-fg);overflow:visible;box-shadow:none;font:13px/1.4 var(--ds-font);animation:ws-enter 150ms var(--ds-ease)}
.workspace-search::backdrop {background:rgba(0,0,0,.72)}
.workspace-search[open] {display:flex;flex-direction:column;gap:12px}
.ws-search-head {display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--ds-border-accent);border-radius:10px;background:var(--ds-bg);box-shadow:0 0 0 1px var(--ds-accent);flex:none}
.ws-search-head > svg {width:18px;height:18px;flex:none;color:var(--ds-muted)}
.workspace-search .ws-search-head input {flex:1;min-width:0;background:transparent;border:0;box-shadow:none;padding:0;outline:none;font-size:14px;height:32px}
.workspace-search .ws-search-head input::-webkit-search-cancel-button {display:none}
.workspace-search .ws-escape {padding:3px 5px;min-height:22px;font-size:10px;color:var(--ds-muted);border:1px solid var(--ds-border-strong);background:transparent}
.ws-search-body {background:var(--ds-bg);border:1px solid var(--ds-border-strong);border-radius:10px;min-height:0;overflow:auto;scrollbar-width:thin}
.ws-filters {display:flex;gap:12px;padding:12px 16px;border-bottom:var(--ds-hair) solid var(--ds-border)}
.ws-filters label {display:grid;gap:5px;min-width:0;flex:1;color:var(--ds-muted);font-size:11px}
.ws-filters select {width:100%;min-width:0;text-overflow:ellipsis}
.ws-results-pane {padding:8px;min-width:0;min-height:0}
.ws-results-heading {padding:8px;color:var(--ds-subtle);font-size:12px}
.ws-result {display:flex;align-items:center;gap:12px;min-height:76px;padding:8px;border-radius:6px;cursor:pointer;user-select:none;transition:background-color 150ms var(--ds-ease)}
.ws-result:hover {background:var(--ds-surface-hover)}
.ws-result[aria-selected=true] {background:var(--ds-surface-active)}
.ws-result > svg {width:14px;height:14px;flex:none;opacity:0}
.ws-result[aria-selected=true] > svg,.ws-result:hover > svg {opacity:1}
.ws-thumb {position:relative;display:grid;place-items:center;flex:none;width:100px;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--ds-surface);color:var(--ds-subtle)}
.ws-thumb > svg {width:24px;height:24px}
.ws-thumb > img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ds-stage)}
.ws-thumb .ds-duration {position:absolute;bottom:3px;right:4px;color:white;background:var(--ds-bg-deep);font-size:10px}
.ws-result-text {display:grid;gap:5px;flex:1;min-width:0}
.ws-result-text strong {font-size:13px;font-weight:450;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ws-result-text small {color:var(--ds-subtle);font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.workspace-search mark {background:rgba(208,169,248,.18);color:inherit;border-radius:2px}
.workspace-search .ws-show-all {width:100%;justify-content:flex-start;margin-top:8px;background:transparent;color:var(--ds-accent-text);overflow:hidden;text-overflow:ellipsis;display:block;text-align:left}
.ws-history {padding:8px 0;border-top:var(--ds-hair) solid var(--ds-border);margin-top:8px}
.ws-history > div {display:flex;align-items:center;border-radius:6px}
.ws-history > div:hover {background:var(--ds-surface-hover)}
.ws-history button:first-child {flex:1;justify-content:flex-start;min-width:0;background:transparent;color:var(--ds-muted)}
.ws-history button span {overflow:hidden;text-overflow:ellipsis}
.ws-status {display:flex;gap:8px;align-items:center;padding:8px;color:var(--ds-muted);font-size:11px}
.ws-status:has([data-ws-status]:empty):has([data-ws-retry][hidden]) {display:none}
.ws-details {display:none;min-width:0;padding:24px;overflow:auto;scrollbar-width:thin}
.ws-details h2 {font-size:16px;overflow-wrap:anywhere;margin:18px 0 8px}
.ws-details p {font-size:12px;overflow-wrap:anywhere;color:var(--ds-muted)}
.ws-details button {margin:14px 4px 0 0}
.ws-details .ws-thumb {width:100%}
.ws-details dl {display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px 10px;padding:14px;margin-top:20px;background:var(--ds-surface);border-radius:6px;font-size:12px}
.ws-details dt {color:var(--ds-subtle)}
.ws-details dd {margin:0;overflow-wrap:anywhere}
.ws-footer {display:flex;gap:20px;justify-content:center;color:var(--ds-muted);font-size:11px;flex:none}
.ws-spinner {display:flex}.ws-spinner svg {width:16px;height:16px;animation:ws-spin 1s linear infinite}
.ws-skeleton {display:flex;gap:12px;padding:8px;align-items:center;height:76px}.ws-skeleton span:first-child{width:100px;height:56px;border-radius:5px}.ws-skeleton span:last-child{width:55%;height:12px}
.workspace-search.is-expanded {inset:12px;height:calc(100dvh - 24px);max-height:none;width:auto;margin:0}
.workspace-search.is-expanded .ws-search-head {width:min(640px,100%);margin:0 auto}
.workspace-search.is-expanded .ws-search-body {flex:1;display:grid;grid-template-columns:210px minmax(0,1fr) 290px;overflow:hidden}
.workspace-search.is-expanded .ws-filters {flex-direction:column;justify-content:flex-start;border-right:var(--ds-hair) solid var(--ds-border);border-bottom:0;overflow:auto;align-self:stretch;gap:20px}
.workspace-search.is-expanded .ws-filters label {flex:0}
.workspace-search.is-expanded .ws-results-pane {overflow:auto;scrollbar-width:thin;border-right:var(--ds-hair) solid var(--ds-border)}
.workspace-search.is-expanded .ws-details {display:block}
.workspace-search.is-expanded .ws-result {min-height:98px}.workspace-search.is-expanded .ws-result .ws-thumb{width:136px}
@keyframes ws-enter {from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes ws-spin {to{transform:rotate(360deg)}}
@media (max-width:1050px){.workspace-search.is-expanded .ws-search-body{grid-template-columns:170px minmax(0,1fr)}.workspace-search.is-expanded .ws-details{grid-column:1/-1;max-height:210px;border-top:var(--ds-hair) solid var(--ds-border);padding:12px;display:block}.workspace-search.is-expanded .ws-details .ws-thumb{float:left;width:160px;margin-right:16px}.ws-details dl{display:none}}
@media (max-width:600px){.workspace-search{inset:16px 0 auto;width:calc(100vw - 16px);max-height:calc(100dvh - 32px)}.ws-footer{gap:10px;font-size:10px}.ws-thumb{width:76px}.ws-result{gap:8px;min-height:66px}.ws-filters{gap:8px;padding:10px}.workspace-search.is-expanded{inset:8px;height:calc(100dvh - 16px)}.workspace-search.is-expanded .ws-search-body{display:flex;flex-direction:column}.workspace-search.is-expanded .ws-filters{flex-direction:row;flex:none}.workspace-search.is-expanded .ws-filters label{flex:1}.workspace-search.is-expanded .ws-results-pane{flex:1}.workspace-search.is-expanded .ws-result .ws-thumb{width:88px}.workspace-search.is-expanded .ws-result{min-height:70px}.workspace-search.is-expanded .ws-details{flex:none;max-height:180px}.workspace-search.is-expanded .ws-details .ws-thumb{width:90px}.ws-details h2{font-size:13px;margin-top:0}.ws-details p{font-size:11px}.ws-details button{font-size:11px;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.workspace-search,.ws-spinner svg{animation:none}.ws-result{transition:none}}
@media (forced-colors:active){.workspace-search .ws-search-head,.ws-search-body{border:1px solid CanvasText}.ws-result[aria-selected=true]{outline:2px solid Highlight}.ws-thumb img{forced-color-adjust:none}}

/* === Status gradient tiles — flat linear variations of the "Futuristic Neon" swatch (green → mint → lime) for
   projects without a poster. The status picks the variation (matches the status dots), data-tone (hashed from the
   project id) picks the angle so neighbours of the same status still differ. Cards paint the placeholder only, so a
   contained poster keeps its black stage; the small cover-fit thumbs paint the box itself. === */
.page .project-poster[data-status], .shell .switcher-thumb[data-status], .shell .run-link-thumb[data-status] {
  --au-0: #4ff37c; --au-1: #66e896; --au-2: #d9f65b; --au-angle: 100deg;
  --au-tile: linear-gradient(var(--au-angle), var(--au-0) 0%, var(--au-1) 48%, var(--au-2) 100%);
}
/* Ready for review: the swatch itself. */
.page .project-poster[data-status="ready"], .shell .switcher-thumb[data-status="ready"], .shell .run-link-thumb[data-status="ready"] { --au-0: #4ff37c; --au-1: #66e896; --au-2: #d9f65b; }
/* In progress: the cool end of the same family, teal into green. */
.page .project-poster[data-status="active"], .shell .switcher-thumb[data-status="active"], .shell .run-link-thumb[data-status="active"] { --au-0: #2fd4d6; --au-1: #4fe6a9; --au-2: #a8f56b; }
/* Needs attention: the warm end, lime into amber. */
.page .project-poster[data-status="attention"], .shell .switcher-thumb[data-status="attention"], .shell .run-link-thumb[data-status="attention"] { --au-0: #d9f65b; --au-1: #f3cf58; --au-2: #f79b5a; }
/* Cancelled: the same sweep drained of saturation. */
.page .project-poster[data-status="cancelled"], .shell .switcher-thumb[data-status="cancelled"], .shell .run-link-thumb[data-status="cancelled"] { --au-0: #4e5b55; --au-1: #6b7a70; --au-2: #8f9c83; }
/* Three angles: 100° (0), 160° (1), 40° (2). */
.page .project-poster[data-tone="1"], .shell .switcher-thumb[data-tone="1"], .shell .run-link-thumb[data-tone="1"] { --au-angle: 160deg; }
.page .project-poster[data-tone="2"], .shell .switcher-thumb[data-tone="2"], .shell .run-link-thumb[data-tone="2"] { --au-angle: 40deg; }
.page .project-poster[data-status] .project-card-placeholder { background: var(--au-tile); background-color: var(--au-1); color: rgba(23,20,38,.78); }
.page .project-poster[data-status="cancelled"] .project-card-placeholder { color: rgba(255,255,255,.82); }
.page .project-poster[data-status] .project-card-placeholder > svg { width: 24px; height: 24px; }
.shell .switcher-thumb[data-status], .shell .run-link-thumb[data-status] { background: var(--au-tile); background-color: var(--au-1); color: rgba(23,20,38,.82); }
.shell .switcher-thumb[data-status="cancelled"], .shell .run-link-thumb[data-status="cancelled"] { color: rgba(255,255,255,.85); }
.page .project-grid.is-list .project-poster[data-status] .project-card-placeholder > svg { width: 16px; height: 16px; }
@media (forced-colors: active) { .page .project-poster[data-status] .project-card-placeholder, .shell .switcher-thumb[data-status], .shell .run-link-thumb[data-status] { background: Canvas; color: CanvasText; } }

/* === Motion: opening and loading. Every animation here runs on an element's first paint or when it comes back from
   display:none, so poll re-renders (which patch children in place) never replay it. Tile images stay transparent until
   they have pixels (`is-loaded` from the delegated load listener in automation.js). Reduced-motion users get the
   final states immediately. === */
@keyframes ds-hold { from { opacity: .999; } to { opacity: 1; } }
.shell.is-booting, .shell.is-booting * { transition: none !important; }
@keyframes ds-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ds-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ds-boot-spin { to { transform: rotate(360deg); } }
.boot { display: flex; align-items: center; gap: 10px; opacity: 0; }
.boot::before{ content: ""; width: 14px; height: 14px;    border:0;border-radius:0;background:var(--ds-loading-image,url("/static/brand-kit-20260911/tara/loader/tara-loader-cream.svg")) center/100% 100% no-repeat;animation:none;}
.page .project-poster > img, .shell .switcher-thumb > img, .shell .run-link-thumb > img, .shell .share-thumb > img { opacity: 0; }
.page .project-poster > img.is-loaded, .shell .switcher-thumb > img.is-loaded, .shell .run-link-thumb > img.is-loaded, .shell .share-thumb > img.is-loaded { opacity: 1; }
.page .projects-loading { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.page .projects-loading-card { display: grid; gap: 8px; padding: 0 0 12px; border: var(--ds-hair) solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); overflow: hidden; }
.page .projects-loading-thumb { aspect-ratio: 16 / 9; border-radius: 0; }
.page .projects-loading-line { height: 10px; width: 62%; margin-left: 12px; }
.page .projects-loading-line.is-short { height: 8px; width: 38%; }
@media (prefers-reduced-motion: no-preference) {
  /* Boot: the spinner waits 200 ms so a fast start never flashes it. */
  .boot { animation: ds-fade-in 300ms var(--ds-ease) 200ms both; }
  .boot::before { animation: none; }
  /* Shell and sign-in card appear once. */
  .shell { animation: ds-fade-in 260ms var(--ds-ease) both; }
  .auth-page .auth-card { animation: ds-page-in 320ms var(--ds-ease) both; }
  /* Views: #page rises for 240 ms; the 560 ms hold keeps the class alive until every staggered card has landed. */
  .page.is-entering { animation: ds-page-in 240ms var(--ds-ease) both, ds-hold 560ms linear both; }
  .page.is-entering .project-card-wrap { animation: ds-card-in 260ms var(--ds-ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
  .page.is-entering .projects-toolbar, .page.is-entering .new-project > * { animation: ds-fade-in 260ms var(--ds-ease) both; }
  /* Anything shown from display:none restarts its animation: panels on tab switch, sidebar sections on project open. */
  .page .workspace-panel:not([hidden]) { animation: ds-fade-in 200ms var(--ds-ease) both; }
  .shell .sidebar-project:not([hidden]), .shell .sidebar-shares:not([hidden]), .shell #sidebar-switcher:not([hidden]) { animation: ds-fade-in 220ms var(--ds-ease) both; }
  .shell .sidebar-tree, .shell #sidebar-share-list { animation: ds-fade-in 240ms var(--ds-ease) both; }
  .page .project-poster > img, .shell .switcher-thumb > img, .shell .run-link-thumb > img, .shell .share-thumb > img { transition: opacity 280ms var(--ds-ease); }
  .page .projects-loading { animation: ds-fade-in 200ms var(--ds-ease) 120ms both; }
  .page .project-card-placeholder, .shell .switcher-thumb[data-status], .shell .run-link-thumb[data-status] { transition: background-color var(--ds-fast) var(--ds-ease); }
}
@media (prefers-reduced-motion: reduce) { .boot { opacity: 1; } }

/* === Pinned "New project" tile: first cell of the projects grid, filled with the accent gradient the primary buttons
   use. Press to open New project; drop a screenplay on it to open New project with the file already being read
   (autorun upload when enabled, else the manual import). === */
/* Same card as the project tiles; only the thumbnail carries the accent gradient. */
.page .new-project-tile { border-color: var(--ds-border); background: var(--ds-surface); color: var(--ds-fg); }
.page .new-project-tile:hover, .page .new-project-tile:focus-visible { border-color: var(--ds-border-strong); background: var(--ds-surface-hover); }
.page .new-project-tile:hover .new-tile-plus { background: rgba(23,20,38,.22); }
.page .new-tile-poster { background: var(--ds-accent-gradient); }
.page .new-project-tile.is-dragover .new-tile-poster { box-shadow: inset 0 0 0 2px var(--ds-fg); }
.page .new-tile-plus, .page .new-tile-drop { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(23,20,38,.14); color: var(--ds-accent-contrast); transition: background-color var(--ds-fast) var(--ds-ease); }
.page .new-tile-plus > svg, .page .new-tile-drop > svg { width: 20px; height: 20px; }
.page .new-tile-drop { display: none; }
.page .new-tile-poster::after { display: none; }
.page .new-project-tile .project-card-caption strong { color: var(--ds-accent-contrast); }
.page .new-project-tile .project-card-caption small { color: rgba(23,20,38,.7); }
/* The drop hint wears the accent palette as gradient text. */
.page .new-project-tile .project-card-foot { padding-right: 8px; color: var(--ds-accent); }
.page .new-project-tile .project-card-foot > span { background: var(--ds-accent-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page .new-project-tile.is-dragover .project-card-foot > span { background: none; color: var(--ds-fg); }
.page .new-project-tile.is-dragover { box-shadow: inset 0 0 0 2px var(--ds-accent-contrast); }
.page .new-project-tile.is-dragover .new-tile-plus { display: none; }
.page .new-project-tile.is-dragover .new-tile-drop { display: grid; background: var(--ds-accent-contrast); color: #f5ecb2; }
.page .new-project-tile.is-dragover .project-card-caption small { color: var(--ds-accent-contrast); }
.page .project-grid.is-list .new-project-tile, .page .project-grid.is-list .new-project-tile:hover { border: 0; border-radius: 6px; background: transparent; color: var(--ds-fg); }
.page .project-grid.is-list .new-project-tile:hover { background: var(--ds-surface-hover); }
.page .project-grid.is-list .new-project-tile.is-dragover { box-shadow: inset 0 0 0 1px rgba(var(--ds-ink-rgb),.85); }
.page .project-grid.is-list .new-tile-plus, .page .project-grid.is-list .new-tile-drop { grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin-left: 8px; border-radius: 6px; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); }
.page .project-grid.is-list .new-tile-plus > svg, .page .project-grid.is-list .new-tile-drop > svg { width: 14px; height: 14px; }
.page .project-grid.is-list .new-project-tile .project-card-caption strong, .page .project-grid.is-list .new-project-tile .project-card-caption small, .page .project-grid.is-list .new-project-tile .project-card-foot { color: var(--ds-fg); }
.page .project-grid.is-list .new-project-tile .project-card-caption small, .page .project-grid.is-list .new-project-tile .project-card-foot { color: var(--ds-muted); }
@media (prefers-reduced-motion: no-preference) { .page .new-project-tile { transition: box-shadow var(--ds-fast) var(--ds-ease); } }
@media (forced-colors: active) { .page .new-project-tile { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } }

/* === Frame.io home: account header, Recent Projects row, single toolbar. Measured from next.frame.io: header padding
   24, 40px avatar (radius 6) + 24px/600 title, right-side 32px invite icon and ••• 24; "Recent Projects" 13px/500 muted
   with 244×72 cards (8px padding, 56px square poster radius 6, gap 12, ••• 24); toolbar 64px with the grid/list segment
   (72×32, radius 6, 4px padding) then "Filtered by …" / "Sorted by …" 32px menubar buttons. === */
.page .home-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 20px; }
.page .home-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page .home-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 6px; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.page .home-title { margin: 0; font-size: 24px; font-weight: 600; line-height: 28px; color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .home-actions { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
.page .home-actions .home-invite { width: 32px; height: 32px; min-height: 32px; color: var(--ds-fg); }
.page .home-actions .ds-icon-btn[data-action="home-menu"] { width: 24px; height: 24px; min-height: 24px; color: var(--ds-fg); }
/* Frame.io's header "+ New Project": 24px, 12px/500, radius 6, between the invite button and •••. */
.page .home-actions .home-new { min-height: 24px; height: 24px; margin: 0 4px 0 8px; padding: 0 8px 0 6px; gap: 4px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.page .home-actions .home-new > svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .page .home-actions .home-new > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .page .home-actions .home-new { width: 28px; padding: 0; justify-content: center; } }
.page .home-actions .ds-icon-btn[aria-expanded="true"] { background: var(--ds-surface-active); }
.page .home-section-head { display: flex; align-items: center; min-height: 20px; padding: 0 0 16px; font-size: 13px; font-weight: 500; color: var(--ds-muted); }
.page .home-recent { padding: 0 0 24px; }
.page .recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 16px; }
.page .recent-card-wrap { position: relative; min-width: 0; }
.page .recent-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 8px 36px 8px 8px; border: 0; border-radius: 8px; background: var(--ds-surface); color: var(--ds-fg); text-align: left; box-shadow: none; transition: background-color var(--ds-fast) var(--ds-ease); }
.page .recent-card:hover { background: var(--ds-surface-hover); }
.page .recent-card .recent-thumb { flex: none; width: 56px; height: 56px; border-radius: 6px; }
.page .recent-card .recent-thumb > svg { width: 18px; height: 18px; }
.page .recent-text { display: grid; gap: 2px; min-width: 0; }
.page .recent-text strong { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .recent-text small { font-size: 12px; line-height: 16px; color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .recent-more { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; min-height: 24px; color: var(--ds-subtle); }
.page .projects-toolbar .projects-layout { order: -1; height: 32px; padding: 4px; border-radius: 6px; background: var(--ds-border-strong); }
.page .projects-toolbar .projects-layout button { width: 32px; height: 24px; min-height: 24px; border-radius: 4px; }
.page .projects-toolbar .projects-layout button[aria-pressed="true"] { background: var(--ds-control); color: var(--ds-fg); }
.page .projects-toolbar .toolbar-sort > svg { width: 16px; height: 16px; color: var(--ds-fg); }
.page .label-short { display: none; }
/* Members popover: anchored under the invite button. Local pending list only (no accounts on the server). */
.page .team-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 12px; }
.page .team-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; font-size: 13px; }
.page .team-head strong { font-weight: 500; color: var(--ds-fg); }
.page .team-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.page .team-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px; border-radius: 6px; }
.page .team-row.is-pending { opacity: .85; }
.page .team-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ds-surface-active); color: var(--ds-fg); font-size: 12px; font-weight: 600; }
.page .team-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.page .team-text strong { font-size: 13px; font-weight: 500; color: var(--ds-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .team-text small { font-size: 11px; color: var(--ds-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .team-form { display: flex; gap: 6px; margin-top: 10px; }
.page .team-form input { flex: 1; min-width: 0; min-height: 30px; }
.page .team-form .primary { flex: none; min-height: 30px; }
.page .team-note { margin: 8px 4px 0; font-size: 11px; line-height: 1.45; color: var(--ds-subtle); }
.page #team-error:empty { display: none; }
@media (max-width: 640px) {
  .page .home-head { align-items: flex-start; padding: 8px 0 16px; }
  .page .home-identity { align-items: flex-start; }
  .page .home-title { white-space: normal; line-height: 1.15; }
  .page .label-long { display: none; }
  .page .label-short { display: inline; }
  .page .toolbar-count { display: none; }
}
@media (max-width: 560px) {
  .page .project-grid { grid-template-columns: minmax(0, 1fr); }
  .page .recent-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) { .page .team-popover:not([hidden]) { animation: ds-rise-in var(--ds-fast) var(--ds-ease); } .page .home-recent:not([hidden]) { animation: ds-fade-in 220ms var(--ds-ease) both; } }

/* === New project as a modal (Frame.io "Create New Project"): 740px panel, var(--ds-surface-solid), radius 8, 56px header with title and ×,
   scrolling body, footer inside the form. The Projects page stays underneath; Escape, × or the backdrop return to it. === */
.page .new-project-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 860px); padding: 0; display: flex; flex-direction: column; border: 0; border-radius: 8px; background: var(--ds-surface-solid); color: var(--ds-fg); box-shadow: var(--ds-shadow-dialog); }
.page .new-project-dialog { overflow: clip; }
.page .new-project-dialog:not([open]) { display: none; }
.page .new-project-dialog .ds-dialog-header { position: sticky; top: 0; z-index: 2; flex: none; min-height: 56px; padding: 0 12px 0 16px; background: var(--ds-surface-solid); }
.page .new-project-dialog .ds-dialog-header h2 { font-size: 14px; font-weight: 500; }
.page .new-project-dialog .ds-dialog-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.page .new-project-dialog .new-project { max-width: none; margin: 0; }
.page .new-project-dialog .new-project .intro { margin-bottom: 14px; }
.page .new-project-dialog .new-project .intro .eyebrow, .page .new-project-dialog .new-project .intro h1 { display: none; }
.page .new-project-dialog .new-project .intro p { margin: 0; color: var(--ds-muted); }
.page .new-project-dialog .setup-aside { display: none; }
.page .new-project-dialog .setup-grid { grid-template-columns: minmax(0, 1fr); }
.page .new-project-dialog .panel { background: var(--ds-surface); }
@media (max-width: 640px) { .page .new-project-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } }

/* Delete confirmation: small centred dialog, danger action on the right. */
.delete-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 8px; background: var(--ds-surface-solid); color: var(--ds-fg); box-shadow: var(--ds-shadow-dialog); }
.delete-dialog .ds-dialog-body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ds-muted); }
.delete-dialog .ds-dialog-body strong { color: var(--ds-fg); }
.delete-dialog .ds-dialog-footer button.danger { display: inline-flex; align-items: center; gap: 6px; background: var(--ds-danger); border-color: var(--ds-danger); color: var(--ds-fg); }
.delete-dialog .ds-dialog-footer button.danger:hover { background: var(--ds-danger); filter: brightness(1.08); }
.delete-dialog .ds-dialog-footer button.danger > svg { width: 14px; height: 14px; }

/* === Projects toolbar menus (Frame.io): 32px menubar button with the value in muted; 192px panel (var(--ds-surface-hover), radius 6,
   8px vertical padding) holding a 12px label and a 34px select-styled control that opens the radio menu. === */
.page .toolbar-menu { position: relative; }
.page .toolbar-menu-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; height: 32px; padding: 0 8px 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ds-fg); font-size: 13px; font-weight: 400; white-space: nowrap; box-shadow: none; }
.page .toolbar-menu-btn:hover, .page .toolbar-menu-btn[aria-expanded="true"] { background: var(--ds-surface-hover); }
.page .toolbar-menu-btn > svg { width: 16px; height: 16px; margin: 0 2px; color: var(--ds-fg); }
.page .toolbar-menu-btn .toolbar-sort-label { font-size: 13px; color: var(--ds-fg); }
.page .toolbar-menu-btn .toolbar-value { color: var(--ds-muted); }
.page .toolbar-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 35; width: 192px; padding: 8px 0; background: var(--ds-surface-solid); border-radius: 6px; box-shadow: 0 1px 20px rgba(0,0,0,.16), 0 12px 16px rgba(0,0,0,.2), 0 0 0 1px var(--ds-border); }
.page .toolbar-pop-label { display: flex; align-items: center; min-height: 30px; padding: 0 16px; font-size: 12px; color: var(--ds-muted); }
.page .toolbar-pop-row { position: relative; padding: 0 8px; }
.page .toolbar-pop-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--ds-surface-solid-2); color: var(--ds-fg); font-size: 13px; font-weight: 400; text-align: left; box-shadow: none; }
.page .toolbar-pop-select:hover, .page .toolbar-pop-select[aria-expanded="true"] { background: var(--ds-surface-solid-3); }
.page .toolbar-pop-select > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .toolbar-pop-select > svg { width: 16px; height: 16px; flex: none; color: var(--ds-muted); }
.page .toolbar-native { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .page .toolbar-pop:not([hidden]) { animation: ds-rise-in var(--ds-fast) var(--ds-ease); } }

/* === Status as text (Sep 7, evening). No indicator dots or pills: state reads as a word in the meta tone; only
   "needs attention" and failures are tinted. The environment badge disappears in live mode and becomes a small
   amber "Sim" tag in the rail (full word in the phone drawer) when the workspace is simulating. === */
.page .project-card-caption small.project-card-status { color: var(--ds-muted); }
.page .project-card-caption small.project-card-status.status-attention, .page .project-grid.is-list .project-card-caption small.status-attention, .shell .sidebar-project-status .label.status-attention, .shell .run-link small.status-attention, .page .summary-status.status-attention { color: var(--ds-warning-text); }
.page .summary-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--ds-fg); }
.shell .sidebar-project-status .label { color: var(--ds-muted); }
.mode-badge { gap: 0; padding: 0; border: 0; background: transparent; }
.mode-badge .mode-dot { display: none; }
.shell .rail-mode .mode-badge.live, .shell .rail-mode .mode-badge.muted, .shell .sidebar-mode .mode-badge.live, .shell .sidebar-mode .mode-badge.muted { display: none; }
.shell .rail-mode { height: auto; }
.shell .rail-mode .mode-badge.simulation { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; padding: 0 6px; border-radius: 4px; background: var(--ds-warning-soft); color: var(--ds-warning-text); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.shell .rail-mode .mode-badge.simulation::before { content: "Sim"; }
.shell .rail-mode .mode-badge.simulation .mode-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.shell .sidebar-mode .mode-badge.simulation { display: inline-flex; min-height: 24px; padding: 0 8px; border-radius: 6px; background: var(--ds-warning-soft); color: var(--ds-warning-text); font-size: 12px; font-weight: 500; }

/* === Screening-room surfaces (Sep 8): translucent panels over the light pools, lit from above. === */
.shell .rail, .shell .sidebar, .shell .topbar, .shell #page, .shell .page { background: var(--ds-shell-surface); box-shadow: inset 0 1px 0 0 rgba(var(--ds-ink-rgb),.05); }
.shell .topbar { background: var(--ds-surface-solid); }
.page .project-card, .page .recent-card, .page .projects-loading-card { box-shadow: var(--ds-shadow-card); }
.page .project-card:hover, .page .recent-card:hover { box-shadow: var(--ds-shadow-hover); }
.page .home-avatar { color: var(--ds-accent-contrast); }
.page .new-project-tile .new-tile-plus, .page .new-project-tile .new-tile-drop { background: rgba(2,2,3,.35); color: var(--ds-accent-contrast); }
.page .new-project-tile .project-card-caption strong, .page .new-project-tile .project-card-caption small { color: var(--ds-accent-contrast); }
.page .new-project-dialog, .delete-dialog { background: var(--ds-surface-solid); box-shadow: var(--ds-shadow-dialog); }

/* The light layer lives behind everything: full-bleed wrappers stay transparent, only the body paints the ground. */
.shell, #automation-app, .shell #main, .auth-page { background: transparent; }

.shell #page, .shell .page { background: var(--ds-shell-page); }

/* List view: the New project row shows only its name — no "Press to start" / drop hint. */
.page .project-grid.is-list .new-project-tile .project-card-caption small, .page .project-grid.is-list .new-project-tile .project-card-foot { display: none; }

/* === Account menu (Frame.io): the rail's avatar tile opens a popover above it — avatar header, the workspace row with
   its check, Workspace settings / Members / Theme ›, Sign out. Theme swaps the pane in place (Dark / Light / System). === */
.shell .rail-btn.rail-account { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; background: transparent; }
.shell .rail-btn.rail-account .rail-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.shell .rail-btn.rail-account:hover, .shell .rail-btn.rail-account[aria-expanded="true"] { background: transparent; box-shadow: 0 0 0 2px var(--ds-border-strong); }
.account-popover { position: fixed; left: calc(var(--ds-rail) + 8px); bottom: 12px; z-index: 45; width: 296px; padding: 6px; }
.account-popover .account-head { display: grid; justify-items: center; gap: 4px; padding: 22px 12px 18px; text-align: center; }
.account-popover .account-avatar { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); font-size: 24px; font-weight: 600; }
.account-popover .account-head strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-fg); }
.account-popover .account-head small { font-size: 12px; color: var(--ds-muted); }
.account-popover hr { margin: 6px -6px; border: 0; border-top: var(--ds-hair) solid var(--ds-border-strong); }
.account-popover .account-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--ds-fg); font-size: 14px; font-weight: 400; text-align: left; }
.account-popover .account-row:hover:not(:disabled), .account-popover .account-row:focus-visible { background: var(--ds-surface-hover); border-color: transparent; box-shadow: none; }
.account-popover .account-row:focus-visible { box-shadow: inset 0 0 0 1px var(--ds-border-accent); }
.account-popover .account-row > svg { width: 18px; height: 18px; flex: none; color: var(--ds-muted); }
.account-popover .account-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-popover .account-value { font-size: 12px; color: var(--ds-muted); }
.account-popover .account-check, .account-popover .account-chevron { display: inline-flex; width: 16px; height: 16px; flex: none; }
.account-popover .account-check > svg, .account-popover .account-chevron > svg { width: 16px; height: 16px; }
.account-popover .account-check { color: var(--ds-accent-text); }
.account-popover .account-chevron { color: var(--ds-muted); }
.account-popover .account-ws { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px; background: var(--ds-accent-gradient); color: var(--ds-accent-contrast); font-size: 11px; font-weight: 600; }
.account-popover .account-row.is-danger, .account-popover .account-row.is-danger > svg { color: var(--ds-danger-text); }
.account-popover .account-row.is-danger:hover:not(:disabled) { background: var(--ds-danger-soft); }
.account-popover .account-pane-head { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 2px; font-size: 14px; font-weight: 500; color: var(--ds-fg); }
.account-popover .account-pane-head .ds-icon-btn { width: 28px; height: 28px; min-height: 28px; }
.account-budget { padding: 8px 10px 10px; }
.account-budget dl { display: grid; gap: 8px; margin: 0 0 18px; }
.account-budget dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.account-budget dt { color: var(--ds-muted); }
.account-budget dd { margin: 0; font-variant-numeric: tabular-nums; }
.account-budget form { display: grid; gap: 10px; }
.account-budget form > label { font-size: 12px; color: var(--ds-muted); }
.account-budget .account-budget-consent { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.account-budget-consent input { flex: none; margin-top: 2px; }
.account-budget .error-text:empty { display: none; }
.account-budget form > .primary { justify-self: end; }
.episode-picker-native { display: none; }
.episode-selection { position: relative; }
.episode-selection-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; }
.episode-selection-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-selection-trigger svg, .project-episode-trigger svg { flex: none; width: 16px; height: 16px; }
.episode-selection-menu { position: absolute; z-index: 5; top: 100%; left: 0; right: auto; width: min(100%, 360px); box-sizing: border-box; max-height: 248px; overflow: auto; padding: 6px; }
.episode-selection-actions { display: flex; justify-content: space-between; padding: 2px 4px 6px; border-bottom: var(--ds-hair) solid var(--ds-border); margin-bottom: 4px; }
.episode-selection-actions > button { background: transparent; border: 0; box-shadow: none; color: var(--ds-muted); font-size: 12px; }
.episode-selection .episode-selection-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; margin: 0; border-radius: var(--ds-radius-sm); font-size: 13px; color: var(--ds-fg); cursor: pointer; }
.episode-selection-row:hover { background: var(--ds-surface-hover); }
.episode-selection-row > input { flex: none; margin: 0; }
.project-episode-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; font-size: 12px; }
.project-episode-progress { border-top: var(--ds-hair) solid var(--ds-border); margin-top: 16px; padding-top: 12px; }
.project-episode-progress > summary { color: var(--ds-muted); font-size: 12px; cursor: pointer; }
.project-episode-progress > div { max-height: 300px; overflow: auto; margin-top: 8px; }
.project-episode-progress button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; font-size: 13px; }
.project-episode-progress button small { margin-left: auto; color: var(--ds-muted); font-size: 12px; }
.project-episode-progress button svg { width: 15px; height: 15px; color: var(--ds-muted); }
#length-episode-target { width: auto; max-width: 100%; margin: 0 0 8px; }
.budget-estimate { min-height: 24px; margin: 12px 0; font-size: 12px; }
.budget-estimate-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.budget-estimate-summary strong { font-size: 18px; font-weight: 500; color: var(--ds-fg); font-variant-numeric: tabular-nums; }
.budget-estimate-summary > span, .budget-estimate details { color: var(--ds-muted); }
.budget-estimate details { margin-top: 4px; font-size: 11px; }
.budget-estimate summary { cursor: pointer; }
.budget-estimate dl { display: grid; gap: 5px; max-width: 300px; margin: 10px 0 0; }
.budget-estimate dl > div { display: flex; justify-content: space-between; gap: 12px; }
.budget-estimate dd { margin: 0; font-variant-numeric: tabular-nums; }
.budget-estimate-pending { display: inline-flex; align-items: center; gap: 8px; color: var(--ds-muted); }
.budget-estimate .ds-spinner { width: 12px; height: 12px; }
@media (max-width: 760px) { .account-popover { left: 8px; right: 8px; bottom: 8px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .account-popover { animation: none; } }
@media (forced-colors: active) { .account-popover { border: 1px solid CanvasText; } .shell .rail-btn.rail-account .rail-avatar { border: 1px solid CanvasText; } }

/* Poster captions sit on the poster's dark scrim in both themes, so they keep light ink (light mode made them unreadable). */
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-card-caption strong { color: #ededef; }
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-card-caption small { color: rgba(237,237,239,.78); }

/* Soften project poster imagery behind sharp captions and controls. */
:root { --project-thumbnail-blur: 4px; --project-thumbnail-overlay: rgba(0,0,0,.04); }
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-poster:not(.is-broken):has(> img)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: var(--project-thumbnail-overlay);
  -webkit-backdrop-filter: blur(var(--project-thumbnail-blur)); backdrop-filter: blur(var(--project-thumbnail-blur));
  pointer-events: none;
}

/* Project names take center stage over the softened poster; list rows stay compact. */
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-card-caption {
  inset: 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-card-caption strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  width: 100%; font-size: clamp(20px,1.65vw,26px); font-weight: 600; line-height: 1.3;
  white-space: normal; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-card-caption small {
  justify-content: center; max-width: 100%; white-space: normal; line-height: 1.4; text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.page .project-grid:not(.is-list) .project-card:not(.new-project-tile) .project-poster::after {
  inset: 0; height: 100%; background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.42) 50%,rgba(0,0,0,.48));
}

/* Keep fallback project posters clear behind their centered titles. */
.page .project-card:not(.new-project-tile) .project-card-placeholder > svg { display: none; }

/* Project generation record export: one local download, no generation action. */
.page .prompt-sheet-export { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 12px; margin-top: 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface-hover); color: var(--ds-fg); font-size: 13px; font-weight: 500; text-decoration: none; }
.page .prompt-sheet-export:hover { background: var(--ds-surface-active); }
.page .prompt-sheet-export:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.page .prompt-sheet-export svg { width: 16px; height: 16px; }

#project-budget-indicator{display:inline-flex;align-items:center;padding:0 4px 0 8px;flex:none}
#project-budget-indicator[hidden]{display:none}

/* Project identity lives in the top bar; the sidebar is just workspace navigation. */
.shell .topbar .topbar-project-switcher{flex:0 1 auto;max-width:420px;min-width:0;min-height:40px;padding:3px 7px;gap:8px;border:0;background:transparent;box-shadow:none;text-align:left;color:var(--ds-fg)}
.shell .topbar .topbar-project-switcher:hover{background:var(--ds-surface-hover)}
.shell .topbar .switcher-thumb{width:28px;height:28px;border-radius:5px}
.shell .topbar .switcher-btn{display:flex;align-items:center;flex:none}
.shell .topbar .switcher-btn svg{width:14px;height:14px}
.shell .topbar #sidebar-project-title{font-size:13px;font-weight:500}
.shell .topbar .sidebar-project-status{font-size:10px}
.shell .topbar .workspace-breadcrumb{flex:0 1 auto}
@media(min-width:1051px){.shell #sidebar-toggle{display:none}}
@media(max-width:600px){
  .shell .topbar .workspace-breadcrumb{display:none}
  .shell .topbar .sidebar-project-status{display:none}
  .shell .topbar .topbar-project-switcher{padding-inline:2px;gap:5px}
  .shell .topbar .switcher-thumb{width:22px;height:22px}
  .shell .topbar #sidebar-project-title{font-size:12px}
}
@media(max-width:1050px){
  .shell #sidebar-toggle{flex:none;width:40px;height:40px;min-height:40px}
  .shell #sidebar-toggle>svg.sidebar-toggle-menu{display:block}
}
@media(max-width:600px){
  .shell:not(.is-library) .topbar-search{display:none}
  .shell .topbar .topbar-project-switcher{flex:1;max-width:100%}
}

/* Global identity and account controls share the top bar. */
.shell{--ds-rail:0px}
.shell .topbar-brand{flex:none;width:32px;margin-right:6px}
.shell .topbar-brand .brand{display:flex;align-items:center;padding:0;width:32px;height:36px}
.shell .topbar-brand .brand>span:not(.brand-mark){display:none}
.shell .topbar-brand .brand-mark{display:block;flex:none;width:28px;height:28px;font-size:0;border:0;border-radius:0;background:var(--setara-mark) center/contain no-repeat;box-shadow:none}
.shell .topbar .rail-account{flex:none}
.shell .sidebar-account{display:none}
.shell .topbar-mode:empty{display:none}
.shell .topbar-mode .mode-badge{font-size:10px;padding:2px 5px}
.shell .account-popover{top:calc(var(--ds-topbar) + 8px);right:12px;left:auto;bottom:auto;width:min(296px,calc(100vw - 24px));max-height:calc(100dvh - var(--ds-topbar) - 24px);overflow:auto}
.switcher-new-project{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:calc(100% - 16px);margin:2px 8px 8px;padding:10px 12px;border:1px solid var(--ds-border);border-radius:8px;background:var(--ds-surface);color:var(--ds-fg);font-size:13px}
.switcher-new-project svg{width:18px;height:18px;flex:none}
@media(max-width:600px){.shell .topbar-brand{width:26px;margin-right:0}.shell .topbar-brand .brand,.shell .topbar-brand .brand-mark{width:24px}.shell .topbar-actions{gap:5px}.shell .topbar-mode{display:none}.shell .topbar-search{max-width:32px}.shell .topbar .rail-account,.shell .topbar .rail-avatar{width:30px;height:30px}}

/* Give the shared Tara conversation more room without changing the mobile drawer. */
@media(min-width:601px){.shell{--ds-sidebar:352px}}
.shell #sidebar-startup-tara{margin-top:8px}
/* A floating drawer needs an opaque base so the workspace cannot show through chat. */
@media(max-width:1050px){.shell.drawer-open .sidebar{background:linear-gradient(var(--ds-shell-surface),var(--ds-shell-surface)),var(--ds-bg)}}
.shell .project-budget-menu{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;min-height:34px;border:0;border-radius:8px;background:transparent;color:var(--ds-fg);font-size:12px}
.shell .project-budget-menu:hover{background:var(--ds-surface-hover)}
.shell .project-budget-menu:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
.shell .project-budget-menu>svg{width:14px;height:14px;flex:none}

.shell .tree-row.is-disabled{opacity:.35}
.shell .tree-row.is-disabled button{cursor:not-allowed;background:transparent}

/* Guidance owns a row instead of covering selection and export controls. */
#action-notice:empty{display:none}
#action-notice{flex:none}
.action-guidance{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;margin:0 0 12px;box-sizing:border-box;padding:14px 48px 14px 16px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-surface-solid);color:var(--ds-fg);font-size:13px}
.action-guidance strong{grid-column:1;font-size:14px;font-weight:600}
.action-guidance p{grid-column:1;margin:0;color:var(--ds-muted);line-height:1.5}
.action-guidance .action-guidance-dismiss{position:absolute;right:6px;top:6px;width:32px;height:32px;min-height:32px}
.action-guidance>.primary{grid-column:2;grid-row:1 / 3;min-height:34px;padding:6px 12px;font-size:12px}
.shell #page.is-assembly{display:flex;flex-direction:column}
.shell #page.is-assembly #pane-overview:not([hidden]){flex:1;height:auto;min-height:0}
@media(max-width:700px){.action-guidance{grid-template-columns:minmax(0,1fr)}.action-guidance>.primary{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}}


/* Quiet project navigation and focused workspace loading. */
.shell .run-link { grid-template-rows:1fr; min-height:58px; align-items:center; padding-block:10px; }
.shell .run-link strong { grid-row:1; align-self:center; }
.shell .run-link-thumb { grid-row:1; }
.page:has(#project-grid), #main:has(#project-grid) { scrollbar-width:none; }
.page:has(#project-grid)::-webkit-scrollbar, #main:has(#project-grid)::-webkit-scrollbar { display:none; }
.workspace-loading { display:none; }
.shell:has(.page.is-assembly-loading #pane-overview:not([hidden]))>.workspace-loading,
.shell:has(#pane-media:not([hidden]) .wm-collection[aria-busy="true"])>.workspace-loading,
.shell.is-opening-project>.workspace-loading { position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:var(--ds-bg,#0e0e10); }
.workspace-loading .ds-loading-mark { width:92px;height:92px; }
.project-edit-dialog { color:var(--ds-fg,#fff);background:var(--ds-bg-elevated,#171719);border:1px solid var(--ds-border,#ffffff20);border-radius:20px;padding:24px;width:min(510px,calc(100vw - 32px));max-height:85dvh;overflow:auto;box-shadow:0 24px 90px #0007; }
.project-edit-dialog::backdrop { background:#0008;backdrop-filter:blur(4px); }
.project-edit-dialog header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
.project-edit-dialog h2 { font-size:20px;margin:0;line-height:1.3; }
.project-edit-dialog p { color:var(--ds-muted,#bcbcc5);font-size:14px;line-height:1.6; }
.project-edit-dialog form { display:flex;gap:10px;flex-wrap:wrap; }
.project-edit-dialog label { display:grid;gap:8px;width:100%; }
.project-edit-dialog input { flex:1;min-width:0;width:100%;padding:11px 12px;border:1px solid var(--ds-border,#ffffff20);border-radius:10px;background:var(--ds-surface,#242426);color:inherit;font:inherit; }
.project-edit-dialog footer { display:flex;justify-content:flex-end;gap:10px;width:100%;margin-top:20px; }
.project-edit-dialog .error-text { width:100%;margin:4px 0; }
.project-edit-dialog .saved-cuts { list-style:none;padding:0;margin-top:16px; }
.project-edit-dialog .saved-cuts li { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--ds-border,#ffffff16); }
.project-edit-dialog .saved-cuts strong,.project-edit-dialog .saved-cuts small { display:block;overflow-wrap:anywhere; }
.project-edit-dialog .saved-cuts small { color:var(--ds-muted,#bcbcc5);margin-top:5px;font-size:12px; }
.project-edit-dialog .saved-cuts button { flex:none; }
.shell:has(.projects-loading)>.workspace-loading{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:var(--ds-bg,#0e0e10)}

/* A series exposes a compact episode picker beside the workspace navigation. */
.shell #sidebar-episodes { order: 1; margin: 2px 8px 8px 28px; }
.sidebar-episodes[hidden] { display: none; }
.shell .sidebar-episodes button { display: flex; justify-content: flex-start; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 6px; background: var(--ds-surface-solid-2); color: var(--ds-fg); text-align: left; font-size: 13px; }
.sidebar-episodes button svg { width: 15px; height: 15px; flex: none; }
.sidebar-episodes button svg:last-child { margin-left: auto; }
.sidebar-episodes button small { margin-left: 4px; font-size: 12px; }
.sidebar-episodes button:hover:not(:disabled) { background: var(--ds-surface-active); }