/* Motion 01 shares BRUK surfaces, typography and control tokens. */
.fm-demo { position:relative; isolation:isolate; min-width:0; }
.fm-summary,.fm-dock,.fm-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fm-summary strong { font-size:16px; }
.fm-summary p { margin:6px 0 0; }
.fm-list { list-style:none; padding:0; margin:20px 0 8px; min-height:64px; }
.fm-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-subtle); }
.fm-row[hidden] { display:none; }
.fm-file { display:grid; place-items:center; flex:none; width:42px; height:48px; border:1px solid var(--metal-gold); border-radius:10px; background:var(--work-surface); color:var(--accent); }
.fm-file svg { width:25px; height:30px; }
.fm-name { display:grid; gap:6px; min-width:0; flex:1; }
.fm-name strong { font-size:14px; overflow-wrap:anywhere; }
.fm-name small { font-size:12px; color:var(--muted); }
.fm-delete { flex:none; width:44px; height:44px; padding:10px; border-color:var(--border-control); }
.fm-delete svg { width:20px; height:20px; }
.fm-delete:hover:not(:disabled) { color:var(--negative); border-color:var(--negative); }
.fm-dock { padding:16px 6px 20px 0; }
.fm-bin { position:relative; width:64px; height:70px; flex:none; color:var(--muted); }
.fm-bin-body { position:absolute; bottom:0; left:9px; width:46px; height:50px; display:flex; justify-content:center; gap:7px; padding-top:12px; border:1px solid var(--border-control); border-radius:3px 3px 10px 10px; background:linear-gradient(100deg,var(--work-elevated),var(--work-surface)); transform:perspective(100px) rotateX(-8deg); }
.fm-bin-body i { height:25px; width:1px; background:var(--border-control); }
.fm-bin-lid { position:absolute; z-index:2; left:4px; top:14px; width:56px; height:7px; border:1px solid var(--border-control); border-radius:4px; background:var(--work-elevated); transform-origin:right center; }
.fm-bin-lid::before { content:""; position:absolute; width:17px; height:6px; left:18px; top:-7px; border:1px solid var(--border-control); border-bottom:0; border-radius:5px 5px 0 0; }
.fm-bin-count { position:absolute; top:0; right:-4px; z-index:3; display:grid; place-items:center; min-width:21px; height:21px; border-radius:50%; background:var(--action-bg); color:var(--action-text); font-size:12px; }
.fm-flight { position:absolute; top:0; left:0; z-index:5; pointer-events:none; box-shadow:var(--metal-gold-shadow); }
.fm-feedback { border-top:1px solid var(--border-subtle); padding-top:14px; min-height:64px; }
.fm-feedback p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.fm-feedback button { flex:none; min-height:44px; border-color:var(--border-control); }
.fm-demo :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
@media(max-width:480px) { .fm-feedback { flex-wrap:wrap; } .fm-summary { align-items:flex-start; } }
@media(max-width:480px) {
 .fm-row { gap:8px; }
 .fm-file { width:32px; height:40px; }
 .fm-name strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
 .fm-summary strong { font-size:14px; }
}