/* A dedicated close row keeps controls clear of images and readable while scrolling. */
dialog:not(.menu-dialog){padding-top:0}
dialog:not(.menu-dialog)>.dialog-toolbar{
 position:sticky;
 top:0;
 z-index:5;
 display:flex;
 align-items:center;
 justify-content:flex-end;
 min-height:56px;
 margin:0 0 8px;
 padding:6px 0;
 background:#fff;
 isolation:isolate;
}
dialog .dialog-toolbar>.close{
 position:static;
 display:flex;
 align-items:center;
 justify-content:center;
 flex:0 0 44px;
 width:44px;
 min-width:44px;
 height:44px;
 min-height:44px;
 margin:0;
 padding:0;
 border:1px solid #10243a12;
 border-radius:50%;
 background:#f1f3f4;
 color:var(--navy);
 line-height:1;
}
dialog .dialog-toolbar>.close svg{display:block;width:20px;height:20px;flex:0 0 20px}
dialog .dialog-toolbar>.close:hover{background:#e7ecef}
dialog .dialog-toolbar>.close:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Video controls use the same row against the player's dark surface. */
dialog.film-dialog>.dialog-toolbar{background:var(--navy)}
dialog.film-dialog .dialog-toolbar>.close{color:#fff;background:#ffffff15;border-color:#ffffff24}
dialog.film-dialog .dialog-toolbar>.close:hover{background:#ffffff26}

/* The menu already has a dedicated brand/header row; retain that composition. */
.menu-dialog .menu-heading>.dialog-toolbar{position:static;display:flex;flex:0 0 44px;margin:0;padding:0;background:transparent}
.menu-dialog .menu-heading .dialog-toolbar>.close{position:static;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;color:var(--navy);background:#e9edef}