/* Motion screen layout glue (.mo-*). Every visible part is a ui.css component; this file only
   arranges them. Written against tokens.css. */
#motion-host{padding:0;background:var(--bg-0)}
.mo-root{min-height:100%;overflow-x:clip}
.mo-page{padding:var(--s-3) var(--s-6) var(--s-10);display:grid;gap:var(--s-4);align-content:start;min-width:0;max-width:1440px;margin:0 auto}
.mo-topline{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap}
.mo-ws{display:inline-flex;align-items:center;gap:var(--s-2);margin:var(--s-1) 0 0 -8px;padding:2px 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-1);font:var(--w-semibold) var(--t-24)/var(--lh-tight) var(--font);letter-spacing:var(--track-display);cursor:pointer;max-width:100%}
.mo-ws:hover{background:var(--bg-2)}
.mo-ws .ui-icon{width:18px;height:18px;color:var(--fg-3);flex:none}
.mo-ws .ui-avatar{margin-left:4px}
.mo-wsmeta{font-size:var(--t-12);color:var(--fg-3);margin-left:8px;white-space:nowrap}
/* Now strip */
.mo-now{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2)}
.mo-fact{text-align:left;border:0;cursor:pointer;padding:var(--s-3) var(--s-4);display:grid;gap:2px;min-width:0;transition:background var(--dur-1) var(--ease-out);font:inherit;color:inherit}
.mo-fact:hover{background:var(--bg-2)}
.mo-fact[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:-2px}
.mo-fact .ui-eyebrow{display:flex;align-items:center;gap:var(--s-2)}
.mo-fact .ui-display{font-size:var(--t-24);margin:2px 0 0}
.mo-fact .ui-display small{font-size:var(--t-13);font-weight:var(--w-regular);color:var(--fg-3);margin-left:4px}
.mo-fact>span:last-child{font-size:var(--t-12);color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-fact[data-attn]{box-shadow:var(--edge-light),inset 0 0 0 1px var(--attention)}
.mo-fact[data-zero] .ui-display,.mo-fact[data-zero]>span:last-child{color:var(--fg-3)}
/* batches */
.mo-batches{display:grid;gap:var(--s-3)}
.mo-batch{padding:0;overflow:visible}
.mo-bhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4)}
.mo-btoggle .ui-icon{transition:rotate var(--dur-2) var(--ease-out);rotate:90deg}
.mo-batch[data-open="true"] .mo-btoggle .ui-icon{rotate:-90deg}
.mo-btitle{display:grid;gap:6px;min-width:0}
.mo-btitle>div{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;min-width:0}
.mo-btitle b{font-weight:var(--w-semibold);font-size:var(--t-14)}
.mo-bcount{color:var(--fg-3);font-size:var(--t-12)}
.mo-prog{display:flex;height:6px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden;max-width:520px}
.mo-prog>i{display:block;height:100%;transition:width var(--dur-3) var(--ease-out)}
.mo-prog>i[data-seg="reel"]{background:var(--fg-1)}
.mo-prog>i[data-seg="still"]{background:var(--fg-3)}
.mo-prog>i[data-seg="skip"]{background:repeating-linear-gradient(-45deg,var(--fg-4) 0 2px,transparent 2px 5px)}
.mo-bline{display:flex;gap:var(--s-3);align-items:center;font-size:var(--t-12);color:var(--fg-2);flex-wrap:wrap}
.mo-bactions{display:flex;align-items:center;gap:var(--s-2)}
.mo-bbody{padding:0 var(--s-4) var(--s-4);display:grid;gap:var(--s-3)}
.mo-toolbar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.mo-toolbar .ui-search{flex:1;min-width:160px;max-width:280px}
.mo-toolbar .ui-search .ui-input{min-height:var(--h-sm)}
/* tiles */
.mo-grid{--tiles:3}
.mo-tile{display:grid;grid-template-rows:auto auto;cursor:default}
.mo-media{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--bg-0)}
.mo-pane{position:relative;aspect-ratio:9/16;background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
.mo-pane img,.mo-pane video{width:100%;height:100%;object-fit:cover;display:block}
.mo-pane video[data-reel-fallback]{pointer-events:none}
.mo-pane>small{position:absolute;left:6px;top:6px;z-index:1;font:var(--w-semibold) 9px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);padding:3px 5px;border-radius:3px;background:rgba(0,0,0,.55)}
.mo-pane>.mo-empty{font-size:var(--t-11);color:var(--fg-3);text-align:center;padding:var(--s-2)}
.mo-pane[data-running] img{opacity:.55;filter:saturate(.5)}
.mo-pane[data-running]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mo-runbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.6)}
.mo-runbar>i{display:block;height:100%;background:var(--fg-1);transition:width var(--dur-3) var(--ease-out)}
.mo-pane-chip{position:absolute;right:6px;top:6px;z-index:1;min-height:18px;font-size:10px;padding:0 6px;background:rgba(0,0,0,.6);color:rgba(255,255,255,.85)}
.mo-grid[data-tiles-n="5"] .mo-media,.mo-grid[data-tiles-n="6"] .mo-media{grid-template-columns:1fr}
.mo-grid[data-tiles-n="5"] .mo-pane:not([data-primary]),.mo-grid[data-tiles-n="6"] .mo-pane:not([data-primary]),.mo-grid[data-tiles-n="5"] .mo-pane-chip,.mo-grid[data-tiles-n="6"] .mo-pane-chip{display:none}
.mo-tacts{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;gap:3px;flex-wrap:wrap;padding:22px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;translate:0 4px;transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out)}
.mo-tile:hover .mo-tacts,.mo-tile:focus-within .mo-tacts{opacity:1;translate:0 0}
.mo-tacts .ui-btn{--_bg:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.mo-tmeta{padding:var(--s-2) var(--s-3);display:grid;gap:4px;min-width:0}
.mo-ttitle{font-size:var(--t-12);font-weight:var(--w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-tstatus{font-size:var(--t-11);color:var(--fg-3);display:flex;gap:var(--s-2);align-items:center;min-width:0}
.mo-tstatus .ui-status{font-size:var(--t-11);overflow:hidden;text-overflow:ellipsis}
.mo-terr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mo-tline{font-size:var(--t-11);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-tile[data-failed] .mo-pane img{opacity:.5;filter:saturate(.4)}
/* sheet */
.mo-sheet{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-5)}
.mo-sheet-src{display:grid;gap:var(--s-3);align-content:start}
.mo-big{position:relative;display:grid;gap:var(--s-2)}
.mo-big>small{font:var(--w-semibold) var(--t-11)/1 var(--font);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--fg-3)}
.mo-big-media{height:min(62vh,560px);aspect-ratio:9/16;width:auto;max-width:100%;margin:0 auto;border-radius:var(--r-md);overflow:hidden;background:#000;display:grid;place-items:center}
.mo-big-media video{width:100%;height:100%;max-height:100%;object-fit:contain!important;display:block;background:#000}
.mo-sheet-side{display:grid;gap:var(--s-4);align-content:start}
.mo-sheet-outs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.mo-sheet-outs .mo-pane{border-radius:var(--r-md)}
.mo-sheet-outs .mo-pane video{object-fit:contain;background:#000}
.mo-facts{display:flex;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-12)}
.mo-hist .ui-row{grid-template-columns:auto 1fr;padding:var(--s-2)}
.mo-queue .ui-row{grid-template-columns:auto 1fr 120px}
.mo-queue .ui-progress{width:120px}
.mo-cmp .ui-row{grid-template-columns:auto 1fr 1fr;align-items:start}
.mo-cmp .ui-row>div{min-width:0;display:grid;gap:2px;font-size:var(--t-12);word-break:break-word}
.mo-cmp .ui-row small{font-size:var(--t-11);color:var(--fg-3)}
.mo-form{display:grid;gap:var(--s-4)}
.mo-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
/* phone */
@media (max-width:700px){
  .mo-page{padding:var(--s-2) var(--s-3) var(--s-8);gap:var(--s-3)}
  .mo-now{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-fact:last-child{grid-column:1/-1}
  .mo-fact{padding:var(--s-3)}
  .mo-ws{font-size:var(--t-20)}
  .mo-wsmeta,.mo-classic,.mo-toolbar .ui-search,.ui-density,.mo-tacts,.mo-ttitle,.ui-heading .ui-actions .ui-btn:not([data-variant="icon"]){display:none!important}
  .ui-heading{flex-wrap:nowrap;align-items:center}
  .mo-bhead{grid-template-columns:auto minmax(0,1fr);padding:var(--s-3)}
  .mo-bactions{grid-column:2;justify-content:flex-start}
  .mo-grid{--tiles:3!important}
  .mo-media{grid-template-columns:1fr}
  .mo-pane:not([data-primary]){display:none}
  .mo-tstatus .ui-status{font-size:0;gap:0}
  .mo-sheet{grid-template-columns:1fr}
  .mo-form-row{grid-template-columns:1fr}
}
/* viewer + clickable panes */
.mo-view{display:grid;place-items:center;background:#000;border-radius:var(--r-md);overflow:hidden;max-height:min(78vh,900px)}
.mo-view video,.mo-view img{max-width:100%;max-height:min(78vh,900px);width:auto;height:auto;display:block;object-fit:contain}
.mo-pane[data-act="view"]{cursor:pointer}
.mo-pane[data-act="view"]:hover img,.mo-pane[data-act="view"]:hover video{filter:brightness(1.08)}
.mo-pane[data-act="view"]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* stage 3.3: selection, scrubber, review, removed */
.mo-check{position:absolute;top:6px;left:6px;z-index:2;padding:4px;border-radius:var(--r-xs);background:rgba(0,0,0,.55);opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.mo-tile:hover .mo-check,.mo-tile:focus-within .mo-check,.mo-tile[aria-selected="true"] .mo-check{opacity:1}
.mo-tile[aria-selected="true"] .mo-check{background:var(--accent)}
.mo-tile{cursor:pointer}
.mo-tile[data-skipped] .mo-pane img{opacity:.45;filter:saturate(.3)}
.mo-tacts .ui-btn[data-lit]{--_bg:var(--bg-3);--_fg:var(--fg-1);box-shadow:inset 0 0 0 1px var(--fg-3)}
.mo-pane-chip[data-interactive]{cursor:pointer;border:0;font:var(--w-medium) 10px/1 var(--font);display:inline-flex;align-items:center;gap:4px}
.mo-pane-chip[data-interactive]:hover{background:var(--fg-1);color:var(--bg-0)}
.mo-pane-chip .ui-icon{width:11px;height:11px}
.mo-scrub{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:var(--s-2)}
.mo-scrub .ui-range{height:18px}
.mo-scrub .ui-range::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px}
.mo-scrub output{font-size:var(--t-11);color:var(--fg-3);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.mo-scrub .mo-save{font-size:10px;color:var(--fg-3);min-width:44px;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.mo-scrub .mo-save[data-on]{opacity:1}
.mo-scrub .mo-tline{text-align:right}
.mo-scrub[data-off] .ui-range{opacity:.25}
.mo-grid[data-tiles-n="5"] .mo-scrub .ui-range,.mo-grid[data-tiles-n="6"] .mo-scrub .ui-range{max-height:0;overflow:hidden;opacity:0;transition:max-height var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.mo-grid[data-tiles-n="5"] .mo-tile:hover .mo-scrub .ui-range,.mo-grid[data-tiles-n="6"] .mo-tile:hover .mo-scrub .ui-range,.mo-grid[data-tiles-n="5"] .mo-tile:focus-within .mo-scrub .ui-range,.mo-grid[data-tiles-n="6"] .mo-tile:focus-within .mo-scrub .ui-range{max-height:24px;opacity:1}
/* the selection bar floats: selecting must never shift the tiles under the pointer */
.ui-selbar#mo-selbar{position:fixed;left:50%;bottom:var(--s-5);translate:-50% 0;top:auto;z-index:var(--z-sticky);width:max-content;max-width:calc(100vw - 32px);box-shadow:var(--shadow-menu),var(--edge-light)}
#mo-selhost:empty{display:none}
.mo-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4)}
.mo-big-frame{position:relative;aspect-ratio:9/16;max-height:60vh;margin:0 auto;border-radius:var(--r-md);overflow:hidden;background:var(--bg-2);width:100%}
.mo-big-frame img{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.mo-big-frame>small{position:absolute;left:8px;top:8px;font:var(--w-semibold) 10px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);padding:4px 6px;border-radius:4px;background:rgba(0,0,0,.55)}
.mo-keys{display:flex;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-12);color:var(--fg-3)}
.mo-keys .ui-kbd{margin-right:2px}
.mo-rv-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.mo-rv{outline-offset:-2px;cursor:default}
.mo-rv:focus-visible{outline:2px solid var(--focus)}
.mo-rv:not([data-seen]){box-shadow:var(--edge-light),inset 0 0 0 1px var(--attention)}
.mo-rv .ui-tile-media{position:relative}
.mo-rv .ui-tile-media img{object-fit:cover}
.mo-rv-inset{position:absolute;right:6px;bottom:6px;width:45px;aspect-ratio:9/16;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.5);background:var(--bg-0)}
.mo-rv-inset img{display:block;width:100%;height:100%;object-fit:cover}
.mo-rv-inset small{position:absolute;left:0;right:0;bottom:0;font:600 7px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:2px 0;background:rgba(0,0,0,.6);color:rgba(255,255,255,.8)}
.mo-rv-new{position:absolute;top:6px;left:6px;background:var(--fg-1);color:var(--bg-0)}
.mo-rv-acts{display:flex;gap:3px;padding:0 var(--s-2) var(--s-2);flex-wrap:wrap}
.mo-rv-acts .ui-btn[data-size="sm"]{padding:0 6px}
@media (max-width:700px){.mo-review{grid-template-columns:1fr}.mo-check{display:none}}
.mo-wschip{cursor:pointer;border:0;font:inherit;font-size:var(--t-11)}
.mo-wschip:hover{background:var(--fg-1);color:var(--bg-0)}
.mo-ws[data-scope="all"]{font-style:normal}
/* the always-visible action row on every card */
.mo-cardacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.mo-cardacts .ui-btn[data-size="sm"]{padding:0 8px;height:26px}
.mo-cardacts .ui-btn[data-crop="done"]{opacity:.85}
.mo-cardacts .ui-btn[data-crop="off"]{opacity:.35}
.mo-cardacts .ui-btn .ui-mark{margin-right:4px}
.mo-autotrim{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3);border-radius:var(--r-md);background:var(--bg-2);margin-bottom:var(--s-3)}
.mo-autotrim > span{display:grid;gap:2px}
.mo-autotrim .ui-help{margin:0}
@media (max-width:700px){.mo-cardacts{display:flex}}
/* New batch */
.mo-nb{display:grid;gap:var(--s-4)}
.mo-nb-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4)}
.mo-nb-add{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.mo-nb-add .ui-eyebrow{margin-right:var(--s-2)}
.mo-nb-list{max-height:min(40vh,420px);overflow:auto}
.mo-nb-list .ui-row[data-over] .ui-row-meta b{color:var(--attention)}
.mo-nb-thumb{width:34px;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:var(--bg-2);flex:none}
.mo-nb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mo-nb-empty{padding:var(--s-6)}
.mo-nb-choices{display:grid;gap:var(--s-2)}
.mo-nb-est{display:grid;gap:2px;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--bg-2)}
@media (max-width:700px){.mo-nb-top{grid-template-columns:1fr}}
.mo-nb-ws{display:grid;gap:4px;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);background:var(--bg-2);max-height:160px;overflow:auto}
.mo-nb-ws .ui-check{display:flex;gap:var(--s-2);align-items:center}

/* the character's main photo beside its name */
.mo-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg-2);flex:none;display:inline-block;vertical-align:middle}
.mo-charpick{display:flex;align-items:center;gap:var(--s-2)}
.mo-charpick .ui-select{flex:1 1 auto;min-width:0}
.mo-charline{display:inline-flex;align-items:center;gap:6px}